scorelab · rohitPandey469 · Feb 18, 2024
diff --git a/src/components/Card/CardWithPicture.jsx b/src/components/Card/CardWithPicture.jsx
@@ -172,14 +172,16 @@ export default function CardWithPicture({ tutorial }) {
         </CardContent>
       </Link>
       <CardActions className={classes.settings} disableSpacing>
-        <Chip
-          label="HTML"
-          component="a"
-          href="#chip"
-          clickable
-          variant="outlined"
-          className={classes.margin}
-        />
+        {tutorial?.tags.map(tag => (
+          <Chip
+            label={tag}
+            component="a"
+            href={tag}
+            clickable
+            variant="outlined"
+            className={classes.margin}
+          />
+        ))}
         <Typography
           variant="overline"
           display="block"

diff --git a/src/components/Card/CardWithoutPicture.jsx b/src/components/Card/CardWithoutPicture.jsx
@@ -161,14 +161,16 @@ 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?.tags.map(tag => (
+          <Chip
+            label={tag}
+            component="a"
+            href={tag}
+            clickable
+            variant="outlined"
+            className={classes.margin}
+          />
+        ))}
         <Typography
           variant="overline"
           display="block"

diff --git a/src/components/Tutorials/NewTutorial/index.jsx b/src/components/Tutorials/NewTutorial/index.jsx
@@ -19,6 +19,7 @@ import DescriptionIcon from "@mui/icons-material/Description";
 import MovieIcon from "@mui/icons-material/Movie";
 import Select from "react-select";
 import { common } from "@mui/material/colors";
+import Chip from "@mui/material/Chip";
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -32,6 +33,9 @@ const useStyles = makeStyles(theme => ({
   purple: {
     color: deepPurple[700],
     backgroundColor: deepPurple[500]
+  },
+  chip: {
+    marginRight: "5px"
   }
 }));
 
@@ -46,7 +50,8 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
   const [formValue, setformValue] = useState({
     title: "",
     summary: "",
-    owner: ""
+    owner: "",
+    tags: []
   });
 
   const loadingProp = useSelector(
@@ -145,6 +150,23 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     }));
   };
 
