search bar for feed

src/components/CourseSelect/CourseSelect.css

@@ -0,0 +1,11 @@
+.search-bar {
+    background-color: 	#f5f5f5 !important;
+    opacity: 1;
+    z-index: 10; /* Makes it on top of everything else*/
+    position: sticky;
+    top: 10px; /* creates separation between top of screen*/
+    width: 100%;
+    padding: 2px 4px;
+    display: flex;
+    align-items: center;
+}

src/components/CourseSelect/CourseSelect.jsx

@@ -1,37 +1,36 @@
 import React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import InputBase from '@mui/material/InputBase';
+import "./CourseSelect.css";
 
+// tips for building a search bar: https://dev.to/salehmubashar/search-bar-in-react-js-545l
 
+// Source: https://samhalll.medium.com/implementing-a-search-bar-feature-in-react-10739d594f79
+// this explains how to pass props to a search bar comp
 
-function CourseSelect() {
-    const [course, setCourse] = React.useState('All'); // change to 'All' later
-
-    const handleChange = (event) => {
-        setCourse(event.target.value);
-        console.log(event.target.value);
-    };
+function CourseSelect( {searchFunc} ) {
+
+    function onType(e) {
+        // console.log(e.target.value.toLowerCase());
+        searchFunc(e.target.value.toLowerCase());
+    }
 
     return (
-        <div>
-            <FormControl fullWidth>
-                <InputLabel id="demo-simple-select-label">Course Filter</InputLabel>
-                <Select
-                labelId="demo-simple-select-label"
-                id="demo-simple-select"
-                value={course}
-                label="Course Filter"
-                onChange={handleChange}
-                >
-                <MenuItem value={"All"}>All</MenuItem>
-                <MenuItem value={10}>Ten</MenuItem>
-                <MenuItem value={20}>Twenty</MenuItem>
-                <MenuItem value={30}>Thirty</MenuItem>
-                </Select>
-            </FormControl>
-        </div>
+        <Paper
+        className="search-bar"
+        >
+            <InputBase
+                sx={{ ml: 1, flex: 1 }}
+                placeholder="Search by Course Name"
+                inputProps={{ 'aria-label': 'search by course' }}
+                onChange={onType}
+            />
+            <IconButton sx={{ p: '10px', pointerEvents: 'none' }} aria-label="search">
+                <SearchIcon />
+            </IconButton>
+        </Paper>
     );
   }
 

src/components/Feed/Feed.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Post from '../Post/Post';
 import NavigationBar from '../NavigationBar/NavigationBar';
+import CourseSelect from '../CourseSelect/CourseSelect';
 import RestoreIcon from '@mui/icons-material/Restore';
 import PeopleIcon from '@mui/icons-material/People';
 import PublicIcon from '@mui/icons-material/Public';
@@ -39,6 +40,9 @@ const fake_friends = ["Alice", "Bob", "Charlie", "David"];
 
 function Feed() {
   const [posts, setPosts] = useState([]);
+  const [search, setSearch] = useState();
+  const [filteredposts, setFilteredposts] = useState([]);
+
   // useEffect runs every time the component is rendered
   useEffect(() => {
     // wait for all posts from database to be fetched
@@ -53,6 +57,18 @@ function Feed() {
     fetchPosts();
   }, []);
 
+  // Source: https://www.freecodecamp.org/news/filter-arrays-in-javascript/
+  // How to filter an array by search term ^
+  // https://www.geeksforgeeks.org/how-to-build-a-search-filter-using-react-hooks/
+  useEffect(() => {
+    if (search) { // if there's something in the search bar
+      setFilteredposts(posts.filter(post => post.course_name.toLowerCase().includes(search)))
+    }
+    else {
+      setFilteredposts(posts) // retrieve all if the search bar isn't being used
+    }
+  }, [search, posts]); // must define the states that cause re-rendering
+
     const [value, setValue] = React.useState(0);
 
     const handleChange = (event, newValue) => {
@@ -67,12 +83,13 @@ function Feed() {
         <Tab label="Friends" icon={<PeopleIcon />} component={Link} to="/feed" />
         <Tab label="Public" icon={<PublicIcon />} component={Link} to="/public" />
       </Tabs>
+      <CourseSelect searchFunc={setSearch} />
       <Container maxWidth="sm">
         <Box paddingBottom="30px">
           <Stack spacing={3}>
-              { posts.length === 0 ?
-                (<p>Loading posts...</p>) :
-                  (posts
+              { filteredposts.length === 0 ?
+                (<p>No results found...</p>) :
+                  (filteredposts
                     .slice()
                     .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
                     <div key={post.id}>