remove PublicFeed component

src/App.jsx

@@ -11,7 +11,6 @@ import { Container } from '@mui/material';
 
 // Pages & Components
 import SignIn from './components/SignIn/SignIn';
-import PublicFeed from './components/PublicFeed/PublicFeed';
 import Feed from './components/Feed/Feed';
 import Submission from './components/Submission/Submission';
 import Account from './components/Account/Account';
@@ -50,14 +49,10 @@ function App() {
               }
             />
           ) : (
-            <Route path="/" element={<Feed />} />
+            <Route path="/" element={<Feed friends={friends} />} />
           )}
 
           {/* Protected routes => must be logged in or dev */}
-          <Route
-            path="/public"
-            element={isAuthenticated ? <PublicFeed /> : <Navigate to="/" />}
-          />
           <Route
             path="/feed"
             element={isAuthenticated ? <Feed /> : <Navigate to="/" />}

src/components/Feed/Feed.jsx

@@ -2,30 +2,16 @@ 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';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import { Link } from "react-router-dom";
 import { Container, Box, Stack } from '@mui/material';
 import { collection, getDocs } from "firebase/firestore"; 
 import {db} from "../../utilities/firebase";
 import "./Feed.css";
 import AppBar from '../AppBar/AppBar';
 
-const fake_post = {
-    id: 1, // automatically assigned
-    title: "I LOVE CS394",
-    course_name: "CS 394",
-    username: "john12nu", // no need to fill this out in the submission form
-    quarter: "Fall 2024",
-    body: "I had such an amazing time taking CS394. Highly recommend!",
-    rating: "5",
-    professor: "Prof. Riesbeck",
-    date: "January 10th, 2024", // use JS object to retrieve the date posted
-};
-
 async function getPostsFromDB() {
   // get all the posts from the database
   const querySnapshot = await getDocs(collection(db, "posts"));
@@ -38,10 +24,10 @@ async function getPostsFromDB() {
 
 const fake_friends = ["Alice", "Bob", "Charlie", "David"];
 
-function Feed() {
+function Feed({friends}) {
   const [posts, setPosts] = useState([]);
   const [search, setSearch] = useState();
-  const [filteredposts, setFilteredposts] = useState([]);
+  const [filteredPosts, setFilteredPosts] = useState([]);
 
   // useEffect runs every time the component is rendered
   useEffect(() => {
@@ -62,34 +48,42 @@ function Feed() {
   // 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)))
+      setFilteredPosts(posts.filter(post => post.course_name.toLowerCase().includes(search)))
     }
     else {
-      setFilteredposts(posts) // retrieve all if the search bar isn't being used
+      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) => {
-      setValue(newValue);
-    };
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+
+    if (newValue === 0) {
+      // public
+      setFilteredPosts(posts);
+    } else {
+      // friends
+      setFilteredPosts(posts.filter(post => friends.includes(post.username)));
+    }
+  };
 
   console.log(posts[0]);
   return (
     <div>
       <AppBar />
         <Tabs className="friends-public-switch" value={value} onChange={handleChange} centered>
-          <Tab label="Friends" icon={<PeopleIcon />} component={Link} to="/feed" />
-          <Tab label="Public" icon={<PublicIcon />} component={Link} to="/public" />
+          <Tab label="Public" icon={<PublicIcon />} />
+          <Tab label="Friends" icon={<PeopleIcon />} />
         </Tabs>
         <Container className="feed-content" maxWidth="sm">
         <CourseSelect searchFunc={setSearch} />
           <Box paddingBottom="30px">
             <Stack spacing={3}>
-                { filteredposts.length === 0 ?
+                {filteredPosts.length === 0 ?
                   (<p>No results found...</p>) :
-                    (filteredposts
+                    (filteredPosts
                       .slice()
                       .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
                       <div key={post.id}>