use-abcd 0.0.2 → 0.1.1

package/README.md

@@ -29,59 +29,73 @@ bun add use-abcd
 ## Quick Example
 
 ```typescript
-import { useCrud } from "use-abcd";
+import React, { useCallback } from "react";
+import { map } from "lodash-es";
+import { useCrud, useCrudOperations, type CrudConfig, type ItemWithState } from "use-abcd";
 
 type Todo = {
   id: string;
-  title: string;
-  completed: boolean;
+  description: string;
+  complete: boolean;
 };
 
-function TodoList() {
-  const { items, isLoading, create, update, remove } = useCrud<Todo>({
-    id: "todos",
-    context: {},
-    // Configure caching (optional)
-    caching: {
-      capacity: 10,
-      age: 60000, // 1 minute
-    },
-    // Fetch todos from API
-    fetch: async ({ signal }) => {
-      const response = await fetch("https://api.example.com/todos", { signal });
-      const items = await response.json();
-      return { items, metadata: {} };
-    },
-    // Create new todo
-    create: async (todo) => {
-      const response = await fetch("https://api.example.com/todos", {
-        method: "POST",
-        body: JSON.stringify(todo),
-      });
-      const { id } = await response.json();
-      return { id };
-    },
-  });
-
-  if (isLoading) return <div>Loading...</div>;
+const TodoCrud: CrudConfig<Todo> = {
+  id: "todo-crud",
+  context: {},
+  caching: {
+    age: 5000000,
+    capacity: 10,
+  },
+  fetch: async () => {
+    await new Promise((resolve) => {
+      setTimeout(resolve, 200);
+    });
+    return {
+      items: [
+        { id: "one", description: "Shop for electronics", complete: false },
+        { id: "two", description: "Find time for learning", complete: false },
+        { id: "three", description: "Pick stocks", complete: false },
+      ],
+      metadata: {},
+    };
+  },
+};
+
+const Item = React.memo((props: { item: ItemWithState<Todo> }) => {
+  const item = props.item;
+  const data = item.data;
+  const { update } = useCrudOperations(TodoCrud);
+
+  const markComplete = useCallback(() => {
+    update(item, (draft) => {
+      draft.complete = !item.data.complete;
+    });
+  }, [update, item]);
+
+  return (
+    <div key={data.id} className="flex gap-2 mb-1">
+      <div className={data.complete ? "line-through" : ""}>{data.description}</div>
+      <button
+        className="bg-blue-300 px-2 rounded active:bg-blue-400 cursor-pointer font-bold"
+        onClick={markComplete}
+      >
+        Complete
+      </button>
+    </div>
+  );
+});
+
+export function Todo() {
+  const { items, isLoading } = useCrud(TodoCrud);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
 
   return (
-    <div>
-      <button onClick={() => create({ title: "New Todo", completed: false })}>Add Todo</button>
-      {items.map((item) => (
-        <div key={item.data.id}>
-          <span>{item.data.title}</span>
-          <button
-            onClick={() =>
-              update(item.data, (draft) => {
-                draft.completed = !draft.completed;
-              })
-            }
-          >
-            Toggle
-          </button>
-          <button onClick={() => remove(item.data)}>Delete</button>
-        </div>
+    <div className="p-2">
+      {map(items, (item) => (
+        <Item item={item} />
       ))}
     </div>
   );

package/dist/useCrud.d.ts

@@ -52,14 +52,14 @@ export declare type FetchFn<T extends Item = Item> = (option: QueryOption) => Pr
 
 export declare type Item = {
     id: string;
-} & Record<string, unknown>;
+} & Record<string, any>;
 
 export declare type ItemWithState<T extends Item = Item> = {
     data: T;
-    state: "create" | "update" | "delete" | "idle" | "error";
+    state: TransitionStates;
     optimistic: boolean;
     errors: string[];
-    input?: T;
+    action?: [TransitionStates, T];
 };
 
 export declare type QueryOption = {
@@ -84,6 +84,8 @@ export declare type TransitionFn<T extends Item = Item> = (item: Partial<T>, opt
     id: string;
 }>;
 
+export declare type TransitionStates = "create" | "update" | "delete" | "idle" | "error" | "changed";
+
 export declare type Updater<T> = (updatable: T) => void;
 
 /**
@@ -99,18 +101,21 @@ export declare function useCrud<T extends Item = Item, C extends Record<string,
     items: {
         id: string;
         data: T;
-        state: "create" | "update" | "delete" | "idle" | "error";
+        state: TransitionStates;
         optimistic: boolean;
         errors: string[];
-        input?: T;
+        action?: [TransitionStates, T];
     }[];
     metadata: unknown;
     isLoading: boolean;
     hasError: boolean;
     errors: string[];
     create: (item: Omit<T, "id">) => void;
-    update: (item: T, updater: Updater<T>, isOptimistic?: boolean) => void;
-    remove: (item: T) => void;
+    update: (item: ItemWithState<T>, updater: Updater<T>, isOptimistic?: boolean) => void;
+    change: (item: ItemWithState<T>, updater: Updater<T>) => void;
+    retry: (item: ItemWithState<T>) => void;
+    save: (item: ItemWithState<T>) => void;
+    remove: (item: ItemWithState<T>) => void;
     cancelFetch: () => void;
     cancelOperation: (id: string) => void;
 };
@@ -126,8 +131,11 @@ export declare function useCrudOperations<T extends Item = Item, C extends Recor
     fetch: () => void;
     refetch: () => void;
     create: (item: Omit<T, "id">) => void;
-    update: (item: T, updater: Updater<T>, isOptimistic?: boolean) => void;
-    remove: (item: T) => void;
+    update: (item: ItemWithState<T>, updater: Updater<T>, isOptimistic?: boolean) => void;
+    change: (item: ItemWithState<T>, updater: Updater<T>) => void;
+    save: (item: ItemWithState<T>) => void;
+    retry: (item: ItemWithState<T>) => void;
+    remove: (item: ItemWithState<T>) => void;
     cancelFetch: () => void;
     cancelOperation: (id: string) => void;
 };