Updated Tutorila page

scorelab · Aug 11, 2023 · ecbdcb6 · ecbdcb6
1 parent 3daa1f0
commit ecbdcb6
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 151 deletions.
diff --git a/src/components/TutorialPage/components/Tutorial.jsx b/src/components/TutorialPage/components/Tutorial.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { Card, Box, Grid, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import HtmlTextRenderer from "../../Tutorials/subComps/HtmlTextRenderer";
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -20,10 +21,9 @@ const Tutorial = ({ steps }) => {
               <Typography sx={{ fontWeight: "600" }}>
                 {i + 1 + ". " + step.title}
               </Typography>
-              <Typography
-                className="content"
-                dangerouslySetInnerHTML={{ __html: step.content }}
-              ></Typography>
+              <Typography className="content">
+                <HtmlTextRenderer html={step.content} />
+              </Typography>
             </Box>
           );
         })}

diff --git a/src/components/TutorialPage/index.jsx b/src/components/TutorialPage/index.jsx
@@ -9,7 +9,10 @@ import Grid from "@mui/material/Grid";
 import useStyles from "./styles";
 import StepsBar from "./StepBar";
 import useWindowSize from "../../helpers/customHooks/useWindowSize";
-import { getTutorialData } from "../../store/actions/tutorialPageActions";
+import {
+  getTutorialData,
+  getTutorialSteps
+} from "../../store/actions/tutorialPageActions";
 import { getUserProfileData } from "../../store/actions";
 import { useDispatch, useSelector } from "react-redux";
 import { useFirebase, useFirestore } from "react-redux-firebase";
@@ -28,6 +31,7 @@ function TutorialPage({ background = "white", textColor = "black" }) {
   const firestore = useFirestore();
   useEffect(() => {
     getTutorialData(id)(firebase, firestore, dispatch);
+    getTutorialSteps(id)(firebase, firestore, dispatch);
   }, []);
   const tutorial = useSelector(
     ({
@@ -38,15 +42,23 @@ function TutorialPage({ background = "white", textColor = "black" }) {
   );
 
   const postDetails = {
-    title: tutorial?.tut_title,
-    org: tutorial?.org_handle,
-    user: tutorial?.user_handle,
+    title: tutorial?.title,
+    org: tutorial?.owner,
+    user: tutorial?.created_by,
     upVote: tutorial?.upVotes,
     downVote: tutorial?.downVotes,
-    published_on: tutorial?.published_on,
+    published_on: tutorial?.createdAt,
     tag: tutorial?.tut_tags
   };
 
+  const steps = useSelector(
+    ({
+      tutorialPage: {
+        post: { steps }
+      }
+    }) => steps
+  );
+
   return (
     <Box
       className={classes.wrapper}
@@ -73,7 +85,7 @@ function TutorialPage({ background = "white", textColor = "black" }) {
                 <StepsBar
                   open={openMenu}
                   toggleSlider={toggleSlider}
-                  steps={tutorial.steps}
+                  steps={steps}
                 />
               </Grid>
             </Grid>
@@ -86,7 +98,7 @@ function TutorialPage({ background = "white", textColor = "black" }) {
           xs={6}
         >
           <PostDetails details={postDetails} />
-          <Tutorial steps={tutorial?.steps} />
+          <Tutorial steps={steps} />
           <CommentBox
             comments={tutorial?.comments}
             tutorialId={tutorial?.tut_id}

diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js
@@ -147,3 +147,7 @@ export const GET_REPLIES_FAIL = "GET_REPLIES_FAIL";
 export const ADD_COMMENT_START = "ADD_COMMENT_START";
 export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS";
 export const ADD_COMMENT_FAILED = "ADD_COMMENT_FAILED";
+
+export const GET_STEPS_DATA_START = "GET_STEPS_DETAILS_START";
+export const GET_STEPS_DATA_SUCCESS = "GET_STEPS_DETAILS_SUCCESS";
+export const GET_STEPS_DATA_FAIL = "GET_STEPS_DETAILS_FAILED";