use-abcd 0.1.0 → 0.1.2

package/README.md

@@ -29,63 +29,80 @@ bun add use-abcd
 ## Quick Example
 
 ```typescript
-import { useCrud } from "use-abcd";
+import React, { useCallback } from "react";
+import { useCrud, type CrudConfig, type ItemWithState, type Updater } from "../useCrud";
+import { map } from "lodash-es";
 
 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: "1", description: "Shop for electronics", complete: false },
+        { id: "2", description: "Find time for learning", complete: false },
+        { id: "3", description: "Pick stocks", complete: false },
+        { id: "4", description: "Pick stocks", complete: false },
+      ],
+      metadata: {},
+    };
+  },
+};
+
+const Item = React.memo(function Item(props: {
+  item: ItemWithState<Todo>;
+  update: (item: ItemWithState<Todo>, updater: Updater<Todo>, isOptimistic?: boolean) => void;
+}) {
+  const { update, item } = props;
+  const { data } = item;
+
+  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 const Todo = React.memo(function Todo() {
+  const { items, isLoading, update } = 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 key={item.data.id} item={item} update={update} />
       ))}
     </div>
   );
-}
+});
 ```
 
 > **Note**: This is a single-file library with a focused scope. Please read the source code for a deeper understanding of its implementation and capabilities.

package/dist/useCrud.d.ts

@@ -98,14 +98,7 @@ export declare type Updater<T> = (updatable: T) => void;
  */
 export declare function useCrud<T extends Item = Item, C extends Record<string, any> = any>(config: CrudConfig<T, C>): {
     itemsById: Map<string, ItemWithState<T>>;
-    items: {
-        id: string;
-        data: T;
-        state: TransitionStates;
-        optimistic: boolean;
-        errors: string[];
-        action?: [TransitionStates, T];
-    }[];
+    items: ItemWithState<T>[];
     metadata: unknown;
     isLoading: boolean;
     hasError: boolean;