.eslintrc.js

@@ -38,8 +38,7 @@ 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,8 +4,5 @@
   "editor.quickSuggestions": {
     "strings": true,
     "other": true,
-  },
+  }
-  "cSpell.words": [
-    "Formik"
-  ]
 }

graphql.schema.json

@@ -339,8 +339,8 @@
               "kind": "NON_NULL",
               "name": null,
               "ofType": {
-                "kind": "OBJECT",
+                "kind": "SCALAR",
-                "name": "Project",
+                "name": "Boolean",
                 "ofType": null
               }
             },
@@ -386,6 +386,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": "SCALAR",
         "name": "Float",
@@ -562,16 +572,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": "OBJECT",
         "name": "__Schema",

package-lock.json

@@ -1313,35 +1313,6 @@
         }
       }
     },
-    "@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",
@@ -8915,27 +8886,6 @@
         "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",
@@ -12498,11 +12448,6 @@
       "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",
@@ -17998,11 +17943,6 @@
         }
       }
     },
-    "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",
@@ -20703,11 +20643,6 @@
       "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,12 +26,8 @@
   ],
   "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

@@ -1,21 +0,0 @@
-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,13 +1,7 @@
 .projectPanel {
+  @apply w-1/6;
 }
 
 .app {
-  @apply flex flex-row-reverse bg-red-50;
+  @apply flex bg-red-50;
-
-  aside {
-    @apply w-1/6 shadow;
-  }
-  main {
-    @apply flex-auto ml-px;
-  }
 }

src/components/app.scss.d.ts

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

src/components/app.tsx

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

src/components/commons/overlay/overlay.scss

@@ -1,6 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-// 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

@@ -1,26 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,20 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-// 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

@@ -1,39 +0,0 @@
-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

@@ -1,34 +0,0 @@
-.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

@@ -1,16 +0,0 @@
-// 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

@@ -1,137 +0,0 @@
-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,17 +1,16 @@
 .panel {
-  @apply h-full overflow-auto flex flex-col;
+  @apply h-full overflow-auto;
 
   h1 {
     @apply bg-red-400 text-white text-lg text-center p-2;
   }
 }
 .list {
-  @apply bg-red-200 flex-grow;
+  @apply bg-red-200;
 }
 .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 {
   }
@@ -28,14 +27,3 @@
     @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,9 +4,7 @@ declare namespace ProjectPanelScssNamespace {
     item: string;
     itemActive: string;
     list: string;
-    operations: string;
     panel: string;
-    primaryBtn: string;
   }
 }
 

src/components/projects/project-panel.tsx

@@ -1,126 +1,37 @@
-import { gql, useQuery } from '@apollo/client';
+import { observer } from 'mobx-react';
-import {
+import { FunctionComponent, h } from 'preact';
-  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 { createOverlay } from '../commons/overlay/overlay';
+import { GlobalState, globalState } from '../../global.state';
-import { ProjectDetails } from './project-details';
+import * as styles from './project-panel.scss';
-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>
-      <section class={styles.operations}>
+      <List globalState={globalState} />
-        <button
-          class={styles.primaryBtn}
-          title="add a project"
-          onClick={addProject}
-        >
-          Add
-        </button>
-      </section>
-      <List ref={listRef} />
     </section>
   );
 }
 
-const List = forwardRef<ListRef>((_, ref) => {
+const List: FunctionComponent<{ globalState: GlobalState }> = observer(
-  const { data, refetch } = useQuery<{
+  ({ globalState }) => {
-    projects: Project[];
+    const setCurrProejct = (project: Project) => {
-  }>(FIND_PROJECTS);
+      globalState.setCurrentProject(project);
+    };
+    console.log('change');
 
-  const store = useLocalStore(() => new Store());
+    const list = globalState.projects?.map(item => (
-  // 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.id === store.currentProject?.id ? styles.itemActive : ''
+          item === globalState.currentProject ? styles.itemActive : ''
         }`}
         key={item.id}
-        onClick={() => store.setCurrentProjectId(item.id)}
+        onClick={() => setCurrProejct(item)}
       >
         <h3>{item.name}</h3>
         <small>{item.comment}</small>
       </li>
     ));
     return <ol class={styles.list}>{list}</ol>;
-  });
+  }
-});
+);

src/generated/graphql.tsx

@@ -1,8 +1,12 @@
 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 Exact<T extends { [key: string]: unknown }> = {
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+  [K in keyof T]: T[K];
-export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+};
+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;
@@ -30,7 +34,6 @@ export type Project = {
   deletedAt?: Maybe<Scalars['DateTime']>;
 };
 
-
 export type Query = {
   __typename?: 'Query';
   hello: Hello;
@@ -38,7 +41,6 @@ export type Query = {
   findProject: Project;
 };
 
-
 export type QueryFindProjectArgs = {
   id: Scalars['String'];
 };
@@ -46,22 +48,19 @@ export type QueryFindProjectArgs = {
 export type Mutation = {
   __typename?: 'Mutation';
   createProject: Project;
-  modifyProject: Project;
+  modifyProject: Scalars['Boolean'];
   deleteProject: Scalars['Float'];
 };
 
-
 export type MutationCreateProjectArgs = {
   project: CreateProjectInput;
 };
 
-
 export type MutationModifyProjectArgs = {
   project: UpdateProjectInput;
   id: Scalars['String'];
 };
 
-
 export type MutationDeleteProjectArgs = {
   id: Scalars['String'];
 };