feat: Add functionalities to improve Tutorial page. Replied messages state, Comment numbers, Proper User Details.

src/components/TutorialPage/components/Commnets/Comment.jsx

@@ -26,6 +26,8 @@ import {
   addComment
 } from "../../../../store/actions/tutorialPageActions";
 import CommentLikesDislikes from "../../../ui-helpers/CommentLikesDislikes";
+import * as actions from "../../../../store/actions/actionTypes";
+
 const useStyles = makeStyles(() => ({
   container: {
     margin: "10px 0",
@@ -68,6 +70,14 @@ const Comment = ({ id }) => {
     }) => data
   );
 
+  const userHandle = useSelector(
+    ({
+      firebase: {
+        profile: { handle }
+      }
+    }) => handle
+  );
+
   const [data] = commentsArray.filter(comment => comment.comment_id == id);
 
   const repliesArray = useSelector(
@@ -79,18 +89,35 @@ const Comment = ({ id }) => {
   );
 
   const [replies] = repliesArray.filter(replies => replies.comment_id == id);
-
-  const handleSubmit = comment => {
+  const handleSubmit = async comment => {
     const commentData = {
       content: comment,
       replyTo: data.comment_id,
       tutorial_id: data.tutorial_id,
       createdAt: firestore.FieldValue.serverTimestamp(),
-      userId: "codelabzuser"
+      userId: userHandle
     };
-    addComment(commentData)(firebase, firestore, dispatch);
+    const commentId = await addComment(commentData)(
+      firebase,
+      firestore,
+      dispatch
+    );
+    if (commentId) {
+      const newRepliesArray = repliesArray.map(reply => {
+        if (reply.comment_id === id) {
+          return {
+            ...reply,
+            replies: [...reply.replies, commentId]
+          };
+        }
+        return reply;
+      });
+      dispatch({
+        type: actions.ADD_REPLIES_SUCCESS,
+        payload: newRepliesArray
+      });
+    }
   };
-
   return (
     data && (
       <>
@@ -109,7 +136,9 @@ const Comment = ({ id }) => {
                   }}
                   sx={{ textTransform: "none", fontSize: "12px" }}
                 >
-                  {replies?.replies?.length > 0 && replies?.replies?.length}{" "}
+                  {replies?.replies?.length > 0
+                    ? replies?.replies?.length
+                    : data?.no_of_replies}{" "}
                   Reply
                 </Button>
               )}

src/components/TutorialPage/components/Commnets/CommentBox.jsx

@@ -3,6 +3,7 @@ import { makeStyles } from "@mui/styles";
 import React, { useEffect, useState } from "react";
 import Textbox from "./Textbox";
 import Comment from "./Comment";
+import { useSelector } from "react-redux";
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -30,6 +31,14 @@ const CommentBox = ({ commentsArray, onAddComment }) => {
   const classes = useStyles();
   const [comments, setComments] = useState(commentsArray);
   const [currCommentCount, setCurrCommentCount] = useState(3);
+  const data = useSelector(
+    ({
+      tutorialPage: {
+        post: { data }
+      }
+    }) => data
+  );
+  const noOfComments = data?.no_of_comments || 0;
 
   useEffect(() => {
     setComments(commentsArray?.slice(0, currCommentCount));
@@ -48,7 +57,7 @@ const CommentBox = ({ commentsArray, onAddComment }) => {
       data-testId="tutorialpageComments"
     >
       <Typography variant="h5" sx={{ fontWeight: "600" }}>
-        Comments({commentsArray?.length || 0})
+        Comments({noOfComments})
       </Typography>
       <Textbox handleSubmit={onAddComment} />
       <Grid container rowSpacing={2}>

src/components/TutorialPage/components/Commnets/Textbox.jsx

@@ -9,6 +9,8 @@ import {
 import EmojiPicker from "emoji-picker-react";
 import { InsertEmoticon, Send } from "@mui/icons-material";
 import AccountCircle from "@mui/icons-material/AccountCircle";
+import Avatar from "@mui/material/Avatar";
+import { useSelector } from "react-redux";
 
 const Textbox = ({ type, handleSubmit }) => {
   const [commentText, setCommentText] = useState("");
@@ -17,6 +19,13 @@ const Textbox = ({ type, handleSubmit }) => {
     setCommentText(prev => prev + emoji.emoji);
     setShowEmojiPicker(false);
   };
+  const user = useSelector(
+    ({
+      profile: {
+        user: { data }
+      }
+    }) => data
+  );
   return (
     <Box
       sx={{
@@ -27,13 +36,18 @@ const Textbox = ({ type, handleSubmit }) => {
         margin: "10px 0 24px"
       }}
     >
-      <AccountCircle
+      <Avatar
         sx={{
-          color: "action.active",
-          width: "36px",
-          height: "36px"
+          height: "24px",
+          width: "24px"
         }}
-      />
+      >
+        {user?.photoURL && user?.photoURL.length > 0 ? (
+          <img src={user?.photoURL} />
+        ) : (
+          user?.displayName[0]
+        )}
+      </Avatar>
       <TextField
         label={type === "reply" ? "Reply" : "Write a comment"}
         variant="standard"

src/components/TutorialPage/components/InfoSnackBar.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Snackbar from "@mui/material/Snackbar";
+
+const InfoSnackBar = ({ message, children }) => {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "center"
+        }}
+        open={open}
+        autoHideDuration={1000}
+        message={message}
+      />
+      <div
+        onClick={() => {
+          setOpen(true);
+          setTimeout(() => {
+            setOpen(false);
+          }, 1000);
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default InfoSnackBar;

src/components/TutorialPage/components/PostDetails.jsx

@@ -15,6 +15,7 @@ import { getUserProfileData } from "../../../store/actions";
 import { HashLink } from "react-router-hash-link";
 import { useParams } from "react-router-dom";
 import TutorialLikesDislikes from "../../ui-helpers/TutorialLikesDislikes";
+import InfoSnackBar from "./InfoSnackBar";
 const useStyles = makeStyles(() => ({
   container: {
     padding: "20px",
@@ -48,18 +49,6 @@ const PostDetails = ({ details }) => {
     getUserProfileData(details.user)(firebase, firestore, dispatch);
   }, [details]);
 
-  const user = useSelector(
-    ({
-      profile: {
-        user: { data }
-      }
-    }) => data
-  );
-
-  const getTime = timestamp => {
-    return timestamp.toDate().toDateString();
-  };
-
   const classes = useStyles();
   return (
     <>
@@ -94,12 +83,17 @@ const PostDetails = ({ details }) => {
                         <ChatOutlinedIcon />
                       </IconButton>
                     </HashLink>
-                    <IconButton
-                      aria-label="add to favorites"
-                      data-testId="ShareIcon"
-                    >
-                      <ShareOutlinedIcon />
-                    </IconButton>
+                    <InfoSnackBar message={"Copied to clipboard"}>
+                      <IconButton
+                        aria-label="add to favorites"
+                        data-testId="ShareIcon"
+                        onClick={() => {
+                          navigator.clipboard.writeText(window.location.href);
+                        }}
+                      >
+                        <ShareOutlinedIcon />
+                      </IconButton>
+                    </InfoSnackBar>
                     <IconButton aria-label="share" data-testId="NotifIcon">
                       <TurnedInNotOutlinedIcon />
                     </IconButton>

src/components/TutorialPage/components/UserDetails.jsx

@@ -34,7 +34,9 @@ const User = ({ id, timestamp, size }) => {
 
   const profileData = useSelector(({ firebase: { profile } }) => profile);
 
-  const user = useSelector(
+  const [user, setUser] = useState(null);
+
+  const userData = useSelector(
     ({
       profile: {
         user: { data }
@@ -62,11 +64,17 @@ const User = ({ id, timestamp, size }) => {
   };
 
   const getTime = timestamp => {
-    return timestamp.toDate().toDateString();
+    return timestamp.toDate().toLocaleString();
   };
 
   const showFollowButton = profileData?.uid !== user?.uid;
 
+  useEffect(() => {
+    if (userData && userData.handle === id) {
+      setUser(userData);
+    }
+  }, [userData]);
+
   return (
     <>
       <Grid

src/components/TutorialPage/index.jsx

@@ -76,18 +76,21 @@ function TutorialPage({ background = "white", textColor = "black" }) {
       }
     }) => steps
   );
-  if ((!loading && !tutorial) || (!loading && !tutorial?.isPublished)) {
-    console.log(loading, tutorial);
-    history.push("/not-found");
-  }
+  const userHandle = useSelector(
+    ({
+      firebase: {
+        profile: { handle }
+      }
+    }) => handle
+  );
 
   const handleAddComment = async comment => {
     const commentData = {
       content: comment,
       replyTo: id,
       tutorial_id: id,
       createdAt: firestore.FieldValue.serverTimestamp(),
-      userId: "codelabzuser"
+      userId: userHandle
     };
     const commentId = await addComment(commentData)(
       firebase,
@@ -102,6 +105,19 @@ function TutorialPage({ background = "white", textColor = "black" }) {
     }
   };
 
+  useEffect(() => {
+    let timeoutId = null;
+    if ((!loading && !tutorial) || (!loading && !tutorial?.isPublished)) {
+      console.log(loading, tutorial);
+      timeoutId = setTimeout(() => {
+        history.push("/not-found");
+      }, 2000);
+    }
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [loading, tutorial]);
+
   return (
     <Box
       className={classes.wrapper}

src/components/Tutorials/NewTutorial/index.jsx

@@ -96,20 +96,20 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     }));
   }, [tags]);
 
-  const organizations = useSelector(
-    ({
-      profile: {
-        data: { organizations }
-      }
-    }) => organizations
-  );
-  // console.log("organizations", organizations);
+  const profileState = useSelector(state => state.profile.data);
+
+  const { organizations, isEmpty } = profileState || {
+    organizations: null,
+    isEmpty: false
+  };
 
   useEffect(() => {
-    if (!organizations) {
+    const isFetchProfile = organizations === null && !isEmpty;
+
+    if (isFetchProfile) {
       getProfileData()(firebase, firestore, dispatch);
     }
-  }, [firestore, firebase, dispatch, organizations]);
+  }, [firestore, firebase, dispatch, organizations, isEmpty]);
 
   const userHandle = useSelector(
     ({
@@ -119,14 +119,6 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     }) => handle
   );
 
-  const displayName = useSelector(
-    ({
-      firebase: {
-        profile: { displayName }
-      }
-    }) => displayName
-  );
-
   //This name should be replaced by displayName when implementing backend
   const sampleName = "User Name Here";
   const allowOrgs = organizations && organizations.length > 0;
@@ -158,6 +150,7 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
 
   const onSubmit = formData => {
     formData.preventDefault();
+    setError(false);
     const tutorialData = {
       ...formValue,
       created_by: userHandle,

src/components/ui-helpers/CommentLikesDislikes.jsx

@@ -106,11 +106,25 @@ const CommentLikesDislikes = ({ comment_id }) => {
       onChange={handleUserChoice}
       aria-label="like dislike"
     >
-      <ToggleButton value="like" aria-label="like">
+      <ToggleButton
+        style={{
+          display: "flex",
+          gap: "4px"
+        }}
+        value="like"
+        aria-label="like"
+      >
         <ThumbUp />
         <Typography variant="body2">{upVotes}</Typography>
       </ToggleButton>
-      <ToggleButton value="dislike" aria-label="dislike">
+      <ToggleButton
+        style={{
+          display: "flex",
+          gap: "4px"
+        }}
+        value="dislike"
+        aria-label="dislike"
+      >
         <ThumbDown />
         <Typography variant="body2">{downVotes}</Typography>
       </ToggleButton>