next-recomponents 1.5.99 → 1.6.2

package/src/use-resources/index.ts

@@ -8,10 +8,10 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
   baseURI,
   endpoints,
   onError,
-}: Props) {
+}: Props<T>) {
   const token = useToken();
 
-  const [info, setInfo] = useState<Record<string, any>>(
+  const [info, setInfo] = useState<EnhancedEndpoints<T>>(
     Object.keys(endpoints).reduce((acc: any, key) => {
       const newAcc: any = {
         ...acc,
@@ -19,6 +19,8 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
           loaded: false,
           id: endpoints[key]?.id,
           defaultParams: endpoints[key]?.defaultParams,
+          data: [],
+          selectedItem: {},
         },
       };
 
@@ -26,128 +28,26 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
     }, {} as any)
   );
 
-  const results = Object.keys(endpoints).reduce((acc: any, key) => {
-    const endpoint = endpoints[key];
-    const showFunc = async (
-      { limit = 10, page = 1, merge = true, ...query }: ShowOptions,
-      autoLoad: boolean = false
-    ) => {
-      const options = {
-        method: "GET",
-        url: `${baseURI}/${key}`,
-        params: { limit, page, ...query },
-        headers: { Authorization: token },
-      };
-
-      const newInfo = { ...info };
-      newInfo[key] = newInfo[key] || {};
-      newInfo[key].state = "loading";
-      newInfo[key].errorMessage = "";
-      newInfo[key].params = query;
-      newInfo[key].loaded = true;
-
-      setInfo(newInfo);
-
-      try {
-        const consulta = await axios.request(options);
-        const d = consulta.data;
-        newInfo[key].state = "success";
-        newInfo[key].errorMessage = "";
-
-        newInfo[key].data = merge
-          ? page == 1
-            ? d.data
-            : [...d.data, ...(newInfo[key].data || [])]
-          : d.data;
-        newInfo[key].totalItems = d.totalItems;
-        newInfo[key].totalPages = d.totalPages;
-        newInfo[key].currentPage = d.currentPage;
-
-        setInfo({ ...newInfo });
-        return d.data;
-      } catch (error: any) {
-        const item = httpStatusCodes.find((s) => s.code == error.status);
-
-        newInfo[key].state = "error";
-        newInfo[key].errorMessage = item?.meaning;
-        if (error.status == 403) {
-          onError?.({ error, ...{ errorMessage: item?.meaning } });
-        }
-        setInfo({ ...newInfo });
-        return error;
-      }
-    };
-    const findFunc = async (
-      id: number,
-      query: any,
-      autoLoad: boolean = false
-    ) => {
-      const options = {
-        method: "GET",
-        url: `${baseURI}/${key}/${id}`,
-        params: { ...query },
-        headers: { Authorization: token },
-      };
-      const newInfo = { ...info };
-      newInfo[key] = newInfo[key] || {};
-      newInfo[key].state = "loading";
-      newInfo[key].errorMessage = "";
-      newInfo[key].params = query;
-      newInfo[key].loaded = true;
-
-      setInfo(newInfo);
-
-      try {
-        const consulta = await axios.request(options);
-        const d = consulta.data;
-        newInfo[key].state = "success";
-        newInfo[key].errorMessage = "";
-        if (autoLoad) {
-        } else {
-          newInfo[key].selectedItem = d;
-          const index = newInfo[key]?.data?.findIndex(
-            (d: any) => d?.id == d?.id
-          );
-          if (index >= 0) {
-            newInfo[key].data[index] = d;
-          } else {
-            if (newInfo[key]?.data) {
-              newInfo[key].data.unshift(d);
-            } else {
-              newInfo[key].data = [d];
-            }
-          }
-        }
-        setInfo({ ...newInfo });
-        return d;
-      } catch (error: any) {
-        const item = httpStatusCodes.find((s) => s.code == error.status);
-
-        newInfo[key].state = "error";
-        newInfo[key].errorMessage = item?.meaning || error.message;
-        if (error.status == 403) {
-          onError?.({ error, ...{ errorMessage: item?.meaning } });
-        }
-        setInfo({ ...newInfo });
-        return error;
-      }
-    };
-    acc[key] = {
-      ...endpoint,
-      loaded: false,
-      show: showFunc,
-      find: findFunc,
-      create: async (data: Record<string, any> | Record<string, any>[]) => {
+  const results: EnhancedEndpoints<T> = Object.keys(endpoints).reduce(
+    (acc: any, key) => {
+      const endpoint = endpoints[key];
+      const showFunc = async (
+        { limit = 10, page = 1, merge = true, ...query }: ShowOptions,
+        autoLoad: boolean = false
+      ) => {
         const options = {
-          method: "POST",
+          method: "GET",
           url: `${baseURI}/${key}`,
-          data: Array.isArray(data) ? [...data] : { ...data },
+          params: { limit, page, ...query },
           headers: { Authorization: token },
         };
+
         const newInfo = { ...info };
-        newInfo[key] = newInfo[key] || {};
+        // newInfo[key] = newInfo[key] || {};
         newInfo[key].state = "loading";
         newInfo[key].errorMessage = "";
+        newInfo[key].params = query;
+        newInfo[key].loaded = true;
 
         setInfo(newInfo);
 
@@ -156,61 +56,43 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
           const d = consulta.data;
           newInfo[key].state = "success";
           newInfo[key].errorMessage = "";
-          if (Array.isArray(data)) {
-            for (let datum of data) {
-              const index = newInfo[key]?.data?.findIndex(
-                (d: any) => d?.id == datum?.id
-              );
-              if (index >= 0) {
-                newInfo[key].data[index] = d;
-              } else {
-                if (newInfo[key]?.data) {
-                  newInfo[key].data.unshift(d);
-                } else {
-                  newInfo[key].data = [d];
-                }
-              }
-            }
-          } else {
-            newInfo[key].selectedItem = d;
-            const index = newInfo[key]?.data?.findIndex(
-              (d: any) => d?.id == d?.id
-            );
-            if (index >= 0) {
-              newInfo[key].data[index] = d;
-            } else {
-              if (newInfo[key]?.data) {
-                newInfo[key].data.unshift(d);
-              } else {
-                newInfo[key].data = [d];
-              }
-            }
-          }
+
+          newInfo[key].data = merge
+            ? page == 1
+              ? d.data
+              : [...d.data, ...(newInfo[key].data || [])]
+            : d.data;
+          newInfo[key].totalItems = d.totalItems;
+          newInfo[key].totalPages = d.totalPages;
+          newInfo[key].currentPage = d.currentPage;
+
           setInfo({ ...newInfo });
-          return d;
+          return d.data;
         } catch (error: any) {
           const item = httpStatusCodes.find((s) => s.code == error.status);
 
           newInfo[key].state = "error";
-          newInfo[key].errorMessage = item?.meaning || error.message;
+          newInfo[key].errorMessage = item?.meaning;
           if (error.status == 403) {
             onError?.({ error, ...{ errorMessage: item?.meaning } });
           }
           setInfo({ ...newInfo });
           return error;
         }
-      },
-      update: async (id: number, data: any) => {
+      };
+      const findFunc = async (id: number, query: any) => {
         const options = {
-          method: "PATCH",
+          method: "GET",
           url: `${baseURI}/${key}/${id}`,
-          data: Array.isArray(data) ? [...data] : { ...data },
+          params: { ...query },
           headers: { Authorization: token },
         };
         const newInfo = { ...info };
-        newInfo[key] = newInfo[key] || {};
+        // newInfo[key] = newInfo[key] || {};
         newInfo[key].state = "loading";
         newInfo[key].errorMessage = "";
+        newInfo[key].params = query;
+        newInfo[key].loaded = true;
 
         setInfo(newInfo);
 
@@ -219,10 +101,10 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
           const d = consulta.data;
           newInfo[key].state = "success";
           newInfo[key].errorMessage = "";
+
           newInfo[key].selectedItem = d;
-          const index = newInfo[key]?.data?.findIndex(
-            (d: any) => d?.id == d?.id
-          );
+          const index = newInfo[key]?.data?.findIndex((d: any) => d?.id == id);
+          console.log("index", index, newInfo[key]?.data);
           if (index >= 0) {
             newInfo[key].data[index] = d;
           } else {
@@ -232,6 +114,7 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
               newInfo[key].data = [d];
             }
           }
+
           setInfo({ ...newInfo });
           return d;
         } catch (error: any) {
@@ -245,65 +128,182 @@ export default function useResources<T extends Record<string, ItemsRecord>>({
           setInfo({ ...newInfo });
           return error;
         }
-      },
-      remove: async (id: number) => {
-        const options = {
-          method: "DELETE",
-          url: `${baseURI}/${key}/${id}`,
-          headers: { Authorization: token },
-        };
-        const newInfo = { ...info };
-        newInfo[key] = newInfo[key] || {};
-        newInfo[key].state = "loading";
-        newInfo[key].errorMessage = "";
+      };
+      acc[key] = {
+        ...endpoint,
+        loaded: false,
+        show: showFunc,
+        find: findFunc,
+        create: async (data: Record<string, any> | Record<string, any>[]) => {
+          const options = {
+            method: "POST",
+            url: `${baseURI}/${key}`,
+            data: Array.isArray(data) ? [...data] : { ...data },
+            headers: { Authorization: token },
+          };
+          const newInfo = { ...info };
+          // newInfo[key] = newInfo[key] || {};
+          newInfo[key].state = "loading";
+          newInfo[key].errorMessage = "";
 
-        setInfo(newInfo);
+          setInfo(newInfo);
 
-        try {
-          const consulta = await axios.request(options);
-          const d = consulta.data;
-          newInfo[key].state = "success";
+          try {
+            const consulta = await axios.request(options);
+            const d = consulta.data;
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            if (Array.isArray(data)) {
+              for (let datum of data) {
+                const index = newInfo[key]?.data?.findIndex(
+                  (d: any) => d?.id == datum?.id
+                );
+                if (index >= 0) {
+                  newInfo[key].data[index] = d;
+                } else {
+                  if (newInfo[key]?.data) {
+                    newInfo[key].data.unshift(d);
+                  } else {
+                    newInfo[key].data = [d];
+                  }
+                }
+              }
+              newInfo[key].data = newInfo[key].data.flat();
+            } else {
+              newInfo[key].selectedItem = d;
+              const index = newInfo[key]?.data?.findIndex(
+                (d: any) => d?.id == data?.id
+              );
+              if (index >= 0) {
+                newInfo[key].data[index] = d;
+              } else {
+                if (newInfo[key]?.data) {
+                  newInfo[key].data.unshift(d);
+                } else {
+                  newInfo[key].data = [d];
+                }
+              }
+            }
+            setInfo({ ...newInfo });
+            return d;
+          } catch (error: any) {
+            const item = httpStatusCodes.find((s) => s.code == error.status);
+
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = item?.meaning || error.message;
+            if (error.status == 403) {
+              onError?.({ error, ...{ errorMessage: item?.meaning } });
+            }
+            setInfo({ ...newInfo });
+            return error;
+          }
+        },
+        update: async (id: number, data: any) => {
+          const options = {
+            method: "PATCH",
+            url: `${baseURI}/${key}/${id}`,
+            data: Array.isArray(data) ? [...data] : { ...data },
+            headers: { Authorization: token },
+          };
+          const newInfo = { ...info };
+          // newInfo[key] = newInfo[key] || {};
+          newInfo[key].state = "loading";
           newInfo[key].errorMessage = "";
-          newInfo[key].selectedItem = d;
-          const index = newInfo[key]?.data?.findIndex(
-            (d: any) => d?.id == d?.id
-          );
-          if (index >= 0) {
-            newInfo[key].data.splice(index, 1);
+
+          setInfo(newInfo);
+
+          try {
+            const consulta = await axios.request(options);
+            const d = consulta.data;
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            newInfo[key].selectedItem = d;
+            const index = newInfo[key]?.data?.findIndex(
+              (d: any) => d?.id == id
+            );
+            if (index >= 0) {
+              newInfo[key].data[index] = d;
+            } else {
+              if (newInfo[key]?.data) {
+                newInfo[key].data.unshift(d);
+              } else {
+                newInfo[key].data = [d];
+              }
+            }
+            setInfo({ ...newInfo });
+            return d;
+          } catch (error: any) {
+            const item = httpStatusCodes.find((s) => s.code == error.status);
+
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = item?.meaning || error.message;
+            if (error.status == 403) {
+              onError?.({ error, ...{ errorMessage: item?.meaning } });
+            }
+            setInfo({ ...newInfo });
+            return error;
           }
-          setInfo({ ...newInfo });
-          return d.data;
-        } catch (error: any) {
-          const item = httpStatusCodes.find((s) => s.code == error.status);
+        },
+        remove: async (id: number) => {
+          const options = {
+            method: "DELETE",
+            url: `${baseURI}/${key}/${id}`,
+            headers: { Authorization: token },
+          };
+          const newInfo = { ...info };
+          // newInfo[key] = newInfo[key] || {};
+          newInfo[key].state = "loading";
+          newInfo[key].errorMessage = "";
 
-          newInfo[key].state = "error";
-          newInfo[key].errorMessage = item?.meaning || error.message;
-          if (error.status == 403) {
-            onError?.({ error, ...{ errorMessage: item?.meaning } });
+          setInfo(newInfo);
+
+          try {
+            const consulta = await axios.request(options);
+            const d = consulta.data;
+            newInfo[key].state = "success";
+            newInfo[key].errorMessage = "";
+            newInfo[key].selectedItem = d;
+            const index = newInfo[key]?.data?.findIndex(
+              (d: any) => d?.id == id
+            );
+            if (index >= 0) {
+              newInfo[key].data.splice(index, 1);
+            }
+            setInfo({ ...newInfo });
+            return d.data;
+          } catch (error: any) {
+            const item = httpStatusCodes.find((s) => s.code == error.status);
+
+            newInfo[key].state = "error";
+            newInfo[key].errorMessage = item?.meaning || error.message;
+            if (error.status == 403) {
+              onError?.({ error, ...{ errorMessage: item?.meaning } });
+            }
+            setInfo({ ...newInfo });
+            return error;
           }
-          setInfo({ ...newInfo });
-          return error;
-        }
-      },
-      totalPages: info[key]?.totalPages,
-      currentPage: info[key]?.currentPage,
-      state: info[key]?.state || "success",
-      errorMessage: info[key]?.errorMessage,
-      params: info[key]?.params,
-      setLoaded: () => {
-        const newInfo = { ...info };
-        newInfo[key].loaded = true;
-        setInfo(newInfo);
-      },
-      getAllPages: async (limit = 10) => {
-        console.log("Not aviable");
-      },
-      data: info[key]?.data || [],
-      selectedItem: info[key]?.selectedItem || {},
-    };
+        },
+        totalPages: info[key]?.totalPages,
+        currentPage: info[key]?.currentPage,
+        state: info[key]?.state || "success",
+        errorMessage: info[key]?.errorMessage,
+        params: info[key]?.params,
+        setLoaded: () => {
+          const newInfo = { ...info };
+          newInfo[key].loaded = true;
+          setInfo(newInfo);
+        },
+        getAllPages: async (limit = 10) => {
+          console.log("Not aviable");
+        },
+        data: info[key]?.data || [],
+        selectedItem: info[key]?.selectedItem || {},
+      };
 
-    return acc;
-  }, {} as EnhancedEndpoints<T>);
+      return acc;
+    },
+    {}
+  );
 
   async function doSome() {
     const key = Object.keys(info).find((k) => {

package/src/use-resources/types.ts

@@ -1,12 +1,13 @@
-export interface ItemsRecord {
-  typeof: Object;
+// Genérico con tipo por defecto
+export interface ItemsRecord<T = any> {
+  typeof: T;
   id?: number | string | string[] | undefined;
   defaultParams?: Record<string, any>;
 }
 
-export interface Props {
+export interface Props<T extends Record<string, ItemsRecord>> {
   baseURI: string;
-  endpoints: Record<string, Partial<ItemsRecord>>;
+  endpoints: T;
   onError?: (error: any) => void;
 }
 
@@ -16,6 +17,7 @@ export interface ShowOptions {
   page?: number;
   [key: string | number]: string | number | undefined | null | boolean;
 }
+
 export type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
   [K in keyof T]: {
     typeof: T[K]["typeof"];
@@ -34,15 +36,17 @@ export type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
       props?: Record<string, string>
     ) => Promise<T[K]["typeof"]>;
     getAllPages: (limit: number) => Promise<Array<T[K]["typeof"]>>;
-    data: T[K]["typeof"][];
+    data: Array<T[K]["typeof"]>;
     selectedItem: T[K]["typeof"];
     params: Record<string, any>;
     currentPage: number;
     totalItems: number;
     totalPages: number;
-    errorMessage: string;
-    autoLoad?: Boolean;
+    errorMessage: string | undefined;
+    autoLoad?: boolean;
     defaultParams?: Record<string, any>;
     id?: number | string;
+    loaded: boolean;
+    setLoaded: () => void;
   };
 };