diff --git a/README.md b/README.md
index b66205b8..8aeb65ac 100644
--- a/README.md
+++ b/README.md
@@ -54,8 +54,8 @@ First of all make sure that your are using version 14 of node. If the problem st
This problem generally arises when you have not setuped/started the Firebase emulators.
-1. [Setup firebase emulator](#install-configure-and-integrate-firebase-emulator-suite).
-2. [Start the Emulators](#to-start-the-emulators-)
+1. [Setup firebase emulator](https://github.com/scorelab/Codelabz/blob/master/CONTRIBUTING.md#firebase-setup).
+2. [Start the Emulators]( https://github.com/scorelab/Codelabz/blob/master/CONTRIBUTING.md#run-firebase-emulator)
3. Run the app using `npm run dev`.
> 📝**NOTE** : Remember to start the emulators before running the app.
diff --git a/functions/cloud_functions/onCreateFunctions.js b/functions/cloud_functions/onCreateFunctions.js
index 03bf9209..f87a8527 100644
--- a/functions/cloud_functions/onCreateFunctions.js
+++ b/functions/cloud_functions/onCreateFunctions.js
@@ -76,19 +76,17 @@ exports.createOrganizationHandler = async (snapshot, context) => {
});
/**
- * create org_users sub-collection => set user uid and respective permissions
+ * create org_users collection => set user uid and respective permissions
* @type {Promise}
*/
const setOrgUsers = db
- .collection("cl_org_general")
- .doc(org_handle)
- .collection("cl_org_users")
- .doc("users")
+ .collection("org_users")
+ .doc(`${org_handle}_${user_uid}`)
.set({
- [user_uid]: [3],
- createdAt: admin.firestore.FieldValue.serverTimestamp(),
- updatedAt: admin.firestore.FieldValue.serverTimestamp()
- });
+ uid: user_uid,
+ org_handle,
+ permissions: [3]
+ })
await Promise.all([registerOrgHandle, setOrgMetrics, setOrgUsers]);
return console.log(
diff --git a/package.json b/package.json
index 8f394d6b..b9a99f18 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
"react-responsive": "^8.1.0",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
+ "react-router-hash-link": "^2.4.3",
"react-select": "^5.7.0",
"react-social-login-buttons": "^3.4.0",
"react-syntax-highlighter": "^15.4.3",
@@ -68,6 +69,7 @@
"redux-thunk": "^2.3.0",
"simple-peer": "^9.11.1",
"start-server-and-test": "^1.15.3",
+ "swiper": "^10.2.0",
"url": "^0.11.0",
"validator": "^13.6.0",
"y-quill": "^0.1.5",
diff --git a/src/App.jsx b/src/App.jsx
index 8598d544..ba39b5f1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,25 +1,26 @@
import React, { useEffect } from "react";
import Routes from "./routes";
import "./App.less";
-import { useFirebase } from "react-redux-firebase";
+import { useFirebase, useFirestore } from "react-redux-firebase";
import { useDispatch, useSelector } from "react-redux";
import { getProfileData } from "./store/actions";
const App = () => {
- const firebase = useFirebase();
- const dispatch = useDispatch();
- const organizations = useSelector(
- ({
- firebase: {
- profile: { organizations }
- }
- }) => organizations
- );
+ const firebase = useFirebase();
+ const firestore = useFirestore();
+ const dispatch = useDispatch();
+ const organizations = useSelector(
+ ({
+ firebase: {
+ profile: { organizations },
+ },
+ }) => organizations
+ );
- useEffect(() => {
- getProfileData(organizations)(firebase, dispatch);
- }, [organizations, firebase, dispatch]);
- return ;
+ useEffect(() => {
+ getProfileData(organizations)(firebase, firestore, dispatch);
+ }, [organizations, firebase, dispatch]);
+ return ;
};
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/AuthPage/Login/index.jsx b/src/components/AuthPage/Login/index.jsx
index 0aacd7f1..890c3aa2 100644
--- a/src/components/AuthPage/Login/index.jsx
+++ b/src/components/AuthPage/Login/index.jsx
@@ -197,12 +197,12 @@ const Login = ({
/>
-
+
Forgot password
diff --git a/src/components/Card/CardWithPicture.jsx b/src/components/Card/CardWithPicture.jsx
index a7604000..e8cd65c2 100644
--- a/src/components/Card/CardWithPicture.jsx
+++ b/src/components/Card/CardWithPicture.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { makeStyles } from "@mui/styles";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
@@ -18,6 +18,10 @@ import MoreVertOutlinedIcon from "@mui/icons-material/MoreVertOutlined";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import { getUserProfileData } from "../../store/actions";
const useStyles = makeStyles(theme => ({
root: {
@@ -67,10 +71,13 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function CardWithPicture(props) {
+export default function CardWithPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
+ const dispatch = useDispatch();
+ const firebase = useFirebase();
+ const firestore = useFirestore();
const handleIncrement = () => {
setCount(count + 1);
};
@@ -83,22 +90,40 @@ export default function CardWithPicture(props) {
setAlignment(newAlignment);
};
+ useEffect(() => {
+ getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
+ }, [tutorial]);
+
+ const user = useSelector(
+ ({
+ profile: {
+ user: { data }
+ }
+ }) => data
+ );
+
+ const getTime = timestamp => {
+ return timestamp.toDate().toDateString();
+ };
+
return (
-
+
+
+
- S
+
+ {user?.photoURL && user?.photoURL.length > 0 ? (
+
+ ) : (
+ user?.displayName[0]
+ )}
}
title={
@@ -110,9 +135,9 @@ export default function CardWithPicture(props) {
color="textPrimary"
data-testId="UserName"
>
- {props.name}
+ {user?.displayName}
- {props.organizationName && (
+ {tutorial?.owner && (
<>
{" for "}
- {props.organizationName}
+ {tutorial?.owner}
>
)}
}
- subheader={props.date}
+ subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
/>
-
-
- {props.title}
-
-
- {props.contentDescription}
-
-
+
+
+
+ {tutorial?.title}
+
+
+ {tutorial?.summary}
+
+
+
- {props.time}
+ {"10 min"}
({
root: {
margin: "0.5rem",
@@ -62,10 +65,13 @@ const useStyles = makeStyles(theme => ({
}
}));
-export default function CardWithoutPicture(props) {
+export default function CardWithoutPicture({ tutorial }) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState("left");
const [count, setCount] = useState(1);
+ const dispatch = useDispatch();
+ const firebase = useFirebase();
+ const firestore = useFirestore();
const handleIncrement = () => {
setCount(count + 1);
};
@@ -78,16 +84,32 @@ export default function CardWithoutPicture(props) {
setAlignment(newAlignment);
};
+ useEffect(() => {
+ getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
+ }, [tutorial]);
+
+ const user = useSelector(
+ ({
+ profile: {
+ user: { data }
+ }
+ }) => data
+ );
+
+ const getTime = timestamp => {
+ return timestamp.toDate().toDateString();
+ };
+
return (
- S
+
+ {user?.photoURL && user?.photoURL.length > 0 ? (
+
+ ) : (
+ user?.displayName[0]
+ )}
}
title={
@@ -99,9 +121,9 @@ export default function CardWithoutPicture(props) {
color="textPrimary"
data-testId="UserName"
>
- {props.name}
+ {user?.displayName}
- {props.organizationName && (
+ {tutorial?.owner && (
<>
{" for "}
- {props.organizationName}
+ {tutorial?.owner}
>
)}
}
- subheader={props.date}
+ subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
/>
-
-
- {props.title}
-
-
- {props.contentDescription}
-
-
+
+
+
+ {tutorial?.title}
+
+
+ {tutorial?.summary}
+
+
+
- {props.time}
+ {"10 min"}
>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
const [value, setValue] = useState(2);
const [selectedTab, setSelectedTab] = useState("1");
const [visibleModal, setVisibleModal] = useState(false);
@@ -155,6 +167,7 @@ function HomePage({ background = "white", textColor = "black" }) {
}
]);
+<<<<<<< HEAD
const notification = () => {};
const handleChange = (event, newValue) => {
setValue(newValue);
@@ -334,6 +347,207 @@ function HomePage({ background = "white", textColor = "black" }) {
+=======
+ const profileData = useSelector(({ firebase: { profile } }) => profile);
+ useEffect(() => {
+ const getFeed = async () => {
+ const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+ firebase,
+ firestore,
+ dispatch
+ );
+ getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+ };
+ getFeed();
+ }, []);
+ const tutorials = useSelector(
+ ({
+ tutorialPage: {
+ feed: { homepageFeedArray }
+ }
+ }) => homepageFeedArray
+ );
+
+ const notification = () => {};
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
+ const handleTabChange = (event, newValue) => {
+ setSelectedTab(newValue);
+ };
+ const closeModal = () => {
+ setVisibleModal(prev => !prev);
+ };
+ return (
+
+
+
+ {windowSize.width > 750 && (
+
+
+
+
+
+ )}
+
+
+
+ closeModal(e)}
+ />
+
+
+
+
+
+
+ {tutorials.map(tutorial => {
+ return !tutorial?.featured_image ? (
+
+ ) : (
+
+ );
+ })}
+
+
+
+ }
+ value="1"
+ style={{ width: "25%" }}
+ />
+ }
+ value="2"
+ style={{ width: "25%" }}
+ />
+ }
+ value="3"
+ style={{ width: "25%" }}
+ />
+ }
+ value="4"
+ style={{ width: "25%" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
({
+ container: {
+ margin: "20px 0"
+ },
+ root: {
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ flexDirection: "column"
+ },
+ media: {
+ height: "auto",
+ maxHeight: "180px",
+ minHeight: "200px",
+ width: "100%"
+ },
+ heading: {
+ padding: "10px 20px 0",
+ fontSize: "1.1rem",
+ fontWeight: "600"
+ }
+}));
+
+const CodelabzCarousel = ({ sortBy }) => {
+ const classes = useStyles();
+
+ const tutorials = useSelector(
+ ({ tutorialPage }) => tutorialPage.feed.homepageFeedArray
+ ) || [0, 0, 0, 0, 0, 0];
+ const profileData = useSelector(({ firebase: { profile } }) => profile);
+ const dispatch = useDispatch();
+ const firestore = useFirestore();
+ const firebase = useFirebase();
+
+ useEffect(() => {
+ const getFeed = async () => {
+ const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+ firebase,
+ firestore,
+ dispatch
+ );
+ getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+ };
+ getFeed();
+ return () => {};
+ }, [firestore, dispatch]);
+
+ console.log(tutorials);
+
+ const getTitle = () => {
+ switch (sortBy) {
+ case "trending":
+ return "Trending Now";
+ case "featured":
+ return "Featured on Codelabz";
+ case "best":
+ return "Best of this month";
+ }
+ };
+ return (
+ <>
+
+
+ {getTitle()}
+
+
+ {tutorials.map((tutorial, i) => {
+ return tutorial == 0 ? (
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ {tutorial?.title}
+
+
+ {tutorial?.summary}
+
+
+
+
+
+
+ );
+ })}
+
+
+ >
+ );
+};
+
+export default CodelabzCarousel;
diff --git a/src/components/MyFeed/DiscoverCodelabz/CodelabzExplore.jsx b/src/components/MyFeed/DiscoverCodelabz/CodelabzExplore.jsx
new file mode 100644
index 00000000..9eae1a29
--- /dev/null
+++ b/src/components/MyFeed/DiscoverCodelabz/CodelabzExplore.jsx
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirestore } from "react-redux-firebase";
+import CodelabzCarousel from "./CodelabzCarousel";
+const useStyles = makeStyles(theme => ({
+ container: {
+ padding: "30px"
+ },
+ heading: {
+ fontSize: "1.2rem",
+ fontWeight: "600",
+ marginBottom: "10px"
+ },
+ subHeading: {
+ fontSize: "1rem",
+ marginBottom: "10px",
+ fontWeight: "400"
+ }
+}));
+const CodelabzExplore = () => {
+ const [selectedTab, setSelectedTab] = useState(0);
+ const classes = useStyles();
+ const dispatch = useDispatch();
+ const firestore = useFirestore();
+
+ const handleTabChange = (e, value) => {
+ setSelectedTab(value);
+ };
+
+ return (
+ <>
+
+
+ Discover Codelabz
+
+
+ Explore top rated Codelabz and find what you are looking for
+
+
+
+
+
+
+ >
+ );
+};
+
+export default CodelabzExplore;
diff --git a/src/components/MyFeed/discoverOrgs/OrgExplore.jsx b/src/components/MyFeed/discoverOrgs/OrgExplore.jsx
new file mode 100644
index 00000000..169751bc
--- /dev/null
+++ b/src/components/MyFeed/discoverOrgs/OrgExplore.jsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { Tabs, Tab, Paper } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import OrgsCarousel from "./components/orgsCarousel";
+import TagCard from "../../CardTabs/Tags";
+const useStyles = makeStyles(theme => ({
+ container: {
+ padding: "30px 40px 0"
+ },
+ heading: {
+ fontSize: "1.2rem",
+ fontWeight: "600",
+ marginBottom: "10px"
+ },
+ subHeading: {
+ fontSize: "1rem",
+ marginBottom: "10px",
+ fontWeight: "400"
+ }
+}));
+const OrgsExplore = () => {
+ const [selectedTab, setSelectedTab] = useState(0);
+ const classes = useStyles();
+
+ const [tags, setTags] = useState([
+ "HTML",
+ "JavaScript",
+ "Css",
+ "Python",
+ "React",
+ "Java",
+ "HTML",
+ "System Design",
+ "Cyber Security",
+ "Python",
+ "Node",
+ "Django",
+ "C",
+ "C++",
+ "Python",
+ "GoLang",
+ "ML",
+ "AI/ML",
+ "Cloud",
+ "DevOps",
+ "Figma",
+ "Angular"
+ ]);
+
+ const handleTabChange = (e, value) => {
+ setSelectedTab(value);
+ };
+
+ return (
+ <>
+
+
+ Discover Organizations
+
+
+ Explore top rated organization and find what you are looking for
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default OrgsExplore;
diff --git a/src/components/MyFeed/discoverOrgs/components/orgsCarousel.jsx b/src/components/MyFeed/discoverOrgs/components/orgsCarousel.jsx
new file mode 100644
index 00000000..75ee20b5
--- /dev/null
+++ b/src/components/MyFeed/discoverOrgs/components/orgsCarousel.jsx
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination } from "swiper/modules";
+import "swiper/css/bundle";
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import Skeleton from "@mui/material/Skeleton";
+import CardActionArea from "@mui/material/CardActionArea";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import { Paper } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirestore } from "react-redux-firebase";
+import Default from "../../../../assets/images/logo.jpeg";
+import { Link } from "react-router-dom";
+import { clearOrgData, getLaunchedOrgsData } from "../../../../store/actions";
+
+const useStyles = makeStyles(theme => ({
+ container: {
+ margin: "20px 0"
+ },
+ root: {
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ flexDirection: "column"
+ },
+ media: {
+ height: "auto",
+ maxHeight: "180px",
+ minHeight: "200px",
+ width: "100%"
+ }
+}));
+
+const OrgsCarousel = () => {
+ const classes = useStyles();
+ const launchedOrgs = useSelector(({ org }) => org.launched.data) || [
+ 0, 0, 0, 0, 0
+ ];
+ const dispatch = useDispatch();
+ const firestore = useFirestore();
+ useEffect(() => {
+ getLaunchedOrgsData()(firestore, dispatch);
+ return () => {};
+ }, [firestore, dispatch]);
+ return (
+ <>
+
+
+ {launchedOrgs.map((org, i) => {
+ return org == 0 ? (
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ {org?.org_handle}
+
+
+ {org?.org_description}
+
+
+
+
+
+
+ );
+ })}
+
+
+ >
+ );
+};
+
+export default OrgsCarousel;
diff --git a/src/components/MyFeed/index.jsx b/src/components/MyFeed/index.jsx
index b3917ce9..6ef47936 100644
--- a/src/components/MyFeed/index.jsx
+++ b/src/components/MyFeed/index.jsx
@@ -4,7 +4,10 @@ import Typography from "@mui/material/Typography";
import React from "react";
import PropTypes from "prop-types";
import Carousel from "./Carousel/index";
+import OrgsExplore from "./discoverOrgs/OrgExplore";
+import CodelabzExplore from "./DiscoverCodelabz/CodelabzExplore";
+<<<<<<< HEAD
const MyFeed = ({
heading = "Explore Codelabz",
title = " Explore top rated Organizations and find the Codelabz you are looking for",
@@ -49,6 +52,15 @@ MyFeed.propTypes = {
title: PropTypes.string,
backgroundcolor: PropTypes.string,
textcolor: PropTypes.string
+=======
+const MyFeed = () => {
+ return (
+
+
+
+
+ );
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
};
export default MyFeed;
diff --git a/src/components/MyFeed/ExploreOrgs.jsx b/src/components/MyFeed/oldExploreOrgs.jsx
similarity index 100%
rename from src/components/MyFeed/ExploreOrgs.jsx
rename to src/components/MyFeed/oldExploreOrgs.jsx
diff --git a/src/components/NavBar/new/MainNavbar/RightMenu.jsx b/src/components/NavBar/new/MainNavbar/RightMenu.jsx
index 84f07dc6..5a62d2b6 100644
--- a/src/components/NavBar/new/MainNavbar/RightMenu.jsx
+++ b/src/components/NavBar/new/MainNavbar/RightMenu.jsx
@@ -91,7 +91,7 @@ const RightMenu = ({ mode, onClick }) => {
}) => organizations
);
- console.log("Nav Orgs", organizations);
+ // console.log("Nav Orgs", organizations);
const allowOrgs = organizations && organizations.length > 0;
diff --git a/src/components/Organization/ViewOrganization/index.jsx b/src/components/Organization/ViewOrganization/index.jsx
index 14f377db..f4a37100 100644
--- a/src/components/Organization/ViewOrganization/index.jsx
+++ b/src/components/Organization/ViewOrganization/index.jsx
@@ -7,8 +7,8 @@ import { useParams } from "react-router-dom";
import {
clearOrgData,
getOrgData,
- addFollower,
- removeFollower
+ subscribeOrg,
+ unSubscribeOrg
} from "../../../store/actions";
import Banner from "../../ProfileBanner/Organization";
import { Container } from "@mui/material";
@@ -107,49 +107,29 @@ const ViewOrganization = () => {
];
useEffect(() => {
- const unsubscribe = db
- .collection("cl_org_general")
- .doc(handle)
- .onSnapshot(snap => {
- const data = snap.data();
- setPeople(data.followers);
+ db.collection("org_subscribers")
+ .where("org_handle", "==", handle)
+ .get()
+ .then(querySnapshot => {
+ setPeople(querySnapshot.forEach(doc => doc.data()))
});
-
- return () => unsubscribe();
}, [db, handle]);
useEffect(() => {
- const unsubscribe = db
- .collection("cl_user")
- .doc(profileData.uid)
- .onSnapshot(snap => {
- const data = snap.data();
- setOrgFollowed(data.orgFollowed);
+ db.collection("org_subscribers")
+ .where("uid", "==", profileData.uid)
+ .get()
+ .then(querySnapshot => {
+ setOrgFollowed(querySnapshot.forEach(doc => doc.data()))
});
-
- return () => unsubscribe();
}, [db, profileData.uid]);
- const addfollower = (e, people, handle, orgFollowed) => {
- e.preventDefault();
- addFollower(
- profileData.handle,
- people,
- handle,
- orgFollowed,
- profileData.uid
- )(firestore, dispatch);
- };
- const removefollower = (e, val, people, handle, orgFollowed) => {
- e.preventDefault();
- removeFollower(
- val,
- people,
- handle,
- orgFollowed,
- profileData.uid
- )(firestore, dispatch);
- };
+ const handleOrgSubscription = async () => {
+ if (!currentOrgData.userSubscription)
+ await subscribeOrg(handle)(firebase, firestore, dispatch);
+ else
+ await unSubscribeOrg(handle)(firebase, firestore, dispatch);
+ }
const loading = useSelector(
({
@@ -205,16 +185,18 @@ const ViewOrganization = () => {
{
diff --git a/src/components/Profile/ViewProfile/index.jsx b/src/components/Profile/ViewProfile/index.jsx
index 42930a2a..4f62df18 100644
--- a/src/components/Profile/ViewProfile/index.jsx
+++ b/src/components/Profile/ViewProfile/index.jsx
@@ -33,6 +33,10 @@ const ProfileView = () => {
const [followers, setFollowers] = useState([]);
const [targetUserFollowing, setTargetUserFollowing] = useState(0);
const [following, setFollowing] = useState([]);
+<<<<<<< HEAD
+=======
+ const [followDisable, setFollowDisable] = useState(false);
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
const db = firebase.firestore();
useEffect(() => {
@@ -107,16 +111,25 @@ const ProfileView = () => {
);
}
+<<<<<<< HEAD
const addFollower = e => {
e.preventDefault();
addUserFollower(
currentProfileData,
followers,
following,
+=======
+ const addFollower = async e => {
+ e.preventDefault();
+ setFollowDisable(true);
+ await addUserFollower(
+ currentProfileData,
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
profileData,
firestore,
dispatch
);
+<<<<<<< HEAD
};
const removeFollower = e => {
@@ -125,10 +138,21 @@ const ProfileView = () => {
followers,
currentProfileData,
following,
+=======
+ setFollowDisable(false);
+ };
+
+ const removeFollower = async e => {
+ e.preventDefault();
+ setFollowDisable(true);
+ await removeUserFollower(
+ currentProfileData,
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
profileData,
firestore,
dispatch
);
+<<<<<<< HEAD
};
return (
@@ -319,10 +343,205 @@ const ProfileView = () => {
)}
+=======
+ setFollowDisable(false);
+ };
+
+ return (
+
+
+ {profileData && (
+
+
+
+
+ Profile Details
+
+
+
+
+
+
+
+ {profileData.photoURL && profileData.photoURL.length > 0
+ ? BasicImage(profileData.photoURL, profileData.displayName)
+ : BasicImage(NoImage, "Not Available")}
+
+
+
+
+ {profileData.displayName}
+
+
+ {checkAvailable(profileData.description) && (
+ {profileData.description}
+ )}
+ {checkAvailable(profileData.link_facebook) && (
+
+
+
+
+
+ {" "}
+ {profileData.link_facebook}
+
+
+
+ )}
+ {checkAvailable(profileData.link_twitter) && (
+
+
+
+
+ {" "}
+
+ {profileData.link_twitter}
+
+
+
+ )}
+ {checkAvailable(profileData.link_github) && (
+
+
+
+
+ {" "}
+
+ {profileData.link_github}
+
+
+
+ )}
+ {checkAvailable(profileData.link_linkedin) && (
+
+
+
+
+
+ {" "}
+ {profileData.link_linkedin}
+
+
+
+ )}
+ {checkAvailable(profileData.website) && (
+
+
+
+
+
+ {" "}
+ {profileData.website}
+
+
+
+ )}
+ {checkAvailable(profileData.country) && (
+
+
+
+
+ {" "}
+
+ {profileData.country}
+
+
+
+ )}
+
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
+<<<<<<< HEAD
Followers : {followers ? followers.length : 0}{" "}
Following :{" "}
@@ -330,10 +549,20 @@ const ProfileView = () => {
{!following ? (
+=======
+ Followers : {profileData.followerCount ? profileData.followerCount : 0}{" "}
+ Following :{" "}
+
+ {profileData.followingCount ? profileData.followingCount : 0}
+
+
+ {!profileData.isFollowing ? (
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
@@ -341,11 +570,21 @@ const ProfileView = () => {
+=======
+ disabled={followDisable}
+ >
+ follow
+
+>>>>>>> 3225631bf90c2b306f0a63e4b5035d7ffef3c770
) : (
diff --git a/src/components/ProfileBanner/Organization/index.jsx b/src/components/ProfileBanner/Organization/index.jsx
index 4d5f5892..82712823 100644
--- a/src/components/ProfileBanner/Organization/index.jsx
+++ b/src/components/ProfileBanner/Organization/index.jsx
@@ -18,9 +18,12 @@ export default function Banner({
contributors = 402,
feed = 40,
handle = "apple",
- isOrgBelongsToUser = false
+ isOrgBelongsToUser = false,
+ isUserSubscribed = false,
+ handleOrgSubscription,
}) {
const classes = useStyles();
+ const [loading, setLoading] = useState(false);
return (
<>
- {isOrgBelongsToUser && (
+ {isOrgBelongsToUser ? (
+ ) : (
+
)}
-
diff --git a/src/components/TutorialPage/StepList.jsx b/src/components/TutorialPage/StepList.jsx
index d51a805b..13316e2d 100644
--- a/src/components/TutorialPage/StepList.jsx
+++ b/src/components/TutorialPage/StepList.jsx
@@ -11,6 +11,8 @@ import {
Button
} from "@mui/material";
import { makeStyles } from "@mui/styles";
+import { HashLink } from "react-router-hash-link";
+import { useParams } from "react-router-dom";
const useStyles = makeStyles(theme => ({
icons: {
@@ -72,6 +74,7 @@ const StepList = ({
children
}) => {
const classes = useStyles();
+ const { id } = useParams();
/**
* * Cases for rendering the menu items
@@ -96,7 +99,11 @@ const StepList = ({
data-testId={item?.dataTestId}
>
{item.id && (
-
+
-
+
)}
{!item.link && item.onClick && (