updated routing, added Account and Submission page template

src/App.jsx

@@ -8,6 +8,8 @@ import {
 } from "react-router-dom";
 import Feed from './components/Feed/Feed';
 import SignIn from './components/SignIn/SignIn';
+import Submission from './components/Submission/Submission';
+import Account from './components/Account/Account';
 
 const App = () => {
   // react hook to keep track of the user's authentication status
@@ -25,6 +27,10 @@ const App = () => {
         {/* comment the following line during development */}
         {/* logic to protect from seeing feed without logging in */}
         <Route path="/feed" element={user ? <Feed /> : <Navigate to="/" />} />
+
+        <Route path="/submission" element={user ? <Submission /> : <Navigate to="/" />} />
+
+        <Route path="/account" element={user ? <Account /> : <Navigate to="/" />} />
       </Routes>
     </Router>
   );

src/components/Account/Account.jsx

@@ -0,0 +1,11 @@
+function Account () {
+    return (
+        <div>
+            <h1>Account</h1>
+            <p>Feature not implemented yet...</p>
+            <p>Here is where you can view and edit your account information.</p>
+        </div>
+    )
+}
+
+export default Account;

src/components/Feed/Feed.jsx

@@ -5,11 +5,13 @@ import Box from '@mui/material/Box';
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import RestoreIcon from '@mui/icons-material/Restore';
-import FavoriteIcon from '@mui/icons-material/Favorite';
+import PublishIcon from '@mui/icons-material/Publish';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { collection, getDocs } from "firebase/firestore"; 
 import "./Feed.css";
+import { useNavigate } from "react-router-dom";
 import {db} from "../../utilities/firebase";
+import { set } from 'firebase/database';
 
 const fake_post = {
     id: 1, // automatically assigned
@@ -36,6 +38,7 @@ async function getPostsFromDB() {
 const fake_friends = ["Alice", "Bob", "Charlie", "David"];
 
 function Feed() {
+  const navigate = useNavigate();
   const [posts, setPosts] = useState([]);
   const [value, setValue] = useState(0);
   // useEffect runs every time the component is rendered
@@ -73,10 +76,17 @@ function Feed() {
             value={value}
             onChange={(event, newValue) => {
               setValue(newValue);
+              if (newValue === 0) {
+                navigate("/feed");
+              } else if (newValue === 1) {
+                navigate("/submission");
+              } else {
+                navigate("/account");
+              }
             }}
           >
             <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
-            <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+            <BottomNavigationAction label="Post" icon={<PublishIcon />} />
             <BottomNavigationAction label="My Account" icon={<AccountCircleIcon />} />
           </BottomNavigation>
         </Box>

src/components/Submission/Submission.jsx

@@ -0,0 +1,85 @@
+// React and components
+import React from 'react';
+import Rating from '@mui/material/Rating';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+
+// Firebase
+// Source: How to add/set documents. https://firebase.google.com/docs/firestore/manage-data/add-data
+
+import { db } from '../../utilities/firebase';
+import { collection, addDoc } from "firebase/firestore";
+// Source: Also how to use FB with React. https://www.freecodecamp.org/news/how-to-use-the-firebase-database-in-react/
+
+// function Submission() {
+
+//     // May have to use useRef to pull values from the textfields: https://react.dev/reference/react/useRef
+//     const titleRef = useRef();
+//     const courseRef = useRef();
+//     const quarterRef = useRef();
+//     const bodyRef = useRef();
+//     const ratingRef = useRef();
+//     const professorRef = useRef();
+//     // now we can attach these references to the text boxes.
+
+
+//     // Source: React Handler. https://react.dev/learn/responding-to-events
+//     async function handleSubmit() {
+//         try {
+//             // Source: how to access current value of ref. https://react.dev/learn/referencing-values-with-refs
+//             // This function is called to retrieve the review fields when we click the 'Post' button
+//             const title_value = titleRef.current;
+//             const course_value = courseRef.current;
+//             const quarter_value = quarterRef.current;
+//             const body_value = bodyRef.current;
+//             const rating_value = ratingRef.current;
+//             const professor_value = professorRef.current;
+
+//             // now we need to push to Firebase
+//             const docRef = await addDoc(collection(db, "reviews"), {
+//                 title: title_value,
+//                 course: course_value,
+//                 quarter: quarter_value,
+//                 body: body_value,
+//                 rating: rating_value,
+//                 professor: professor_value,
+//                 date: new Date() // retrieves the current date. Will have to reformat for readability when pulling this data
+
+//                 // name: "Tokyo",
+//                 // country: "Japan"
+//             });
+//         } catch (e) {
+//             console.error("error:", e);
+//         }
+//     }
+//     return (
+//         // Here's how to add the references to the textfields: https://stackoverflow.com/questions/59647940/how-can-i-use-ref-in-textfield
+//       <div>
+//         <TextField inputRef={titleRef} id="outlined-basic" label="Title" variant="outlined" />
+//         <TextField inputRef={courseRef} id="outlined-basic" label="Course Name" variant="outlined" />
+//         <TextField inputRef={quarterRef} id="outlined-basic" label="Quarter" variant="outlined" />
+//         <TextField inputRef={professorRef} id="outlined-basic" label="Professor" variant="outlined" />
+//         <TextField 
+//           inputRef={bodyRef}
+//           id="outlined-multiline-flexible"
+//           label="Comment"
+//           multiline
+//           maxRows={6}
+//         />
+//         <Rating inputRef={ratingRef} name="half-rating" defaultValue={2.5} precision={0.5} />
+//         <Button onClick={handleSubmit} variant="text">Post</Button>
+//       </div>
+//     )
+//   };
+
+function Submission () {
+  return (
+    <div>
+      <h1>Submission</h1>
+      <p>Feature not implemented yet...</p>
+      <p>Here is where you can submit a review.</p>
+    </div>
+  )
+}
+
+export default Submission;