Commented frontend

Signed-off-by: Bennett-Wendorf <bennettwendorf@gmail.com>

frontend/src/App.js

@@ -26,6 +26,7 @@ const themeDependentContextStyle = (theme) => ({
 
 const toolbarStyle = (theme) => theme.mixins.toolbar
 
+// Generate the base page layout with the navdrawer
 const getBasePageLayout = (useNavElements, element) => {
     return (
         <Box sx={rootStyle}>

frontend/src/components/AppBar.js

@@ -92,6 +92,7 @@ const readMessageStyles = (theme) => ({
     color: theme.palette.text.disabled,
 })
 
+// Build the account menu component
 function AccountMenu() {
     const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
     const menuOpen = Boolean(menuAnchorEl);
@@ -171,8 +172,10 @@ function AccountMenu() {
     )
 }
 
+// Build the message component
 function Message({ message, updateMessages, setErrorSnackbarMessage, setIsErrorSnackbarOpen, setSelectedMessage, setIsMessageDetailsDialogOpen }) {
 
+    // Toggle if a message is read or unread
     const toggleMessageRead = () => {
         api.put(`api/messages/${message.MessageID}`)
             .then(() => {
@@ -227,6 +230,7 @@ function Message({ message, updateMessages, setErrorSnackbarMessage, setIsErrorS
     )
 }
 
+// Build the messages menu
 function MessagesMenu() {
     const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
     const menuOpen = Boolean(menuAnchorEl);
@@ -250,6 +254,7 @@ function MessagesMenu() {
         setMenuAnchorEl(null)
     }
 
+    // Delete the currently selected message
     const deleteSelectedMessage = () => {
         api.delete(`api/messages/${selectedMessage.MessageID}`)
             .then(() => {
@@ -268,6 +273,7 @@ function MessagesMenu() {
         setUnreadMessagesCount(messages.filter(m => !m.Read).length)
     }, [messages])
 
+    // Obtain an updated list of messages from the API
     const updateMessages = () => {
         api.get("/api/messages/me")
             .then((response) => {
@@ -334,6 +340,7 @@ function MessagesMenu() {
                 }
             </Menu>
 
+            {/* The message details dialog */}
             <Dialog open={isMessageDetailsDialogOpen} onClose={() => setIsMessageDetailsDialogOpen(false)} maxWidth={'xs'} fullWidth>
                 <DialogTitle>
                     Viewing Message
@@ -366,6 +373,7 @@ function MessagesMenu() {
                 </DialogActions>
             </Dialog>
 
+            {/* The delete confirmation dialog */}
             <Dialog open={isDeleteConfirmationDialogOpen} onClose={() => setIsDeleteConfirmationDialogOpen(false)}>
                 <DialogTitle>
                     Delete?
@@ -379,6 +387,7 @@ function MessagesMenu() {
                 </DialogActions>
             </Dialog>
 
+            {/* The error snackbar */}
             <Portal> {/* This shouldn't be needed, but it prevents the snackbar from rendering behind the nav drawer */}
                 <Snackbar open={isErrorSnackbarOpen} autoHideDuration={6000} onClose={() => setIsErrorSnackbarOpen(false)}>
                     <Alert onClose={() => setIsErrorSnackbarOpen(false)} severity="error" sx={{ width: '100%' }} variant="outlined">

frontend/src/components/Carousel/Carousel.js

@@ -7,7 +7,15 @@ import CarouselCard from "./CarouselCard"
 const drawerWidth = 220
 const eventListMargin = 40
 
+/**
+ * The card carousel component
+ * @param {Object} props 
+ */
 export default function Carousel({ events, eventClick, eventClickView }) {
+
+    /**
+     * A callback function that is used to add a wheel event listener to the image list
+     */
     const scrollRef = useCallback(node => {
         if (node !== null) {
             const onWheel = (e) => {
@@ -29,6 +37,7 @@ export default function Carousel({ events, eventClick, eventClickView }) {
 
     const [paperWidth, setPaperWidth] = useState(window.innerWidth - drawerWidth - eventListMargin)
 
+    // Update the paper width when the window is resized
     useEffect(() => {
         function handleWindowResize() {
             setPaperWidth(window.innerWidth - drawerWidth - eventListMargin)

frontend/src/components/Carousel/CarouselCard.js

@@ -51,6 +51,7 @@ const dividerStyles = {
     mb: 1.75
 }
 
+// A card component for the carousel
 export default function CarouselCard({ event, eventClick, eventClickView }) {
 
     const userIsAdmin = AuthService.useHasPermissions(["Administrator"])

frontend/src/components/Event/ModifyEventDialog.js

@@ -100,6 +100,7 @@ export default function ModifyEventDialog(props) {
         setModifyStates(selectedEvent)
     }, [selectedEvent])
 
+    // Set up pieces of state for modifying an event
     const setModifyStates = (event) => {
         setUpdateSummary(event.Summary ?? defaultUpdateSummary)
         setUpdateDescription(event.Description ?? defaultUpdateDescription)
@@ -159,6 +160,7 @@ export default function ModifyEventDialog(props) {
 
     const addRole = useUserStore(state => state.addRole)
 
+    // Handle adding a volunteer role to the user if they attempt to volunteer for an event without being a volunteer
     const handleAddVolunteerRole = () => {
         api.post('/api/users/role', {
             roles: ["Volunteer"]
@@ -177,6 +179,7 @@ export default function ModifyEventDialog(props) {
             })
     }
 
+    // Handle adding a donor role to the user if they attempt to donate to an event without being a donor
     const handleAddDonorRole = () => {
         api.post('/api/users/role', {
             roles: ["Donor"]
@@ -260,6 +263,7 @@ export default function ModifyEventDialog(props) {
         }
     }
 
+    // Complete the volunteer process
     const completeVolunteer = async () => {
         await api.post(`/api/events/${selectedEvent.EventID}/volunteer`)
             .then(response => {
@@ -273,6 +277,7 @@ export default function ModifyEventDialog(props) {
             })
     }
 
+    // Handle canceling a volunteer slot
     const handleCancelVolunteer = () => {
         api.delete(`/api/events/${selectedEvent.EventID}/volunteer`)
             .then(response => {
@@ -298,6 +303,7 @@ export default function ModifyEventDialog(props) {
         }
     }
 
+    // Complete the donation process
     const completeDonate = async () => {
         let newDonation = {
             amount: donationAmount
@@ -315,6 +321,7 @@ export default function ModifyEventDialog(props) {
             })
     }
 
+    // Update the list of donations for the selected event
     const updateEventDonations = async (event) => {
         return api.get(`/api/events/${event.EventID}/donations`)
             .then(response => {
@@ -846,6 +853,7 @@ export default function ModifyEventDialog(props) {
                 </DialogActions>
             </Dialog >
 
+            {/* The success snackbar */}
             <Snackbar open={isActionSuccessOpen} autoHideDuration={6000} onClose={() => setIsActionSuccessOpen(false)}>
                 <Alert onClose={() => setIsActionSuccessOpen(false)} severity="success" sx={{ width: '100%' }} variant="outlined">
                     {actionSuccessMessage}

frontend/src/components/Program/Programs.js

@@ -45,6 +45,7 @@ export default function Programs({ selectedEvent, open, onClose }) {
 
     const [selectedProgram, setSelectedProgram] = useState({});
 
+    // Handle the submission of the add program form
     const handleAddProgramSubmit = () => {
         api.post(`/api/events/${selectedEvent.EventID}/programs`, {
             summary: newProgramSummary,
@@ -81,6 +82,7 @@ export default function Programs({ selectedEvent, open, onClose }) {
     }
 
     // TODO: Handle errors better here if they are on certain fields
+    // Handle the submission of the update program form
     const handleUpdateProgramSubmit = () => {
         api.put(`/api/events/${selectedEvent.EventID}/programs/${selectedProgram.ProgramID}`, {
             summary: updateProgramSummary,
@@ -121,6 +123,7 @@ export default function Programs({ selectedEvent, open, onClose }) {
         setUpdateProgramError(false);
     }
 
+    // Handle the deletion of a program
     const handleDelete = () => {
         api.delete(`/api/events/${selectedEvent.EventID}/programs/${selectedProgram.ProgramID}`)
             .then(res => {
@@ -342,6 +345,7 @@ export default function Programs({ selectedEvent, open, onClose }) {
                 </DialogActions>
             </Dialog >
 
+            {/* Snackbar for success */}
             <Snackbar open={isSuccessSnackbarOpen} autoHideDuration={6000} onClose={() => setIsSuccessSnackbarOpen(false)}>
                 <Alert onClose={() => setIsSuccessSnackbarOpen(false)} severity="success" sx={{ width: '100%' }} variant='outlined'>
                     {successSnackbarMessage}

frontend/src/components/Statistics/DateRangeDonationsGraph.js

@@ -89,6 +89,7 @@ export default function DateRangeDonationsGraph() {
 
     const [paperWidth, setPaperWidth] = useState(window.innerWidth - drawerWidth - eventListMargin)
 
+    // Update the paper width when the window is resized
     useEffect(() => {
         function handleWindowResize() {
             setPaperWidth(window.innerWidth - drawerWidth - eventListMargin)
@@ -101,6 +102,7 @@ export default function DateRangeDonationsGraph() {
         };
     }, [])
 
+    // Convert the data retrieved from the api into useable data for the graph by grouping totals for each day
     const convertToDailyAmounts = (data, startDate, endDate) => {
         const dailyAmounts = []
 
@@ -132,6 +134,7 @@ export default function DateRangeDonationsGraph() {
         return dailyAmounts
     }
 
+    // Update the graph data when the start or end date is changed
     const updateDonations = () => {
         api.get('/api/donations', { params: { startDate: startDate.toISOString(), endDate: endDate.toISOString() } })
             .then(response => {

frontend/src/pages/Dashboard/Dashboard.js

@@ -43,6 +43,7 @@ export function Dashboard() {
         setIsModifyDialogOpen(true)
     }
 
+    // Handle opening the view dialog when an event is selected
     const handleEventClickView = async (event) => {
         setSelectedEvent(event)
         checkIfVolunteered(event)
@@ -65,6 +66,7 @@ export function Dashboard() {
             })
     }
 
+    // Check if the user has volunteered for the event
     const checkIfVolunteered = async (event) => {
         return api.get(`/api/events/${event.EventID}/volunteer`)
             .then(response => {
@@ -76,6 +78,7 @@ export function Dashboard() {
         )
     }
 
+    // Check if the user has donated to the event
     const checkIfDonated = async (event) => {
         return api.get(`/api/events/${event.EventID}/donate`)
             .then(response => {

frontend/src/pages/Events/EventTable.js

@@ -59,6 +59,7 @@ export function EventTable({ rows, eventUpdate }) {
         setIsModifyDialogOpen(true)
     }
 
+    // Handle a row click by setting state as needed
     const handleRowClickView = async (event) => {
         setSelectedEvent(event)
         checkIfVolunteered(event)
@@ -81,6 +82,7 @@ export function EventTable({ rows, eventUpdate }) {
             })
     }
 
+    // Check if the current user has volunteered
     const checkIfVolunteered = async (event) => {
         return api.get(`/api/events/${event.EventID}/volunteer`)
             .then(response => {
@@ -92,6 +94,7 @@ export function EventTable({ rows, eventUpdate }) {
             )
     }
 
+    // Check if the current user has donated
     const checkIfDonated = async (event) => {
         return api.get(`/api/events/${event.EventID}/donate`)
             .then(response => {
@@ -104,6 +107,7 @@ export function EventTable({ rows, eventUpdate }) {
 
     const [containerHeight, setContainerHeight] = useState(window.innerHeight - barHeight - margin)
 
+    // Update the container height when the window is resized
     useEffect(() => {
         function handleWindowResize() {
             setContainerHeight(window.innerHeight - barHeight - margin)

frontend/src/pages/Login/Login.js

@@ -22,6 +22,7 @@ export function Login() {
 
     const navigate = useNavigate()
 
+    // Handle the submission of a login form
     const handleSubmit = (event) => {
         event.preventDefault()
         const data = new FormData(event.currentTarget)

frontend/src/pages/Login/Register.js

@@ -55,6 +55,7 @@ export function Register() {
 
     const navigate = useNavigate()
 
+    // Handle the submission of a registration form
     const handleSubmit = (event) => {
         event.preventDefault()
         resetErrors()

frontend/src/pages/Users/UserAdvanced.js

@@ -70,6 +70,7 @@ export function UserAdvanced() {
 
     const userIsAdmin = AuthService.useHasPermissions(["Administrator"])
 
+    // Handle the deletion of a user
     const handleDelete = (user) => {
         api.delete(`/api/users/${user.UserID}`)
             .then(res => {
@@ -92,6 +93,7 @@ export function UserAdvanced() {
             })
     }
 
+    // Handle the restoration of a user
     const handleRestore = (user) => {
         api.put(`/api/users/${user.UserID}`)
             .then(res => {
@@ -109,6 +111,7 @@ export function UserAdvanced() {
             })
     }
 
+    // Update the user data 
     const updateUser = async () => {
         api.get(`/api/users/${id}`)
             .then((res) => {
@@ -141,6 +144,7 @@ export function UserAdvanced() {
 
     const [containerHeight, setContainerHeight] = useState(window.innerHeight - barHeight - margin - userInfoCardHeight)
 
+    // Update the container height when the window is resized
     useEffect(() => {
         function handleWindowResize() {
             setContainerHeight(window.innerHeight - barHeight - margin - userInfoCardHeight)
@@ -157,6 +161,7 @@ export function UserAdvanced() {
 
     return (
         <>
+            {/* Generate the bar for this page */}
             <Bar title={`User: ${user.FullName ?? "N/A"}`}>
                 {user?.Active ?
                     <Tooltip title="Delete User">
@@ -344,6 +349,7 @@ export function UserAdvanced() {
                 </Grid2>
             </>}
 
+            {/* Create the dialog for confirming user deletion */}
             <Dialog open={isDeleteConfirmationDialogOpen} onClose={() => setIsDeleteConfirmationDialogOpen(false)}>
                 <DialogTitle>
                     <Typography variant="h6" component="h2">
@@ -366,6 +372,7 @@ export function UserAdvanced() {
                 </DialogActions>
             </Dialog>
 
+            {/* Create the dialog for confirming user restoration */}
             <Dialog open={isRestoreConfirmationDialogOpen} onClose={() => setIsRestoreConfirmationDialogOpen(false)}>
                 <DialogTitle>
                     <Typography variant="h6" component="h2">
@@ -383,6 +390,7 @@ export function UserAdvanced() {
                 </DialogActions>
             </Dialog>
 
+            {/* Create the alert snackbar */}
             <Snackbar open={isSnackbarOpen} autoHideDuration={6000} onClose={() => setIsSnackbarOpen(false)}>
                 <Alert onClose={() => setIsSnackbarOpen(false)} severity={snackbarError ? "error" : "success"} sx={{ width: '100%' }} variant='outlined'>
                     {snackbarMessage}

frontend/src/pages/Users/UserTable.js

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 // Import utilities and components
-import api from "../../utils/api";
 import AuthService from '../../services/auth.service'
 
 // Import general mui stuff
@@ -17,7 +16,6 @@ import {
     Paper,
     Typography,
     Tooltip,
-    IconButton,
 } from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2'
 

frontend/src/pages/Users/Users.js

@@ -9,14 +9,11 @@ import AuthService from '../../services/auth.service';
 import UserTable from './UserTable';
 
 // Import general mui stuff
-import { Button, IconButton, Tooltip, Grid, Alert } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 
 // Import icons from mui
 import AddIcon from '@mui/icons-material/AddCircle'
 
-// Import dialog stuff from mui
-import { TextField, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
-
 export function Users() {
     const [users, setUsers] = useState([]);
     const [unauthorizedError, setUnauthorizedError] = useState(false);