feat(projects): list, create and update.

src/routes.tsx

@@ -1,8 +1,9 @@
-import { ApolloClient } from "@apollo/client";
+import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
 import { omit } from 'ramda';
-import { ARTICLE } from "./articles";
-import { Article } from './generated/graphql';
+import { CreateProjectInput, Project } from './generated/graphql';
+import { ProjectEditor } from './projects/project-editor';
+import { PROJECT } from './projects/queries';
 
 export default prepareRoutes([
   {
@@ -13,57 +14,48 @@ export default prepareRoutes([
     },
   },
   {
-    name: "create-article",
-    path: "articles/create",
+    name: "create-project",
+    path: "projects/create",
+    respond({ resolved }) {
+      const input: CreateProjectInput = {
+        name: "",
+        comment: "",
+        webHookSecret: "",
+        sshUrl: "",
+        webUrl: "",
+      };
+      return { body: () => <ProjectEditor project={input} /> };
+    },
+  },
+  {
+    name: "edit-project",
+    path: "projects/:projectId/edit",
+    async resolve(matched, { client }: { client: ApolloClient<InMemoryCache> }) {
+      const { data } = await client.query<{ project: Project }>({
+        query: PROJECT,
+        variables: { id: matched?.params.projectId },
+      });
+      return {
+        body: () => (
+          <ProjectEditor project={omit(["__typename"], data.project)} />
+        ),
+      };
+    },
+    respond({ resolved }) {
+      return resolved;
+    },
+  },
+  {
+    name: "project-detail",
+    path: "projects/:projectId",
     resolve() {
       const body = import(
-        /* webpackChunkName: "article-editor" */ "./articles"
-      ).then((m) => m.ArticleEditor);
+        /* webpackChunkName: "article-editor" */ "./projects/project-panel"
+      ).then((m) => m.ProjectPanel);
       return body;
     },
     respond({ resolved }) {
       return { body: resolved };
     },
   },
-  {
-    name: "modify-article",
-    path: "articles/:id",
-    async resolve(matched, { client }: { client: ApolloClient<any> }) {
-      const [ArticleEditor, result] = await Promise.all([
-        import(/* webpackChunkName: "article-editor" */ "./articles").then(
-          (m) => m.ArticleEditor
-        ),
-        client.query<{article: Article}, { id: string }>({
-          query: ARTICLE,
-          variables: { id: matched!.params.id },
-        }),
-      ]);
-      console.log(ArticleEditor, result);
-      return () => (
-        <ArticleEditor article={omit(["__typename"], result.data.article)} />
-      );
-    },
-    respond({ resolved }) {
-      return { body: resolved };
-    },
-  },
-  {
-    name: "articles",
-    path: "articles",
-    resolve() {
-      return import(/* webpackChunkName: "articles" */ "./articles").then(
-        (m) => m.ArticleIndex
-      );
-    },
-    respond({ resolved }) {
-      return { body: resolved };
-    },
-  },
-  {
-    name: "tags",
-    path: "tags",
-    respond() {
-      return { body: () => <div>Tags</div> };
-    },
-  },
 ]);