alova update #6

interface/src/utils/binding.ts

@@ -1,5 +1,3 @@
-type UpdateEntity<S> = (state: (prevState: Readonly<S>) => S) => void;
-
 export const numberValue = (value: number) => (isNaN(value) ? '' : value.toString());
 
 export const extractEventValue = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -13,6 +11,8 @@ export const extractEventValue = (event: React.ChangeEvent<HTMLInputElement>) =>
   }
 };
 
+type UpdateEntity<S> = (state: (prevState: Readonly<S>) => S) => void;
+
 export const updateValue =
   <S>(updateEntity: UpdateEntity<S>) =>
   (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -23,10 +23,13 @@ export const updateValue =
   };
 
 export const updateValueDirty =
-  <S>(origData: any, dirtyFlags: any, setDirtyFlags: any, updateEntity: UpdateEntity<S>) =>
+  <S>(origData: any, dirtyFlags: any, setDirtyFlags: any, updateEntity: any) =>
+  // <S>(origData: any, dirtyFlags: any, setDirtyFlags: any, updateEntity: UpdateEntity<S>) =>
   (event: React.ChangeEvent<HTMLInputElement>) => {
     const updated_value = extractEventValue(event);
     const name = event.target.name;
+
+    // TODO not sure how this is even working!!
     updateEntity((prevState) => ({
       ...prevState,
       [name]: updated_value
@@ -34,6 +37,11 @@ export const updateValueDirty =
 
     const arr: string[] = dirtyFlags;
 
+    // TODO remove comments
+    // console.log('updating ' + name + ' to ' + updated_value); // TODO remove
+    // console.log('dirtyFlags:', dirtyFlags); // TODO remove
+    // console.log('binding.ts origData:', origData); // TODO remove
+
     if (origData[name] !== updated_value) {
       if (!arr.includes(name)) {
         arr.push(name);

interface/src/utils/index.ts

@@ -4,4 +4,6 @@ export * from './route';
 export * from './submit';
 export * from './time';
 export * from './useRest';
+// TODO remove
+export * from './useRest2';
 export * from './props';

interface/src/utils/useRest2.ts

@@ -0,0 +1,92 @@
+import { useRequest, type Method } from 'alova';
+import { useState } from 'react';
+import { unstable_useBlocker as useBlocker } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import type { AlovaXHRRequestConfig, AlovaXHRResponse, AlovaXHRResponseHeaders } from '@alova/adapter-xhr';
+
+import { useI18nContext } from 'i18n/i18n-react';
+
+export interface RestRequestOptions<D> {
+  read: () => Method<any, any, any, any, any, AlovaXHRResponse<any>, AlovaXHRResponseHeaders>;
+  update: (
+    value: D
+  ) => Method<any, unknown, unknown, unknown, AlovaXHRRequestConfig, AlovaXHRResponse<any>, AlovaXHRResponseHeaders>;
+}
+
+export const useRest2 = <D>({ read, update }: RestRequestOptions<D>) => {
+  const { LL } = useI18nContext();
+
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
+  const [origData, setOrigData] = useState<D>();
+
+  const [dirtyFlags, setDirtyFlags] = useState<string[]>([]);
+  const blocker = useBlocker(dirtyFlags.length !== 0);
+
+  const { data: data, send: readData, update: updateData, onComplete: onReadComplete } = useRequest(read());
+
+  const {
+    loading: saving,
+    send: writeData,
+    onSuccess: onWriteSuccess
+  } = useRequest((newData: D) => update(newData), { immediate: false });
+
+  const setData = (new_data: D) => {
+    console.log('SET DATA'); // TODO remove console
+    console.log('new_data:', new_data); // TODO remove console
+    updateData({
+      data: new_data
+    });
+  };
+
+  onWriteSuccess(() => {
+    toast.success(LL.UPDATED_OF(LL.SETTINGS()));
+    setDirtyFlags([]);
+  });
+
+  onReadComplete((event) => {
+    setOrigData(event.data); // make a copy
+  });
+
+  const loadData = async () => {
+    setDirtyFlags([]);
+    setErrorMessage(undefined);
+    await readData().catch((error) => {
+      toast.error(error.message);
+      setErrorMessage(error.message);
+    });
+  };
+
+  const saveData = async () => {
+    if (!data) {
+      return;
+    }
+    console.log('SAVE DATA'); // TODO remove console
+    setRestartNeeded(false);
+    setErrorMessage(undefined);
+    await writeData(data).catch((error) => {
+      if (error.message === 'Reboot required') {
+        setRestartNeeded(true);
+      } else {
+        toast.error(error.message);
+        setErrorMessage(error.message);
+      }
+    });
+  };
+
+  return {
+    loadData,
+    saveData,
+    saving,
+    setData,
+    data,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    setOrigData,
+    blocker,
+    errorMessage,
+    restartNeeded
+  } as const;
+};