From add61efe539fc8720e4eb6cad34e563cd674a884 Mon Sep 17 00:00:00 2001
From: aceberg <1502200+aceberg@users.noreply.github.com>
Date: Wed, 8 Jan 2025 21:10:13 +0700
Subject: [PATCH] MobX

---
 frontend/package-lock.json              | 10 ++++++++++
 frontend/package.json                   |  1 +
 frontend/src/components/ConfigAbout.tsx |  4 ++--
 frontend/src/components/EditItem.tsx    | 14 +++++++++++++-
 frontend/src/components/TypesList.tsx   |  7 +++++--
 frontend/src/functions/store.tsx        | 17 +++++++++++++++++
 6 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/functions/store.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2850dc8..785b15a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.1",
       "dependencies": {
         "bootstrap": "^5.3.3",
+        "mobx": "^6.13.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -2429,6 +2430,15 @@
         "node": "*"
       }
     },
+    "node_modules/mobx": {
+      "version": "6.13.5",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.13.5.tgz",
+      "integrity": "sha512-/HTWzW2s8J1Gqt+WmUj5Y0mddZk+LInejADc79NJadrWla3rHzmRHki/mnEUH1AvOmbNTZ1BRbKxr8DSgfdjMA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index add4615..e972dee 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
+    "mobx": "^6.13.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/frontend/src/components/ConfigAbout.tsx b/frontend/src/components/ConfigAbout.tsx
index df447ff..b38e5e7 100644
--- a/frontend/src/components/ConfigAbout.tsx
+++ b/frontend/src/components/ConfigAbout.tsx
@@ -20,8 +20,8 @@ function ConfigAbout() {
         size=""
         body={
           <>
-            <p>About: <a href="https://github.com/aceberg/AnyAppStart">https://github.com/aceberg/AnyAppStart</a></p>
-            <p>Donate: <a href="https://github.com/aceberg#donate">https://github.com/aceberg#donate</a></p>
+            <p>About: <a href="https://github.com/aceberg/AnyAppStart" target="_blank">https://github.com/aceberg/AnyAppStart</a></p>
+            <p>Donate: <a href="https://github.com/aceberg#donate" target="_blank">https://github.com/aceberg#donate</a></p>
           </>
         }
         onClose={handleCloseModal}
diff --git a/frontend/src/components/EditItem.tsx b/frontend/src/components/EditItem.tsx
index 9b22e31..46fe734 100644
--- a/frontend/src/components/EditItem.tsx
+++ b/frontend/src/components/EditItem.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import BootstrapModal from "./Modal";
 import { apiSaveItem, Item } from "../functions/api";
+import mobxStore from "../functions/store";
 
 function EditItem(_props: any) {
 
@@ -55,6 +56,13 @@ function EditItem(_props: any) {
     setModalOpen(false);
   }
 
+  const handleSelectType = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      Type: event.target.value,
+    }));
+  };
+
   return (
     <>
       <span onClick={handleEdit}>{_props.btnContent}</span>
@@ -69,7 +77,11 @@ function EditItem(_props: any) {
             <label htmlFor="nid" className="form-label text-primary">Name</label>
             <input className="form-control mb-3" defaultValue={item.Name} id="nid" name="Name" onChange={handleChange} placeholder="Not empty string"></input>
             <label htmlFor="tid" className="form-label text-primary">Type</label>
-            <input className="form-control mb-3" defaultValue={item.Type} id="tid" name="Type" onChange={handleChange}></input>
+            <select className="form-select mb-3" id="tid" onChange={handleSelectType} value={formData.Type}>
+              {mobxStore?.typeList.map((t, i) => (
+                <option key={i} value={t.Name}>{t.Name}</option>
+              ))}
+            </select>
             <label htmlFor="lid" className="form-label text-primary">Link</label>
             <input className="form-control mb-3" defaultValue={item.Link} id="lid" name="Link" onChange={handleChange} placeholder="URL"></input>
             <hr></hr>
diff --git a/frontend/src/components/TypesList.tsx b/frontend/src/components/TypesList.tsx
index f69a16c..dae2508 100644
--- a/frontend/src/components/TypesList.tsx
+++ b/frontend/src/components/TypesList.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { getTypes, TypeStruct } from "../functions/api";
 import TypeEdit from "./TypeEdit";
+import mobxStore from "../functions/store";
 
 function TypesList(_props:any) {
 
@@ -8,8 +9,10 @@ function TypesList(_props:any) {
 
   useEffect(() => {
     const fetchData = async () => {
-    
-      setTypes(await getTypes());
+      
+      const t = await getTypes(); 
+      setTypes(t);
+      mobxStore.setTypeList(t);
     };
     
     fetchData();
diff --git a/frontend/src/functions/store.tsx b/frontend/src/functions/store.tsx
new file mode 100644
index 0000000..5570865
--- /dev/null
+++ b/frontend/src/functions/store.tsx
@@ -0,0 +1,17 @@
+import { makeAutoObservable } from 'mobx';
+import { TypeStruct } from './api';
+
+class MobxStore {
+    typeList:TypeStruct[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    setTypeList(list:TypeStruct[]) {
+        this.typeList = list;
+    }
+}
+
+const mobxStore = new MobxStore();
+export default mobxStore;
\ No newline at end of file