allow anonymous posts

394-w25 · Jan 21, 2025 · 156914a · 156914a
1 parent 4b9e7d5
commit 156914a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/src/components/Post/Post.jsx b/src/components/Post/Post.jsx
@@ -64,7 +64,7 @@ function Post({ post, friends }) {
 
           <div className="user-rating-section">
             <Typography variant="body2" className="user-rating-label">
-              <strong>{post.username}</strong> rated this course
+              <strong>{post.anonymous ? "Anonymous" : post.username}</strong> rated this course
             </Typography>
             <div className="user-star-icons">
               {renderUserStars(post.rating ?? 0)}
@@ -75,7 +75,7 @@ function Post({ post, friends }) {
             {post.title}
           </Typography>
           <Typography variant="body2" className="post-subheader">
-            Posted by <strong>{post.username}</strong> on {post.date.toDate().toDateString()}
+            Posted by <strong>{post.anonymous ? "Anonymous" : post.username}</strong> on {post.date.toDate().toDateString()}
           </Typography>
           <Typography variant="body1" className="post-body">
             {post.body}

diff --git a/src/components/Submission/Submission.css b/src/components/Submission/Submission.css
@@ -1,7 +1,7 @@
 .submission-content {
     height: calc(100vh - 56px - 64px);
     margin-top: 6rem;
-    margin-bottom: 6rem;
+    margin-bottom: 10rem;
 }
 
 #rating {
@@ -12,4 +12,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+
+.anonymous-button {
+    background-color: purple;
+}
+
+.anonymous-buttons {
+    display: flex !important;
+    justify-content: center;
 }
diff --git a/src/components/Submission/Submission.jsx b/src/components/Submission/Submission.jsx
@@ -1,13 +1,9 @@
 import React from 'react';
-import { Stack, Button, Alert, Container, TextField, Rating, Typography } from '@mui/material';
+import { Stack, Button, Alert, Container, TextField, Rating, Typography, Tab, Tabs, InputLabel, MenuItem, FormControl, Select } from '@mui/material';
 import NavigationBar from '../NavigationBar/NavigationBar';
 import AppBar from '../AppBar/AppBar';
 import "./Submission.css";
 import { useNavigate } from "react-router-dom";
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
 
 // Firebase
 // Source: How to add/set documents. https://firebase.google.com/docs/firestore/manage-data/add-data
@@ -27,6 +23,8 @@ function Submission({ userName }) {
   const [rating, setRating] = React.useState(0);
   const [professor, setProfessor] = React.useState("");
   const [fillInFields, setFillInFields] = React.useState(false);
+  const [selectedButton, setSelectedButton] = React.useState(""); // Default to "Show Name"
+
 
   async function handleSubmit() {
     try {
@@ -39,10 +37,11 @@ function Submission({ userName }) {
         rating: rating,
         professor: professor,
         username: userName.displayName,
-        date: new Date()
+        date: new Date(),
+        anonymous: selectedButton === 'anonymous' ? true : false
       };
 
-      if (!title || !course || !body || !professor || !rating) {
+      if (!title || !course || !body || !professor || !rating || !selectedButton ) {
         setFillInFields(true);
       } else {
         await addDoc(collectionRef, post);
@@ -55,6 +54,12 @@ function Submission({ userName }) {
     }
   }
 
+  const handleButtonClick = (buttonType) => {
+    setSelectedButton(buttonType);
+    // Save the data or handle side effects here
+    console.log(`Selected: ${buttonType}`);
+  };
+
   return (
 
     <div>
@@ -106,6 +111,20 @@ function Submission({ userName }) {
             <Typography variant="h6" component="legend">Course Rating</Typography>
             <Rating id="rating" name="half-rating" size="large" defaultValue={0} precision={0.5} onChange={(_, newValue) => setRating(newValue)} />
           </div>
+          <div className="anonymous-buttons">
+            <Button
+              variant={selectedButton === 'showName' ? 'contained' : 'outlined'}
+              onClick={() => handleButtonClick('showName')}
+            >
+              Show Name
+            </Button>
+            <Button
+              variant={selectedButton === 'anonymous' ? 'contained' : 'outlined'}
+              onClick={() => handleButtonClick('anonymous')}
+            >
+              Anonymous
+            </Button>
+          </div>
           {(fillInFields) ? <Alert variant="filled" severity="warning">Fill in all the fields before submitting.</Alert> : null}
           <Button variant="contained" onClick={handleSubmit} >Submit</Button>
         </Stack>