feat: disable "Add Project" when judging starts (#894)

- Judging time for the hackathon is always shown at the bottom of the project list now - If judging has started: - the judging start time is displayed to the left of the `Add Project` button - if the user has the ability to lock projects, `Add Project` remains enabled - if the user is a regular hackathon attendee, `Add Project` is disabled - Made intro agenda on the home page display English or Japanese depending on the user's locale # Screenshots ## Regular hackathon attendee ![image](https://user-images.githubusercontent.com/6099714/140976947-3a38f279-d18e-4823-800b-53e9670413c8.png) ## User who can lock projects ![image](https://user-images.githubusercontent.com/6099714/140976813-7300f707-6f83-48a5-b5d6-dfa0776153e9.png) Co-authored-by: jeremytchang <78522362+jeremytchang@users.noreply.github.com>
looker-open-source · Nov 9, 2021 · d3386ae · d3386ae
1 parent 9581b20
commit d3386ae
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 14 deletions.
diff --git a/packages/hackathon/src/scenes/HomeScene/HomeScene.tsx b/packages/hackathon/src/scenes/HomeScene/HomeScene.tsx
@@ -28,6 +28,7 @@ import type { FC } from 'react'
 import React from 'react'
 
 import { Heading, SpaceVertical, Paragraph, Span } from '@looker/components'
+import { getExtensionSDK } from '@looker/extension-sdk'
 import type { IHackerProps } from '../../models'
 import { ExtMarkdown } from '../../components'
 import { Agenda } from './components'
@@ -41,6 +42,16 @@ const MARKDOWN_LINEBREAK = '  '
 
 export const HomeScene: FC<HomeSceneProps> = ({ hacker }) => {
   const schedule = localAgenda(hacker.locale)
+  const host = getExtensionSDK().lookerHostData?.hostUrl
+  const intro =
+    hacker.locale === 'ja_JP'
+      ? `### ハッカソン詳細については、[よくある質問記事](https://community.looker.com/hackathome-2021-1026/hackathome-2021-%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F-28518)をご確認いただけます。
+現地時間が表示されるため、[アカウント](${host}/account)の「タイムゾーン」を設定できます。${MARKDOWN_LINEBREAK}
+アジェンダが日本語で表示されるため、[アカウント](${host}/account)の「Locale」は「ja_JP」に指定できます。
+`
+      : `### Our [Hackathon FAQ](https://community.looker.com/hackathome-2021-1026/hackathome-2021-attendee-faq-28429) contains all event details!
+*Change your [account](${host}/account) timezone to display times in your timezone*${MARKDOWN_LINEBREAK}
+*Change your [account](${host}/account) locale to \`ja_JP\` to display the agenda in Japanese.*`
 
   return (
     <>
@@ -50,16 +61,7 @@ export const HomeScene: FC<HomeSceneProps> = ({ hacker }) => {
             Agenda
           </Heading>
           <Paragraph>
-            <ExtMarkdown
-              source={`### Our [Hackathon FAQ](https://community.looker.com/hackathome-2021-1026/hackathome-2021-attendee-faq-28429) contains all event details! 
-*Change your [account](https://hack.looker.com/account) timezone to display times in your timezone*${MARKDOWN_LINEBREAK}
-*Change your [account](https://hack.looker.com/account) locale to ${'`ja_JP`'} to display agenda in Japanese.*${MARKDOWN_LINEBREAK}
-${MARKDOWN_LINEBREAK}${MARKDOWN_LINEBREAK}
-### ハッカソン詳細については、[よくある質問記事](https://community.looker.com/hackathome-2021-1026/hackathome-2021-%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F-28518)をご確認いただけます。
-現地時間が表示されるため、[アカウント](https://hack.looker.com/account)の「タイムゾーン」を設定できます。${MARKDOWN_LINEBREAK}
-アジェンダが日本語で表示されるため、[アカウント](https://hack.looker.com/account)の「Locale」は「ja_JP」に指定できます。
-`}
-            />
+            <ExtMarkdown source={intro} />
           </Paragraph>
         </Span>
         <Agenda schedule={schedule} hacker={hacker} />

diff --git a/packages/hackathon/src/scenes/HomeScene/components/agendaUtils.ts b/packages/hackathon/src/scenes/HomeScene/components/agendaUtils.ts
@@ -73,11 +73,27 @@ export const dateLocale = (locale: string) => (locale === 'ja_JP' ? ja : enUS)
 export const dateString = (
   value: AgendaTime,
   locale: string,
-  template = 'LLL'
+  template = 'PPpp'
 ) => {
   return format(value, template, { locale: dateLocale(locale) })
 }
 
+/**
+ * Localized, zoned time
+ * @param value to zone and localize
+ * @param zone to use
+ * @param locale to use
+ * @param template override for dateString()
+ */
+export const zonedLocaleDate = (
+  value: AgendaTime,
+  zone: string,
+  locale: string,
+  template = 'PPpp'
+) => {
+  return dateString(zoneDate(value, zone), locale, template)
+}
+
 /**
  * Display the Month abbreviation and nth day
  * @param date to display

diff --git a/packages/hackathon/src/scenes/ProjectsScene/ProjectsScene.tsx b/packages/hackathon/src/scenes/ProjectsScene/ProjectsScene.tsx
@@ -28,18 +28,20 @@ import type { FC } from 'react'
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import { Button, Space, Heading } from '@looker/components'
+import { Button, Space, Heading, Span } from '@looker/components'
 import { Add } from '@styled-icons/material-outlined/Add'
 import { Create } from '@styled-icons/material-outlined/Create'
 import { Lock } from '@styled-icons/material-outlined/Lock'
 import { lockProjects } from '../../data/projects/actions'
 import { isLoadingState } from '../../data/common/selectors'
 import { Loading } from '../../components'
-import { Routes } from '../../routes/AppRouter'
+import { Routes } from '../../routes'
 import {
   getCurrentHackathonState,
   getHackerState,
 } from '../../data/hack_session/selectors'
+import { canLockProject } from '../../utils'
+import { Era, eraColor, zonedLocaleDate } from '../HomeScene/components'
 import { ProjectList } from './components'
 
 interface ProjectSceneProps {}
@@ -63,6 +65,24 @@ export const ProjectsScene: FC<ProjectSceneProps> = () => {
     if (hackathon) dispatch(lockProjects(false, hackathon._id))
   }
 
+  let judgingStarted = false
+  let judgingString = ''
+  if (hackathon && hacker) {
+    judgingStarted = hackathon.judging_starts?.getTime() < new Date().getTime()
+
+    const dateString = zonedLocaleDate(
+      hackathon.judging_starts,
+      hacker.timezone,
+      hacker.locale
+    )
+
+    if (judgingStarted) {
+      judgingString = `Judging started: ${dateString}`
+    } else {
+      judgingString = `Judging starts: ${dateString}`
+    }
+  }
+
   return (
     <>
       <Space>
@@ -73,7 +93,11 @@ export const ProjectsScene: FC<ProjectSceneProps> = () => {
       </Space>
       <ProjectList />
       <Space pt="xlarge">
-        <Button iconBefore={<Add />} onClick={handleAdd} disabled={isLoading}>
+        <Button
+          iconBefore={<Add />}
+          onClick={handleAdd}
+          disabled={(isLoading || judgingStarted) && !canLockProject(hacker)}
+        >
           Add Project
         </Button>
         <>
@@ -96,6 +120,9 @@ export const ProjectsScene: FC<ProjectSceneProps> = () => {
             </>
           )}
         </>
+        <Span color={eraColor(judgingStarted ? Era.past : Era.future)}>
+          {judgingString}
+        </Span>
       </Space>
     </>
   )