feat: markdown, link click support, and project view for hackathon projects

packages/hackathon/src/components/SideNav/SideNav.tsx

@@ -26,7 +26,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import styled from 'styled-components'
-import { Box, MenuList, MenuItem } from '@looker/components'
+import { Box2, MenuList, MenuItem } from '@looker/components'
 import { Beaker } from '@looker/icons'
 import { Map } from '@styled-icons/material/Map'
 import { Settings } from '@styled-icons/material/Settings'
@@ -41,7 +41,7 @@ export interface SideNavProps {
 }
 
 export const SideNav: FC<SideNavProps> = ({ authorizedRoutes }) => (
-  <Box fontSize="xxlarge" mt="40px">
+  <Box2 fontSize="xxlarge" mt="40px">
     <MenuList type="none">
       {authorizedRoutes.includes(Routes.HOME) && (
         <MenuItem icon={<Home />}>
@@ -74,7 +74,7 @@ export const SideNav: FC<SideNavProps> = ({ authorizedRoutes }) => (
         </MenuItem>
       )}
     </MenuList>
-  </Box>
+  </Box2>
 )
 
 const Link = styled(NavLink)`

packages/hackathon/src/data/projects/sagas.ts

@@ -50,7 +50,14 @@ import { getCurrentProjectsState, getIsProjectMemberState } from './selectors'
 const createNewProject = (): IProjectProps => {
   const newProject: unknown = {
     title: '',
-    description: '',
+    description: `<Put a project overview here. Should be at least one paragraph.>
+
+Team name: **My fabulous team**
+- Pre-recorded [demo video link](https://youtube.com) (preferably youtube)
+- Working [demo](https://looker.com) (optional). Provide any relevant start-up instructions for someone to run the demo.
+- Links to any other [supporting resources](https://docs.google.com) (slides, images, etc.) (preferably google slides and imgur)
+- Add your pictures/screenshots of your team hacking to the [Hack@Home 2021 shared folder](https://tbd). Create your own team folder inside it if you'd like!
+`,
     project_type: 'Open',
     contestant: false,
     locked: false,

packages/hackathon/src/routes/AppRouter.tsx

@@ -38,12 +38,14 @@ import {
   ProjectEditorScene,
   ResourceScene,
 } from '../scenes'
+import { ProjectViewScene } from '../scenes/ProjectViewScene'
 export enum Routes {
   HOME = '/home',
   ADMIN = '/admin',
   JUDGING = '/judging',
   EDIT_JUDGING = '/judging/:id',
   PROJECTS = '/projects',
+  VIEW_PROJECT = '/projectview/:id',
   CREATE_PROJECT = '/projects/new',
   EDIT_PROJECT = '/projects/:id',
   USERS = '/users',
@@ -65,6 +67,7 @@ export const getAuthorizedRoutes = (
   if (hacker) {
     if (currentHackathon) {
       authorizedRoutes.push(Routes.PROJECTS)
+      authorizedRoutes.push(Routes.VIEW_PROJECT)
       authorizedRoutes.push(Routes.CREATE_PROJECT)
       authorizedRoutes.push(Routes.EDIT_PROJECT)
       if (hacker.canAdmin || hacker.canJudge || hacker.canStaff) {
@@ -132,6 +135,11 @@ 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/ProjectEditorScene/components/ProjectForm.tsx

@@ -48,6 +48,9 @@ import {
   Button,
   ButtonOutline,
   Space,
+  Tab2,
+  Tabs2,
+  SpaceVertical,
 } from '@looker/components'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useRouteMatch } from 'react-router-dom'
@@ -77,6 +80,7 @@ import { allHackersRequest } from '../../../data/hackers/actions'
 import { getJudgesState } from '../../../data/hackers/selectors'
 import { canUpdateProject, canLockProject } from '../../../utils'
 import { Routes } from '../../../routes/AppRouter'
+import { ProjectView } from '../../ProjectViewScene/components'
 
 interface ProjectFormProps {}
 
@@ -148,123 +152,140 @@ export const ProjectForm: FC<ProjectFormProps> = () => {
 
   if (!project) return <></>
 
-  // TODO move this to the sage and pull data out of rudux
+  // TODO move this to the sage and pull data out of redux
   const canUpdate = canUpdateProject(hacker, project, projectIdOrNew === 'new')
   const canLock = canLockProject(hacker) && projectIdOrNew !== 'new'
 
   return (
-    <Form
-      onSubmit={handleSubmit}
-      width="50vw"
-      mt="large"
-      validationMessages={validationMessages}
-    >
-      <Fieldset legend="Enter your project details">
-        <FieldText
-          disabled={!canUpdate}
-          required
-          name="title"
-          label="Title"
-          value={project.title}
-          onChange={(e: BaseSyntheticEvent) => {
-            dispatch(updateProjectData({ ...project, title: e.target.value }))
-          }}
-        />
-        <FieldTextArea
-          disabled={!canUpdate}
-          required
-          label="Description"
-          name="description"
-          value={project.description}
-          onChange={(e: BaseSyntheticEvent) => {
-            dispatch(
-              updateProjectData({ ...project, description: e.target.value })
-            )
-          }}
-        />
-        <FieldSelect
-          disabled={!canUpdate}
-          id="project_type"
-          label="Type"
-          required
-          value={project.project_type}
-          options={[
-            { value: 'Open' },
-            { value: 'Closed' },
-            { value: 'Invite Only' },
-          ]}
-          onChange={(value: string) => {
-            dispatch(updateProjectData({ ...project, project_type: value }))
-          }}
-        />
-        <FieldToggleSwitch
-          disabled={!canUpdate}
-          name="contestant"
-          label="Contestant"
-          onChange={(e: BaseSyntheticEvent) => {
-            dispatch(
-              updateProjectData({ ...project, contestant: e.target.checked })
-            )
-          }}
-          on={project.contestant}
-        />
-        <FieldSelectMulti
-          disabled={!canUpdate}
-          name="technologies"
-          label="Technologies"
-          required
-          options={availableTechnologies?.map((technology) => ({
-            value: technology._id,
-          }))}
-          isFilterable
-          placeholder="Type values or select from the list"
-          values={project.technologies}
-          onChange={(values: string[] = []) => {
-            dispatch(updateProjectData({ ...project, technologies: values }))
-          }}
-        />
-        <FieldText
-          disabled={!canUpdate}
-          name="more_info"
-          label="More information"
-          value={project.more_info}
-          onChange={(e: BaseSyntheticEvent) => {
-            dispatch(
-              updateProjectData({ ...project, more_info: e.target.value })
-            )
-          }}
-        />
-        {projectIdOrNew !== 'new' && (
-          <FieldSelectMulti
-            disabled={true}
-            id="members"
-            label="Members"
-            values={[...project.$members]}
-          />
-        )}
-      </Fieldset>
-      {projectIdOrNew !== 'new' && (
-        <FieldSelectMulti
-          disabled={!hacker.canAdmin}
-          id="judges"
-          label="Judges"
-          options={availableJudges.map((judge) => ({
-            value: judge.name,
-          }))}
-          isFilterable
-          placeholder="Type values or select from the list"
-          values={[...project.$judges]}
-          onChange={(values: string[] = []) => {
-            dispatch(
-              updateProjectData({
-                ...project,
-                $judges: values,
-              })
-            )
-          }}
-        />
-      )}
-      <Space between width="100%">
+    <SpaceVertical gap="u1">
+      <Tabs2>
+        <Tab2 id="form" label="Form">
+          <Form
+            onSubmit={handleSubmit}
+            width="55vw"
+            mt="large"
+            validationMessages={validationMessages}
+          >
+            <Fieldset legend="Enter your project details">
+              <FieldText
+                disabled={!canUpdate}
+                required
+                name="title"
+                label="Title"
+                value={project.title}
+                onChange={(e: BaseSyntheticEvent) => {
+                  dispatch(
+                    updateProjectData({ ...project, title: e.target.value })
+                  )
+                }}
+              />
+              <FieldTextArea
+                disabled={!canUpdate}
+                required
+                label="Description"
+                name="description"
+                value={project.description}
+                onChange={(e: BaseSyntheticEvent) => {
+                  dispatch(
+                    updateProjectData({
+                      ...project,
+                      description: e.target.value,
+                    })
+                  )
+                }}
+              />
+              <FieldSelect
+                disabled={!canUpdate}
+                id="project_type"
+                label="Type"
+                required
+                value={project.project_type}
+                options={[
+                  { value: 'Open', label: 'Open: anyone can join' },
+                  {
+                    value: 'Closed',
+                    label:
+                      'Closed: no one other than the project creator can join',
+                  },
+                  {
+                    value: 'Invite Only',
+                    label: 'Only joinable by invitation',
+                  },
+                ]}
+                onChange={(value: string) => {
+                  dispatch(
+                    updateProjectData({ ...project, project_type: value })
+                  )
+                }}
+              />
+              <FieldToggleSwitch
+                disabled={!canUpdate}
+                name="contestant"
+                label="Submit this project for judging?"
+                onChange={(e: BaseSyntheticEvent) => {
+                  dispatch(
+                    updateProjectData({
+                      ...project,
+                      contestant: e.target.checked,
+                    })
+                  )
+                }}
+                on={project.contestant}
+              />
+              <FieldSelectMulti
+                disabled={!canUpdate}
+                name="technologies"
+                label="Technologies"
+                required
+                options={availableTechnologies?.map((technology) => ({
+                  value: technology._id,
+                }))}
+                isFilterable
+                placeholder="Type values or select from the list"
+                values={project.technologies}
+                onChange={(values: string[] = []) => {
+                  dispatch(
+                    updateProjectData({ ...project, technologies: values })
+                  )
+                }}
+              />
+              {projectIdOrNew !== 'new' && (
+                <FieldSelectMulti
+                  disabled={true}
+                  id="members"
+                  label="Members"
+                  values={[...project.$members]}
+                />
+              )}
+            </Fieldset>
+            {projectIdOrNew !== 'new' && (
+              <FieldSelectMulti
+                disabled={!hacker.canAdmin}
+                id="judges"
+                label="Judges"
+                options={availableJudges.map((judge) => ({
+                  value: judge.name,
+                }))}
+                isFilterable
+                placeholder="Type values or select from the list"
+                values={[...project.$judges]}
+                onChange={(values: string[] = []) => {
+                  dispatch(
+                    updateProjectData({
+                      ...project,
+                      $judges: values,
+                    })
+                  )
+                }}
+              />
+            )}
+          </Form>
+        </Tab2>
+        <Tab2 id="preview" label="Preview" width="100%">
+          <ProjectView project={project} />
+        </Tab2>
+      </Tabs2>
+      <Space between width="55vw">
         <Space>
           <ButtonOutline
             type="button"
@@ -295,6 +316,6 @@ export const ProjectForm: FC<ProjectFormProps> = () => {
           </ButtonOutline>
         )}
       </Space>
-    </Form>
+    </SpaceVertical>
   )
 }

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

@@ -23,4 +23,5 @@
  SOFTWARE.
 
  */
+
 export { ProjectForm } from './ProjectForm'