feat(projects): list, create and update.

src/projects/project-panel.tsx

@@ -0,0 +1,82 @@
+import { gql, useQuery } from '@apollo/client';
+import { Link, useRouter } from '@curi/react-dom';
+import { Box, List, ListItem } from '@material-ui/core';
+import { makeStyles, Theme, createStyles } from '@material-ui/core';
+import { find, propEq } from 'ramda';
+import React, { useState, FC, useEffect } from 'react';
+import { Project } from '../generated/graphql';
+import { ListItemText } from '@material-ui/core';
+import { Button } from '@material-ui/core';
+import { AddBox } from '@material-ui/icons';
+
+const PROJECTS = gql`
+  query Projects {
+    projects {
+      id
+      name
+      comment
+      sshUrl
+      webUrl
+      webHookSecret
+    }
+  }
+`;
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    
+  })
+);
+
+export function ProjectPanel() {
+  return (
+    <section>
+      <Box m={2}>
+        <Link
+          name="create-project"
+        >
+          <Button
+            variant="contained"
+            color="primary"
+            title="New Project"
+            startIcon={<AddBox />}
+          >
+            New Project
+          </Button>
+        </Link>
+      </Box>
+      <ProjectList />
+    </section>
+  );
+}
+
+const ProjectList: FC<{}> = () => {
+  const { data, refetch } = useQuery<{
+    projects: Project[];
+  }>(PROJECTS);
+  const projects = data?.projects;
+  const [currentProject, setCurrentProject] = useState<Project | undefined>(
+    undefined
+  );
+  const { current } = useRouter();
+
+  useEffect(() => {
+    const currId = current()?.response?.params.projectId;
+    console.log(currId);
+    setCurrentProject(find(propEq("id", currId), projects ?? []));
+  }, [current, projects]);
+
+  const items = projects?.map((item) => (
+    <Link
+      name="edit-project"
+      params={{ projectId: item.id }}
+      key={item.id}
+      onNav={() => setCurrentProject(item)}
+    >
+      <ListItem button>
+        <ListItemText primary={item.name} secondary={item.comment} />
+      </ListItem>
+    </Link>
+  ));
+  return <List>{items}</List>;
+};