Update student page with interest form

Author: Eric Che

src/App.tsx

@@ -45,6 +45,7 @@ function App() {
                             )
                         }
                         <ExternalRedirect path="/apply" target={ urls.applicationForm } />
+                        <ExternalRedirect path="/interest" target={ urls.interestForm } />
                         <ExternalRedirect path="/scheduler" target={ urls.scheduler } />
                         <ExternalRedirect path="/facebook" target={ urls.facebook } />
                         <ExternalRedirect path="/github" target={ urls.github } />

src/data/dates.json

@@ -1,5 +1,7 @@
 {
     "applicationSemester": "Fall 2023",
     "applicationsOpen": "2023-07-27T08:00:00.000Z",
-    "applicationsClose": "2023-08-23T06:59:00.000Z"
+    "applicationsClose": "2023-08-23T06:59:00.000Z",
+    "interestFormOpen": "2023-07-27T08:00:00.000Z",
+    "interestFormClose": "2023-09-04T06:59:00.000Z"
 }

src/data/urls.json

@@ -1,5 +1,6 @@
 {
     "applicationForm": "https://tinyurl.com/csm-fa23-app",
+    "interestForm": "https://tinyurl.com/csm-fa23-student-interest",
     "scheduler": "https://scheduler.csmentors.org",
     "facebook": "https://www.facebook.com/BerkeleyCSM/",
     "github": "https://github.com/csmberkeley",

src/labels/StudentLabels.tsx

@@ -12,12 +12,13 @@ export const SECTIONS = {
     SUPPORT: {
         LABEL: "Support",
         BODY:
-            "CSM offers group tutoring to all students in these four classes. Students are " +
-            "sorted into one of the timeslots of their preference. Session are held weekly, in " +
-            "the same room typically in Soda or Cory, for 1 hour to 90 minutes during times " +
-            "ranging from 9:00 AM to 7:00 PM. Mentors will go over a worksheet in section with " +
-            "extra problems to be worked on in groups. Homework, lab, and project help will not " +
-            "be provided during these sessions.",
+            "CSM offers group tutoring to all students in these seven classes. " +
+            "Students can sign up for time slots on a first-come, first-serve basis. " +
+            "Sessions are held once or twice a week, in Soda, Cory, or library rooms, " +
+            "for 1 hour to 90 minutes during times ranging from 9:00 AM to 9:00 PM. " +
+            "Mentors will go over a worksheet in section with extra problems to be worked " +
+            "on in groups. Homework, lab, and project help will not be provided during these " +
+            "sessions.",
     },
     EXPECTATIONS: {
         LABEL: "Expectations",
@@ -43,7 +44,20 @@ export const SECTIONS = {
             </span>
         ),
     },
-    APPLICATION: {
+    APPLICATIONS_OPEN: {
+        LABEL: "Application Process",
+        BODY_JSX: (
+            <p className="info">
+                Applications are currently closed for the semester and will open 
+                around 2 weeks into the semester. In the meantime, fill out{" "}
+                <Link to="/interest">
+                    this interest form
+                </Link>{" "}
+                if you plan on signing up for a section.
+            </p>
+        ),
+    },
+    APPLICATIONS_CLOSE: {
         LABEL: "Application Process",
         BODY_JSX: (
             <p className="info">

src/pages/Students.tsx

@@ -1,8 +1,16 @@
 import React from "react";
-
 import * as Labels from "../labels/StudentLabels";
+import dates from "../data/dates.json";
 
 export default class Students extends React.Component {
+    isApplicationOpen() {
+        const now = new Date();
+        return (
+            now > new Date(dates.interestFormOpen) &&
+            now < new Date(dates.interestFormClose)
+        );
+    }
+
     render() {
         return (
             <div>
@@ -31,10 +39,21 @@ export default class Students extends React.Component {
                     </div>
                     <div className="divider"></div>
                     <div className="section">
-                        <h5 className="label">
-                            {Labels.SECTIONS.APPLICATION.LABEL}
-                        </h5>
-                        {Labels.SECTIONS.APPLICATION.BODY_JSX}
+                        {this.isApplicationOpen() ? (
+                            <div>
+                                <h5 className="label">
+                                    {Labels.SECTIONS.APPLICATIONS_OPEN.LABEL}
+                                </h5>
+                                {Labels.SECTIONS.APPLICATIONS_OPEN.BODY_JSX}
+                            </div>
+                        ) : (
+                            <div>
+                                <h5 className="label">
+                                    {Labels.SECTIONS.APPLICATIONS_CLOSE.LABEL}
+                                </h5>
+                                {Labels.SECTIONS.APPLICATIONS_CLOSE.BODY_JSX}
+                            </div>
+                        )}
                     </div>
                     <div className="divider"></div>
                     <div className="faq section">