added option for sharing tutorial

src/components/Card/CardWithoutPicture.jsx

@@ -18,6 +18,7 @@ import ToggleButton from "@mui/lab/ToggleButton";
 import ToggleButtonGroup from "@mui/lab/ToggleButtonGroup";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import ShareTutorial from "../Tutorials/ShareTutorial";
 import { useDispatch, useSelector } from "react-redux";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import { getUserProfileData } from "../../store/actions";
@@ -65,8 +66,9 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function CardWithoutPicture({ tutorial }) {
+export default function CardWithoutPicture({ tutorial,setOpenShare,openShare,onSidebarClick, }) {
   const classes = useStyles();
+  console.log(tutorial)
   const [alignment, setAlignment] = React.useState("left");
   const [count, setCount] = useState(1);
   const dispatch = useDispatch();
@@ -84,6 +86,10 @@ export default function CardWithoutPicture({ tutorial }) {
     setAlignment(newAlignment);
   };
 
+  const handleShare = () => {
+    setOpenShare(!openShare);
+  }
+
   useEffect(() => {
     getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
   }, [tutorial]);
@@ -102,6 +108,14 @@ export default function CardWithoutPicture({ tutorial }) {
 
   return (
     <Card className={classes.root} data-testId="codelabz">
+
+      <ShareTutorial
+            viewModal={openShare}
+            openShare={openShare}
+            setOpenShare={setOpenShare}
+            onSidebarClick={onSidebarClick}
+            tutorial={tutorial}
+          />
       <CardHeader
         avatar={
           <Avatar className={classes.avatar}>
@@ -207,10 +221,11 @@ export default function CardWithoutPicture({ tutorial }) {
         <IconButton aria-label="share" data-testId="CommentIcon">
           <ChatOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="add to favorites" data-testId="ShareIcon">
+        <IconButton aria-label="add to favorites" data-testId="ShareIcon" onClick={handleShare}>
           <ShareOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="share" data-testId="NotifIcon">
+        <IconButton aria-label="share" data-testId="NotifIcon" >
+
           <TurnedInNotOutlinedIcon />
         </IconButton>
         <IconButton aria-label="share" data-testId="MoreIcon">

src/components/HomePage/index.jsx

@@ -31,6 +31,7 @@ import CardWithoutPicture from "../Card/CardWithoutPicture";
 import Activity from "../Topbar/Activity";
 import useWindowSize from "../../helpers/customHooks/useWindowSize";
 import NewTutorial from "../Tutorials/NewTutorial";
+import ShareTutorial from "../Tutorials/ShareTutorial";
 import { useDispatch, useSelector } from "react-redux";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import {
@@ -46,6 +47,7 @@ function HomePage({ background = "white", textColor = "black" }) {
   const [value, setValue] = useState(2);
   const [selectedTab, setSelectedTab] = useState("1");
   const [visibleModal, setVisibleModal] = useState(false);
+  const [openShare, setOpenShare] = useState(false);
   const [footerContent, setFooterContent] = useState([
     { name: "Help", link: "https://dev.codelabz.io/" },
     { name: "About", link: "https://dev.codelabz.io/" },
@@ -194,6 +196,10 @@ function HomePage({ background = "white", textColor = "black" }) {
   const closeModal = () => {
     setVisibleModal(prev => !prev);
   };
+
+  const shareModel = () => {
+    setOpenShare(prev => !prev);
+  };
   return (
     <Card
       className={classes.wrapper}
@@ -233,6 +239,9 @@ function HomePage({ background = "white", textColor = "black" }) {
             viewModal={visibleModal}
             onSidebarClick={e => closeModal(e)}
           />
+
+
+
           <Card className={classes.card}>
             <Activity />
           </Card>
@@ -241,9 +250,9 @@ function HomePage({ background = "white", textColor = "black" }) {
           </Box>
           {tutorials.map(tutorial => {
             return !tutorial?.featured_image ? (
-              <CardWithoutPicture tutorial={tutorial} />
+              <CardWithoutPicture tutorial={tutorial} setOpenShare={setOpenShare} openShare={openShare} onSidebarClick={e=>(shareModel(e))} />
             ) : (
-              <CardWithPicture tutorial={tutorial} />
+              <CardWithPicture tutorial={tutorial} setOpenShare={setOpenShare} openShare={openShare}  onSidebarClick={e=>(shareModel(e))}/>
             );
           })}
           <Box

src/components/Tutorials/ShareTutorial/index.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import { AppstoreAddOutlined } from "@ant-design/icons";
+import { useDispatch, useSelector } from "react-redux";
+import { Alert, Box } from "@mui/material";
+import Modal from "@mui/material/Modal";
+import { makeStyles } from "@mui/styles";
+import { deepPurple } from "@mui/material/colors";
+import { Typography } from "@mui/material";
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex",
+    paddingTop: "8px",
+    paddingBottom: "10px"
+  },
+  item: {
+    margin: "10px"
+  },
+  purple: {
+    color: deepPurple[700],
+    backgroundColor: deepPurple[500]
+  }
+}));
+
+const ShareTutorial = ({ tutorial, openShare, setOpenShare,onSidebarClick }) => {
+
+  const [loading, setLoading] = useState(false);
+  console.log(tutorial)
+  const [error, setError] = useState(false);
+
+
+  const loadingProp = useSelector(
+    ({
+      tutorials: {
+        create: { loading }
+      }
+    }) => loading
+  );
+  const errorProp = useSelector(
+    ({
+      tutorials: {
+        create: { error }
+      }
+    }) => error
+  );
+
+  useEffect(() => {
+    setLoading(loadingProp);
+  }, [loadingProp]);
+
+  useEffect(() => {
+    setError(errorProp);
+  }, [errorProp]);
+
+
+
+
+
+
+
+
+  const classes = useStyles();
+  return (
+    <Modal
+      open={openShare}
+      onClose={onSidebarClick}
+      aria-labelledby="simple-modal-title"
+      aria-describedby="simple-modal-description"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        data-testId="tutorialNewModal"
+        style={{
+          height: "auto",
+          width: "auto",
+          background: "white",
+          padding: "2rem",
+          paddingTop: "1rem",
+          maxWidth: "80%"
+        }}
+      >
+        {error && (
+          <Alert message={""} type="error" closable="true" className="mb-24">
+            description={"Tutorial Creation Failed"}/
+          </Alert>
+        )}
+        <Typography variant="h5">Share a Tutorial</Typography>
+        <Box
+          sx={{
+            py: 2,
+            width: "50%"
+          }}
+        >
+          <Typography>
+            <div>
+            {`http://localhost:5173/tutorial/` + tutorial?.tutorial_id}
+            </div>
+          </Typography>
+        </Box>
+          <div onClick={onSidebarClick}>Close</div>
+
+      </div>
+    </Modal>
+  );
+};
+
+export default ShareTutorial;