Added comments and update README.md

FU.SPA/README.md

@@ -1,10 +1,45 @@
 # SPA Overview
 
+## Tech Stack
+
+- SPA is built with React
+- - Material UI is used for common components, some components are custom or modified versions of MUI components
+- - Vite is used for local development hosting of the SPA
+- NPM for package management
+
+### Understanding Components
+
+Components are rendered and displayed on the page. They integrate JavaScript code and React's JSX syntax to allow for complex functionality to be added to webpages.
+Components are displayed in the Document Object Model, or DOM. Each component is a child of the root of the DOM, and components can be children of other comopnents.
+This allows passing properties and information down to components, such as passing a title/username from a parent component down to a child.
+
+### Understanding Contexts
+
+Contexts are a way to pass data through the component tree/DOM without having to do it at every level. This simplifies a lot of logic for several different scenarios.
+Things like a username, authentication token, login status, and more are not easily passed down through the DOM. For example, our `UserContext` looks like this:
+
+```
+const UserContext = createContext({
+  user: null,
+  token: null,
+  login: () => {},
+  logout: () => {},
+  refreshUser: () => {},
+});
+```
+
+This allows us to keep track of the user and call its properties at any level, as well as the user's authentication token.
+
+### Understanding Services
+
+Services are just thin wrappers used by the SPA to ease calling the API and allow for reuse of common API calls.
+See the (API services)[https://github.com/SCCapstone/PalmettoProgrammers/blob/main/FU.API/README.md#understanding-services] for understanding of how they work.
+
 ## Development
 
 Install [npm](https://www.npmjs.com/package/npm) and [Docker](https://www.docker.com/get-started/).
 
-## Configure the API URL
+### Configure the API URL
 
 Config settings are loaded from environment variables. To automatically load environment variables from a file, create a `.env` file in this folder.
 
@@ -14,7 +49,7 @@ Set the `VITE_API_URL` environment variable by adding the following to `.env`.
 
 If there are CORS errors, change the URL to match `http://` instead of `https://` and this may resolve the issue.
 
-## Running with docker
+### Running with Docker
 
 Add the following to your `hosts` file (`/etc/hosts` on Linux and `C:\Windows\System32\drivers\etc` on Windows).
 

FU.SPA/src/App.jsx

@@ -20,6 +20,10 @@ import EditPost from './components/pages/EditPost';
 import { ReactNotifications } from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
 
+/* Top level of application
+ * Provides theme, notifications, general CSS, User Context, Navbar,
+ * and top level routes
+ */
 function App() {
   return (
     <ThemeProvider theme={Theme}>

FU.SPA/src/Theme.js

@@ -1,12 +1,14 @@
 import { createTheme } from '@mui/material/styles';
 
+// Main color palatte for the application
 const COLORS = {
   PRIMARY_MAIN: '#e354dc',
   SECONDARY_MAIN: '#4290f5',
   BACKGROUND_PAPER: '#31084a',
   BACKGROUND_DEFAULT: '#23194f',
 };
 
+// Create Theme for the ThemeProvider
 const Theme = createTheme({
   palette: {
     mode: 'dark',

FU.SPA/src/components/Chat.jsx

@@ -44,6 +44,7 @@ export default function Chat({ chatId }) {
       }
     };
 
+    // Handles receiving messages
     const handleReceiveMessage = (receivedMessage) => {
       setMessages((prevMessages) => [...prevMessages, receivedMessage]);
 

FU.SPA/src/components/CreateGroup.jsx

@@ -1,3 +1,4 @@
+// NOTE: unused component and deprecated
 import {
   Button,
   TextField,
@@ -11,15 +12,6 @@ import { TextareaAutosize } from '@mui/base/TextareaAutosize';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Radio from '@mui/material/Radio';
 
-// TODO remove, this demo shouldn't need to reset the theme.
-
-//const defaultTheme = createTheme();
-
-//Look at changing to const CreatePost = () => {
-//    CreatingPost();
-//} or something similiar.
-//Design of the page.// TODO START OF PAGE CODE, WHICH I'M CHANGING TO CREATE GROUP, BEFORE MAKING IT A BUTTON FUNCTION (semi-completed)
-// need to add a group image and an upload button to the left under the buttons that will be placed there, as well.
 export default function CreateGroup() {
   return (
     <ThemeProvider theme={createTheme}>

FU.SPA/src/components/Navbar.jsx

@@ -83,6 +83,7 @@ export default function Navbar() {
     },
   }));
 
+  // Renders the profile picture and username on the navbar
   const renderProfile = () => (
     <>
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
@@ -182,6 +183,7 @@ export default function Navbar() {
     setAnchorElUser(null);
   };
 
+  // Displays navbar component
   return (
     <AppBar position="sticky" enableColorOnDark>
       <Toolbar>

FU.SPA/src/components/PostCard.jsx

@@ -16,6 +16,7 @@ import dayjs from 'dayjs';
 import { Done } from '@mui/icons-material';
 import ChatMessagePreview from './ChatMessagePreview';
 
+// Function that displays a card with details of a given post
 const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
   const navigate = useNavigate();
   const user = post.creator;
@@ -24,6 +25,7 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
     showActions = true;
   }
 
+  //
   const handleTagClick = (tag) => {
     if (onTagClick) {
       onTagClick(tag);
@@ -49,6 +51,7 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
     let postEndDateTime = dayjs(post.endTime);
 
     let startDate = dayjs(post.startTime).format('MMM D, YYYY');
+    // This block handles formatting of start date display on card
     if (postStartDateTime < startOfToday) {
       // Use default
     } else if (postStartDateTime < startOfToday.add(1, 'day')) {
@@ -64,6 +67,7 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
     let endDate = '';
     if (!postEndDateTime.isSame(postStartDateTime, 'day')) {
       endDate = dayjs(post.endTime).format('MMM D, YYYY');
+      // This block handles formatting of end date display on card
       if (postEndDateTime < startOfToday) {
         // Use default
       } else if (postEndDateTime < startOfToday.add(1, 'day')) {
@@ -109,6 +113,7 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
     return color;
   };
 
+  // Returns card with post details to be displayed
   return (
     <Card sx={{ width: 250 }}>
       <CardContent sx={{ textAlign: 'left', height: 350 }}>

FU.SPA/src/components/PostForm.jsx

@@ -18,6 +18,7 @@ import GameService from '../services/gameService';
 import UserContext from '../context/userContext';
 import dayjs from 'dayjs';
 
+// Function that displays a post form when creating or editing posts
 const PostForm = ({ onSubmit, submitButtonText, initialValue }) => {
   const { user } = useContext(UserContext);
 
@@ -107,6 +108,7 @@ const PostForm = ({ onSubmit, submitButtonText, initialValue }) => {
     }
   };
 
+  // Handles description change state error
   const handleDescriptionChange = (e) => {
     if (e.length > 1500) {
       setDescriptionError('Description cannot exceed 1500 characters');
@@ -169,6 +171,7 @@ const PostForm = ({ onSubmit, submitButtonText, initialValue }) => {
     return tags?.map((tag) => tag.name);
   };
 
+  // Returns form component to be displayed
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center', gap: '30px' }}>
       <div>
@@ -334,6 +337,7 @@ const GameSelector = ({ onChange, initialValue }) => {
     return filtered;
   };
 
+  // Returns Game selector field
   return (
     <Autocomplete
       required
@@ -425,6 +429,7 @@ const TagsSelector = ({ onChange, initialValues }) => {
     return filtered;
   };
 
+  // Returns tag selector field
   return (
     <Autocomplete
       autoHighlight

FU.SPA/src/components/PostUsersList.jsx

@@ -6,6 +6,7 @@ import PostService from '../services/postService';
 import './PostUsersList.css';
 import { useNavigate } from 'react-router-dom';
 
+// Component that displays all users that have joined a post
 export default function PostUsersList({ postId }) {
   const [users, setUsers] = useState([]);
 
@@ -91,6 +92,7 @@ const UserListItem = ({ user }) => {
     return initials;
   };
 
+  // Display profile picture and names of users in a post
   const renderPfp = () => {
     return defaultPfp ? (
       <Avatar
@@ -111,6 +113,7 @@ const UserListItem = ({ user }) => {
     );
   };
 
+  // Display status of users in a post
   const renderOnlineStatus = (isOnline) => {
     if (!isOnline) return;
 

FU.SPA/src/components/ProtectedRoute.jsx

@@ -3,6 +3,7 @@ import { Navigate } from 'react-router-dom';
 import UserContext from '../context/userContext';
 import config from '../config';
 
+// Function that handles protecting routes based on user authorization level
 export const ProtectedRoute = ({ children }) => {
   const { user } = useContext(UserContext);
   const [isLoading, setIsLoading] = useState(true);
@@ -12,7 +13,8 @@ export const ProtectedRoute = ({ children }) => {
 
   useEffect(() => {
     const delay = async () => {
-      // See #281: We need to wait for the user to be set before rendering the children
+      // See #281: We need to wait for the user to be set before rendering the
+      // children
       await new Promise((resolve) => setTimeout(resolve, config.WAIT_TIME));
       setIsLoading(false);
     };

FU.SPA/src/components/TextSearch.jsx

@@ -2,6 +2,7 @@ import { TextField, InputAdornment, IconButton } from '@mui/material';
 import { useEffect, useState } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 
+// Component search bar that handles searching of posts and users
 function SearchBar({ searchText, onSearchSubmit }) {
   const [localSearchText, setLocalSearchText] = useState(searchText);
 

FU.SPA/src/components/UserCard.jsx

@@ -14,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { People, PendingActions, CallMade } from '@mui/icons-material';
 import ChatMessagePreview from './ChatMessagePreview';
 
+// Function that displays a card with details of a given user
 const UserCard = ({ user, showRelationStatus, showActions }) => {
   if (showRelationStatus === undefined) {
     showRelationStatus = false;
@@ -42,6 +43,7 @@ const UserCard = ({ user, showRelationStatus, showActions }) => {
     (today.getTime() - dob.getTime()) / (1000 * 3600 * 24 * 365),
   );
 
+  // Handles displaying relationship status with another user
   const renderRelationStatus = () => {
     if (!showRelationStatus) {
       return null;
@@ -70,6 +72,7 @@ const UserCard = ({ user, showRelationStatus, showActions }) => {
     }
   };
 
+  // Return card to be displayed
   return (
     <Card
       style={{

FU.SPA/src/components/pages/AccountSettings.jsx

@@ -163,6 +163,7 @@ export default function AccountSettings() {
       }
     };
 
+    // Returns a Dialog that displays the delete action confirmation
     return (
       <Dialog open={deleteDialogOpen} onClose={handleClose}>
         <DialogTitle>Are you sure you want to delete your account?</DialogTitle>

FU.SPA/src/components/pages/CreatePost.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Store } from 'react-notifications-component';
 import PostForm from '../PostForm';
 
+// Create post page
 export default function CreatePost() {
   const navigate = useNavigate();
 

FU.SPA/src/components/pages/Discover.jsx

@@ -33,6 +33,7 @@ const paramKey = {
   userSort: 'usort',
 };
 
+// Converts a search paramater to its dayjs equivalent
 const paramToDayjs = (searchParams, paramKey) => {
   let paramValue = searchParams.get(paramKey);
   if (!paramValue || !dayjs(paramValue).isValid()) return undefined;
@@ -45,6 +46,7 @@ export default function Discover() {
     Users: 'Users',
   };
 
+  // STATE VARIABLES START
   const queryLimit = 12;
   const [totalResults, setTotalResults] = useState(0);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -112,11 +114,17 @@ export default function Discover() {
   const [endTime, setEndTime] = useState(
     paramToDayjs(searchParams, paramKey.endTime),
   );
+  // STATE VARIABLES END
 
+  // useEffect to update search params
   useEffect(() => {
     const updateSearchParams = async () => {
       setSearchParams(
         (params) => {
+          /* This large block sets the search paramters for a query
+           * Also handles error checking so that invalid params cannot
+           * be included
+           */
           if (
             dateRangeRadioValue === DateFilterRadioValues.between &&
             startDate?.isValid()
@@ -189,7 +197,6 @@ export default function Discover() {
       );
     };
 
-    //TODO pull this out to directly call
     const updateSearchResults = async () => {
       if (tabOption === tabOptions.Posts) {
         const query = {
@@ -318,6 +325,7 @@ export default function Discover() {
     }
   };
 
+  // Render posts or users based on tab option selected
   const renderTabContent = () => {
     if (tabOption === tabOptions.Posts) {
       return (
@@ -328,6 +336,7 @@ export default function Discover() {
     }
   };
 
+  // Displays post sort selector for sort options
   const renderPostSortSelector = () => {
     return (
       <SortOptionsSelector
@@ -341,6 +350,7 @@ export default function Discover() {
     );
   };
 
+  // Displays user sort selector for sort options
   const renderUserSortSelector = () => {
     return (
       <SortOptionsSelector
@@ -354,6 +364,7 @@ export default function Discover() {
     );
   };
 
+  // Displays tab options, currently for posts or users
   const renderTabSelectors = () => {
     return (
       <Tabs
@@ -370,6 +381,7 @@ export default function Discover() {
     );
   };
 
+  // Display page
   return (
     <div className="page-content">
       <div

FU.SPA/src/components/pages/EditPost.jsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Store } from 'react-notifications-component';
 
+// Edit post page
 export default function EditPost() {
   const { postId } = useParams();
   const [ogPost, setOgPost] = useState();

FU.SPA/src/components/pages/Home.jsx

@@ -8,6 +8,7 @@ import DiscoverPostScreenshot from '../../../assets/discover-posts-view.png';
 import PostViewScreenshot from '../../../assets/post-view.png';
 import FriendsViewScreenshot from '../../../assets/friends-view.png';
 
+// Home landing page
 const Home = () => {
   return (
     <Box sx={{ maxWidth: 800, p: 2, mx: 'auto', textAlign: 'left' }}>

FU.SPA/src/components/pages/NoPage.jsx

@@ -1,3 +1,4 @@
+// 404 error page
 export default function NoPage() {
   return <h1>404</h1>;
 }