My teams UI update

package.json

@@ -2,13 +2,16 @@
   "name": "@acmucsd/acm-ai-site",
   "version": "2.0.0",
   "dependencies": {
+    "@dicebear/collection": "^7.0.1",
+    "@dicebear/core": "^7.0.1",
     "@types/aos": "^3.0.3",
     "@types/chart.js": "^2.9.27",
     "aos": "^3.0.0-beta.6",
     "axios": "^1.4.0",
     "chart.js": "^2.9.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "moment": "^2.30.1",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^7.3.3",
     "prettier": "^2.1.2",
@@ -70,6 +73,7 @@
     "react-intersection-observer": "^9.5.2",
     "serve": "^14.2.0",
     "style-loader": "^3.3.3",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "webpack": "^5.89.0"
   }
 }

src/App.tsx

@@ -49,6 +49,8 @@ import CompetitionPortalPage from './pages/Competitions/CompetitionPortalPage';
 
 import ProjectPage from './pages/ProjectsPage/index';
 import JoinTeamsPage from './pages/Competitions/CompetitionTeamPages/JoinTeamsPage';
+import SubmissionLogPage from './pages/Competitions/CompetitionPortalPage/SubmissionLogPage';
+import MatchesPage from './pages/Competitions/CompetitionPortalPage/MatchesPage';
 
 let cookie = getCookie(COOKIE_NAME);
 
@@ -136,6 +138,18 @@ function App() {
                 component={CompetitionPortalPage}
               />  
 
+              <Route
+                path="/:competitionName/submissionLog/:id"
+                exact
+                component={SubmissionLogPage}
+              />  
+
+              <Route
+                path="/matches/:id"
+                exact
+                component={MatchesPage}
+              /> 
+
               <Route
                 path="/competitions/:id"
                 exact

src/actions/competition.ts

@@ -10,6 +10,13 @@ export type PastCompetition = {
   route: string;
 };
 
+export interface CompetitionData {
+    rank: number;
+    team: string;
+    score: number;
+    submitHistory: Array<string>;
+}
+
 export const uploadSubmission = async (
   file: File | undefined,
   tagsSelected: string[],

src/actions/teams/utils.ts

@@ -142,7 +142,8 @@ export const addToTeam = async (
   let body = {
     username,
     teamName,
-    code,
+    competitionName,
+    code
   };
 
   return new Promise((resolve, reject) => {
@@ -155,7 +156,7 @@ export const addToTeam = async (
           headers: {
             Authorization: `Bearer ${token}`,
             'Content-Type': 'application/json',
-          },
+          }
         }
       )
       .then((res: AxiosResponse) => {
@@ -168,3 +169,46 @@ export const addToTeam = async (
       });
   });
 };
+
+
+
+export const leaveTeam = async(
+  competitionName: string,
+  username: string,
+  teamName: string
+): Promise<AxiosResponse> => {
+  let token = getToken(COOKIE_NAME);
+
+  return new Promise((resolve, reject) => {
+    axios
+      .delete(
+        process.env.REACT_APP_API + 
+        `/v1/competitions/teams/${competitionName}/remove-member`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          data: {
+            username: username,
+            teamName: teamName,
+          }
+
+
+        }
+
+
+      )
+      .then((res: AxiosResponse) => {
+        resolve(res);
+      })
+      .catch((error) => {
+        message.error(error.response.data);
+        reject(error);
+      });
+  });
+
+
+
+};
+
+

src/components/EventCard/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Modular component that displays event data in the form of a card. This is used in the 
+ * home page and events page. Provides ability to expand details via a modal.
+ * 
+ * @param {ACMEvent} event  custom type that contains information about the event
+ * 
+ */
 import React, { useState } from 'react';
 import { Row, Col, Button, Modal } from 'antd';
 import { AiFillCalendar, AiOutlineLink } from 'react-icons/ai';
