From c36e1beef939bb8844ce014704418b9c16f749e8 Mon Sep 17 00:00:00 2001 From: Frank-Gu-81 Date: Mon, 13 Jan 2025 12:06:39 -0600 Subject: [PATCH] updated routing, added Account and Submission page template --- src/App.jsx | 6 ++ src/components/Account/Account.jsx | 11 +++ src/components/Feed/Feed.jsx | 14 +++- src/components/Submission.jsx | 75 --------------------- src/components/Submission/Submission.jsx | 85 ++++++++++++++++++++++++ 5 files changed, 114 insertions(+), 77 deletions(-) create mode 100644 src/components/Account/Account.jsx delete mode 100644 src/components/Submission.jsx create mode 100644 src/components/Submission/Submission.jsx diff --git a/src/App.jsx b/src/App.jsx index e95d786..542c0f0 100644 --- a/src/App.jsx +++ b/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 */} : } /> + + : } /> + + : } /> ); diff --git a/src/components/Account/Account.jsx b/src/components/Account/Account.jsx new file mode 100644 index 0000000..823f9a5 --- /dev/null +++ b/src/components/Account/Account.jsx @@ -0,0 +1,11 @@ +function Account () { + return ( +
+

Account

+

Feature not implemented yet...

+

Here is where you can view and edit your account information.

+
+ ) +} + +export default Account; \ No newline at end of file diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx index ce79734..fe5153f 100644 --- a/src/components/Feed/Feed.jsx +++ b/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"); + } }} > } /> - } /> + } /> } /> diff --git a/src/components/Submission.jsx b/src/components/Submission.jsx deleted file mode 100644 index 43fe674..0000000 --- a/src/components/Submission.jsx +++ /dev/null @@ -1,75 +0,0 @@ -// 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 '/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 -
- - - - - - - -
- ) - }; - - export default Submission; \ No newline at end of file diff --git a/src/components/Submission/Submission.jsx b/src/components/Submission/Submission.jsx new file mode 100644 index 0000000..7b07c8a --- /dev/null +++ b/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 +//
+// +// +// +// +// +// +// +//
+// ) +// }; + +function Submission () { + return ( +
+

Submission

+

Feature not implemented yet...

+

Here is where you can submit a review.

+
+ ) +} + +export default Submission; \ No newline at end of file