Fix patch spam on EditHeaders open

the-clothing-loop · Feb 23, 2024 · 8b669ad · 8b669ad
1 parent 09b433b
commit 8b669ad
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 47 deletions.
diff --git a/app/src/Store.tsx b/app/src/Store.tsx
@@ -44,6 +44,7 @@ export const StoreContext = createContext({
   setTheme: (c: string) => {},
   chain: null as Chain | null,
   chainUsers: [] as Array<User>,
+  chainHeaders: undefined as ChainHeaders | undefined,
   getChainHeader: (key: string, override: string) => override,
   listOfChains: [] as Array<Chain>,
   route: [] as UID[],
@@ -423,6 +424,7 @@ export function StoreProvider({
         bags,
         bulkyItems,
         chain,
+        chainHeaders,
         isThemeDefault,
         chainUsers,
         getChainHeader,

diff --git a/app/src/components/EditHeaders.tsx b/app/src/components/EditHeaders.tsx
@@ -12,73 +12,53 @@ import {
   IonTitle,
   IonToolbar,
   useIonAlert,
-  useIonToast,
 } from "@ionic/react";
 
 import type { IonModalCustomEvent } from "@ionic/core";
-import { RefObject, useContext, useEffect, useState } from "react";
+import { RefObject, useContext, useState } from "react";
 import { StoreContext } from "../Store";
 import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces";
-import toastError from "../../toastError";
 import { useTranslation } from "react-i18next";
-import { Chain, chainUpdate } from "../api";
+import { chainUpdate } from "../api";
 import { refreshOutline } from "ionicons/icons";
 
 export default function EditHeaders(props: {
-  initalHeader: string | null;
+  initialHeader: string | null;
   headerKey: string;
   modal: RefObject<HTMLIonModalElement>;
   didDismiss?: (e: IonModalCustomEvent<OverlayEventDetail<any>>) => void;
 }) {
   const { t } = useTranslation();
   const [error, setError] = useState("");
-  const { chain } = useContext(StoreContext);
+  const { chain, chainHeaders } = useContext(StoreContext);
 
-  const [present] = useIonToast();
   const [presentAlert] = useIonAlert();
 
-  const [header, setHeader] = useState(props.initalHeader);
-  const [headers, setHeaders] = useState({});
+  const [text, setText] = useState(props.initialHeader);
 
   function modalInit() {
-    setHeader("");
+    setText(props.initialHeader);
     setError("");
   }
-  useEffect(() => {
-    updateHeader();
-  }, [headers]);
 
   function cancel() {
     props.modal.current?.dismiss();
   }
 
   function handleSave() {
+    if (!chain?.uid) return;
     const _headerKey = props.headerKey;
-    const prevHeaders = chain?.headers_override
-      ? JSON.parse(chain.headers_override)
-      : "";
-    if (header) {
-      setHeaders(() => ({
-        ...prevHeaders,
-        [_headerKey]: header,
-      }));
-    }
-  }
+    const newH = {
+      ...chainHeaders,
+      [_headerKey]: text,
+    };
 
-  async function updateHeader() {
-    if (!chain?.uid) return;
+    chainUpdate({
+      uid: chain.uid,
+      headers_override: JSON.stringify(newH),
+    });
 
-    try {
-      await chainUpdate({
-        uid: chain.uid,
-        headers_override: JSON.stringify(headers),
-      });
-      setError("");
-      props.modal.current?.dismiss("", "confirm");
-    } catch (err: any) {
-      setError(err.status);
-      toastError(present, err);
-    }
+    props.modal.current?.dismiss("", "confirm");
   }
 
   function reset() {
@@ -120,12 +100,12 @@ export default function EditHeaders(props: {
           <IonButtons slot="start">
             <IonButton onClick={cancel}>{t("cancel")}</IonButton>
           </IonButtons>
-          <IonTitle>{t("updateHeaders")}</IonTitle>
+          <IonTitle>{t("update")}</IonTitle>
           <IonButtons slot="end">
             <IonButton
               onClick={handleSave}
               color={!error ? "primary" : "danger"}
-              disabled={header?.length == 0}
+              disabled={text?.length == 0}
             >
               {t("save")}
             </IonButton>
@@ -170,8 +150,8 @@ export default function EditHeaders(props: {
               autoCapitalize="words"
               maxlength={50}
               counter
-              placeholder={props.initalHeader || ""}
-              onIonInput={(e) => setHeader(e.detail.value + "")}
+              value={text || ""}
+              onIonInput={(e) => setText(e.detail.value + "")}
             />
           </IonItem>
         </IonList>

diff --git a/app/src/pages/AddressList.tsx b/app/src/pages/AddressList.tsx
@@ -195,7 +195,7 @@ export default function AddressList() {
               modal={headerSheetModal}
               didDismiss={updateChain}
               headerKey={headerKey}
-              initalHeader={headerText}
+              initialHeader={headerText}
             />
           ) : null}
           <IonIcon

diff --git a/app/src/pages/BagsList.tsx b/app/src/pages/BagsList.tsx
@@ -508,13 +508,13 @@ export default function BagsList() {
               modal={headerSheetModal}
               didDismiss={refreshBags}
               headerKey={headerKey}
-              initalHeader={headerText}
+              initialHeader={headerText}
             />
             <EditHeaders
               modal={subHeaderSheetModal}
               didDismiss={refreshBags}
               headerKey={subHeaderKey}
-              initalHeader={subHeaderText}
+              initialHeader={subHeaderText}
             />
           </div>
         ) : null}

diff --git a/app/src/pages/BulkyList.tsx b/app/src/pages/BulkyList.tsx
@@ -342,7 +342,7 @@ export default function BulkyList() {
             modal={headerSheetModal}
             didDismiss={refreshChain}
             headerKey={headerKey}
-            initalHeader={headerText}
+            initialHeader={headerText}
           />
         ) : null}
         <div className="relative">

diff --git a/app/src/pages/HelpList.tsx b/app/src/pages/HelpList.tsx
@@ -196,7 +196,7 @@ export default function HelpList() {
               modal={headerSheetModal}
               didDismiss={refreshChain}
               headerKey={headerKey}
-              initalHeader={headerText}
+              initialHeader={headerText}
             />
           ) : null}
           <IonIcon

diff --git a/app/src/pages/Settings.tsx b/app/src/pages/Settings.tsx
@@ -547,13 +547,13 @@ export default function Settings() {
               modal={headerSheetModal}
               didDismiss={refreshBags}
               headerKey={headerKey}
-              initalHeader={headerText}
+              initialHeader={headerText}
             />
             <EditHeaders
               modal={subHeaderSheetModal}
               didDismiss={refreshBags}
               headerKey={subHeaderKey}
-              initalHeader={subHeader}
+              initialHeader={subHeader}
             />
           </div>
         ) : null}