Merge branch 'dev' of https://github.com/UofT-Frosh-Orientation/orien…

…tation-website into prod

.github/workflows/backend_tests.yml

@@ -1,22 +1,22 @@
-name: Backend Tests
-
-on:
-  push:
-    paths:
-      - server/**
-  pull_request:
-    paths:
-      - server/**
-
-jobs:
-  test_backend:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/[email protected]
-
-      - name: Start Docker
-        run: docker-compose -f docker-compose.test.yml up --build -d
-
-      - name: Run Tests
-        run: cd server && yarn install && yarn test:actions
+name: Backend Tests
+
+on:
+  push:
+    paths:
+      - server/**
+  pull_request:
+    paths:
+      - server/**
+
+jobs:
+  test_backend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/[email protected]
+
+      - name: Start Docker
+        run: docker-compose -f docker-compose.test.yml up --build -d
+
+      - name: Run Tests
+        run: cd server && yarn install && yarn test:actions

.github/workflows/frontend_tests.yml

@@ -1,19 +1,19 @@
-name: Frontend Tests
-
-on:
-  push:
-    paths:
-      - client/**
-  pull_request:
-    paths:
-      - client/**
-
-jobs:
-  build_frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/[email protected]
-
-      - name: Build client
-        run: cd client && yarn install && yarn build
+name: Frontend Tests
+
+on:
+  push:
+    paths:
+      - client/**
+  pull_request:
+    paths:
+      - client/**
+
+jobs:
+  build_frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/[email protected]
+
+      - name: Build client
+        run: cd client && yarn install && yarn build

README.md

@@ -1,6 +1,6 @@
 ![image](https://user-images.githubusercontent.com/50821962/195210327-87d8570e-d5c1-4704-be5b-eb2a609c0972.png)
 
-# Orientation Website
+# Orientation Website [![Backend Tests](https://github.com/UofT-Frosh-Orientation/orientation-website/actions/workflows/backend_tests.yml/badge.svg?event=push)](https://github.com/UofT-Frosh-Orientation/orientation-website/actions/workflows/backend_tests.yml) [![Frontend Tests](https://github.com/UofT-Frosh-Orientation/orientation-website/actions/workflows/frontend_tests.yml/badge.svg?event=push)](https://github.com/UofT-Frosh-Orientation/orientation-website/actions/workflows/frontend_tests.yml)
 
 Welcome to the University of Toronto's Frosh engineering orientation website, used by more than 1,000 incoming students each year. This website serves as the primary platform for registering and paying for orientation events, and offers a range of features including a main schedule, announcements, a personal profile page with the ability to edit, a Scunt (scavenger hunt) game, sign-up for the Frosh retreat, QR code scanning for automated registration on event day, and more.
 

client/src/App.jsx

@@ -8,28 +8,26 @@ import { Footer } from './components/footer/Footer';
 import { useDispatch, useSelector } from 'react-redux';
 import { initialsSelector, loggedInSelector, registeredSelector } from './state/user/userSlice';
 import { useEffect } from 'react';
-import { getUserInfo } from './state/user/saga';
 import { AskQuestionButton } from './components/button/AskQuestionButton/AskQuestionButton';
 import { DarkModeProvider } from './util/DarkModeProvider';
 import { SnackbarProvider } from './util/SnackbarProvider';
-import { PageMaintenance } from './pages/Maintenance/Maintenance';
-// import { getScuntSettings } from './state/scuntSettings/saga';
-// import { scuntSettingsSelector } from './state/scuntSettings/scuntSettingsSlice';
+
+import { getScuntSettings } from './state/scuntSettings/saga';
+import { getUserInfo } from './state/user/saga';
 
 export default function App() {
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(getUserInfo());
-    // dispatch(getScuntSettings());
+    dispatch(getScuntSettings());
   }, []);
 
   return (
     <DarkModeProvider>
       <SnackbarProvider>
-        {/* <BrowserRouter>
+        <BrowserRouter>
           <TransitionRoutes />
-        </BrowserRouter> */}
-        <PageMaintenance />
+        </BrowserRouter>
       </SnackbarProvider>
     </DarkModeProvider>
   );
