feat: judging view for Hackathon app

packages/hackathon/src/components/ProjectViewDialog/ProjectViewDialog.tsx

@@ -23,28 +23,31 @@
  SOFTWARE.
 
  */
+
 import type { FC } from 'react'
 import React from 'react'
 import { Dialog, DialogHeader, DialogContent } from '@looker/components'
-import { ProjectView } from '../../scenes/ProjectViewScene/components'
 import type { IProjectProps } from '../../models'
+import { ProjectView } from '../../scenes'
 
 interface ProjectViewDialogProps {
+  /** if assigned, dialog appears. If undefined, dialog is hidden */
   project?: IProjectProps
-  closer: () => void
+  /** Dialog closing event handler */
+  onClose: () => void
 }
 
 export const ProjectViewDialog: FC<ProjectViewDialogProps> = ({
   project,
-  closer,
+  onClose,
 }) => {
   const closeDialog = () => {
-    closer()
+    onClose()
   }
 
   return (
     <Dialog isOpen={!!project} onClose={closeDialog}>
-      <DialogHeader>Judging {project?.title}</DialogHeader>
+      <DialogHeader>{project?.title}</DialogHeader>
       <DialogContent>
         {!!project && <ProjectView project={project} />}
       </DialogContent>

packages/hackathon/src/routes/AppRouter.tsx

@@ -38,7 +38,7 @@ import {
   ProjectEditorScene,
   ResourceScene,
 } from '../scenes'
-import { ProjectViewScene } from '../scenes/ProjectViewScene'
+
 export enum Routes {
   HOME = '/home',
   ADMIN = '/admin',
@@ -135,11 +135,6 @@ export const AppRouter: FC<AppRouterProps> = ({ authorizedRoutes, hacker }) => (
         <ProjectEditorScene />
       </Route>
     )}
-    {authorizedRoutes.includes(Routes.VIEW_PROJECT) && (
-      <Route path={Routes.VIEW_PROJECT} exact>
-        <ProjectViewScene />
-      </Route>
-    )}
     {authorizedRoutes.includes(Routes.USERS) && (
       <Route path={Routes.USERS}>
         <UsersScene />

packages/hackathon/src/scenes/JudgingEditorScene/components/JudgingForm.tsx

@@ -34,17 +34,19 @@ import {
   ButtonOutline,
   Space,
   Span,
-  Text,
   SpaceVertical,
   FieldTextArea,
+  Tabs2,
+  Tab2,
 } from '@looker/components'
 import {
   saveJudgingRequest,
   updateJudgingData,
 } from '../../../data/judgings/actions'
 import { getHackerState } from '../../../data/hack_session/selectors'
 import type { IJudgingProps } from '../../../models'
-import { Routes } from '../../../routes/AppRouter'
+import { Routes } from '../../../routes'
+import { JudgingView } from './JudgingView'
 
 interface JudgingFormProps {
   judging: IJudgingProps
@@ -79,103 +81,101 @@ export const JudgingForm: FC<JudgingFormProps> = ({ judging, readonly }) => {
   const impact = judging.impact
 
   return (
-    <>
-      {!hacker.canAdmin && judging.user_id !== hacker.id && (
-        <Text>You can't judge this</Text>
-      )}
-      <SpaceVertical gap="xlarge" width="40vh">
-        <Heading as="h1">{judging.$title}</Heading>
-        <Span>{judging.$description}</Span>
-        <SpaceVertical gap="medium">
-          <Slider
-            name="execution"
-            onChange={onValueChange}
-            value={execution}
-            min={1}
-            max={10}
-            step={1}
-            disabled={readonly}
-          />
-          <Heading>
-            <strong>Execution:</strong> {execution}
-          </Heading>
-        </SpaceVertical>
-        <SpaceVertical gap="medium">
-          <Slider
-            name="ambition"
-            onChange={onValueChange}
-            value={ambition}
-            min={1}
-            max={10}
-            step={1}
-            disabled={readonly}
-          />
-          <Heading>
-            <strong>Ambition:</strong> {ambition}
-          </Heading>
-        </SpaceVertical>
-        <SpaceVertical gap="medium">
-          <Slider
-            name="coolness"
-            onChange={onValueChange}
-            value={coolness}
-            min={1}
-            max={10}
-            step={1}
-            disabled={readonly}
-          />
-          <Heading>
-            <strong>Coolness:</strong> {coolness}
-          </Heading>
-        </SpaceVertical>
-        <SpaceVertical gap="medium">
-          <Slider
-            name="impact"
-            onChange={onValueChange}
-            value={impact}
-            min={1}
-            max={10}
-            step={1}
-            disabled={readonly}
-          />
-          <Heading>
-            <strong>Impact:</strong> {impact}
-          </Heading>
-        </SpaceVertical>
-        <Heading>
-          <strong>Total Score: {judging.score}</strong>
-        </Heading>
-        <SpaceVertical gap="medium">
-          <FieldTextArea
-            name="notes"
-            resize="vertical"
-            label="Notes"
-            placeholder="Additional comments about this project"
-            defaultValue={judging.notes}
-            onChange={onValueChange}
-            disabled={readonly}
-          />
-        </SpaceVertical>
-        <SpaceVertical gap="medium">
-          <FieldTextArea
-            readOnly
-            resize="vertical"
-            label="Copy the link below and paste into a new browser window to see additional information about the project"
-            placeholder="A link to more information"
-            defaultValue={judging.$more_info || ''}
-          />
-        </SpaceVertical>
-        <Space between>
-          <Space>
-            <ButtonOutline type="button" onClick={handleCancel}>
-              Return to judging
-            </ButtonOutline>
-            <Button type="submit" onClick={handleSave} disabled={readonly}>
-              Save judging
-            </Button>
-          </Space>
-        </Space>
-      </SpaceVertical>
-    </>
+    <SpaceVertical>
+      <Tabs2>
+        <Tab2 id="form" label="Form">
+          {!hacker.canAdmin && judging.user_id !== hacker.id && (
+            <Span>You are not assigned to judge this project</Span>
+          )}
+          <SpaceVertical gap="xlarge" width="40vh">
+            <Heading as="h1">{judging.$title}</Heading>
+            <Span>{judging.$description}</Span>
+            <SpaceVertical gap="medium">
+              <Slider
+                name="execution"
+                onChange={onValueChange}
+                value={execution}
+                min={1}
+                max={10}
+                step={1}
+                disabled={readonly}
+              />
+              <Heading>
+                <strong>Execution:</strong> {execution}
+              </Heading>
+            </SpaceVertical>
+            <SpaceVertical gap="medium">
+              <Slider
+                name="ambition"
+                onChange={onValueChange}
+                value={ambition}
+                min={1}
+                max={10}
+                step={1}
+                disabled={readonly}
+              />
+              <Heading>
+                <strong>Ambition:</strong> {ambition}
+              </Heading>
+            </SpaceVertical>
+            <SpaceVertical gap="medium">
+              <Slider
+                name="coolness"
+                onChange={onValueChange}
+                value={coolness}
+                min={1}
+                max={10}
+                step={1}
+                disabled={readonly}
+              />
+              <Heading>
+                <strong>Coolness:</strong> {coolness}
+              </Heading>
+            </SpaceVertical>
+            <SpaceVertical gap="medium">
+              <Slider
+                name="impact"
+                onChange={onValueChange}
+                value={impact}
+                min={1}
+                max={10}
+                step={1}
+                disabled={readonly}
+              />
+              <Heading>
+                <strong>Impact:</strong> {impact}
+              </Heading>
+            </SpaceVertical>
+            <Heading>
+              <strong>Total Score: {judging.score}</strong>
+            </Heading>
+            <SpaceVertical gap="medium">
+              <FieldTextArea
+                name="notes"
+                resize="vertical"
+                label="Notes"
+                placeholder="Additional comments about this project (supports markdown)"
+                defaultValue={judging.notes}
+                onChange={onValueChange}
+                disabled={readonly}
+              />
+            </SpaceVertical>
+            <Space between>
+              <Space>
+                <ButtonOutline type="button" onClick={handleCancel}>
+                  Return to judging
+                </ButtonOutline>
+                <Button type="submit" onClick={handleSave} disabled={readonly}>
+                  Save judging
+                </Button>
+              </Space>
+            </Space>
+          </SpaceVertical>
+        </Tab2>
+        <Tab2 id="preview" label="Preview">
+          <JudgingView judging={judging} />
+        </Tab2>
+      </Tabs2>
+    </SpaceVertical>
   )
 }

packages/hackathon/src/scenes/JudgingEditorScene/components/JudgingView.tsx

@@ -0,0 +1,68 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import type { FC } from 'react'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import type { IJudgingProps } from '../../../models'
+import { getTechnologies } from '../../../data/hack_session/selectors'
+import { ExtMarkdown } from '../../../components'
+import { getMembers, techDescriptions } from '../../ProjectsScene'
+
+interface JudgingViewProps {
+  judging: IJudgingProps
+}
+
+export const JudgingView: FC<JudgingViewProps> = ({ judging }) => {
+  const availableTechnologies = useSelector(getTechnologies)
+
+  const tech = techDescriptions(judging.$technologies, availableTechnologies)
+  const members = getMembers(judging.$members)
+  const view = `# ${judging.$title}
+by ${members}
+
+${judging.$description}
+
+| Criteria | Score |
+| :-------- | -----: |
+| Execution | ${judging.execution} |
+| Ambition | ${judging.ambition} |
+| Coolness | ${judging.coolness} |
+| Impact | ${judging.impact} |
+| **Score** | **${judging.score}** |
+
+## Judge's notes
+
+${judging.notes}
+
+**Uses**: ${tech}
+
+**Project type**: ${judging.$project_type}
+
+**Contestant**: ${judging.$contestant ? 'Yes' : 'No'}
+`
+  return <ExtMarkdown source={view} />
+}

packages/hackathon/src/scenes/ProjectViewScene/index.ts → packages/hackathon/src/scenes/JudgingEditorScene/components/JudgingViewDialog.tsx

@@ -23,4 +23,33 @@
  SOFTWARE.
 
  */
-export * from './ProjectViewScene'
+import type { FC } from 'react'
+import React from 'react'
+import { Dialog, DialogHeader, DialogContent } from '@looker/components'
+import type { IJudgingProps } from '../../../models'
+import { JudgingView } from './JudgingView'
+
+interface JudgingViewDialogProps {
+  /** If assigned, Dialog appears. If undefined, dialog closes */
+  judging?: IJudgingProps
+  /** Dialog closing event handler */
+  onClose: () => void
+}
+
+export const JudgingViewDialog: FC<JudgingViewDialogProps> = ({
+  judging,
+  onClose,
+}) => {
+  const closeDialog = () => {
+    onClose()
+  }
+
+  return (
+    <Dialog isOpen={!!judging} onClose={closeDialog}>
+      <DialogHeader>Judging {judging?.$title}</DialogHeader>
+      <DialogContent>
+        {!!judging && <JudgingView judging={judging} />}
+      </DialogContent>
+    </Dialog>
+  )
+}

packages/hackathon/src/scenes/JudgingEditorScene/components/index.ts

@@ -23,4 +23,7 @@
  SOFTWARE.
 
  */
+
 export * from './JudgingForm'
+export * from './JudgingView'
+export * from './JudgingViewDialog'

packages/hackathon/src/scenes/JudgingEditorScene/index.ts

@@ -24,3 +24,4 @@
 
  */
 export * from './JudgingEditorScene'
+export * from './components'