From d3386ae034dd5bacd067de791fe5ba5f3ed06ac4 Mon Sep 17 00:00:00 2001 From: John Kaster Date: Tue, 9 Nov 2021 13:04:59 -0800 Subject: [PATCH] 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> --- .../src/scenes/HomeScene/HomeScene.tsx | 22 +++++++------ .../HomeScene/components/agendaUtils.ts | 18 +++++++++- .../scenes/ProjectsScene/ProjectsScene.tsx | 33 +++++++++++++++++-- 3 files changed, 59 insertions(+), 14 deletions(-) diff --git a/packages/hackathon/src/scenes/HomeScene/HomeScene.tsx b/packages/hackathon/src/scenes/HomeScene/HomeScene.tsx index 013085707..218d4c29f 100644 --- 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 = ({ 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 = ({ hacker }) => { Agenda - + diff --git a/packages/hackathon/src/scenes/HomeScene/components/agendaUtils.ts b/packages/hackathon/src/scenes/HomeScene/components/agendaUtils.ts index 559427a27..ce87d41ac 100644 --- 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 index e3632c5a9..b316d7816 100644 --- 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 = () => { 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 ( <> @@ -73,7 +93,11 @@ export const ProjectsScene: FC = () => { - <> @@ -96,6 +120,9 @@ export const ProjectsScene: FC = () => { )} + + {judgingString} + )