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

…ojects (#877) ## Added - `ProjectView` - `ProjectViewScene` - Project form - **Preview** of the project - Descriptions for project type selector - Markdown template for description to aid in complete new project submission ## Changed - "Contestant" project toggle to "Submit this project for judging?" - to Outline versions of icons - "View Project" on judging action list ## Removed - "More information" from project list, editing form, and source code ## Screenshots ### Updated form ![image](https://user-images.githubusercontent.com/6099714/139144569-653be827-8b0f-4ce6-8fe6-a7bf2e7abd65.png) ### Preview project on form (The `John [Object]` is from bad data in my spreadsheet. Ignore) ![image](https://user-images.githubusercontent.com/6099714/139144709-01aff55c-eb18-4633-ac6a-adc8abf18db4.png) ### View project ![image](https://user-images.githubusercontent.com/6099714/139144887-c8b1cc40-7150-42ce-a774-dadaf1b596ee.png) ### Judging #### View project menu ![image](https://user-images.githubusercontent.com/6099714/139342825-eb58e100-b220-434a-8385-3710b9ec93f7.png) #### View project from judging list ![image](https://user-images.githubusercontent.com/6099714/139342706-a58d0528-cee7-489c-ace2-1d22f93ec9b7.png)
looker-open-source · Oct 28, 2021 · c55b221 · c55b221
1 parent 1e9348b
commit c55b221
Show file tree

Hide file tree

Showing 37 changed files with 515 additions and 270 deletions.
diff --git a/packages/hackathon/src/components/Header/index.ts b/packages/hackathon/src/components/Header/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Header } from './Header'
+export * from './Header'
diff --git a/packages/hackathon/src/components/Loading/index.ts b/packages/hackathon/src/components/Loading/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Loading } from './Loading'
+export * from './Loading'
diff --git a/...ponents/MoreInfoDialog/MoreInfoDialog.tsx → ...s/ProjectViewDialog/ProjectViewDialog.tsx b/...ponents/MoreInfoDialog/MoreInfoDialog.tsx → ...s/ProjectViewDialog/ProjectViewDialog.tsx
@@ -25,42 +25,28 @@
  */
 import type { FC } from 'react'
 import React from 'react'
-import {
-  Dialog,
-  DialogHeader,
-  DialogContent,
-  Paragraph,
-  SpaceVertical,
-  TextArea,
-} from '@looker/components'
-import { useSelector, useDispatch } from 'react-redux'
-import { setMoreInfo } from '../../data/projects/actions'
-import { getMoreInfoState } from '../../data/projects/selectors'
+import { Dialog, DialogHeader, DialogContent } from '@looker/components'
+import { ProjectView } from '../../scenes/ProjectViewScene/components'
+import type { IProjectProps } from '../../models'
 
