MobX

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

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}

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>

frontend/src/components/TypesList.tsx

@@ -1,15 +1,18 @@
 import { useEffect, useState } from "react";
 import { getTypes, TypeStruct } from "../functions/api";
 import TypeEdit from "./TypeEdit";
+import mobxStore from "../functions/store";
 
 function TypesList(_props:any) {
 
   const [types, setTypes] = useState<TypeStruct[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
-
-      setTypes(await getTypes());
+
+      const t = await getTypes(); 
+      setTypes(t);
+      mobxStore.setTypeList(t);
     };
 
     fetchData();

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;