use-abcd 0.1.0 → 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/package.json

@@ -4,7 +4,7 @@
   "repository": {
     "url": "https://github.com/smtrd3/use-abcd"
   },
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "files": [
     "dist"