Function UserHomePage

src/pages/user_home.tsx:77–189

(props: UserHomePageProps)

}

export const UserHomePage = (props: UserHomePageProps) => {
  const history = useHistory()
  const [projects, setProjects] = useState([])
  const [saveProjectModalState, setSaveProjectModalState] = useState({ open: false, clonedFrom: null })

  useEffect(() => {
    props.projectLoader.listProjectMetadata().then((projects) => {
      setProjects(projects)
    })
  }, [])

  const newProject = (clonedFrom?: Project) => {
    setSaveProjectModalState({
      open: true,
      clonedFrom: clonedFrom || null,
    })
  }

  const menuItems: MainMenuItem[] = [
    {
      name: 'New Project',
      onClick: () => {
        newProject()
      },
    },
    {
      name: 'Import Project',
      onClick: async () => {
        const dirHandle = await window.showDirectoryPicker()
        const proj = await loadProjectFromFolder(dirHandle)
        setSaveProjectModalState({ open: true, clonedFrom: proj })
      },
    },
  ]
  return (
    <React.Fragment>
      <SaveProjectModal
        clonedFrom={saveProjectModalState.clonedFrom}
        newOwner="local"
        isOpen={saveProjectModalState.open}
        projectLoader={props.projectLoader}
        onClose={() => setSaveProjectModalState({ open: false, clonedFrom: null })}
        onComplete={(owner, projectID) => {
          setSaveProjectModalState({ open: false, clonedFrom: null })
          history.push(`/p/${owner}/${projectID}`)
        }}
      />
      <MenuBar menuItems={menuItems}></MenuBar>
      <Container maxW="container.md" paddingTop={8}>
        <VStack align="stretch" spacing={10}>
          <Box>
            <Flex justifyContent="space-between" marginBottom={2} alignItems="flex-end">
              <Heading as="h2" size="md" fontSize={'20pt'} py={2}>
                My projects
              </Heading>
              <Button size="lg" colorScheme="purple" height={8} my={2} onClick={() => newProject()}>
                New Project
              </Button>