From 673679947940a36febb75e330cbeb1fe22db4ed0 Mon Sep 17 00:00:00 2001 From: Mallepally Lokeshwar Reddy Date: Tue, 20 Aug 2024 18:29:52 +0530 Subject: [PATCH 1/6] chore: Refactor Elasticlunr class methods --- src/helpers/elasticlunr.jsx | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/helpers/elasticlunr.jsx b/src/helpers/elasticlunr.jsx index 1f797e14..864e3b1f 100644 --- a/src/helpers/elasticlunr.jsx +++ b/src/helpers/elasticlunr.jsx @@ -1,4 +1,5 @@ import elasticlunr from "elasticlunr"; + export default class Elasticlunr { constructor(key, ...fields) { this.elasticlunr = elasticlunr(); @@ -8,11 +9,34 @@ export default class Elasticlunr { }); } - addDocToIndex = doc => { - this.elasticlunr.addDoc(doc); + addDocToIndex(doc) { + try { + this.elasticlunr.addDoc(doc); + } catch (error) { + console.error("Error adding document to index:", error); + } + } + + searchFromIndex(query, options = { expand: true }) { + try { + if (typeof query !== "string") { + throw new Error("Query must be a string."); + } + + return this.elasticlunr.search(query, options); + } catch (error) { + console.error("Error searching the index:", error); + return []; + } + } + + // To get a specific document by its reference key + getDocById = id => { + return this.elasticlunr.documentStore.getDoc(id); }; - searchFromIndex = query => { - return this.elasticlunr.search(query, { expand: true }); + // To get all documents in the index + getAllDocs = () => { + return Object.values(this.elasticlunr.documentStore.docs); }; } From ad8b34bd111e14d7576892d13d894da9c1681bfb Mon Sep 17 00:00:00 2001 From: Mallepally Lokeshwar Reddy Date: Tue, 20 Aug 2024 18:31:05 +0530 Subject: [PATCH 2/6] chore: Add fetchAndIndexTutorials action to App component --- src/App.jsx | 3 ++- src/store/actions/index.js | 3 ++- src/store/actions/tutorialsActions.js | 20 +++++++++++++++++++- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4a9c86f6..3d0c1c8a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,7 +3,7 @@ import Routes from "./routes"; import "./App.less"; import { useFirebase, useFirestore } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; -import { getProfileData } from "./store/actions"; +import { getProfileData, fetchAndIndexTutorials } from "./store/actions"; const App = () => { const firebase = useFirebase(); @@ -19,6 +19,7 @@ const App = () => { useEffect(() => { getProfileData(organizations)(firebase, firestore, dispatch); + fetchAndIndexTutorials()(firebase, firestore, dispatch); }, [organizations, firebase, dispatch]); return ; }; diff --git a/src/store/actions/index.js b/src/store/actions/index.js index 76520c41..78268fd8 100644 --- a/src/store/actions/index.js +++ b/src/store/actions/index.js @@ -64,5 +64,6 @@ export { setTutorialTheme, updateStepTime, updateStepTitle, - uploadTutorialImages + uploadTutorialImages, + fetchAndIndexTutorials, } from "./tutorialsActions"; diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js index 7d273c1d..dd17f426 100644 --- a/src/store/actions/tutorialsActions.js +++ b/src/store/actions/tutorialsActions.js @@ -11,8 +11,26 @@ const tutorials_index = new Elasticlunr( "summary" ); +export const fetchAndIndexTutorials = () => async (firebase, firestore) => { + try { + const snapshot = await firestore.collection("tutorials").get(); + snapshot.forEach(doc => { + const data = doc.data(); + const tutorial = { id: doc.id, ...data }; + // console.log("Adding tutorial to index:", tutorial); + tutorials_index.addDocToIndex(tutorial); + }); + + // console.log("All docs in index:", tutorials_index.getAllDocs()); + } catch (error) { + console.error("Error fetching or indexing tutorials:", error); + } +}; + export const searchFromTutorialsIndex = query => { - return tutorials_index.searchFromIndex(query); + const results = tutorials_index.searchFromIndex(query); + // console.log("searchFromIndex", query, results); + return results; }; // Gets all the tutorials with this user having edit access From b0534cc0c61b6532f014facd06e3df0e364d07e8 Mon Sep 17 00:00:00 2001 From: Mallepally Lokeshwar Reddy Date: Tue, 20 Aug 2024 18:32:05 +0530 Subject: [PATCH 3/6] chore: Simplify search results population logic --- src/components/Tutorials/MyTutorials/Search/index.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Tutorials/MyTutorials/Search/index.jsx b/src/components/Tutorials/MyTutorials/Search/index.jsx index 405672fd..eceb71ec 100644 --- a/src/components/Tutorials/MyTutorials/Search/index.jsx +++ b/src/components/Tutorials/MyTutorials/Search/index.jsx @@ -51,10 +51,7 @@ const Header = () => { if (result.length > 0) { let tempArray = []; result.forEach(item => { - tempArray = [ - ...tempArray, - ..._.filter(indexData, ref => ref.tutorial_id === item.ref) - ]; + tempArray = [...tempArray, item.ref]; }); setViewResults(true); return setResults(tempArray); From 5b4e236f305e5210832ec7f660339f6af1f4d739 Mon Sep 17 00:00:00 2001 From: Mallepally Lokeshwar Reddy Date: Tue, 20 Aug 2024 18:32:38 +0530 Subject: [PATCH 4/6] chore: Update SearchResultsComponent to handle search queries and results --- .../Search/SearchResultsComponent.jsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx b/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx index d415f218..2b476c74 100644 --- a/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx +++ b/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx @@ -1,10 +1,27 @@ import Divider from "@mui/material/Divider"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useLocation } from "react-router-dom"; import TutorialCard from "../BaseTutorialsComponent/TutorialCard"; +import { searchFromTutorialsIndex } from "../../../../store/actions"; + +const SearchResultsComponent = ({ results: propResults }) => { + const [results, setResults] = useState([]); + const location = useLocation(); + + useEffect(() => { + const query = new URLSearchParams(location.search).get("query"); + 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); + } + }, [location.search, propResults]); -const SearchResultsComponent = ({ results }) => { return (
From 75ac95288ee5d7b2a4a74e4fe8d58fa8fad95672 Mon Sep 17 00:00:00 2001 From: Mallepally Lokeshwar Reddy Date: Tue, 20 Aug 2024 18:34:25 +0530 Subject: [PATCH 5/6] chore: Add `/search` route for handling search results and Implement search functionality in MainNavbar and MiniNavbar components --- .../NavBar/new/MainNavbar/index.jsx | 28 +++++++++++++++++-- .../NavBar/new/MiniNavbar/index.jsx | 19 ++++++++++++- src/routes.jsx | 2 ++ 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/src/components/NavBar/new/MainNavbar/index.jsx b/src/components/NavBar/new/MainNavbar/index.jsx index 2a41f64d..2ffb2acb 100644 --- a/src/components/NavBar/new/MainNavbar/index.jsx +++ b/src/components/NavBar/new/MainNavbar/index.jsx @@ -61,10 +61,21 @@ function MainNavbar() { const windowSize = useWindowSize(); const [openDrawer, setOpenDrawer] = useState(false); const [openMenu, setOpen] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); const toggleSlider = () => { setOpen(!openMenu); }; const notification = () => {}; + const handleSearchChange = e => { + setSearchQuery(e.target.value); + }; + const handleSearch = e => { + e.preventDefault(); + if (searchQuery.length > 0) { + history.push(`/search?query=${searchQuery}`); + } + }; + return (