Merge from main

.eslintrc.js

@@ -27,4 +27,4 @@ module.exports = {
       },
     ],
   },
-};
+}

.github/workflows/ci.yml

@@ -12,6 +12,8 @@ jobs:
       - uses: actions/checkout@v2
       - name: Use Node.js
         uses: actions/setup-node@v1
+        with:
+          node-version: "16.x"
       - name: yarn install and lint
         run: |
           yarn install

.github/workflows/firebase-hosting-merge.yml

@@ -15,7 +15,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: '16.x'
-      - run: npm ci && npm run build
+      - name: Install and Build
+        run: yarn install --frozen-lockfile && yarn build
         env:
           NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}

.github/workflows/firebase-hosting-pull-request.yml

@@ -2,7 +2,7 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on PR
-'on': pull_request
+"on": pull_request
 jobs:
   build_and_preview:
     runs-on: ubuntu-latest
@@ -12,9 +12,9 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: "16.x"
       - name: Install and Build
-        run: npm ci && npm run build
+        run: yarn install --frozen-lockfile && yarn build
         env:
           NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.DEV_NEXT_PUBLIC_FIREBASE_API_KEY }}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.DEV_NEXT_PUBLIC_FIREBASE_APP_ID }}
@@ -29,6 +29,6 @@ jobs:
       - name: Deploy to Firebase
         uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_NWPLUS_UBC }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_NWPLUS_UBC }}"
           projectId: nwplus-ubc

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "avoid"
+}

components/Assessment/Button.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import styled from 'styled-components';
-import { hexToRgba } from '../../utility/utilities';
-import { ASSESSMENT_COLOR } from '../../constants';
+import React from 'react'
+import styled from 'styled-components'
+import { ASSESSMENT_COLOR } from '../../constants'
+import { hexToRgba } from '../../utility/utilities'
 
 const buttonWidth = {
   small: '40px',
   default: '60px',
   large: '300px',
   flex: '',
-};
+}
 
 const buttonHeightPadding = {
   short: '0.25em',
   default: '0.5em',
   tall: '1em',
-};
+}
 
 const StyledButton = styled.a`
   vertical-align: middle;
@@ -23,29 +23,27 @@ const StyledButton = styled.a`
   border: transparent;
   transition: all 250ms;
   max-width: 100%;
-  width: ${(p) => (p.width ? buttonWidth[p.width] : buttonWidth.default)};
+  width: ${p => (p.width ? buttonWidth[p.width] : buttonWidth.default)};
   text-align: center;
-  padding: ${(p) =>
-      p.height ? buttonHeightPadding[p.height] : buttonHeightPadding.default}
-    0.75em;
+  padding: ${p => (p.height ? buttonHeightPadding[p.height] : buttonHeightPadding.default)} 0.75em;
   border-radius: 3px;
-  margin: 1em ${(p) => (p.no_margin ? '0px' : '0.75em')};
+  margin: 1em ${p => (p.no_margin ? '0px' : '0.75em')};
   :hover {
     cursor: pointer;
   }
   :focus {
     outline: 0;
   }
-  ${(p) =>
+  ${p =>
     p.disabled &&
     `
     cursor: not-allowed;
     opacity: 0.5;
     `}
   color: white;
-  background: ${(p) => p.bColor};
+  background: ${p => p.bColor};
   :hover {
-    ${(p) =>
+    ${p =>
       p.disabled
         ? `
       cursor: not-allowed;
@@ -58,18 +56,14 @@ const StyledButton = styled.a`
     box-shadow: 0 0 0 0.2rem ${hexToRgba(ASSESSMENT_COLOR.BLUE_TEXT, 0.5)};
   }
   height: 25px;
-`;
+`
 
-export const Button = (props) => {
+export const Button = props => {
   return (
-    <StyledButton
-      {...props}
-      tabIndex={props.disabled ? null : 0}
-      href={props.disabled ? null : props.href}
-    >
+    <StyledButton {...props} tabIndex={props.disabled ? null : 0} href={props.disabled ? null : props.href}>
       {props.children}
     </StyledButton>
-  );
-};
+  )
+}
 
-export default Button;
+export default Button

components/Assessment/CSVButton.js

@@ -1,24 +1,24 @@
-import React, { useState, useRef } from 'react';
-import { CSVLink } from 'react-csv';
-import { Button } from './Button';
-import { getCSVData } from '../../utility/firebase';
-import Spinner from '../../assets/spinner.svg';
+import React, { useRef, useState } from 'react'
+import { CSVLink } from 'react-csv'
+import Spinner from '../../assets/spinner.svg'
+import { getCSVData } from '../../utility/firebase'
+import { Button } from './Button'
 
 export default function CSVButton() {
-  const [csvData, setCSVData] = useState('');
-  const downloadLink = useRef();
-  const [loading, setLoading] = useState(false);
+  const [csvData, setCSVData] = useState('')
+  const downloadLink = useRef()
+  const [loading, setLoading] = useState(false)
   return (
     <>
       <Button
         width="large"
         bColor="black"
         onClick={async () => {
-          setLoading(true);
-          const data = await getCSVData();
-          setLoading(false);
-          setCSVData(data);
-          downloadLink.current.link.click();
+          setLoading(true)
+          const data = await getCSVData()
+          setLoading(false)
+          setCSVData(data)
+          downloadLink.current.link.click()
         }}
       >
         <div style={{ position: 'relative', textAlign: 'center' }}>
@@ -37,12 +37,7 @@ export default function CSVButton() {
           )}
         </div>
       </Button>
-      <CSVLink
-        style={{ visibility: 'hidden' }}
-        ref={downloadLink}
-        filename="applicants.csv"
-        data={csvData}
-      />
+      <CSVLink style={{ visibility: 'hidden' }} ref={downloadLink} filename="applicants.csv" data={csvData} />
     </>
-  );
+  )
 }