-interface MoreInfoDialogProps {}
-
-export const MoreInfoDialog: FC<MoreInfoDialogProps> = () => {
-  const dispatch = useDispatch()
-  const moreInfoProject = useSelector(getMoreInfoState)
+interface ProjectViewDialogProps {
+  project?: IProjectProps
+  closer: () => void
+}
 
-  const closeMoreInfo = () => {
-    dispatch(setMoreInfo())
+export const ProjectViewDialog: FC<ProjectViewDialogProps> = ({
+  project,
+  closer,
+}) => {
+  const closeDialog = () => {
+    closer()
   }
 
   return (
-    <Dialog isOpen={!!moreInfoProject} onClose={closeMoreInfo}>
-      <DialogHeader>{moreInfoProject?.title}</DialogHeader>
+    <Dialog isOpen={!!project} onClose={closeDialog}>
+      <DialogHeader>Judging {project?.title}</DialogHeader>
       <DialogContent>
-        <SpaceVertical>
-          <Paragraph>
-            Copy the link below and paste into a new browser window to see
-            additional information about the project
-          </Paragraph>
-          <TextArea
-            readOnly={true}
-            value={moreInfoProject?.moreInfo}
-          ></TextArea>
-        </SpaceVertical>
+        {!!project && <ProjectView project={project} />}
       </DialogContent>
     </Dialog>
   )

diff --git a/...on/src/components/MoreInfoDialog/index.ts → ...src/components/ProjectViewDialog/index.ts b/...on/src/components/MoreInfoDialog/index.ts → ...src/components/ProjectViewDialog/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { MoreInfoDialog } from './MoreInfoDialog'
+export * from './ProjectViewDialog'
diff --git a/packages/hackathon/src/components/Scroller/index.ts b/packages/hackathon/src/components/Scroller/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Scroller } from './Scroller'
+export * from './Scroller'
diff --git a/packages/hackathon/src/components/SideNav/SideNav.tsx b/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)`

diff --git a/packages/hackathon/src/components/SideNav/index.ts b/packages/hackathon/src/components/SideNav/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { SideNav } from './SideNav'
+export * from './SideNav'
diff --git a/packages/hackathon/src/data/projects/actions.ts b/packages/hackathon/src/data/projects/actions.ts
@@ -137,14 +137,6 @@ export interface LockProjectAction {
   }
 }
 
-export interface SetMoreInfoAction {
-  type: Actions.SET_MORE_INFO
-  payload?: {
-    title: string
-    moreInfo: string
-  }
-}
-
 export type ProjectAction =
   | AllProjectsRequestAction
   | AllProjectsResponseAction
@@ -161,7 +153,6 @@ export type ProjectAction =
   | LockProjectAction
   | ChangeMembershipAction
   | UpdateProjectsPageNumAction
-  | SetMoreInfoAction
 
 export const allProjectsRequest = (): AllProjectsRequestAction => ({
   type: Actions.ALL_PROJECTS_REQUEST,
@@ -278,11 +269,3 @@ export const changeMembership = (
     leave,
   },
 })
-
-export const setMoreInfo = (
-  title?: string,
-  moreInfo?: string
-): SetMoreInfoAction => ({
-  type: Actions.SET_MORE_INFO,
-  payload: moreInfo && title ? { title, moreInfo } : undefined,
-})
diff --git a/packages/hackathon/src/data/projects/reducer.ts b/packages/hackathon/src/data/projects/reducer.ts
@@ -38,10 +38,6 @@ export interface ProjectsState {
   validationMessages?: ValidationMessages
   projectUpdated?: boolean
   projectLoaded: boolean
-  moreInfo?: {
-    title: string
-    moreInfo: string
-  }
 }
 
 const defaultState: Readonly<ProjectsState> = Object.freeze({
@@ -123,11 +119,6 @@ export const projectsReducer = (
         isProjectMember: action.payload.isProjectMember,
         projectUpdated: true,
       }
-    case Actions.SET_MORE_INFO:
-      return {
-        ...state,
-        moreInfo: action.payload,
-      }
     default:
       return state
   }

diff --git a/packages/hackathon/src/data/projects/sagas.ts b/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,

diff --git a/packages/hackathon/src/data/projects/selectors.ts b/packages/hackathon/src/data/projects/selectors.ts
@@ -40,11 +40,6 @@ export const getProjectsLoadedState = (state: RootState): boolean =>
 export const getProjectsPageNumState = (state: RootState): number =>
   state.projectsState.currentPageNum
 
-export const getMoreInfoState = (
-  state: RootState
-): { title: string; moreInfo: string } | undefined =>
-  state.projectsState.moreInfo
-
 export const getProjectState = (state: RootState): IProjectProps | undefined =>
   state.projectsState.currentProject
 

diff --git a/packages/hackathon/src/models/Judgings.ts b/packages/hackathon/src/models/Judgings.ts
@@ -47,7 +47,9 @@ export interface IJudgingProps extends IRowModelProps {
   notes: string
   $title: string
   $description: string
-  $more_info: string
+  $project_type: string
+  $contestant: boolean
+  $technologies: string[]
   $judge_name: string
   $members: string[]
 }
@@ -72,8 +74,10 @@ export class Judging extends SheetRow<IJudging> {
   notes = ''
   $title = ''
   $description = ''
-  $more_info = ''
   $judge_name = ''
+  $project_type = ''
+  $contestant = false
+  $technologies: string[] = []
   $members: string[] = []
 
   constructor(values?: any) {
@@ -95,10 +99,12 @@ export class Judging extends SheetRow<IJudging> {
     }
     const p = data.projects?.find(this.project_id) as Project
     if (p) {
+      this.$project_type = p.project_type
+      this.$contestant = p.contestant
+      this.$technologies = p.technologies
       this.$title = p.title
       this.$description = p.description
       this.$members = p.$members
-      this.$more_info = p.more_info
     }
   }
 

diff --git a/packages/hackathon/src/routes/AppRouter.tsx b/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 />

diff --git a/packages/hackathon/src/routes/index.ts b/packages/hackathon/src/routes/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { AppRouter, getAuthorizedRoutes } from './AppRouter'
+export * from './AppRouter'
diff --git a/packages/hackathon/src/scenes/AdminScene/index.ts b/packages/hackathon/src/scenes/AdminScene/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { AdminScene } from './AdminScene'
+export * from './AdminScene'
diff --git a/packages/hackathon/src/scenes/HomeScene/index.ts b/packages/hackathon/src/scenes/HomeScene/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { HomeScene } from './HomeScene'
+export * from './HomeScene'
diff --git a/packages/hackathon/src/scenes/JudgingEditorScene/components/index.ts b/packages/hackathon/src/scenes/JudgingEditorScene/components/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { JudgingForm } from './JudgingForm'
+export * from './JudgingForm'
diff --git a/packages/hackathon/src/scenes/JudgingEditorScene/index.ts b/packages/hackathon/src/scenes/JudgingEditorScene/index.ts
@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { JudgingEditorScene } from './JudgingEditorScene'
+export * from './JudgingEditorScene'