From bca00939d259d8724d8a1455692f84171969e2a5 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 1 Jan 2023 04:29:50 +0100
Subject: [PATCH] Added the editing mode to the LinkDialog.jsx

---
 .../Home/components/LinkDialog/LinkDialog.jsx | 72 ++++++++-----------
 1 file changed, 31 insertions(+), 41 deletions(-)

diff --git a/admin/src/pages/Home/components/LinkDialog/LinkDialog.jsx b/admin/src/pages/Home/components/LinkDialog/LinkDialog.jsx
index 4636967..ac86831 100644
--- a/admin/src/pages/Home/components/LinkDialog/LinkDialog.jsx
+++ b/admin/src/pages/Home/components/LinkDialog/LinkDialog.jsx
@@ -3,32 +3,32 @@ import Button from "@/common/components/Button";
 import DialogHeader from "@/pages/Home/components/LinkDialog/components/DialogHeader";
 import InputGroup from "@/pages/Home/components/LinkDialog/components/InputGroup";
 import ModuleContext from "@/common/contexts/Module";
-import {putRequest} from "@/common/utils/RequestUtil.js";
+import {patchRequest, putRequest} from "@/common/utils/RequestUtil.js";
 import LinkContext from "@/common/contexts/Link";
+import {DialogProvider} from "@/common/contexts/Dialog";
+import {DomainContext} from "@/common/contexts/Domain/DomainContext.jsx";
 import "./styles.sass";
 
 export const LinkDialog = (props) => {
-    const ref = useRef();
     const groups = useRef();
     const [links, updateLinks] = useContext(LinkContext);
+    const [currentDomain] = useContext(DomainContext);
     const [error, setError] = useState("");
     const modules = useContext(ModuleContext);
     const [module, setModule] = useState();
 
     useEffect(() => {
-        if (!modules) return;
+        if (!modules || props.module === null) return;
         setModule(modules[props.module]);
-    }, [modules]);
+    }, [modules, props.module]);
 
-    const close = () => ref.current?.classList.add("dialog-hidden");
-
-    const onClose = (e) => {
+    const close = () => {
         setError("");
-        if (e.animationName === "fadeOut") props?.close();
+        props?.close();
     }
 
     const getBody = () => {
-        const body = {meta: {}, type: props.module, domainName: "localhost"}; //TODO
+        const body = {meta: {}, type: props.module, domainName: currentDomain};
         let isMeta = false;
         groups.current.childNodes.forEach((groupNode) => {
             // check if array
@@ -46,7 +46,7 @@ export const LinkDialog = (props) => {
     }
 
     const submit = async () => {
-        const response = (await putRequest("/link", getBody()));
+        const response = await (props.editMode ? patchRequest(`/link/${props.id}`, getBody()) : putRequest("/link", getBody()));
         if (response.status === 200) {
             updateLinks();
             close();
@@ -55,43 +55,33 @@ export const LinkDialog = (props) => {
         setError((await response.json()).message);
     }
 
-    useEffect(() => {
-        const handleClick = (event) => {
-            if (!ref.current?.contains(event.target)) close();
-        }
-
-        document.addEventListener("mousedown", handleClick);
-    }, [ref]);
-
     if (!props.isOpen) return <></>;
 
     return (
-        <div className="dialog-area">
-            <div className="dialog" ref={ref} onAnimationEnd={onClose}>
-                <DialogHeader close={close} module={module.name} icon={module.icon}/>
+        <DialogProvider submit={submit} close={close}>
+            <DialogHeader module={module.name} icon={module.icon} editMode={props.editMode}/>
 
-                <div className="dialog-main" ref={groups}>
-                    <div className="dialog-group">
-                        <h2>Allgemein</h2>
-                        <InputGroup title="Neuer Link" description="Wähle deinen neuen Link" id="accessId" autoComplete="off"/>
-                        <InputGroup title="Titel" description="Worum geht es hier?" id="title" autoComplete="off"/>
-                        <InputGroup title="Tags" description="Trenne Tags mit einem Komma" id="tags" autoComplete="off"/>
-                    </div>
-
-                    {module.meta.map(group => <div className="dialog-group" key={group.name} id={group.name}>
-                        <h2>{group.name}</h2>
-
-                        {Object.entries(group.fields).map(([id, obj]) => <InputGroup title={obj.name}
-                                                                                     description={obj.description}
-                                                                                     key={id} id={id}/>)}
-                    </div>)}
+            <div className="dialog-main" ref={groups}>
+                <div className="dialog-group">
+                    <h2>Allgemein</h2>
+                    <InputGroup title="Neuer Link" description="Wähle deinen neuen Link" id="accessId" autoComplete="off" default={props.accessId}/>
+                    <InputGroup title="Titel" description="Worum geht es hier?" id="title" autoComplete="off" default={props.title}/>
+                    <InputGroup title="Tags" description="Trenne Tags mit einem Komma" id="tags" autoComplete="off" default={props.tags?.join(",")}/>
                 </div>
 
-                <div className="dialog-action">
-                    <h3 className="error">{error && `Fehler: ${error}`}</h3>
-                    <Button text="Link erstellen" onClick={submit}/>
-                </div>
+                {module.meta.map(group => <div className="dialog-group" key={group.name} id={group.name}>
+                    <h2>{group.name}</h2>
+
+                    {Object.entries(group.fields).map(([id, obj]) => <InputGroup title={obj.name}
+                                                                                 description={obj.description}
+                                                                                 key={id} id={id} default={props.meta ? props.meta[id] : ""}/>)}
+                </div>)}
             </div>
-        </div>
+
+            <div className="dialog-action">
+                <h3 className="error">{error && `Fehler: ${error}`}</h3>
+                <Button text={`Link ${props.editMode ? "aktualisieren" : "erstellen"}`} onClick={submit}/>
+            </div>
+        </DialogProvider>
     )
 }
\ No newline at end of file