@@ -40,15 +38,20 @@ const TransitionRoutes = () => {
   const loggedIn = useSelector(loggedInSelector);
   const registered = useSelector(registeredSelector);
   const initials = useSelector(initialsSelector);
-  // const scuntSettings = useSelector(scuntSettingsSelector);
 
   return (
     <TransitionGroup>
       <Navbar isLoggedIn={loggedIn} froshInitials={initials} isRegistered={registered} />
       <ScrollToTop />
       <CSSTransition key={location.key} classNames="page" timeout={300}>
         <Routes location={location}>
-          {[...pages.main, ...pages.hidden, ...pages.special].map((page) => {
+          {[
+            ...pages.main,
+            ...pages.hidden,
+            ...pages.special,
+            ...pages.scunt,
+            ...pages.scuntHidden,
+          ].map((page) => {
             return (
               <Route
                 path={page.path}

client/src/components/MakeSchedulePDF/MakeSchedulePDF.jsx

@@ -8,36 +8,37 @@ const styles = StyleSheet.create({
     backgroundColor: '#E4E4E4',
   },
   eventBubble: {
-    backgroundColor: '#58458f', 
-    borderRadius: '10px', 
-    padding: '10px', 
-    margin: '10px'
+    backgroundColor: '#58458f',
+    borderRadius: '10px',
+    padding: '10px',
+    margin: '10px',
   },
   eventName: {
-    fontSize: 12, 
+    fontSize: 12,
     fontWeight: 'bold',
-    padding: '10px 0', 
-    color: '#fff'
+    padding: '10px 0',
+    color: '#fff',
   },
   eventLoc: {
-    fontSize: 12, 
-    padding: '10px 0', 
-    color: '#fff'
+    fontSize: 12,
+    padding: '10px 0',
+    color: '#fff',
   },
   eventDate: {
     fontSize: 11,
     fontStyle: 'italic',
     color: '#fff',
-    padding: '5px 0'
+    padding: '5px 0',
   },
   eventDesc: {
-    fontSize: 12, 
+    fontSize: 12,
     color: '#fff',
-    padding: '10px 0'
-  }
+    padding: '10px 0',
+  },
 });
 
 const MakeSchedulePDF = (froshObject) => {
+  if (!froshObject) return null;
   const froshGroup = froshObject?.froshGroup;
   const scheduleData = getFroshGroupSchedule(froshGroup);
 
@@ -53,27 +54,23 @@ const MakeSchedulePDF = (froshObject) => {
           </Svg>
           {Object.keys(scheduleData).map((day) => (
             <div key={day}>
-              <Text style={{ fontSize: 14, padding: '20px 0', color: '#2c1370', fontWeight: 'bold' }}>
+              <Text
+                style={{ fontSize: 14, padding: '20px 0', color: '#2c1370', fontWeight: 'bold' }}
+              >
                 {day}
               </Text>
               {scheduleData[day].map((scheduleDay, index) => (
                 <div key={scheduleDay} style={styles.eventBubble}>
-                  <Text style={styles.eventName}>
-                    {scheduleDay['Event Name']}
-                  </Text>
+                  <Text style={styles.eventName}>{scheduleDay['Event Name']}</Text>
                   <Text style={styles.eventDate}>
                     {scheduleDay['Start Time']} - {scheduleDay['End Time']}
                   </Text>
-                  {scheduleDay['Event Location'] ? 
-                    <Text style={styles.eventLoc}>
-                      {scheduleDay['Event Location']}
-                    </Text> : <></>
-                  }
-                  {scheduleDay['Event Description'] ? 
-                    <Text style={styles.eventDesc}>
-                      {scheduleDay['Event Description']}
-                    </Text> : <></>
-                  }
+                  {scheduleDay['Event Location'] ? (
+                    <Text style={styles.eventLoc}>{scheduleDay['Event Location']}</Text>
+                  ) : null}
+                  {scheduleDay['Event Description'] ? (
+                    <Text style={styles.eventDesc}>{scheduleDay['Event Description']}</Text>
+                  ) : null}
                 </div>
               ))}
             </div>
@@ -84,4 +81,4 @@ const MakeSchedulePDF = (froshObject) => {
   );
 };
 
-export { MakeSchedulePDF };
+export { MakeSchedulePDF };

client/src/components/ScuntLinks/ScuntLinks.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { pages } from '../../util/pages';
 import { ButtonOutlined } from '../button/ButtonOutlined/ButtonOutlined';

client/src/components/form/RadioButtons/RadioButtons.jsx

@@ -41,7 +41,15 @@ const RadioButtons = ({
   return (
     <div className={`${isDisabled ? 'radio-input-disabled-container' : ''}`}>
       {label !== undefined ? <p className="radio-input-title">{label}</p> : <></>}
-      <div style={{ display: 'flex', alignItems: 'flex-start' }} className={'radio-buttons'}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          flexWrap: 'wrap',
+          justifyContent: 'space-around',
+        }}
+        className={'radio-buttons'}
+      >
         {values.map((value, index) => {
           let isDisabledValue = false;
           if (disabledIndices !== undefined) isDisabledValue = disabledIndices?.includes(index);

client/src/components/profile/ProfilePageResources/ProfilePageResources.jsx

@@ -4,7 +4,6 @@ import './ProfilePageResources.scss';
 import PropTypes from 'prop-types';
 
 export const ProfilePageResources = ({ froshObject }) => {
-
   return (
     <div className="profile-page-resources profile-page-side-section">
       <h2>Resources</h2>
@@ -25,13 +24,12 @@ export const ProfilePageResources = ({ froshObject }) => {
           </a>
         );
       })}
-      {froshObject ? ( 
-      <>
-        <a key={'5Download'} className="no-link-style">
+      {froshObject ? (
+        <>
           <ButtonBubble
             label={'Download Information PDF'}
             onClick={async () => {
-              const MakeReceipt = (await import('../../MakeReceipt/MakeReceipt')).MakeReceipt;
+              const { MakeReceipt } = await import('../../MakeReceipt/MakeReceipt');
               const ReactPDF = await import('@react-pdf/renderer');
               const blob = await ReactPDF.pdf(MakeReceipt(froshObject)).toBlob();
               const fileURL = URL.createObjectURL(blob);
@@ -41,24 +39,21 @@ export const ProfilePageResources = ({ froshObject }) => {
             isSecondary
             style={{ margin: 0, marginTop: '10px' }}
           />
-        </a>
-      </>
-      ) : (
-        <></>
-      )}
-      <ButtonBubble
-        label={'Download Schedule PDF'}
-        onClick={async () => {
-          const ReactPDF = await import('@react-pdf/renderer');
-          const { MakeSchedulePDF } = await import('../../MakeSchedulePDF/MakeSchedulePDF');
-          const blob = await ReactPDF.pdf(MakeSchedulePDF(froshObject)).toBlob();
-          const fileURL = URL.createObjectURL(blob);
-          const pdfWindow = window.open(fileURL, '_blank');
-          pdfWindow && pdfWindow.focus();
-        }}
-        isSecondary
-        style={{ margin: 0, marginTop: '10px' }}
-      />
+          <ButtonBubble
+            label={'Download Schedule PDF'}
+            onClick={async () => {
+              const ReactPDF = await import('@react-pdf/renderer');
+              const { MakeSchedulePDF } = await import('../../MakeSchedulePDF/MakeSchedulePDF');
+              const blob = await ReactPDF.pdf(MakeSchedulePDF(froshObject)).toBlob();
+              const fileURL = URL.createObjectURL(blob);
+              const pdfWindow = window.open(fileURL, '_blank');
+              pdfWindow && pdfWindow.focus();
+            }}
+            isSecondary
+            style={{ margin: 0, marginTop: '10px' }}
+          />
+        </>
+      ) : null}
     </div>
   );
 };