components/Assessment/ExportModal.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import CSVButton from './CSVButton';
-import Modal from './Modal';
-import ResumeExportButton from './ResumeExportButton';
+import React from 'react'
+import CSVButton from './CSVButton'
+import Modal from './Modal'
+import ResumeExportButton from './ResumeExportButton'
 
 export default function ExportModal({ setShowing }) {
   return (
@@ -10,5 +10,5 @@ export default function ExportModal({ setShowing }) {
       <CSVButton />
       <ResumeExportButton />
     </Modal>
-  );
+  )
 }

components/Assessment/Modal.js

@@ -1,13 +1,13 @@
-import React, { useRef, useEffect } from 'react';
-import styled from 'styled-components';
+import React, { useEffect, useRef } from 'react'
+import styled from 'styled-components'
 
 const GreyDiv = styled.div`
   height: 100vh;
   width: 100vw;
   background: rgba(0, 0, 0, 0.4);
   position: absolute;
   z-index: 99;
-`;
+`
 
 const ModalDiv = styled.div`
   width: 400px;
@@ -22,31 +22,31 @@ const ModalDiv = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-`;
+`
 
 export default function Modal({ children, setShowing }) {
-  const backgroundRef = useRef();
+  const backgroundRef = useRef()
   useEffect(() => {
     const escFunction = ({ keyCode }) => {
       if (keyCode === 27) {
-        setShowing(false);
+        setShowing(false)
       }
-    };
-    document.addEventListener('keyup', escFunction, false);
+    }
+    document.addEventListener('keyup', escFunction, false)
     return () => {
-      document.removeEventListener('keyup', escFunction, false);
-    };
-  });
+      document.removeEventListener('keyup', escFunction, false)
+    }
+  })
   return (
     <GreyDiv
       ref={backgroundRef}
-      onClick={(e) => {
+      onClick={e => {
         if (backgroundRef.current && backgroundRef.current === e.target) {
-          setShowing(false);
+          setShowing(false)
         }
       }}
     >
       <ModalDiv>{children}</ModalDiv>
     </GreyDiv>
-  );
+  )
 }

components/Assessment/PopoutWindow.js

@@ -1,30 +1,28 @@
-import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { useEffect, useState } from 'react'
+import ReactDOM from 'react-dom'
 
 export default function PopoutWindow({ children, setWindowClosed, title }) {
-  const [containerElement, setContainerElement] = useState();
+  const [containerElement, setContainerElement] = useState()
   useEffect(() => {
-    const features = 'width=800, height=500, left=300, top=200';
-    const extWindow = window.open('', '', features);
-    let containerEle = null;
+    const features = 'width=800, height=500, left=300, top=200'
+    const extWindow = window.open('', '', features)
+    let containerEle = null
     if (extWindow) {
-      containerEle = extWindow.document.createElement('div');
-      extWindow.document.body.appendChild(containerEle);
-      extWindow.document.title = title;
+      containerEle = extWindow.document.createElement('div')
+      extWindow.document.body.appendChild(containerEle)
+      extWindow.document.title = title
       extWindow.addEventListener('beforeunload', () => {
-        setWindowClosed();
-      });
+        setWindowClosed()
+      })
     } else {
-      setWindowClosed();
+      setWindowClosed()
     }
-    setContainerElement(containerEle);
+    setContainerElement(containerEle)
     return () => {
       if (extWindow) {
-        extWindow.close();
+        extWindow.close()
       }
-    };
-  }, [title, setWindowClosed]);
-  return containerElement
-    ? ReactDOM.createPortal(children, containerElement)
-    : null;
+    }
+  }, [title, setWindowClosed])
+  return containerElement ? ReactDOM.createPortal(children, containerElement) : null
 }

components/Assessment/ResumeExportButton.js

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
-import { Button } from './Button';
-import { getAllResumes } from '../../utility/firebase';
-import Spinner from '../../assets/spinner.svg';
+import React, { useState } from 'react'
+import Spinner from '../../assets/spinner.svg'
+import { getAllResumes } from '../../utility/firebase'
+import { Button } from './Button'
 
 export default function ResumeExportButton() {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
   return (
     <>
       <Button
         width="large"
         bColor="black"
         onClick={async () => {
-          setLoading(true);
-          await getAllResumes();
-          setLoading(false);
+          setLoading(true)
+          await getAllResumes()
+          setLoading(false)
         }}
       >
         <div style={{ position: 'relative', textAlign: 'center' }}>
@@ -33,5 +33,5 @@ export default function ResumeExportButton() {
         </div>
       </Button>
     </>
-  );
+  )
 }