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

feat(project): 添加 新增项目界面。

.eslintrc.js

@@ -38,7 +38,8 @@ module.exports = {
       files: ['*.js', '*.ts', '*.tsx'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/interface-name-prefix': 'off'
+        '@typescript-eslint/interface-name-prefix': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off'
       }
     },
   ]

.vscode/settings.json

@@ -4,5 +4,8 @@
   "editor.quickSuggestions": {
     "strings": true,
     "other": true,
-  }
+  },
+  "cSpell.words": [
+    "Formik"
+  ]
 }

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

package-lock.json

@@ -1313,6 +1313,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+      "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
+      "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -8886,6 +8915,27 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
+      "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -12448,6 +12498,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
+    "lodash-es": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -17943,6 +17998,11 @@
         }
       }
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -20643,6 +20703,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tinydate": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",

package.json

@@ -26,8 +26,12 @@
   ],
   "dependencies": {
     "@apollo/client": "^3.3.7",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "autoprefixer": "^9.8.6",
+    "formik": "^2.2.6",
     "graphql": "^15.5.0",
     "mobx": "^6.1.4",
     "mobx-react": "^7.1.0",

src/app.store.ts

@@ -0,0 +1,21 @@
+import { action, makeObservable, observable } from 'mobx';
+import { ComponentChild } from 'preact';
+
+export class AppStore {
+  @observable.ref nav: ComponentChild;
+  @observable.ref main: ComponentChild;
+  constructor() {
+    makeObservable(this);
+  }
+
+  @action
+  setNav(component: ComponentChild) {
+    this.nav = component;
+  }
+  @action
+  setMain(component: ComponentChild) {
+    this.main = component;
+  }
+}
+
+export const appStore = new AppStore();

src/components/app.scss

@@ -1,7 +1,13 @@
 .projectPanel {
-  @apply w-1/6;
 }
 
 .app {
-  @apply flex bg-red-50;
+  @apply flex flex-row-reverse bg-red-50;
+
+  aside {
+    @apply w-1/6 shadow;
+  }
+  main {
+    @apply flex-auto ml-px;
+  }
 }

src/components/app.scss.d.ts

@@ -2,7 +2,6 @@
 declare namespace AppScssNamespace {
   export interface IAppScss {
     app: string;
-    projectPanel: string;
   }
 }
 

src/components/app.tsx

@@ -1,26 +1,10 @@
-import {
-  ApolloClient,
-  ApolloProvider,
-  gql,
-  InMemoryCache,
-  useQuery
-} from '@apollo/client';
-import { FunctionalComponent, FunctionComponent, h } from 'preact';
-import { globalState } from '../global.state';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { Fragment, FunctionalComponent, h } from 'preact';
 import { ProjectPanel } from './projects/project-panel';
-import * as styles from './app.scss';
-
-const LIST_PROJECT = gql`
-  query listProject {
-    findProjects {
-      id
-      name
-      sshUrl
-      comment
-      webUrl
-    }
-  }
-`;
+import styles from './app.scss';
+import { OverlayContainer } from './commons/overlay/overlay';
+import { useObserver } from 'mobx-react';
+import { appStore } from '../app.store';
 
 const client = new ApolloClient({
   uri: '/api/graphql',
@@ -32,18 +16,26 @@ const App: FunctionalComponent = () => {
     <ApolloProvider client={client}>
       <div id="app" class={styles.app}>
         <Content />
+        <OverlayContainer />
       </div>
     </ApolloProvider>
   );
 };
 
-const Content: FunctionComponent = () => {
-  const { loading, data } = useQuery(LIST_PROJECT);
-  globalState.projects = data?.findProjects;
-  console.log(globalState.projects);
-  const Loading: FunctionComponent = () => <div>Loading...</div>;
-  const Board: FunctionComponent = () => <ProjectPanel />;
-  return loading ? <Loading /> : <Board />;
+const Content = () => {
+  return <Board />;
+};
+const Board = () => {
+  return useObserver(() => {
+    return (
+      <Fragment>
+        <main>{appStore.main}</main>
+        <aside>
+          <ProjectPanel />
+        </aside>
+      </Fragment>
+    );
+  });
 };
 
 export default App;

src/components/commons/overlay/overlay.scss

@@ -0,0 +1,6 @@
+.mask {
+  @apply opacity-50 bg-white fixed top-0 bottom-0 left-0 right-0;
+}
+.body {
+  @apply fixed top-0 bottom-0 left-0 right-0;
+}

src/components/commons/overlay/overlay.scss.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace OverlayScssNamespace {
+  export interface IOverlayScss {
+    body: string;
+    mask: string;
+  }
+}
+
+declare const OverlayScssModule: OverlayScssNamespace.IOverlayScss;
+
+export = OverlayScssModule;

src/components/commons/overlay/overlay.store.ts

@@ -0,0 +1,26 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { ComponentChild } from 'preact';
+
+export class OverlayStore {
+  @observable.ref overlays: [string, ComponentChild][] = [];
+
+  constructor() {
+    makeAutoObservable(this, {
+      overlays: observable.shallow
+    });
+  }
+
+  addOverlay(id: string, overlay: ComponentChild) {
+    this.overlays = [...this.overlays, [id, overlay]];
+  }
+
+  removeOverlay(id: string) {
+    const index = this.overlays.findIndex(it => it[0] === id);
+    if (index === -1) {
+      return;
+    }
+    this.overlays.splice(index, 1);
+  }
+}
+
+export const overlayStore = new OverlayStore();

src/components/commons/overlay/overlay.tsx

@@ -0,0 +1,78 @@
+import { ComponentChild, createContext, Fragment, h } from 'preact';
+import styles from './overlay.scss';
+
+import { observer } from 'mobx-react';
+import { overlayStore } from './overlay.store';
+import { useContext, useState } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+
+interface Props {
+  content: ComponentChild;
+  overlayId?: string;
+  onClose?: () => void;
+  onOk?: () => void;
+  onCancel?: () => void;
+}
+
+interface OverlayContext {
+  close: () => void;
+}
+
+const rootElement = document.createElement('div');
+rootElement.classList.add('overlay-root');
+document.body.appendChild(rootElement);
+
+export const createOverlay = (props: Props) => {
+  return new Promise(resolve => {
+    const id = Math.random()
+      .toString(36)
+      .substr(2, 6);
+    props.overlayId = props.overlayId ?? id;
+    const overlay = (
+      <Overlay {...props} onClose={() => resolve(undefined)}></Overlay>
+    );
+    overlayStore.addOverlay(props.overlayId, overlay);
+  });
+};
+
+export const overlayContext = createContext<OverlayContext>({
+  close: () => undefined
+});
+
+const OverlayProvider = overlayContext.Provider;
+
+export const useOverlay = () => {
+  return useContext(overlayContext);
+};
+
+export const Overlay = (props: Props) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const close = () => {
+    setIsVisible(false);
+    overlayStore.removeOverlay(props.overlayId!);
+    props.onClose?.();
+  };
+  const controller = {
+    close
+  };
+  return createPortal(
+    isVisible ? (
+      <OverlayProvider value={controller}>
+        <Fragment>
+          <div class={styles.mask}></div>
+          <div class={styles.body}>{props.content}</div>
+        </Fragment>
+      </OverlayProvider>
+    ) : (
+      <div></div>
+    ),
+    rootElement
+  );
+};
+
+export const OverlayContainer = observer(() => {
+  const list = overlayStore.overlays.map(item => (
+    <div key={item[0]}>{item[1]}</div>
+  ));
+  return <div className="overlay-container">{list}</div>;
+});

src/components/projects/project-details.scss

@@ -0,0 +1,20 @@
+.projectDetails {
+  header {
+    @apply bg-red-400 text-gray-50 p-2;
+    @apply grid grid-cols-2 grid-rows-2;
+
+    h2 {
+      @apply text-white text-lg col-start-1 row-start-1 align-middle;
+      svg {
+        @apply text-xs ml-2;
+      }
+    }
+    small {
+      @apply text-sm col-start-1 row-start-2;
+    }
+
+    .operations {
+      @apply col-start-2 row-span-2 justify-self-end self-center;
+    }
+  }
+}

src/components/projects/project-details.scss.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace ProjectDetailsScssNamespace {
+  export interface IProjectDetailsScss {
+    operations: string;
+    projectDetails: string;
+  }
+}
+
+declare const ProjectDetailsScssModule: ProjectDetailsScssNamespace.IProjectDetailsScss;
+
+export = ProjectDetailsScssModule;

src/components/projects/project-details.tsx

@@ -0,0 +1,39 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { h } from 'preact';
+import { Project } from '../../generated/graphql';
+import styles from './project-details.scss';
+import { createOverlay } from '../commons/overlay/overlay';
+import { ProjectEditor } from './project-editor';
+
+interface Props {
+  project: Project;
+}
+
+export const ProjectDetails = ({ project }: Props) => {
+  const editProject = () => {
+    createOverlay({
+      content: <ProjectEditor project={project} />
+    });
+  };
+  return (
+    <section className={styles.projectDetails}>
+      <header>
+        <h2>
+          {project.name}
+          {project.webUrl ? (
+            <a target="blank" href={project.webUrl}>
+              <FontAwesomeIcon icon={faExternalLinkAlt} />
+            </a>
+          ) : null}
+        </h2>
+        <small>{project.comment}</small>
+        <div className={styles.operations}>
+          <button onClick={editProject}>
+            <FontAwesomeIcon icon={faEdit} />
+          </button>
+        </div>
+      </header>
+    </section>
+  );
+};

src/components/projects/project-editor.scss

@@ -0,0 +1,34 @@
+.editor {
+  @apply bg-white shadow-lg p-4 rounded-lg text-gray-800
+  top-1/4 left-1/2 absolute
+  transform -translate-x-1/2 -translate-y-1/2
+  w-5/6;
+}
+.form {
+  @apply bg-white;
+  & > * {
+    @apply block;
+  }
+  label {
+    @apply my-4 relative flex;
+  }
+  .label {
+    @apply text-gray-700 w-20 inline-block text-right;
+
+    &::after {
+      content: '：';
+    }
+  }
+  .controller {
+    @apply border-b border-gray-300 flex-auto;
+  }
+  .submitBtn {
+    @apply px-2 py-1 rounded-full bg-red-400 text-white;
+  }
+  .cancelBtn {
+    @apply px-2 py-1 rounded-full bg-gray-100 text-gray-700 ml-2;
+  }
+  .footer {
+    @apply text-right;
+  }
+}

src/components/projects/project-editor.scss.d.ts

@@ -0,0 +1,16 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace ProjectEditorScssNamespace {
+  export interface IProjectEditorScss {
+    cancelBtn: string;
+    controller: string;
+    editor: string;
+    footer: string;
+    form: string;
+    label: string;
+    submitBtn: string;
+  }
+}
+
+declare const ProjectEditorScssModule: ProjectEditorScssNamespace.IProjectEditorScss;
+
+export = ProjectEditorScssModule;

src/components/projects/project-editor.tsx

@@ -0,0 +1,137 @@
+import { gql, useApolloClient, useMutation } from '@apollo/client';
+import { Field, Form, Formik } from 'formik';
+import { h } from 'preact';
+import {
+  CreateProjectInput,
+  Project,
+  UpdateProjectInput
+} from '../../generated/graphql';
+import { useOverlay } from '../commons/overlay/overlay';
+import styles from './project-editor.scss';
+
+interface Props {
+  project?: Project;
+}
+
+const CREATE_PROJECT = gql`
+  mutation CreateProject($project: CreateProjectInput!) {
+    createProject(project: $project) {
+      id
+      name
+      comment
+      sshUrl
+      webUrl
+      webHookSecret
+    }
+  }
+`;
+const MODIFY_PROJECT = gql`
+  mutation ModifyProject($id: String!, $project: UpdateProjectInput!) {
+    modifyProject(id: $id, project: $project) {
+      id
+      name
+      comment
+      sshUrl
+      webUrl
+      webHookSecret
+    }
+  }
+`;
+
+export const ProjectEditor = (props: Props) => {
+  useApolloClient();
+  const isCreate = props.project === undefined;
+
+  const [createProject] = useMutation<Project>(CREATE_PROJECT);
+  const [updateProject] = useMutation<Project>(MODIFY_PROJECT);
+
+  const { close } = useOverlay();
+  const cancel = (ev: MouseEvent) => {
+    ev.preventDefault();
+    close();
+  };
+
+  type FormValues = CreateProjectInput | UpdateProjectInput;
+
+  const project: FormValues = {
+    name: props.project?.name ?? '',
+    comment: props.project?.comment ?? '',
+    sshUrl: props.project?.sshUrl ?? '',
+    webUrl: props.project?.webUrl ?? null,
+    webHookSecret: props.project?.webHookSecret ?? ''
+  };
+  const submitForm = async (values: FormValues) => {
+    try {
+      if (isCreate) {
+        await createProject({
+          variables: { project: values }
+        });
+      } else {
+        await updateProject({
+          variables: { project: values, id: props.project!.id }
+        });
+      }
+      close();
+    } finally {
+      //
+    }
+  };
+
+  return (
+    <section class={styles.editor}>
+      <Formik initialValues={project} onSubmit={submitForm}>
+        <Form className={styles.form}>
+          <label>
+            <span className={styles.label}>名称</span>
+            <Field
+              className={styles.controller}
+              name="name"
+              placeholder="项目名称"
+            ></Field>
+          </label>
+          <label>
+            <span className={styles.label}>备注</span>
+            <Field
+              className={styles.controller}
+              name="comment"
+              placeholder="项目说明、简介"
+            ></Field>
+          </label>
+          <label>
+            <span className={styles.label}>项目地址</span>
+            <Field
+              className={styles.controller}
+              name="webUrl"
+              placeholder="项目地址"
+            ></Field>
+          </label>
+          <label>
+            <span className={styles.label}>SSH url</span>
+            <Field
+              className={styles.controller}
+              name="sshUrl"
+              placeholder="代码仓库地址"
+            ></Field>
+          </label>
+          <label>
+            <span className={styles.label}>Secret</span>
+            <Field
+              className={styles.controller}
+              name="webHookSecret"
+              placeholder="Web Hook Secret"
+            ></Field>
+          </label>
+
+          <footer className={styles.footer}>
+            <button type="submit" className={styles.submitBtn}>
+              {isCreate ? '创建' : '修改'}
+            </button>
+            <button onClick={cancel} className={styles.cancelBtn}>
+              取消
+            </button>
+          </footer>
+        </Form>
+      </Formik>
+    </section>
+  );
+};

src/components/projects/project-panel.scss

@@ -1,16 +1,17 @@
 .panel {
-  @apply h-full overflow-auto;
+  @apply h-full overflow-auto flex flex-col;
 
   h1 {
     @apply bg-red-400 text-white text-lg text-center p-2;
   }
 }
 .list {
-  @apply bg-red-200;
+  @apply bg-red-200 flex-grow;
 }
 .item {
   @apply block bg-gray-50 text-red-400 py-2 px-4 my-px cursor-pointer transition-colors;
   @apply hover:bg-red-50;
+  min-width: 10em;
 
   h3 {
   }
@@ -27,3 +28,14 @@
     @apply text-red-100;
   }
 }
+
+.operations {
+  @apply p-2 bg-gray-50;
+
+  button {
+    @apply shadow hover:shadow-md py-1 px-2 rounded-lg transition-all;
+    &.primaryBtn {
+      @apply bg-red-400 text-white hover:bg-red-500;
+    }
+  }
+}

src/components/projects/project-panel.scss.d.ts

@@ -4,7 +4,9 @@ declare namespace ProjectPanelScssNamespace {
     item: string;
     itemActive: string;
     list: string;
+    operations: string;
     panel: string;
+    primaryBtn: string;
   }
 }
 

