fixup! Add possibility to edit NTP servers

js/src/regionAndTime/NTPForm.js

@@ -5,44 +5,14 @@
  * See /LICENSE for more information.
  */
 
-/* import React from "react"; */
-import { Button, TextInput, useForm } from "foris";
-import { useEditServers, useNTPForm } from "./hooks";
+import { Button, TextInput } from "foris";
+import { useNTPForm } from "./hooks";
 
-export default function NTPForm({ servers, /* setFormValue, */ formData }) {
-    /*  const [serverList, setFormValue, saveServer, removeServer] = useEditServers(
-        servers,
-        formData
-    ); */
-
-    const [formState, setFormValue, saveServer] = useNTPForm(formData);
-
-    /* const [formState, setFormValue, initForm] = useForm();
-
-    function saveServer() {
-        setFormValue(() => ({
-            time_settings: { ntp_extras: { $push: ["něco"] } },
-        }));
-
-        const data = formState.data;
-        delete data.time_settings.ntp_servers;
-        if (data.time_settings.how_to_set_time === "ntp")
-            delete data.time_settings.time;
-
-        post({ data });
-    } */
-
-    /* const addS = setFormValue(() => ({
-        time_settings: { ntp_extras: { $push: ["něco"] } },
-    })); */
-
-    /* function nova() {
-        setFormValue(() => ({
-            time_settings: { ntp_extras: { $push: ["neco"] } },
-        }));
-
-        saveServer();
-    } */
+export default function NTPForm({ formData, setShown }) {
+    const [formState, setFormValue, saveServer] = useNTPForm(
+        formData,
+        setShown
+    );
 
     return (
         <>

js/src/regionAndTime/NTPModal.js

@@ -8,23 +8,12 @@
 import { Modal, ModalBody, ModalHeader } from "foris";
 import NTPForm from "./NTPForm";
 
-export default function NTPModal({
-    shown,
-    setShown,
-    title,
-    servers,
-    setFormValue,
-    formData,
-}) {
+export default function NTPModal({ shown, setShown, title, formData }) {
     return (
         <Modal scrollable shown={shown} setShown={setShown}>
             <ModalHeader setShown={setShown} title={title} />
             <ModalBody>
-                <NTPForm
-                    servers={servers}
-                    formData={formData}
-                    setFormValue={setFormValue}
-                />
+                <NTPForm formData={formData} setShown={setShown} />
             </ModalBody>
         </Modal>
     );

js/src/regionAndTime/TimeForm.js

@@ -15,12 +15,9 @@ import {
     SpinnerElement,
     Button,
     API_STATE,
-    useAPIPost,
-    useAPIGet,
 } from "foris";
 
-import API_URLs from "common/API";
-import { useNTPDate, useEditServers } from "./hooks";
+import { useNTPDate } from "./hooks";
 import NTPModal from "./NTPModal";
 import "./TimeForm.css";
 
@@ -122,11 +119,7 @@ export default function TimeForm({
                 disabled={disabled}
             />
             {data.how_to_set_time === "ntp" && (
-                <NTPServersList
-                    servers={data}
-                    formData={formData}
-                    setFormValue={setFormValue}
-                />
+                <NTPServersList formData={formData} />
             )}
             <DataTimeInput
                 label={_("Time")}
@@ -167,12 +160,9 @@ NTPServersList.propTypes = {
     servers: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-function NTPServersList({ servers, formData, setFormValue }) {
+function NTPServersList({ formData }) {
     const [shown, setShown] = useState(false);
     const [NTPModalShown, setNTPModalShown] = useState(false);
-    /* const [serverList, setFormValue, saveServer, removeServer] = useEditServers(
-        servers
-    ); */
 
     function addServer() {
         //tohle pak přesunout do hooks?
@@ -199,13 +189,13 @@ function NTPServersList({ servers, formData, setFormValue }) {
             <div className="collapse" id="collapseNTPServers">
                 <h5>{_("NTP Servers")}</h5>
                 <div id="ntpServersList">
-                    {servers.ntp_servers.map((server) => (
+                    {formData.time_settings.ntp_servers.map((server) => (
                         <p key={server}>{server}</p>
                     ))}
                 </div>
                 <h5>{_("Custom NTP Servers")}</h5>
                 <div id="ntpServersList">
-                    {servers.ntp_extras.map((server) => (
+                    {formData.time_settings.ntp_extras.map((server) => (
                         <p
                             key={server}
                             onClick={(value) =>
@@ -226,8 +216,6 @@ function NTPServersList({ servers, formData, setFormValue }) {
                     shown={NTPModalShown}
                     setShown={setNTPModalShown}
                     title={_("Add NTP Server")}
-                    servers={servers}
-                    setFormValue={setFormValue}
                     formData={formData}
                 />
             </div>

js/src/regionAndTime/hooks.js

@@ -7,7 +7,7 @@
 
 import { useEffect, useState } from "react";
 
-import { useAPIPost, useForm } from "foris";
+import { API_STATE, useAPIPost, useForm } from "foris";
 import API_URLs from "common/API";
 
 export function useNTPDate(ws) {
@@ -57,53 +57,35 @@ export function useNTPDate(ws) {
     return [state, trigger];
 }
 
-export function useEditServers(servers, formData) {
-    /*  const [formState, setFormValue, initForm] = useForm(); */
-    const [serverList, setServers] = useState(servers.ntp_extras); //rename setServers?
-    const [postState, post] = useAPIPost(API_URLs.regionAndTime);
-
-    /* function saveServer() {
-        setFormValue(() => ({
-            ntp_servers: { neco: { $push: [""] }},
-        }))};
-
-        const data = formState.data;
-        delete data.time_settings.ntp_servers;
-        if (data.time_settings.how_to_set_time === "ntp")
-            delete data.time_settings.time;
-
-        post({ data });
-    } */
-
-    function removeServer(serverToRemove) {
-        setServers((servers) =>
-            servers.filter((server) => {
-                return server !== serverToRemove;
-            })
-        );
-    }
+/* const EMPTY_FORM_DATA = {
+    newServer: "",
+}; */
 
-    return [
-        /* setFormValue, formState,  */ serverList,
-        /* saveServer, */
-        removeServer,
-    ];
-}
-
-export function useNTPForm(formData) {
+export function useNTPForm(formData, setShown) {
     const [formState, setFormValue, initForm] = useForm(validator);
     const [postState, post] = useAPIPost(API_URLs.regionAndTime);
-    console.log("formState.data", formState.data);
+    console.log("formState.data", formState.data); //delete then
 
     useEffect(() => {
         if (formData) {
             initForm(formData);
         }
-    }, [formData]);
+    }, [formData, initForm]);
+
+    useEffect(() => {
+        if (postState.state === API_STATE.SUCCESS) {
+            setShown(false);
+        }
+    }, [postState, setShown]);
+
+    /* useEffect(() => {
+        if (postState.state === API_STATE.SUCCESS) {
+            initForm(EMPTY_FORM_DATA);
+        }
+    }, [postState, initForm]); */
 
     function saveServer() {
         const data = formState.data;
-
         data.time_settings.ntp_extras.push(data.newServer);
         delete data.newServer;
         delete data.time_settings.ntp_servers;
@@ -116,6 +98,7 @@ export function useNTPForm(formData) {
 }
 
 function validator() {
+    //make working validator then
     const errors = {};
     return errors;
 }