Disable frontend access to applications that have not opened yet

frontend/pages/club/[club]/application/[application]/index.tsx

@@ -5,7 +5,8 @@ import { Container, Icon, Title } from 'components/common'
 import { Field, Form, Formik } from 'formik'
 import moment from 'moment'
 import { NextPageContext } from 'next'
-import React, { ReactElement, useState } from 'react'
+import { ReactElement, useState } from 'react'
+import TimeAgo from 'react-timeago'
 import renderPage from 'renderPage'
 import styled from 'styled-components'
 import {
@@ -111,6 +112,18 @@ const ApplicationPage = ({
  questions,
  initialValues,
 }: ApplicationPageProps): ReactElement => {
+ if (new Date() < new Date(application.application_start_time)) {
+ return (
+ <Container paddingTop>
+ <Title>Application Not Open</Title>
+ <p>
+ This application is not open yet. Please check back{' '}
+ <TimeAgo date={application.application_start_time} />.
+ </p>
+ </Container>
+ )
+ }
+
  const [errors, setErrors] = useState<string | null>(null)
  const [saved, setSaved] = useState<boolean>(false)
  const [currentCommittee, setCurrentCommittee] = useState<{

frontend/pages/club/[club]/apply.tsx

@@ -14,6 +14,7 @@ import {
 } from 'components/common'
 import { NextPageContext } from 'next'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { ReactElement, useState } from 'react'
 import TimeAgo from 'react-timeago'
 import renderPage from 'renderPage'
@@ -35,6 +36,7 @@ type Props = {
 }
 
 const ApplyPage = ({ club, applications }: Props): ReactElement => {
+ const router = useRouter()
  const [updatedIsRequest, setUpdatedIsRequest] = useState<boolean>(
  club.is_request,
  )
@@ -170,13 +172,15 @@ const ApplyPage = ({ club, applications }: Props): ReactElement => {
  {new Date(app.result_release_time).toLocaleString()} (
  <TimeAgo date={app.result_release_time} />)
  </div>
- <a
- href={app.external_url}
- rel="noopener noreferrer"
+ <button
+ onClick={() => {
+ router.push(app.external_url)
+ }}
  className="button is-success mt-3"
+ disabled={new Date() < new Date(app.application_start_time)}
  >
  <Icon name="edit" /> Apply
- </a>
+ </button>
  </div>
  ))}
  <Subtitle>Already a member?</Subtitle>