src/components/projects/project-panel.tsx

@@ -1,37 +1,126 @@
-import { observer } from 'mobx-react';
-import { FunctionComponent, h } from 'preact';
+import { gql, useQuery } from '@apollo/client';
+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, useMemo, useRef } from 'preact/hooks';
+import { appStore } from '../../app.store';
 import { Project } from '../../generated/graphql';
-import { GlobalState, globalState } from '../../global.state';
-import * as styles from './project-panel.scss';
+import { createOverlay } from '../commons/overlay/overlay';
+import { ProjectDetails } from './project-details';
+import { ProjectEditor } from './project-editor';
+import styles from './project-panel.scss';
 
+const FIND_PROJECTS = gql`
+  query FindProjects {
+    projects: findProjects {
+      id
+      name
+      comment
+      sshUrl
+      webUrl
+      webHookSecret
+      deletedAt
+    }
+  }
+`;
+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 />
+    }).then(() => {
+      listRef.current.refetch();
+    });
+  };
+
   return (
     <section class={styles.panel}>
       <h1>Fennec</h1>
-      <List globalState={globalState} />
+      <section class={styles.operations}>
+        <button
+          class={styles.primaryBtn}
+          title="add a project"
+          onClick={addProject}
+        >
+          Add
+        </button>
+      </section>
+      <List ref={listRef} />
     </section>
   );
 }
 
