feat: search page functionality

Author: kunalkeshan

src/components/search/CourseResult.jsx

@@ -1,9 +1,36 @@
-import React from 'react'
+/**
+ * Single Course - Search Result Component
+ */
 
-const CourseResult = () => {
+// Dependencies
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Paper, styled, Typography, Grid } from '@mui/material';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const CourseResult = ({ name, subjectCode, belongsTo }) => {
+    const navigate = useNavigate();
+
+    const handleNavigate = () => {
+        navigate(`/notes/${belongsTo}`);
+    }
     return (
-        <div>CourseResult</div>
+        <Grid item xs={12} onClick={handleNavigate}>
+            <Main>
+                <Typography variant='h6' noWrap>{name} - {subjectCode}</Typography>
+                <LaunchIcon />
+            </Main>
+        </Grid>
     )
 }
 
+const Main = styled(Paper)({
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0.25em 0.75em',
+})
+
 export default CourseResult

src/components/search/ExtraNotesResult.jsx

@@ -1,9 +1,41 @@
-import React from 'react'
+/**
+ * Extra - Search Result Component
+ */
+
+// Dependencies
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Paper, styled, Typography, Grid, Box } from '@mui/material';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const ExtraNotesResult = ({ title, name }) => {
+
+    const navigate = useNavigate();
+
+    const handleNavigate = () => {
+        navigate('/extra');
+    }
 
-const ExtraNotesResult = () => {
     return (
-        <div>ExtraNotesResult</div>
+        <Grid item xs={12} onClick={handleNavigate}>
+            <Main>
+                <Box>
+                    <Typography variant='h6' noWrap>{title}</Typography>
+                    <Typography variant='caption'>by {name}</Typography>
+                </Box>
+                <LaunchIcon />
+            </Main>
+        </Grid>
     )
 }
 
+const Main = styled(Paper)({
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0.25em 0.75em',
+})
+
 export default ExtraNotesResult

src/components/search/SemResult.jsx

@@ -1,9 +1,39 @@
-import React from 'react'
+/**
+ * All Semesters - Search Result Component
+ */
+
+// Dependencies
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Paper, styled, Typography, Grid } from '@mui/material';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+const SemResult = ({ name }) => {
+    const navigate = useNavigate();
+
+    const handleNavigate = () => {
+        const semUrl = name.toLowerCase().replace(' ', '-');
+        const navUrl = `/notes/${semUrl}`;
+        navigate(navUrl);
+    }
 
-const SemResult = () => {
     return (
-        <div>SemResult</div>
+        <Grid item xs={12}>
+            <Main elevation={3} onClick={handleNavigate}>
+                <Typography variant='h6' noWrap>{name}</Typography>
+                <LaunchIcon />
+            </Main>
+        </Grid>
     )
 }
 
-export default SemResult
+const Main = styled(Paper)({
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0.25em 0.75em',
+})
+
+export default SemResult;

src/pages/Search.jsx

@@ -8,9 +8,13 @@ import { useSearchParams, } from 'react-router-dom';
 import Data from '../utils/data';
 
 // MUI
-import { Box, styled, Typography, Divider, TextField, Checkbox, Container, FormControlLabel, InputAdornment } from '@mui/material';
+import { Box, styled, Typography, Divider, TextField, Checkbox, Container, FormControlLabel, InputAdornment, Grid } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
+import SemResult from '../components/search/SemResult';
+import ExtraNotesResult from '../components/search/ExtraNotesResult';
+import CourseResult from '../components/search/CourseResult';
+
 const Search = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const [searchText, setSearchText] = useState(searchParams.get('q') || '');
@@ -51,6 +55,8 @@ const Search = () => {
         if (searchText.length !== 0) handleSearchResources();
     }, [searchText, filter]);
 
+    console.log(results)
+
     const handleSearchInput = (e) => {
         setSearchText(e.target.value);
     }
@@ -93,6 +99,18 @@ const Search = () => {
                     <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>
+
+                <Grid container spacing={1} gap={1}>
+                    {results.length > 0 ? results.map((result, index) => {
+                        if (result.for === 'allSemesters') {
+                            return <SemResult {...result} key={index} />
+                        } else if (result.for === 'extraNotes') {
+                            return <ExtraNotesResult {...result} key={index} />
+                        } else if (result.for === 'course') {
+                            return <CourseResult {...result} key={index} />
+                        } else return null;
+                    }) : null}
+                </Grid>
             </Container>
         </Main>
     )

src/utils/data.js

@@ -169,7 +169,11 @@ class Data {
                             searchRegEx.test(note.name) || searchRegEx.test(note.subjectCode)
                         )
                     });
-                    temp.forEach((note) => note.for = 'extraNotes')
+                    const belongsTo = 'semester-' + key.split('semester').pop();
+                    temp.forEach((note) => {
+                        note.for = 'course';
+                        note.belongsTo = belongsTo;
+                    })
                     results.push(...temp);
                 }
             })