Enhance feed recommendations with tutorial tags

src/components/Card/CardWithoutPicture.jsx

@@ -146,14 +146,18 @@ export default function CardWithoutPicture({ tutorial }) {
         </CardContent>
       </Link>
       <CardActions className={classes.settings} disableSpacing>
-        <Chip
-          label="HTML"
-          component="a"
-          href="#chip"
-          clickable
-          variant="outlined"
-          className={classes.margin}
-        />
+        {tutorial?.tut_tags &&
+          tutorial?.tut_tags.map((tag, index) => (
+            <Chip
+              label={tag}
+              key={index}
+              component="a"
+              href="#chip"
+              clickable
+              variant="outlined"
+              className={classes.margin}
+            />
+          ))}
         <Typography
           variant="overline"
           display="block"

src/components/CodelabCard/index.jsx

@@ -53,9 +53,7 @@ const CardComponent = ({
                       className={classes.logoImg}
                     />
                     <img
-                      src={
-                        require(`../../../assets/images/${profilePic}`).default
-                      }
+                      src={require(`../../assets/images/${profilePic}`).default}
                       alt=""
                       height="20rem"
                       width="20rem"
@@ -65,7 +63,7 @@ const CardComponent = ({
                 </Grid>
               ) : (
                 <img
-                  src={require(`../../../assets/images/${profilePic}`).default}
+                  src={require(`../../assets/images/${profilePic}`).default}
                   alt=""
                   className={classes.avatar}
                 />

src/components/HomePage/index.jsx

@@ -37,13 +37,17 @@ import {
   getTutorialFeedData,
   getTutorialFeedIdArray
 } from "../../store/actions/tutorialPageActions";
+import { getTutorialsByTopTags } from "../../store/actions";
 
 function HomePage({ background = "white", textColor = "black" }) {
   const classes = useStyles();
   const dispatch = useDispatch();
   const firebase = useFirebase();
   const firestore = useFirestore();
-  const [value, setValue] = useState(2);
+  const tutorialFeedArray = useSelector(
+    ({ tutorialPage }) => tutorialPage.feed.homepageFeedArray
+  );
+  const [tutorials, setTutorials] = useState(tutorialFeedArray);
   const [selectedTab, setSelectedTab] = useState("1");
   const [visibleModal, setVisibleModal] = useState(false);
   const [footerContent, setFooterContent] = useState([
@@ -57,7 +61,7 @@ function HomePage({ background = "white", textColor = "black" }) {
       link: "https://dev.codelabz.io/"
     }
   ]);
-
+  let tutorialIdArray;
   const windowSize = useWindowSize();
   const [openMenu, setOpen] = useState(false);
   const toggleSlider = () => {
@@ -168,7 +172,7 @@ function HomePage({ background = "white", textColor = "black" }) {
 
   useEffect(() => {
     const getFeed = async () => {
-      const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+      tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
         firebase,
         firestore,
         dispatch
@@ -177,13 +181,6 @@ function HomePage({ background = "white", textColor = "black" }) {
     };
     getFeed();
   }, []);
-  const tutorials = useSelector(
-    ({
-      tutorialPage: {
-        feed: { homepageFeedArray }
-      }
-    }) => homepageFeedArray
-  );
 
   const notifications = useSelector(
     state => state.notifications.data.notifications
@@ -192,9 +189,43 @@ function HomePage({ background = "white", textColor = "black" }) {
     notification => !notification.isRead
   ).length;
 
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
+  const convertToDate = timestamp => {
+    return new Date(timestamp.seconds * 1000);
+  };
+
+  const handleFeedChange = async filterType => {
+    let filteredTutorials;
+    switch (filterType) {
+      case "Featured":
+        filteredTutorials = await getTutorialsByTopTags()(
+          firebase,
+          firestore,
+          dispatch
+        );
+        break;
+      case "New":
+        await fetchNewTutorials();
+        filteredTutorials = [...tutorialFeedArray].sort(
+          (a, b) => convertToDate(b.createdAt) - convertToDate(a.createdAt)
+        );
+        break;
+      case "Top":
+        await fetchNewTutorials();
+        filteredTutorials = [...tutorialFeedArray].sort(
+          (a, b) => b.upVotes - a.upVotes
+        );
+        break;
+      default:
+        filteredTutorials = tutorials;
+    }
+
+    setTutorials(filteredTutorials);
   };
+
+  const fetchNewTutorials = async () => {
+    await getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+  };
+
   const handleTabChange = (event, newValue) => {
     setSelectedTab(newValue);
   };
@@ -245,7 +276,7 @@ function HomePage({ background = "white", textColor = "black" }) {
             onSidebarClick={e => closeModal(e)}
           />
           <Card className={classes.card}>
-            <Activity />
+            <Activity handleFeedChange={handleFeedChange} />
           </Card>
           <Box item sx={{ display: { md: "none" } }}>
             <TagCard tags={tags} />

src/components/MyFeed/DiscoverCodelabz/CodelabzCarousel.jsx

@@ -20,7 +20,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useFirestore, useFirebase } from "react-redux-firebase";
 import Default from "../../../assets/images/logo.jpeg";
 import { Link } from "react-router-dom";
-import { clearOrgData, getLaunchedOrgsData } from "../../../store/actions";
+import { getTutorialsByTopTags } from "../../../store/actions";
 import {
   getTutorialFeedIdArray,
   getTutorialFeedData
@@ -52,10 +52,10 @@ const useStyles = makeStyles(theme => ({
 
 const CodelabzCarousel = ({ sortBy }) => {
   const classes = useStyles();
-
-  const tutorials = useSelector(
+  const tutorialFeedArray = useSelector(
     ({ tutorialPage }) => tutorialPage.feed.homepageFeedArray
-  ) || [0, 0, 0, 0, 0, 0];
+  );
+  const [tutorials, setTutorials] = useState(tutorialFeedArray);
   const profileData = useSelector(({ firebase: { profile } }) => profile);
   const dispatch = useDispatch();
   const firestore = useFirestore();
@@ -74,23 +74,51 @@ const CodelabzCarousel = ({ sortBy }) => {
     return () => {};
   }, [firestore, dispatch]);
 
-  console.log(tutorials);
+  useEffect(() => {
+    handleFeedChange(sortBy);
+  }, [sortBy, tutorialFeedArray]);
+
+  const convertToDate = createdAt => {
+    return new Date(createdAt.seconds * 1000);
+  };
+
+  const handleFeedChange = async filterType => {
+    let filteredTutorials;
+    const oneMonthAgo = new Date().setMonth(new Date().getMonth() - 1);
+    const twoWeeksAgo = new Date().setDate(new Date().getDate() - 14);
 
-  const getTitle = () => {
-    switch (sortBy) {
+    switch (filterType) {
       case "trending":
-        return "Trending Now";
-      case "featured":
-        return "Featured on Codelabz";
+        filteredTutorials = [...tutorials]
+          .filter(tutorial => convertToDate(tutorial.createdAt) > twoWeeksAgo)
+          .sort((a, b) => b.upVotes - a.upVotes);
+        break;
       case "best":
-        return "Best of this month";
+        filteredTutorials = [...tutorials]
+          .filter(tutorial => convertToDate(tutorial.createdAt) > oneMonthAgo)
+          .sort((a, b) => b.upVotes - a.upVotes);
+        break;
+      case "Featured":
+        filteredTutorials = await getTutorialsByTopTags()(
+          firebase,
+          firestore,
+          dispatch
+        );
+        break;
+      default:
+        filteredTutorials = tutorials;
     }
+
+    setTutorials(filteredTutorials);
   };
+
   return (
     <>
       <Paper variant="outlined" className={classes.container}>
         <Typography variant="h4" className={classes.heading}>
-          {getTitle()}
+          {sortBy === "trending" && "Trending Now"}
+          {sortBy === "best" && "Best of the Month"}
+          {sortBy === "featured" && "Featured on Codelabz"}
         </Typography>
         <Swiper
           modules={[Navigation]}
@@ -101,9 +129,9 @@ const CodelabzCarousel = ({ sortBy }) => {
           spaceBetween={20}
           style={{ padding: "20px 20px" }}
         >
-          {tutorials.map((tutorial, i) => {
-            return tutorial == 0 ? (
-              <SwiperSlide>
+          {tutorials.map((tutorial, i) => (
+            <SwiperSlide key={i}>
+              {!tutorial ? (
                 <Paper variant="outlined" className={classes.root}>
                   <Skeleton
                     variant="rectangular"
@@ -114,9 +142,7 @@ const CodelabzCarousel = ({ sortBy }) => {
                   <Skeleton width={"100%"} height={"25px"} />
                   <Skeleton width={"60%"} height={"25px"} />
                 </Paper>
-              </SwiperSlide>
-            ) : (
-              <SwiperSlide>
+              ) : (
                 <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
                   <Paper variant="outlined" className={classes.root}>
                     <CardActionArea>
@@ -152,9 +178,9 @@ const CodelabzCarousel = ({ sortBy }) => {
                     </CardActionArea>
                   </Paper>
                 </Link>
-              </SwiperSlide>
-            );
-          })}
+              )}
+            </SwiperSlide>
+          ))}
         </Swiper>
       </Paper>
     </>

src/components/Topbar/Activity/ActivityList.jsx

@@ -28,15 +28,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function ActivityList({ value, toggle, acitvitylist, classname }) {
+function ActivityList({ value, toggle, activityList, classname }) {
   const classes = useStyles();
 
   return (
     <React.Fragment>
       <Grid container spacing={2} className={classname}>
         <Grid item xs={12}>
           <Stack spacing={2} direction={"row"}>
-            {acitvitylist.map((item, index) => (
+            {activityList.map((item, index) => (
               <Button
                 variant="outlined"
                 color="primary"

src/components/Topbar/Activity/index.jsx

@@ -18,11 +18,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Activity() {
+function Activity({ handleFeedChange }) {
   const classes = useStyles();
   const [List, setList] = useState(1);
 
-  const acitvitylist = [
+  const activityList = [
     {
       id: 1,
       icon: LocalOfferIcon,
@@ -52,8 +52,9 @@ function Activity() {
               value={List}
               toggle={item => {
                 setList(item.id);
+                handleFeedChange(activityList[item.id - 1].text);
               }}
-              acitvitylist={acitvitylist}
+              activityList={activityList}
             />
           </Grid>
         </div>

src/components/TutorialPage/components/PostDetails.jsx

@@ -71,7 +71,7 @@ const PostDetails = ({ details }) => {
                 <Grid item>
                   <Typography sx={{ fontWeight: "700", fontSize: "1.2rem" }}>
                     {details?.title}
-                    {details?.tag?.map(tag => (
+                    {details?.tags?.map(tag => (
                       <Chip
                         label={tag}
                         variant="outlined"

src/components/TutorialPage/components/Thumbnails.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Box, Grid, Avatar, Typography, Card } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
@@ -18,34 +19,39 @@ const useStyles = makeStyles(() => ({
 
 const Thumbnails = ({ tutorial }) => {
   const classes = useStyles();
+
   return (
     <>
       <Card className={classes.container}>
         <Grid container direction="column" rowSpacing={1}>
           <Grid item className={classes.profile}>
             <Avatar sx={{ height: "22px", width: "22px", fontSize: "12px" }}>
-              A
+              {tutorial?.created_by?.charAt(0) || "U"}
             </Avatar>
             <Typography>
-              <span className={classes.bold}>Abhishek</span> From{" "}
-              <span className={classes.bold}>Codelabz</span>
+              <span className={classes.bold}>
+                {tutorial?.created_by || "Unknown"}
+              </span>{" "}
+              From{" "}
+              <span className={classes.bold}>
+                {tutorial?.owner || "Unknown"}
+              </span>
             </Typography>
           </Grid>
           <Grid item container justifyContent="center">
             <Grid item container direction="column" xs={9}>
               <Grid item>
                 <Typography sx={{ fontWeight: "600", fontSize: "11px" }}>
-                  How to build a microservice design and architecture using
-                  proper tools
+                  {tutorial?.summary || "No summary available"}
                 </Typography>
               </Grid>
             </Grid>
-            <Grid item xs={3}>
+            {/* <Grid item xs={3}>
               <img
                 src="https://cdn-images-1.medium.com/v2/resize:fit:1080/1*SBH_Y5t32ixv8C_F1MVYzA.png"
                 alt=""
               />
-            </Grid>
+            </Grid> */}
           </Grid>
         </Grid>
       </Card>