chore: Add /search route for handling search results and Implement …

…search functionality in MainNavbar and MiniNavbar components
c2siorg · Aug 20, 2024 · 75ac952 · 75ac952
1 parent 5b4e236
commit 75ac952
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git 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 (
     <Headroom>
       <nav
@@ -105,17 +116,28 @@ function MainNavbar() {
             </Grid>
           </Grid>
           <Grid item xs={12} md={5}>
-            <Paper component={"form"} className={classes.root} elevation={0}>
+            <Paper
+              component={"form"}
+              className={classes.root}
+              elevation={0}
+              onSubmit={handleSearch}
+            >
               <IconButton
-                type="submit"
+                type="button"
                 aria-label="search"
                 disableRipple
                 className={classes.icon}
                 data-testid="navbarSearch"
+                onClick={handleSearch}
               >
                 <SearchIcon />
               </IconButton>
-              <InputBase className={classes.input} placeholder="Search..." />
+              <InputBase
+                className={classes.input}
+                value={searchQuery}
+                placeholder="Search..."
+                onChange={handleSearchChange}
+              />
             </Paper>
           </Grid>
           <Grid

diff --git a/src/components/NavBar/new/MiniNavbar/index.jsx b/src/components/NavBar/new/MiniNavbar/index.jsx
@@ -17,6 +17,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import CloseIcon from "@mui/icons-material/Close";
 import SideBar from "../../../SideBar";
 import useWindowSize from "../../../../helpers/customHooks/useWindowSize";
+import { useDispatch } from "react-redux";
+import { searchFromTutorialsIndex } from "../../../../store/actions";
 
 const useStyles = makeStyles(theme => ({
   input: {
@@ -66,6 +68,7 @@ function MiniNavbar() {
   const classes = useStyles();
 
   const history = useHistory();
+  const dispatch = useDispatch();
   const notification = () => {};
   const [openDrawer, setOpenDrawer] = React.useState(false);
   const [openMenu, setOpen] = useState(false);
@@ -95,6 +98,17 @@ function MiniNavbar() {
     });
   };
 
+  const [searchQuery, setSearchQuery] = useState("");
+  const handleSearchChange = e => {
+    setSearchQuery(e.target.value);
+  };
+  const handleSearch = () => {
+    if (searchQuery.length > 0) {
+      dispatch(searchFromTutorialsIndex(searchQuery));
+      history.push(`/search?query=${searchQuery}`);
+    }
+  };
+
   useEffect(() => {
     window.addEventListener("resize", setDimension);
 
@@ -145,11 +159,12 @@ function MiniNavbar() {
             <Grid style={{ display: "inline-block" }} item xs={12} md={4}>
               <Paper component={"form"} className={classes.root} elevation={0}>
                 <IconButton
-                  type="submit"
+                  type="button"
                   aria-label="search"
                   disableRipple
                   className={classes.icon}
                   data-testid="navbarSearch"
+                  onClick={handleSearch}
                 >
                   <SearchIcon />
                 </IconButton>
@@ -164,6 +179,8 @@ function MiniNavbar() {
                   }}
                   className={classes.input}
                   placeholder="Search..."
+                  value={searchQuery}
+                  onChange={handleSearchChange}
                 />
               </Paper>
             </Grid>

diff --git a/src/routes.jsx b/src/routes.jsx
@@ -27,6 +27,7 @@ import MainNavbar from "./components/NavBar/new/MainNavbar";
 import UserDashboard from "./components/UserDashboard";
 import TutorialPage from "./components/TutorialPage";
 import Notification from "./components/Notification";
+import SearchResultsComponent from "./components/Tutorials/MyTutorials/Search/SearchResultsComponent";
 
 const AuthIsLoaded = ({ children }) => {
   const profile = useSelector(({ firebase: { profile } }) => profile);
@@ -157,6 +158,7 @@ const Routes = () => {
             path={"/tutorial/:id"}
             component={UserIsAllowedUserDashboard(TutorialPage)}
           />
+          <Route exact path={"/search"} component={SearchResultsComponent} />
           <Route
             exact
             path={"/editor"}