use-abcd 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -12
- package/dist/useCrud.d.ts +1 -8
- package/dist/useCrud.js +604 -618
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,8 +30,8 @@ bun add use-abcd
|
|
|
30
30
|
|
|
31
31
|
```typescript
|
|
32
32
|
import React, { useCallback } from "react";
|
|
33
|
+
import { useCrud, type CrudConfig, type ItemWithState, type Updater } from "../useCrud";
|
|
33
34
|
import { map } from "lodash-es";
|
|
34
|
-
import { useCrud, useCrudOperations, type CrudConfig, type ItemWithState } from "use-abcd";
|
|
35
35
|
|
|
36
36
|
type Todo = {
|
|
37
37
|
id: string;
|
|
@@ -52,19 +52,22 @@ const TodoCrud: CrudConfig<Todo> = {
|
|
|
52
52
|
});
|
|
53
53
|
return {
|
|
54
54
|
items: [
|
|
55
|
-
{ id: "
|
|
56
|
-
{ id: "
|
|
57
|
-
{ id: "
|
|
55
|
+
{ id: "1", description: "Shop for electronics", complete: false },
|
|
56
|
+
{ id: "2", description: "Find time for learning", complete: false },
|
|
57
|
+
{ id: "3", description: "Pick stocks", complete: false },
|
|
58
|
+
{ id: "4", description: "Pick stocks", complete: false },
|
|
58
59
|
],
|
|
59
60
|
metadata: {},
|
|
60
61
|
};
|
|
61
62
|
},
|
|
62
63
|
};
|
|
63
64
|
|
|
64
|
-
const Item = React.memo((props: {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
const Item = React.memo(function Item(props: {
|
|
66
|
+
item: ItemWithState<Todo>;
|
|
67
|
+
update: (item: ItemWithState<Todo>, updater: Updater<Todo>, isOptimistic?: boolean) => void;
|
|
68
|
+
}) {
|
|
69
|
+
const { update, item } = props;
|
|
70
|
+
const { data } = item;
|
|
68
71
|
|
|
69
72
|
const markComplete = useCallback(() => {
|
|
70
73
|
update(item, (draft) => {
|
|
@@ -85,8 +88,8 @@ const Item = React.memo((props: { item: ItemWithState<Todo> }) => {
|
|
|
85
88
|
);
|
|
86
89
|
});
|
|
87
90
|
|
|
88
|
-
export function Todo() {
|
|
89
|
-
const { items, isLoading } = useCrud(TodoCrud);
|
|
91
|
+
export const Todo = React.memo(function Todo() {
|
|
92
|
+
const { items, isLoading, update } = useCrud(TodoCrud);
|
|
90
93
|
|
|
91
94
|
if (isLoading) {
|
|
92
95
|
return <div>Loading...</div>;
|
|
@@ -95,11 +98,11 @@ export function Todo() {
|
|
|
95
98
|
return (
|
|
96
99
|
<div className="p-2">
|
|
97
100
|
{map(items, (item) => (
|
|
98
|
-
<Item item={item} />
|
|
101
|
+
<Item key={item.data.id} item={item} update={update} />
|
|
99
102
|
))}
|
|
100
103
|
</div>
|
|
101
104
|
);
|
|
102
|
-
}
|
|
105
|
+
});
|
|
103
106
|
```
|
|
104
107
|
|
|
105
108
|
> **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
CHANGED
|
@@ -98,14 +98,7 @@ export declare type Updater<T> = (updatable: T) => void;
|
|
|
98
98
|
*/
|
|
99
99
|
export declare function useCrud<T extends Item = Item, C extends Record<string, any> = any>(config: CrudConfig<T, C>): {
|
|
100
100
|
itemsById: Map<string, ItemWithState<T>>;
|
|
101
|
-
items:
|
|
102
|
-
id: string;
|
|
103
|
-
data: T;
|
|
104
|
-
state: TransitionStates;
|
|
105
|
-
optimistic: boolean;
|
|
106
|
-
errors: string[];
|
|
107
|
-
action?: [TransitionStates, T];
|
|
108
|
-
}[];
|
|
101
|
+
items: ItemWithState<T>[];
|
|
109
102
|
metadata: unknown;
|
|
110
103
|
isLoading: boolean;
|
|
111
104
|
hasError: boolean;
|