+  const tagOptions = ["HTML", "Css", "JavaScript", "React", "Python", "Java"];
+
+  const handleTagClick = tag => {
+    const isSelected = formValue.tags.includes(tag);
+    if (isSelected) {
+      setformValue(prev => ({
+        ...prev,
+        tags: prev.tags.filter(t => t !== tag)
+      }));
+    } else {
+      setformValue(prev => ({
+        ...prev,
+        tags: [...prev.tags, tag]
+      }));
+    }
+  };
+
   const classes = useStyles();
   return (
     <Modal
@@ -225,6 +247,18 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
             onChange={e => handleChange(e)}
             style={{ marginBottom: "2rem" }}
           />
+          <div style={{ marginBottom: "1.25rem" }}>
+            {tagOptions.map(tag => (
+              <Chip
+                key={tag}
+                label={tag}
+                clickable
+                onClick={() => handleTagClick(tag)}
+                color={formValue.tags.includes(tag) ? "primary" : undefined}
+                className={classes.chip}
+              />
+            ))}
+          </div>
 
           <IconButton>
             <ImageIcon />

diff --git a/src/components/Tutorials/subComps/EditControls.jsx b/src/components/Tutorials/subComps/EditControls.jsx
@@ -22,6 +22,7 @@ import { useDispatch } from "react-redux";
 import RemoveStepModal from "./RemoveStepModal";
 import ColorPickerModal from "./ColorPickerModal";
 import { Box, Stack } from "@mui/system";
+import TagSelectorModal from "./TagSelectorModal";
 
 const EditControls = ({
   isPublished,
@@ -43,6 +44,7 @@ const EditControls = ({
   const dispatch = useDispatch();
   const [viewRemoveStepModal, setViewRemoveStepModal] = useState(false);
   const [viewColorPickerModal, setViewColorPickerModal] = useState(false);
+  const [viewTagSelectorModal, setViewTagSelectorModal] = useState(false);
   const [publishLoad, setPublishLoad] = useState(false);
   const DropdownMenu = () => {
     const [anchorEl, setAnchorEl] = React.useState(null);
@@ -160,6 +162,18 @@ const EditControls = ({
             step_length={step_length}
           />
         </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          sx={{
+            boxShadow: "none",
+            borderRadius: 1,
+            marginX:"10px"
+          }}
+          onClick={() => setViewTagSelectorModal(true)}
+        >
+          Select Tags
+        </Button>
         <Box
           sx={{
             flexGrow: 1
@@ -211,6 +225,12 @@ const EditControls = ({
         tutorial_id={tutorial_id}
         owner={owner}
       />
+      <TagSelectorModal
+        visible={viewTagSelectorModal}
+        visibleCallback={e => setViewTagSelectorModal(e)}
+        tutorial_id={tutorial_id}
+        owner={owner}
+      />
     </>
   );
 };

diff --git a/src/components/Tutorials/subComps/TagSelectorModal.jsx b/src/components/Tutorials/subComps/TagSelectorModal.jsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import Modal from "@mui/material/Modal";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+import {
+  fetchTutorialTags,
+  updateTutorialTags
+} from "../../../store/actions/tutorialsActions";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import { useDispatch } from "react-redux";
+import Chip from "@mui/material/Chip"
+
+const TagSelectorModal = ({ visible, visibleCallback, tutorial_id, owner }) => {
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const dispatch = useDispatch();
+  const [selectedTags, setSelectedTags] = useState([]);
+
+  const tagOptions = ["HTML", "Css", "JavaScript", "React", "Python", "Java"];
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const tags = await fetchTutorialTags(tutorial_id)(firebase, firestore, dispatch);
+        setSelectedTags(tags);
+      } catch (error) {
+        console.error("Error fetching tags:", error);
+      }
+    };
+    if (visible) {
+      fetchTags();
+    }
+  }, [visible, tutorial_id, firebase, firestore, dispatch]);
+
+  const handleTagSelection = (tag) => {
+    setSelectedTags((prevTags) => {
+      if (prevTags.includes(tag)) {
+        return prevTags.filter((selectedTag) => selectedTag !== tag);
+      } else {
+        return [...prevTags, tag];
+      }
+    });
+  };
+
+  const handleSaveTags = async () => {
+    try {
+      await updateTutorialTags(tutorial_id, selectedTags)(firebase, firestore, dispatch);
+      visibleCallback(false);
+    } catch (error) {
+      console.error("Error updating tags:", error);
+    }
+  };
+
+  return (
+    <Modal
+      open={visible}
+      onClose={() => visibleCallback(false)}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: 400,
+          bgcolor: "background.paper",
+          boxShadow: 24,
+          p: 4
+        }}
+      >
+        <Typography id="modal-modal-title" variant="h6" component="h2">
+          Select Tags
+        </Typography>
+        <Box sx={{ mt: 2 }}>
+          {tagOptions.map(tag => (
+            <Chip
+            key={tag}
+            label={tag}
+            clickable
+            onClick={() => handleTagSelection(tag)}
+            color={selectedTags.includes(tag) ? "primary" : undefined}
+            sx={{ mr: 1, mb: 1 }}
+          />
+          ))}
+        </Box>
+        <Box sx={{ mt: 2 }}>
+          <Button onClick={handleSaveTags} variant="contained">
+            Save Tags
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default TagSelectorModal;
diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js
@@ -98,6 +98,7 @@ export const getTutorialFeedData =
             title: tutorial?.title,
             summary: tutorial?.summary,
             owner: tutorial?.owner,
+            tags:tutorial?.tags,
             created_by: tutorial?.created_by,
             createdAt: tutorial?.createdAt,
             featured_image: tutorial?.featured_image