Extend deadline for classes

Author: ericyche

src/data/courses.json

@@ -7,3 +7,4 @@
     "EECS16A",
     "EECS16B"
 ]
+

src/data/dates.json

@@ -2,6 +2,8 @@
     "applicationSemester": "Fall 2023",
     "applicationsOpen": "2023-07-27T08:00:00.000Z",
     "applicationsClose": "2023-08-23T06:59:00.000Z",
+    "extendedApplicationsOpen": "2023-07-27T08:00:00.000Z",
+    "extendedApplicationsClose": "2023-09-06T06:59:00.000Z",
     "interestFormOpen": "2023-07-27T08:00:00.000Z",
     "interestFormClose": "2023-09-04T06:59:00.000Z"
 }

src/data/extended_courses.json

@@ -0,0 +1 @@
+["EECS16A", "CS70", "CS61C"]

src/labels/MentorLabels.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import { COURSE_STRING_WITH_AND, FAQ_CONTACT } from "./common";
+import {
+    COURSE_STRING_WITH_AND,
+    EXTENDED_COURSES_STRING_WITH_AND,
+    FAQ_CONTACT,
+} from "./common";
 import dates from "../data/dates.json";
 
 export const TITLE = "For Mentors";
@@ -106,6 +110,39 @@ export const SECTIONS = {
             </span>
         ),
     },
+    APPLICATIONS_EXTENDED: {
+        LABEL: `Applications for ${EXTENDED_COURSES_STRING_WITH_AND} ${dates.applicationSemester} Junior, Associate, and Content Mentors are extended!`,
+        BODY_JSX: (
+            <span>
+                <p className="info">
+                    We are currently recruiting mentors for{" "}
+                    {EXTENDED_COURSES_STRING_WITH_AND}.
+                    <br />
+                    The{" "}
+                    <Link to="/apply">
+                        Junior, Associate, and Content Mentor application is
+                        here!
+                    </Link>{" "}
+                    Applications are due{" "}
+                    {new Date(dates.extendedApplicationsClose).toLocaleString(
+                        "en-US",
+                        {
+                            day: "numeric",
+                            weekday: "long",
+                            year: "numeric",
+                            month: "long",
+                            hour: "numeric",
+                            minute: "2-digit",
+                            timeZone: "America/Los_Angeles",
+                            timeZoneName: "short",
+                        }
+                    )}
+                    . More information is in the application, and no late
+                    applications will be accepted.
+                </p>
+            </span>
+        ),
+    },
     APPLICATIONS_CLOSED: {
         LABEL:
             "Applications have closed for this semester; check back at the end of the semester!",

src/labels/common.tsx

@@ -1,13 +1,19 @@
 import React from "react";
 
 import courses from "../data/courses.json";
+import extendedCourses from "../data/extended_courses.json";
 
 // Mutating courses here mutates all references to it, which is why we need to do some voodoo
 export const COURSE_STRING_WITH_AND = courses
     .slice(0, courses.length - 1)
     .concat([`and ${courses.slice(-1)[0]}`])
     .join(", ");
 
+export const EXTENDED_COURSES_STRING_WITH_AND = extendedCourses
+    .slice(0, extendedCourses.length - 1)
+    .concat([`and ${extendedCourses.slice(-1)[0]}`])
+    .join(", ");
+
 export const FAQ_CONTACT = {
     Q: "Who can I contact if I have more questions?",
     A_JSX: (

src/pages/Mentors.tsx

@@ -13,8 +13,44 @@ export default class Mentors extends React.Component {
             now < new Date(dates.applicationsClose)
         );
     }
+    isExtendedApplicationOpen() {
+        const now = new Date();
+        return (
+            now > new Date(dates.extendedApplicationsOpen) &&
+            now < new Date(dates.extendedApplicationsClose)
+        );
+    }
 
     render() {
+        let section;
+        if (this.isApplicationOpen()) {
+            section = (
+                <div>
+                    <h5 className="label">
+                        {Labels.SECTIONS.APPLICATIONS_OPEN.LABEL}
+                    </h5>
+                    {Labels.SECTIONS.APPLICATIONS_OPEN.BODY_JSX}
+                </div>
+            );
+        } else if (this.isExtendedApplicationOpen()) {
+            section = (
+                <div>
+                    <h5 className="label">
+                        {Labels.SECTIONS.APPLICATIONS_EXTENDED.LABEL}
+                    </h5>
+                    {Labels.SECTIONS.APPLICATIONS_EXTENDED.BODY_JSX}
+                </div>
+            );
+        } else {
+            section = (
+                <div>
+                    <h6 className="sublabel">
+                        {Labels.SECTIONS.APPLICATIONS_CLOSED.LABEL}
+                    </h6>
+                </div>
+            );
+        }
+
         return (
             <div>
                 <section className="center green lighten-1 stats header">
@@ -44,20 +80,7 @@ export default class Mentors extends React.Component {
                     <div className="divider"></div>
                     <div className="divider"></div>
                     <div className="section">
-                        {this.isApplicationOpen() ? (
-                            <div>
-                                <h5 className="label">
-                                    {Labels.SECTIONS.APPLICATIONS_OPEN.LABEL}
-                                </h5>
-                                {Labels.SECTIONS.APPLICATIONS_OPEN.BODY_JSX}
-                            </div>
-                        ) : (
-                            <div>
-                                <h6 className="sublabel">
-                                    {Labels.SECTIONS.APPLICATIONS_CLOSED.LABEL}
-                                </h6>
-                            </div>
-                        )}
+                        {section}
                         <br />
                     </div>
                     <div className="divider"></div>