-const List: FunctionComponent<{ globalState: GlobalState }> = observer(
-  ({ globalState }) => {
-    const setCurrProejct = (project: Project) => {
-      globalState.setCurrentProject(project);
-    };
-    console.log('change');
+const List = forwardRef<ListRef>((_, ref) => {
+  const { data, refetch } = useQuery<{
+    projects: Project[];
+  }>(FIND_PROJECTS);
 
-    const list = globalState.projects?.map(item => (
+  const store = useLocalStore(() => new Store());
+  // store.projects = data?.projects;
+  useMemo(() => {
+    store.projects = data?.projects;
+  }, [data?.projects]);
+
+  useImperativeHandle(ref, () => ({
+    refetch
+  }));
+
+  return useObserver(() => {
+    const list = store.projects?.map(item => (
       <li
         class={`${styles.item} ${
-          item === globalState.currentProject ? styles.itemActive : ''
+          item.id === store.currentProject?.id ? styles.itemActive : ''
         }`}
         key={item.id}
-        onClick={() => setCurrProejct(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

@@ -1,12 +1,8 @@
 import { gql } from '@apollo/client';
 export type Maybe<T> = T | null;
-export type Exact<T extends { [key: string]: unknown }> = {
-  [K in keyof T]: T[K];
-};
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
-  { [SubKey in K]?: Maybe<T[SubKey]> };
-export type MakeMaybe<T, K extends keyof T> = Omit<T, K> &
-  { [SubKey in K]: Maybe<T[SubKey]> };
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -34,6 +30,7 @@ export type Project = {
   deletedAt?: Maybe<Scalars['DateTime']>;
 };
 
+
 export type Query = {
   __typename?: 'Query';
   hello: Hello;
@@ -41,6 +38,7 @@ export type Query = {
   findProject: Project;
 };
 
+
 export type QueryFindProjectArgs = {
   id: Scalars['String'];
 };
@@ -48,19 +46,22 @@ export type QueryFindProjectArgs = {
 export type Mutation = {
   __typename?: 'Mutation';
   createProject: Project;
-  modifyProject: Scalars['Boolean'];
+  modifyProject: Project;
   deleteProject: Scalars['Float'];
 };
 
+
 export type MutationCreateProjectArgs = {
   project: CreateProjectInput;
 };
 
+
 export type MutationModifyProjectArgs = {
   project: UpdateProjectInput;
   id: Scalars['String'];
 };
 
+
 export type MutationDeleteProjectArgs = {
   id: Scalars['String'];
 };