@@ -6,19 +13,23 @@ import { ACMEvent } from '../../actions/events';
 import { HiLocationMarker } from 'react-icons/hi';
 
 const EventCard = ({ event }: { event: ACMEvent }) => {
+
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // Modal props
+
   const showModal = () => {
     setIsModalOpen(true);
     console.log(isModalOpen);
   };
+
   const handleCancel = () => {
     setIsModalOpen(false);
   };
+
   const formatCalendarTime = (dateTime: string) => {
     return new Date(dateTime).toISOString().replace(/-|:|\.\d+/g, '');
   };
 
+  // Helper function to format external links for shceduling a new event
   const googleCalendarLink = `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(
     event.title
   )}&details=${encodeURIComponent(
@@ -83,10 +94,12 @@ const EventCard = ({ event }: { event: ACMEvent }) => {
         onCancel={handleCancel}
         title={<h3 style={{ fontWeight: '700' }}>{event.title}</h3>}
         footer={
+
           // If this is an old event, do not give user ability to schedule the event
           new Date() > new Date(event.end) ? null : (
+
             /* Antd Button has a bug where using href directly will mess up the
-             * alignment of the button text so we use onClick instead
+             * alignment of the button text so we use onClick() instead
              */
             <Button
               size="large"
@@ -160,6 +173,8 @@ const EventCard = ({ event }: { event: ACMEvent }) => {
     </>
   );
 };
+
+
 /**
  * Formats a date to be readable.
  * @param {string} time The time in unformatted form.

src/components/EventTimeline/index.tsx

@@ -1,3 +1,9 @@
+/*
+ * Component that displays EventCards in an AntDesign Timeline 
+ * 
+ * @param {ACMEvent[]} eventData an array of ACMEvents
+ * 
+ */
 import React from 'react';
 import { Empty, Timeline, Button } from 'antd';
 import { Link } from 'react-router-dom';
@@ -10,6 +16,7 @@ const EventTimeline = ({ eventData }: { eventData: ACMEvent[] }) => {
     <div className="EventTimeline">
       {eventData.length > 0 ? (
         <Timeline>
+
           {/* Show at most 2 events as a preview */}
           {eventData.slice(0, 2).map((event) => (
             <Timeline.Item
@@ -68,20 +75,3 @@ export const formatTime = (time: string | number | Date): string => {
 };
 
 export default EventTimeline;
-
-// {
-//   /* <div className="timeline-item">
-//                 <Badge className="timeline-badge" size="default" count={<CalendarOutlined className="timeline-icon" style={{ color: '#2e3036', backgroundColor: '#ececec'}}/>}>
-//                   <div className="timeline-date">
-//                     <h2>{formatMonthDate(event.start).month}</h2>
-//                     <h3>{formatMonthDate(event.start).day}</h3>
-//                   </div>
-//                 </Badge>
-
-//                 <div className="timeline-content">
-//                   <h2>{event.title}</h2>
-//                   <h3>{event.location}</h3>
-//                   <h3>{formatTime(event.start)} - {formatTime(event.end)}</h3>
-//                 </div>
-//               </div> */
-// }

src/components/Header/index.less

@@ -4,6 +4,9 @@
 
 .Header {
   position: fixed;
+  top: 0;
+  left: 0; 
+  right: 0;
   width: 100%;
   z-index: 100;
   height: 88px;
@@ -12,6 +15,7 @@
   background: @white;
 
   .navBarWrapper {
+    margin: 0;
     height: 80px;
     display: flex;
     flex-direction: row;
@@ -129,11 +133,14 @@
     width: 100%;
     text-decoration: none;
     font-size: @font4;
-    color: @black;
     font-weight: @semi-bold;
     margin: 0.5rem 0;
     :hover {
       cursor: pointer;
+      color: @mainred;
+    }
+    a {
+      color:@black;
     }
   }
 

src/components/Header/index.tsx

@@ -123,8 +123,9 @@ function Header() {
           {isMobile ? (
             // Mobile menu button
             <Button
+              ghost
               className="menuButton"
-              icon={<HiOutlineMenu size={35} />}
+              icon={<HiOutlineMenu size={35} style = {{color: "black"}} />}
               onClick={() => toggleMenu()}
             />
           ) : (

src/components/MainFooter/index.tsx

@@ -5,6 +5,11 @@ import { AiOutlineLink } from 'react-icons/ai';
 import { BiLogoInstagram, BiLogoDiscord } from 'react-icons/bi';
 const { Footer } = Layout;
 
+/**
+ * Component that displays additional info about 
+ * ACM AI. Typically placed at the bottom of all pages 
+ * 
+ */
 const MainFooter = () => {
   return (
     <Footer className="mainFooter">

src/components/ProjectCard/index.tsx

@@ -6,6 +6,12 @@ import { Card } from '../Card';
 import { Tag, Modal, Row, Col } from 'antd';
 import './index.less';
 
+
+/**
+ * Finds ASCII sum of a tag which is later used to color encode the tag
+ * @param {string} str represents a semantic tag or label for a project
+ * @returns int 
+ */
 var ASCIISum = (str: string) => {
   let sum = 0;
   for (let i = 0; i < str.length; ++i) {
@@ -14,17 +20,22 @@ var ASCIISum = (str: string) => {
   return sum;
 };
 
+
+/**
+ * Modular component that displays ACM AI project information. This is used in the 
+ * projects page.
+ * 
+ * @param {Project} project  
+ */
 const ProjectCard = ({ project }: { project: Project }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const color_tag: string[] = ['red', 'blue', 'gold', 'purple', 'green'];
-  //['magenta', 'cyan', 'gold', 'blue', 'purple', 'green'];
-  //['#DCB9B9', '#8FA5BE', '#E1B053', '#6D6864', '#8E799F', '#889F79']
 
-  // Modal props
   const showModal = () => {
     setIsModalOpen(true);
     console.log(isModalOpen);
   };
+
   const handleCancel = () => {
     setIsModalOpen(false);
   };
@@ -83,6 +94,7 @@ const ProjectCard = ({ project }: { project: Project }) => {
         <div className="iconsBox"></div>
       </Card>
 
+      {/* Modal to display full project description and links to project repo */}
       <Modal
         open={isModalOpen}
         onCancel={handleCancel}
@@ -129,6 +141,7 @@ export const formatTime = (time: string | number | Date): string => {
     hour12: true,
   });
 };
+
 export const isURL = (str: string): boolean => {
   const pattern = new RegExp(
     '^(https?:\\/\\/)?' + // protocol