feat(projects, pipeline): project detail page.

src/routes.tsx

@@ -1,9 +1,9 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
 import { omit } from 'ramda';
+import React from 'react';
 import { CreateProjectInput, Project } from './generated/graphql';
-import { ProjectEditor } from './projects/project-editor';
-import { PROJECT } from './projects/queries';
+import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
 
 export default prepareRoutes([
   {
@@ -30,7 +30,10 @@ export default prepareRoutes([
   {
     name: "edit-project",
     path: "projects/:projectId/edit",
-    async resolve(matched, { client }: { client: ApolloClient<InMemoryCache> }) {
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
       const { data } = await client.query<{ project: Project }>({
         query: PROJECT,
         variables: { id: matched?.params.projectId },
@@ -48,14 +51,22 @@ export default prepareRoutes([
   {
     name: "project-detail",
     path: "projects/:projectId",
-    resolve() {
-      const body = import(
-        /* webpackChunkName: "article-editor" */ "./projects/project-panel"
-      ).then((m) => m.ProjectPanel);
-      return body;
+    async resolve(
+      matched,
+      { client }: { client: ApolloClient<InMemoryCache> }
+    ) {
+      const { data } = await client.query<{ project: Project }>({
+        query: PROJECT,
+        variables: { id: matched?.params.projectId },
+      });
+      return {
+        body: () => (
+          <ProjectDetail project={omit(["__typename"], data.project)} />
+        ),
+      };
     },
     respond({ resolved }) {
-      return { body: resolved };
+      return resolved;
     },
   },
 ]);