Skip to content

Commit

Permalink
Merge pull request #3 from 394-w25/account-updated
Browse files Browse the repository at this point in the history
finished?
  • Loading branch information
Frank-Gu-81 authored Jan 14, 2025
2 parents 4fc1970 + 6ccf140 commit 03c3f29
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 20 deletions.
2 changes: 2 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Submission from './components/Submission/Submission';
import Account from './components/Account/Account';
import { Container } from '@mui/material';
import SearchPage from './components/SearchPage/SearchPage';
import RatingHistory from './components/RatingHistory/RatingHistory';

const App = () => {
// react hook to keep track of the user's authentication status
Expand All @@ -34,6 +35,7 @@ const App = () => {
<Route path="/submission" element={user ? <Submission userName={user}/> : <Navigate to="/" />} />
<Route path="/search" element={user ? <SearchPage /> : <Navigate to="/" />} />
<Route path="/account" element={user ? <Account userName={user} userEmail={userEmail}/> : <Navigate to="/" />} />
<Route path="/rating-history" element={user ? <RatingHistory userName={user} /> : <Navigate to="/" />} />
</Routes>
</Router>
</Container>
Expand Down
79 changes: 59 additions & 20 deletions src/components/Account/Account.jsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,59 @@
import React from 'react';
import { Box, Container, Typography, Button, Switch, Divider, Card, CardContent, IconButton } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import NavigationBar from '../NavigationBar/NavigationBar';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import AppBar from '../AppBar/AppBar';
import React, { useState, useEffect } from 'react';
import Post from '../Post/Post';
import { collection, getDocs } from "firebase/firestore";
import {db} from "../../utilities/firebase";
import { useNavigate } from 'react-router-dom';



function Account({ userName, userEmail }) {
const navigate = useNavigate();

// const [filteredPost, setFilteredPost] = useState([]);

// async function getPostsFromDB() {
// try {
// const querySnapshot = await getDocs(collection(db, "posts"));
// const posts = [];
// querySnapshot.forEach((doc) => {
// // console.log("doc status before pushing: ", doc.data());
// // console.log("username: ", doc.data().username);
// // console.log("displayName: ", userName.displayName);
// if (doc.data().username === userName?.displayName){
// posts.push({ id: doc.id, ...doc.data() });
// }
// });
// //const filteredPosts = posts.filter(post => post.username === userName?.displayName);
// return posts;
// } catch (error) {
// console.log("Error: ", error);
// }

// }

// useEffect(() => {
// async function fetchPosts() {
// try {
// const fetchedPosts = await getPostsFromDB();
// setFilteredPost(fetchedPosts);
// console.log("Filtered posts: ", fetchedPosts);
// } catch (error) {
// console.error("Error fetching posts: ", error);
// }
// }
// fetchPosts();
// }, [userName]); // Add userName as a dependency


function Account({userName, userEmail}) {
return (
<div>
<AppBar />
<Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
{/* Title */}
<Typography variant="h4" style={{ fontWeight: 'bold', marginBottom: '10px' }}>
Course Buddy
</Typography>

{/* Profile Icon */}
<Box
style={{
Expand All @@ -25,18 +65,18 @@ function Account({userName, userEmail}) {
marginBottom: '20px',
}}
>

<AccountCircleIcon className="account-icon" style={{width: '80px', height: '80px'}} />
</Box>

{/* Stats */}
<Box style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '20px' }}>
<Card style={{ width: '45%' }}>
<Card style={{ width: '45%', backgroundColor:'#BCBCBC' }}>
<CardContent>
<Typography variant="h6">Classes Rated</Typography>
<Typography variant="h5" style={{ fontWeight: 'bold' }}>20</Typography>
</CardContent>
</Card>
<Card style={{ width: '45%' }}>
<Card style={{ width: '45%', backgroundColor:'#BCBCBC' }}>
<CardContent>
<Typography variant="h6">Friends</Typography>
<Typography variant="h5" style={{ fontWeight: 'bold' }}>87</Typography>
Expand All @@ -45,15 +85,12 @@ function Account({userName, userEmail}) {
</Box>

{/* Account Details */}
<Box style={{ marginBottom: '20px', textAlign: 'left' }}>
<Box style={{ marginBottom: '20px', textAlign: 'left', width: '120%', justifyContent: 'center', alignItems: 'center', marginLeft: '-30px' }}>
<Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#2196f3', color: 'white', padding: '10px', borderRadius: '5px' }}>
{userName?.displayName || "Unknown User"}
{"Name: "}{userName?.displayName || "Unknown User"}
</Typography>
<Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#4caf50', color: 'white', padding: '10px', borderRadius: '5px', marginTop: '10px' }}>
{userEmail || "No email available"}
</Typography>
<Typography variant="body1" style={{ fontWeight: 'bold', backgroundColor: '#f44336', color: 'white', padding: '10px', borderRadius: '5px', marginTop: '10px' }}>
Major: Computer Science
{"Email: "}{userEmail || "No email available"}
</Typography>
</Box>

Expand All @@ -63,19 +100,21 @@ function Account({userName, userEmail}) {
<Button
variant="outlined"
endIcon={<EditIcon />}
onClick={() => navigate('/rating-history')}
style={{ marginBottom: '10px', width: '100%' }}
>
>
View Rating History
</Button>
</Button >
<Button
variant="outlined"
endIcon={<EditIcon />}
style={{ marginBottom: '10px', width: '100%' }}
>
View Friend Activity
</Button>

</Box>
<Divider style={{ margin: '20px 0' }} />
<Divider style={{ margin: '30px 0' }} />

{/* Privacy Settings */}
<Box style={{ textAlign: 'left' }}>
Expand All @@ -87,7 +126,7 @@ function Account({userName, userEmail}) {
color="error"
style={{ marginTop: '20px', width: '100%', marginBottom: '20px' }}
>
Delete Account
Sign Out
</Button>
</Box>
</Container>
Expand Down
92 changes: 92 additions & 0 deletions src/components/RatingHistory/RatingHistory.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import Post from '../Post/Post';
import { collection, getDocs } from "firebase/firestore";
import { db } from "../../utilities/firebase";
import { useState, useEffect } from 'react';
import { Container, Box, Stack } from '@mui/material';
import AppBar from '../AppBar/AppBar';
import NavigationBar from '../NavigationBar/NavigationBar';


function RatingHistory({ userName }) {
const [filteredPost, setFilteredPost] = useState([]);

const fake_friends = ["Alice", "Bob", "Charlie", "David"];

async function getPostsFromDB() {
try {
const querySnapshot = await getDocs(collection(db, "posts"));
const posts = [];
querySnapshot.forEach((doc) => {
// console.log("doc status before pushing: ", doc.data());
// console.log("username: ", doc.data().username);
// console.log("displayName: ", userName.displayName);
if (doc.data().username === userName?.displayName){
posts.push({ id: doc.id, ...doc.data() });
}
});
//const filteredPosts = posts.filter(post => post.username === userName?.displayName);
return posts;
} catch (error) {
console.log("Error: ", error);
}

}

useEffect(() => {
async function fetchPosts() {
try {
const fetchedPosts = await getPostsFromDB();
setFilteredPost(fetchedPosts);
console.log("Filtered posts: ", fetchedPosts);
} catch (error) {
console.error("Error fetching posts: ", error);
}
}
fetchPosts();
}, [userName]); // Add userName as a dependency

return (
<div>
<AppBar />
<Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
{/* Profile Icon */}
<Box
style={{
width: '80px',
height: '80px',
borderRadius: '50%',
backgroundColor: '#e0e0e0',
display: 'inline-block',
marginBottom: '20px',
}}
>
{/* Profile Name */}
<h1>{userName.displayName}</h1>
{/* Profile Email */}
<p>{userName.email}</p>
</Box>
</Container>

<Container maxWidth="sm">
<Box paddingBottom="30px">
<Stack spacing={3}>
{ filteredPost.length === 0 ?
(<p>Loading posts...</p>) :
(filteredPost
.slice()
.sort((a, b) => b.date.seconds - a.date.seconds).map((post) =>
<div key={post.id}>
<Post post={post} friends={fake_friends} />
</div>)
)
}
</Stack>
</Box>
</Container>
<NavigationBar />
</div>
)

}

export default RatingHistory;

0 comments on commit 03c3f29

Please sign in to comment.