Release/2.2.0 (#785)

hackmcgill · Jan 2, 2020 · a980239 · a980239
1 parent fdc93d5
commit a980239
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 83 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.0](https://github.com/hackmcgill/dashboard/tree/2.2.0) - 2020-01-01
+
+### Added
+
+- Add application creation prevention past the deadline
+
+### Changed
+
+- Updated layout for confirm email page
+
 ## [2.1.0](https://github.com/hackmcgill/dashboard/tree/2.1.0) - 2019-12-31
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hackerapi-frontend",
   "homepage": "https://app.mchacks.ca",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@rebass/grid": "^6.0.0-7",

diff --git a/src/assets/images/telescope.svg b/src/assets/images/telescope.svg
diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -64,6 +64,9 @@ export const WITHDRAWN_STATUS_TEXT =
 export const CHECKED_IN_STATUS_TEXT = 'You’re checked-in and ready to go!';
 
 // Application management
+export const APPLICATION_CLOSE_TIME = 1578070799000; // Jan 3, 2020 11:59:59PM EST
+export const DEADLINE_PASSED_LABEL =
+  'Sorry, we are no longer accepting applications at this time.';
 export const BARRIERS_LABEL = 'Would you require any accommodations?';
 export const BUS_REQUEST_LABEL = 'Will you require a seat on a bus?';
 export const BUS_REQUEST_SUBTITLE =

diff --git a/src/features/Account/ConfirmAccountContainer.tsx b/src/features/Account/ConfirmAccountContainer.tsx
@@ -25,7 +25,7 @@ interface IConfirmAccountState {
 class ConfirmAccountContainer extends React.Component<
   {},
   IConfirmAccountState
-  > {
+> {
   constructor(props: {}) {
     super(props);
     this.state = {

diff --git a/src/features/Account/ConfirmationEmailSentComponent.tsx b/src/features/Account/ConfirmationEmailSentComponent.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import Helmet from 'react-helmet';
 
 import { APIResponse, Auth } from '../../api';
-import constructionSVG from '../../assets/images/construction.svg';
 import { EMAIL_SENT, HACKATHON_NAME, RESEND_CONF_EMAIL } from '../../config';
 import {
   Button,
@@ -16,14 +15,16 @@ import {
 import ValidationErrorGenerator from '../../shared/Form/validationErrorGenerator';
 import WithToasterContainer from '../../shared/HOC/withToaster';
 
+import telescope from '../../assets/images/telescope.svg';
+
 interface IConfirmationEmailSentState {
   buttonDisabled: boolean;
 }
 
 class ConfirmationEmailSentComponent extends React.Component<
   {},
   IConfirmationEmailSentState
-> {
+  > {
   private sendDelay: number;
 
   constructor(props: {}) {
@@ -48,17 +49,17 @@ class ConfirmationEmailSentComponent extends React.Component<
         <Flex alignItems={'center'} flexDirection={'column'}>
           <Box>
             <Image
-              src={constructionSVG}
-              imgHeight={'6rem'}
-              padding={'0.5rem'}
+              src={telescope}
+              imgHeight={'11rem'}
+              padding={'0 0 30px 0'}
             />
           </Box>
           <Box>
-            <H1 fontSize={'48px'}>Confirm your Email</H1>
+            <H1 fontSize={'48px'} textAlign={'center'}>Confirm your Email</H1>
           </Box>
         </Flex>
-        <MaxWidthBox width={1} fontSize={[2, 3, 4]} mb={'20px'}>
-          <Paragraph paddingBottom={'32px'} textAlign={'center'}>
+        <MaxWidthBox width={1} fontSize={[2, 3, 4]} mb={'28px'}>
+          <Paragraph textAlign={'center'}>
             Please check your inbox for a confirmation email. Click the link in
             the email to confirm your email address.
           </Paragraph>

diff --git a/src/features/Application/ManageApplicationContainer.tsx b/src/features/Application/ManageApplicationContainer.tsx
@@ -66,6 +66,7 @@ interface IManageApplicationState {
   hackerDetails: IHacker;
   pageNumber: number;
   resume?: File;
+  loaded: boolean;
 }
 
 interface IManageApplicationProps {
@@ -81,6 +82,7 @@ class ManageApplicationContainer extends React.Component<
       mode: props.mode,
       submitted: false,
       submitting: false,
+      loaded: false,
       pageNumber: 1,
       hackerDetails: {
         id: '',
@@ -147,74 +149,73 @@ class ManageApplicationContainer extends React.Component<
         this.setState({ mode: ManageApplicationModes.CREATE });
       }
     }
+    this.setState({ loaded: true });
   }
 
   public render() {
-    const { mode, hackerDetails, submitted, pageNumber } = this.state;
-    return submitted ? (
-      <Redirect to={FrontendRoute.HOME_PAGE} />
-    ) : (
-      // <HorizontalSpacer paddingLeft={'20%'}>
-      <MaxWidthBox m={'auto'} maxWidth={'500px'}>
-        {/* <Sidebar
-            currentPage="Application"
-            status={this.state.hackerDetails.status}
-            confirmed={true}
-          /> */}
-        <BackgroundImage
-          right={'10%'}
-          top={'178px'}
-          src={Drone}
-          imgHeight={'133px'}
-          position={'fixed' as 'fixed'}
-        />
-        <BackgroundImage
-          left={'5%'}
-          bottom={'5%'}
-          src={Bulby}
-          imgHeight={'290px'}
-          position={'fixed' as 'fixed'}
-        />
-        <Helmet>
-          <title>
-            {mode === ManageApplicationModes.CREATE ? 'Create' : 'Edit'}{' '}
-            Application | {CONSTANTS.HACKATHON_NAME}
-          </title>
-        </Helmet>
-        <MaxWidthBox maxWidth={'500px'} m={'auto'}>
-          <H1
-            color={theme.colors.red}
-            fontSize={'30px'}
-            textAlign={'left'}
-            marginTop={'0px'}
-            marginBottom={'20px'}
-            marginLeft={'0px'}
-            paddingBottom={'20px'}
-            paddingTop={'70px'}
-          >
-            {mode === ManageApplicationModes.CREATE ? 'Create' : 'Edit'} your
-            Application
-          </H1>
-          <FormDescription>{CONSTANTS.REQUIRED_DESCRIPTION}</FormDescription>
+    const { mode, hackerDetails, submitted, pageNumber, loaded } = this.state;
+    return loaded ? (
+      // If application creation deadline of Jan 3, 2020 11:59:59PM EST has passed or form is submitted, return user to the home page
+      (Date.now() > CONSTANTS.APPLICATION_CLOSE_TIME &&
+        mode === ManageApplicationModes.CREATE) ||
+      submitted ? (
+        <Redirect to={FrontendRoute.HOME_PAGE} />
+      ) : (
+        <MaxWidthBox m={'auto'} maxWidth={'500px'}>
+          <BackgroundImage
+            right={'10%'}
+            top={'178px'}
+            src={Drone}
+            imgHeight={'133px'}
+            position={'fixed' as 'fixed'}
+          />
+          <BackgroundImage
+            left={'5%'}
+            bottom={'5%'}
+            src={Bulby}
+            imgHeight={'290px'}
+            position={'fixed' as 'fixed'}
+          />
+          <Helmet>
+            <title>
+              {mode === ManageApplicationModes.CREATE ? 'Create' : 'Edit'}{' '}
+              Application | {CONSTANTS.HACKATHON_NAME}
+            </title>
+          </Helmet>
+          <MaxWidthBox maxWidth={'500px'} m={'auto'}>
+            <H1
+              color={theme.colors.red}
+              fontSize={'30px'}
+              textAlign={'left'}
+              marginTop={'0px'}
+              marginBottom={'20px'}
+              marginLeft={'0px'}
+              paddingBottom={'20px'}
+              paddingTop={'70px'}
+            >
+              {mode === ManageApplicationModes.CREATE ? 'Create' : 'Edit'} your
+              Application
+            </H1>
+            <FormDescription>{CONSTANTS.REQUIRED_DESCRIPTION}</FormDescription>
+          </MaxWidthBox>
+          <Formik
+            enableReinitialize={true}
+            initialValues={{
+              hacker: hackerDetails,
+              resume: this.state.resume ? this.state.resume : undefined,
+              pageNumber,
+            }}
+            onSubmit={this.handleSubmit}
+            onReset={this.previousPage}
+            render={this.renderFormik}
+            validationSchema={getValidationSchema(
+              mode === ManageApplicationModes.CREATE,
+              this.state.pageNumber
+            )}
+          />
         </MaxWidthBox>
-        <Formik
-          enableReinitialize={true}
-          initialValues={{
-            hacker: hackerDetails,
-            resume: this.state.resume ? this.state.resume : undefined,
-            pageNumber,
-          }}
-          onSubmit={this.handleSubmit}
-          onReset={this.previousPage}
-          render={this.renderFormik}
-          validationSchema={getValidationSchema(
-            mode === ManageApplicationModes.CREATE,
-            this.state.pageNumber
-          )}
-        />
-      </MaxWidthBox>
-      // </HorizontalSpacer>
-    );
+      )
+    ) : null;
   }
 
   /**

diff --git a/src/features/Nav/Navbar.tsx b/src/features/Nav/Navbar.tsx
@@ -1,5 +1,6 @@
 // import { Box } from '@rebass/grid';
 import * as React from 'react';
+import * as CONSTANTS from '../../config/constants';
 
 import { slide as Menu } from 'react-burger-menu';
 import { Hacker } from '../../api';
@@ -31,7 +32,7 @@ interface INavbarState {
 export default class Navbar extends React.Component<
   INavbarProps,
   INavbarState
-  > {
+> {
   constructor(props: INavbarProps) {
     super(props);
     this.state = {
@@ -97,12 +98,17 @@ export default class Navbar extends React.Component<
           >
             Profile
           </NavLink>
-          <NavLink
-            href={route[2]}
-            className={this.props.activePage === 'application' ? 'active' : ''}
-          >
-            Application
-          </NavLink>
+          {Date.now() < CONSTANTS.APPLICATION_CLOSE_TIME ||
+          status !== HackerStatus.HACKER_STATUS_NONE ? (
+            <NavLink
+              href={route[2]}
+              className={
+                this.props.activePage === 'application' ? 'active' : ''
+              }
+            >
+              Application
+            </NavLink>
+          ) : null}
         </>
       );
     }

diff --git a/src/features/Status/StatusPage.tsx b/src/features/Status/StatusPage.tsx
@@ -63,7 +63,7 @@ class StatusPage extends React.Component<IStatusPageProps, {}> {
                     <Button type="button">View/Edit Application</Button>
                   </LinkDuo>
                 </Flex>
-              ) : (
+              ) : Date.now() < CONSTANTS.APPLICATION_CLOSE_TIME ? (
                 <Flex
                   flexDirection={'column'}
                   style={{ marginTop: '1em' }}
@@ -80,6 +80,20 @@ class StatusPage extends React.Component<IStatusPageProps, {}> {
                     <Button type="button">Apply</Button>
                   </LinkDuo>
                 </Flex>
+              ) : (
+                <Flex
+                  flexDirection={'column'}
+                  style={{ marginTop: '1em' }}
+                  alignItems={'center'}
+                >
+                  <Paragraph
+                    color={theme.colors.black80}
+                    textAlign={'center'}
+                    marginBottom={'3rem'}
+                  >
+                    {CONSTANTS.DEADLINE_PASSED_LABEL}
+                  </Paragraph>
+                </Flex>
               )}
             </div>
           ) : (