feat: search logic and input added

Author: kunalkeshan

src/components/search/CourseResult.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CourseResult = () => {
+    return (
+        <div>CourseResult</div>
+    )
+}
+
+export default CourseResult

src/components/search/ExtraNotesResult.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ExtraNotesResult = () => {
+    return (
+        <div>ExtraNotesResult</div>
+    )
+}
+
+export default ExtraNotesResult

src/components/search/SemResult.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SemResult = () => {
+    return (
+        <div>SemResult</div>
+    )
+}
+
+export default SemResult

src/pages/Search.jsx

@@ -4,24 +4,96 @@
 
 // Dependencies
 import React, { useEffect, useState } from 'react';
-import { useLocation, useSearchParams, } from 'react-router-dom';
+import { useSearchParams, } from 'react-router-dom';
 import Data from '../utils/data';
 
 // MUI
-import { Box, styled, Typography, Divider, TextField, Checkbox } from '@mui/material';
+import { Box, styled, Typography, Divider, TextField, Checkbox, Container, FormControlLabel, InputAdornment } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
 const Search = () => {
-    const [searchParams] = useSearchParams();
+    const [searchParams, setSearchParams] = useSearchParams();
     const [searchText, setSearchText] = useState(searchParams.get('q') || '');
-    const location = useLocation();
+    const [results, setResults] = useState([]);
+    const [filter, searchFilter] = useState([]);
 
-    useEffect(() => { }, [])
+    useEffect(() => {
+        const searchQuery = searchText.replace(/W+/g, '+');
+        searchParams.set('q', searchQuery)
+        setSearchParams(searchParams)
+    }, [searchText, searchParams, setSearchParams]);
+
+    useEffect(() => {
+        const filterQuery = filter.join(',').replace(/W+/g, '');
+        searchParams.set('filter', filterQuery)
+        setSearchParams(searchParams)
+    }, [filter, searchParams, setSearchParams]);
+
+    useEffect(() => {
+        const searchQuery = searchParams.get('q');
+        const filterQuery = searchParams.get('filter').split(",");
+        setSearchText(searchQuery.replace('+', ' '));
+        searchFilter(filterQuery);
+    }, [searchParams]);
+
+    useEffect(() => {
+        const handleSearchResources = async () => {
+            try {
+                let excluded = ['allSemesters', 'extraNotes'];
+                if (!filter.includes('allSemesters')) excluded.splice(excluded.indexOf('allSemesters', 1));
+                if (!filter.includes('extraNotes')) excluded.splice(excluded.indexOf('extraNotes', 1));
+                const data = await Data.All.searchAllNotes(searchText, { excludes: excluded });
+                setResults(data);
+            } catch (error) {
+                setResults([]);
+            }
+        }
+        if (searchText.length !== 0) handleSearchResources();
+    }, [searchText, filter]);
+
+    const handleSearchInput = (e) => {
+        setSearchText(e.target.value);
+    }
+
+    const handleFilter = (field) => (e) => {
+        if (e.target.checked) searchFilter((prev) => prev.concat(field))
+        else searchFilter((prev) => prev.filter(val => val !== field))
+    }
+
+    const handleClearSearch = () => {
+        setSearchText('');
+        searchFilter([]);
+        setResults([]);
+    }
 
     return (
         <Main>
             <Typography variant='h1' fontSize='4rem'>Search</Typography>
             <Divider />
+            <Container sx={{ display: 'flex', flexDirection: 'column', }}>
+                <TextField
+                    type='text'
+                    label='Search resources'
+                    placeholder='Type to search relevant notes'
+                    onChange={handleSearchInput}
+                    value={searchText}
+                    fullWidth
+                    variant='filled'
+                    sx={{ my: 2, mx: 'auto', width: '80%' }}
+                    InputProps={{
+                        endAdornment: (<InputAdornment position='end'>
+                            <SearchIcon />
+                        </InputAdornment>)
+                    }}
+
+                />
+                <Box sx={{ mb: 2, mx: 'auto', width: '80%' }}>
+                    <Typography>Search With:</Typography>
+                    <FormControlLabel control={<Checkbox onChange={handleFilter('allSemesters')} />} label='Semesters' />
+                    <FormControlLabel control={<Checkbox onChange={handleFilter('extraNotes')} />} label='Extra Notes' />
+                    {searchText.length > 0 && <Typography variant='caption' onClick={handleClearSearch} sx={{ color: 'red', textDecoration: 'underline', cursor: 'pointer' }}>Clear Search</Typography>}
+                </Box>
+            </Container>
         </Main>
     )
 }

src/utils/data.js

@@ -181,12 +181,3 @@ class Data {
 }
 
 export default Data;
-
-(async () => {
-    try {
-        const results = await Data.All.searchAllNotes('sem', {});
-        console.log(results)
-    } catch (error) {
-        console.log(error);
-    }
-})();