chore: Refactor search functionality and code structure to populate t…

…utorials
c2siorg · Aug 21, 2024 · b27c98c · b27c98c
1 parent 75ac952
commit b27c98c
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 16 deletions.
diff --git a/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx b/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx
@@ -31,7 +31,7 @@ const TutorialCard = ({
             {title}
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            {title}
+            {summary}
           </Typography>
           {loading ? <Skeleton variant="text" /> : null}
           {loading ? <Skeleton variant="text" /> : null}

diff --git a/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx b/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx
@@ -3,39 +3,133 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
 import TutorialCard from "../BaseTutorialsComponent/TutorialCard";
 import { searchFromTutorialsIndex } from "../../../../store/actions";
+import { getTutorialFeedData } from "../../../../store/actions/tutorialPageActions";
+import CardWithPicture from "../../../Card/CardWithPicture";
+import CardWithoutPicture from "../../../Card/CardWithoutPicture";
 
 const SearchResultsComponent = ({ results: propResults }) => {
   const [results, setResults] = useState([]);
   const location = useLocation();
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const dispatch = useDispatch();
+
+  const tutorials = useSelector(
+    ({
+      tutorialPage: {
+        feed: { homepageFeedArray }
+      }
+    }) => homepageFeedArray
+  );
+
+  useEffect(() => {
+    setResults(tutorials);
+  }, [tutorials]);
 
   useEffect(() => {
     const query = new URLSearchParams(location.search).get("query");
+    let tutorialIdArray = propResults || [];
+
     if (query) {
-      // Search using the query parameter
-      const searchResults = searchFromTutorialsIndex(query);
-      setResults(searchResults);
-    } else {
-      // Use results from props if no query parameter is present
-      setResults(propResults);
+      tutorialIdArray = searchFromTutorialsIndex(query);
+      tutorialIdArray = tutorialIdArray.map(tutorial => tutorial.ref);
     }
-  }, [location.search, propResults]);
+
+    const getResults = async () => {
+      if (tutorialIdArray.length > 0) {
+        await getTutorialFeedData(tutorialIdArray)(
+          firebase,
+          firestore,
+          dispatch
+        );
+      } else {
+        setResults([]);
+      }
+    };
+
+    getResults();
+  }, [location.search, propResults, firebase, firestore, dispatch]);
 
   return (
     <div>
       <Grid container item justify="center">
         <Divider variant="middle" />
         <Grid item xs={12}>
-          <Typography align="center"> Search Results</Typography>
+          <Typography align="center" variant="h4">
+            Search Results
+          </Typography>
+        </Grid>
+        {propResults && (
+          <>
+            <Divider variant="middle" />
+            <Grid container spacing={3}>
+              {results.map((tutorial, index) => (
+                <Grid
+                  item
+                  key={index}
+                  xs={12}
+                  sm={6}
+                  md={3}
+                  lg={2}
+                  xl={2}
+                  className="pr-24"
+                >
+                  <TutorialCard tutorialData={tutorial} loading={false} />
+                </Grid>
+              ))}
+            </Grid>
+          </>
+        )}
+
+        <Grid
+          container
+          spacing={3}
+          justifyContent="center"
+          alignItems="center"
+          sx={{
+            padding: "1rem",
+            margin: "0 auto",
+            width: "100%",
+            maxWidth: "1200px"
+          }}
+        >
+          {!propResults &&
+            results.map((tutorial, index) => (
+              <Grid
+                item
+                key={index}
+                xs={12}
+                sm={6}
+                md={6}
+                lg={6}
+                xl={6}
+                sx={{ mb: 2 }}
+              >
+                {!tutorial?.featured_image ? (
+                  <CardWithoutPicture tutorial={tutorial} />
+                ) : (
+                  <CardWithPicture tutorial={tutorial} />
+                )}
+              </Grid>
+            ))}
+        </Grid>
+
+        <Grid container justifyContent="center">
+          {results.length === 0 && (
+            <Typography
+              variant="h6"
+              component="p"
+              color="textSecondary"
+              sx={{ marginTop: 2 }}
+            >
+              No CodeLabz found with the given query.
+            </Typography>
+          )}
         </Grid>
-        <Divider variant="middle" />
-        {results.map((tutorial, index) => (
-          <Grid xs={12} sm={6} md={3} lg={2} xl={2} className="pr-24">
-            <TutorialCard key={index} tutorialData={tutorial} loading={false} />
-          </Grid>
-        ))}
-        {results.length === 0 && "No CodeLabz with the given query"}
 
         <Divider variant="middle" />
       </Grid>