From 54a164ddc6da31a6a467e539c4b2eb70cc7ba4ed Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli@live.cn>
Date: Sun, 14 Feb 2021 19:30:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E4=BF=AE=E6=94=B9=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E5=90=8E=EF=BC=8C=E7=95=8C=E9=9D=A2=E5=AF=B9=E5=BA=94?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B9=E7=9B=AE=E4=BF=A1=E6=81=AF=E4=B9=9F=E4=B8=80?=
 =?UTF-8?q?=E5=90=8C=E8=87=AA=E5=8A=A8=E6=9B=B4=E6=96=B0=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 graphql.schema.json                       | 24 +++----
 src/components/projects/project-panel.tsx | 87 ++++++++++++++++-------
 src/generated/graphql.tsx                 |  2 +-
 3 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/graphql.schema.json b/graphql.schema.json
index f7ddf3f..53a06d3 100644
--- a/graphql.schema.json
+++ b/graphql.schema.json
@@ -339,8 +339,8 @@
               "kind": "NON_NULL",
               "name": null,
               "ofType": {
-                "kind": "SCALAR",
-                "name": "Boolean",
+                "kind": "OBJECT",
+                "name": "Project",
                 "ofType": null
               }
             },
@@ -386,16 +386,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "SCALAR",
-        "name": "Boolean",
-        "description": "The `Boolean` scalar type represents `true` or `false`.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "SCALAR",
         "name": "Float",
@@ -572,6 +562,16 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "SCALAR",
+        "name": "Boolean",
+        "description": "The `Boolean` scalar type represents `true` or `false`.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "__Schema",
diff --git a/src/components/projects/project-panel.tsx b/src/components/projects/project-panel.tsx
index 961ddfb..5fcea6d 100644
--- a/src/components/projects/project-panel.tsx
+++ b/src/components/projects/project-panel.tsx
@@ -1,8 +1,17 @@
 import { gql, useQuery } from '@apollo/client';
-import { useLocalStore } from 'mobx-react';
+import {
+  action,
+  autorun,
+  computed,
+  makeObservable,
+  observable,
+  reaction,
+  when
+} from 'mobx';
+import { useLocalStore, useObserver } from 'mobx-react';
 import { h } from 'preact';
 import { forwardRef } from 'preact/compat';
-import { useImperativeHandle, useRef } from 'preact/hooks';
+import { useImperativeHandle, useMemo, useRef } from 'preact/hooks';
 import { appStore } from '../../app.store';
 import { Project } from '../../generated/graphql';
 import { createOverlay } from '../commons/overlay/overlay';
@@ -26,11 +35,42 @@ const FIND_PROJECTS = gql`
 interface ListRef {
   refetch: () => void;
 }
+
+class Store {
+  @observable currentProjectId?: string;
+  @observable projects?: Project[];
+  constructor() {
+    makeObservable(this);
+    reaction(
+      () => this.details,
+      () => {
+        if (this.currentProject) {
+          appStore.setMain(this.details);
+        }
+      }
+    );
+  }
+  @computed
+  get currentProject() {
+    return this.projects?.find(it => it.id === this.currentProjectId);
+  }
+  @computed
+  get details() {
+    return this.currentProject ? (
+      <ProjectDetails project={this.currentProject} />
+    ) : null;
+  }
+
+  @action
+  setCurrentProjectId = (id: string) => {
+    this.currentProjectId = id;
+  };
+}
 export function ProjectPanel() {
   const listRef = useRef<ListRef>();
   const addProject = () => {
     createOverlay({
-      content: <ProjectEditor isCreate={true} />
+      content: <ProjectEditor />
     }).then(() => {
       listRef.current.refetch();
     });
@@ -58,30 +98,29 @@ const List = forwardRef<ListRef>((_, ref) => {
     projects: Project[];
   }>(FIND_PROJECTS);
 
-  const state = useLocalStore<{ currentProject?: Project }>(() => ({
-    currentProject: undefined
-  }));
-
-  const setCurrProject = (project: Project) => {
-    state.currentProject = project;
-    appStore.setMain(<ProjectDetails project={project} />);
-  };
+  const store = useLocalStore(() => new Store());
+  // store.projects = data?.projects;
+  useMemo(() => {
+    store.projects = data?.projects;
+  }, [data?.projects]);
 
   useImperativeHandle(ref, () => ({
     refetch
   }));
 
-  const list = data?.projects?.map(item => (
-    <li
-      class={`${styles.item} ${
-        item === state.currentProject ? styles.itemActive : ''
-      }`}
-      key={item.id}
-      onClick={() => setCurrProject(item)}
-    >
-      <h3>{item.name}</h3>
-      <small>{item.comment}</small>
-    </li>
-  ));
-  return <ol class={styles.list}>{list}</ol>;
+  return useObserver(() => {
+    const list = store.projects?.map(item => (
+      <li
+        class={`${styles.item} ${
+          item.id === store.currentProject?.id ? styles.itemActive : ''
+        }`}
+        key={item.id}
+        onClick={() => store.setCurrentProjectId(item.id)}
+      >
+        <h3>{item.name}</h3>
+        <small>{item.comment}</small>
+      </li>
+    ));
+    return <ol class={styles.list}>{list}</ol>;
+  });
 });
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
index 3916ef0..f39d6c7 100644
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@@ -46,7 +46,7 @@ export type QueryFindProjectArgs = {
 export type Mutation = {
   __typename?: 'Mutation';
   createProject: Project;
-  modifyProject: Scalars['Boolean'];
+  modifyProject: Project;
   deleteProject: Scalars['Float'];
 };