feat(project): 修改项目后，界面对应的项目信息也一同自动更新。

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",

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 => (
+  return useObserver(() => {
+    const list = store.projects?.map(item => (
       <li
         class={`${styles.item} ${
-        item === state.currentProject ? styles.itemActive : ''
+          item.id === store.currentProject?.id ? styles.itemActive : ''
         }`}
         key={item.id}
-      onClick={() => setCurrProject(item)}
+        onClick={() => store.setCurrentProjectId(item.id)}
       >
         <h3>{item.name}</h3>
         <small>{item.comment}</small>
       </li>
     ));
     return <ol class={styles.list}>{list}</ol>;
+  });
 });

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'];
 };