Skip to content

Commit 7edcb6f

Browse files
tripolskypetrtripolskypetr
committed
todo-one-page
1 parent 7ba23c3 commit 7edcb6f

File tree

3 files changed

+92
-159
lines changed

3 files changed

+92
-159
lines changed

‎README.md

Lines changed: 41 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -31,101 +31,66 @@ npx create-react-app . --template=appwrite
3131
## Code sample
3232

3333
```tsx
34-
import { FetchView, Breadcrumbs, One, FieldType, IField, usePreventLeave } from 'react-declarative';
34+
import { useState } from 'react';
35+
import {
36+
FetchView,
37+
RecordView,
38+
ActionTrigger,
39+
useReloadTrigger,
40+
IActionTrigger,
41+
} from 'react-declarative';
3542

36-
import fetchApi from '../../helpers/fetchApi';
37-
import history from '../../helpers/history';
43+
import ioc from '../../lib/ioc';
3844

3945
interface ITodoOnePageProps {
4046
id: string;
4147
}
4248

43-
const fields: IField[] = [
49+
const actions: IActionTrigger[] = [
4450
{
45-
type: FieldType.Line,
46-
title: 'System info'
47-
},
48-
{
49-
type: FieldType.Div,
50-
style: {
51-
display: 'grid',
52-
gridTemplateColumns: '1fr auto',
53-
},
54-
fields: [
55-
{
56-
type: FieldType.Text,
57-
name: 'userId',
58-
title: 'User id',
59-
outlined: false,
60-
disabled: true,
61-
},
62-
{
63-
type: FieldType.Checkbox,
64-
fieldBottomMargin: "0",
65-
name: 'completed',
66-
title: "Completed",
67-
disabled: true,
68-
},
69-
]
70-
},
71-
{
72-
type: FieldType.Line,
73-
title: 'Common info'
74-
},
75-
{
76-
type: FieldType.Text,
77-
name: 'title',
78-
title: 'Title',
51+
label: 'Mark as complete',
52+
action: 'complete-action',
7953
}
8054
];
8155

8256
export const TodoOnePage = ({
8357
id,
8458
}: ITodoOnePageProps) => {
8559

86-
const fetchState = async () => await fetchApi(`/api/v1/todos/${id}`);
87-
88-
const Content = (props: any) => {
89-
90-
const {
91-
data,
92-
oneProps,
93-
beginSave,
94-
} = usePreventLeave({
95-
history,
96-
onSave: async () => {
97-
alert(JSON.stringify(data, null, 2));
98-
return true; // HTTP 200
99-
},
100-
});
101-
102-
return (
103-
<>
104-
<Breadcrumbs
105-
withSave
106-
saveDisabled={!data}
107-
title="Todo list"
108-
subtitle={props.todo.title}
109-
onSave={beginSave}
110-
onBack={() => history.push('/todos')}
111-
/>
112-
<One
113-
handler={() => props.todo}
114-
fields={fields}
115-
{...oneProps}
116-
/>
117-
</>
118-
);
60+
const { reloadTrigger, doReload } = useReloadTrigger();
61+
62+
const [search, setSearch] = useState('');
63+
64+
const state = async () => await ioc.todoDbService.findById(id);
65+
66+
const handleAction = async (action: string) => {
67+
if (action === 'complete-action') {
68+
await ioc.todoDbService.update(id, {
69+
completed: true,
70+
});
71+
doReload();
72+
}
11973
};
12074

12175
return (
122-
<FetchView state={fetchState}>
123-
{(todo) => (
124-
<Content todo={todo} />
125-
)}
126-
</FetchView>
76+
<>
77+
<ActionTrigger
78+
actions={actions}
79+
onAction={handleAction}
80+
/>
81+
<FetchView state={state} deps={[reloadTrigger]}>
82+
{(data) => (
83+
<RecordView
84+
onSearchChanged={(search) => setSearch(search)}
85+
search={search}
86+
data={data}
87+
/>
88+
)}
89+
</FetchView>
90+
</>
12791
);
12892
};
12993

13094
export default TodoOnePage;
95+
13196
```

‎template/src/lib/services/db/TodoDbService.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class TodoDbService {
5555
);
5656
};
5757

58-
update = async (id: string, payload: ITodoDto) => {
58+
update = async (id: string, payload: Partial<ITodoDto>) => {
5959
return await this.apiService.databases.updateDocument<ITodoDocument>(
6060
CC_DB_TODO_DATABASE_ID,
6161
CC_DB_TODO_COLLECTION_ID,

‎template/src/pages/TodoOnePage/TodoOnePage.tsx

Lines changed: 50 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,73 @@
1-
import { FetchView, Breadcrumbs, One, FieldType, TypedField, usePreventLeave, fetchApi } from 'react-declarative';
1+
import { observer } from 'mobx-react';
2+
import { useState } from 'react';
3+
import {
4+
Breadcrumbs,
5+
FetchView,
6+
RecordView,
7+
ActionTrigger,
8+
useReloadTrigger,
9+
IActionTrigger
10+
} from 'react-declarative';
211

312
import ioc from '../../lib/ioc';
413

514
interface ITodoOnePageProps {
615
id: string;
716
}
817

9-
const fields: TypedField[] = [
18+
const actions: IActionTrigger[] = [
1019
{
11-
type: FieldType.Line,
12-
title: 'System info'
13-
},
14-
{
15-
type: FieldType.Div,
16-
style: {
17-
display: 'grid',
18-
gridTemplateColumns: '1fr auto',
19-
},
20-
fields: [
21-
{
22-
type: FieldType.Text,
23-
name: 'userId',
24-
title: 'User id',
25-
outlined: false,
26-
disabled: true,
27-
},
28-
{
29-
type: FieldType.Checkbox,
30-
fieldBottomMargin: "0",
31-
name: 'completed',
32-
title: "Completed",
33-
disabled: true,
34-
},
35-
]
36-
},
37-
{
38-
type: FieldType.Line,
39-
title: 'Common info'
40-
},
41-
{
42-
type: FieldType.Text,
43-
name: 'title',
44-
title: 'Title',
20+
label: 'Mark as complete',
21+
action: 'complete-action',
4522
}
4623
];
4724

48-
interface ITodoItem {
49-
completed: boolean
50-
id: number
51-
title: string
52-
userId: number
53-
}
25+
const handleBack = () => {
26+
ioc.routerService.push('/todos');
27+
};
5428

55-
export const TodoOnePage = ({
29+
export const TodoOnePage = observer(({
5630
id,
5731
}: ITodoOnePageProps) => {
5832

59-
const fetchState = () => [
60-
fetchApi<ITodoItem>(`/api/v1/todos/${id}`),
61-
] as const;
62-
63-
const Content = (props: any) => {
33+
const { reloadTrigger, doReload } = useReloadTrigger();
34+
35+
const [search, setSearch] = useState('');
6436

65-
const {
66-
data,
67-
oneProps,
68-
beginSave,
69-
} = usePreventLeave({
70-
history: ioc.routerService,
71-
onSave: () => {
72-
alert(JSON.stringify(data, null, 2));
73-
return true;
74-
},
75-
});
37+
const state = async () => await ioc.todoDbService.findById(id);
7638

77-
return (
78-
<>
79-
<Breadcrumbs
80-
withSave
81-
title="Todo list"
82-
subtitle={props.todo.title}
83-
onSave={beginSave}
84-
onBack={() => ioc.routerService.push('/todos')}
85-
saveDisabled={!data}
86-
/>
87-
<One<ITodoItem>
88-
handler={() => props.todo}
89-
fields={fields}
90-
{...oneProps}
91-
/>
92-
</>
93-
);
39+
const handleAction = async (action: string) => {
40+
if (action === 'complete-action') {
41+
await ioc.todoDbService.update(id, {
42+
completed: true,
43+
});
44+
doReload();
45+
}
9446
};
9547

9648
return (
97-
<FetchView state={fetchState}>
98-
{(todo) => (
99-
<Content todo={todo} />
100-
)}
101-
</FetchView>
49+
<>
50+
<Breadcrumbs
51+
title='Todos'
52+
subtitle={id}
53+
onBack={handleBack}
54+
/>
55+
<ActionTrigger
56+
sx={{ pb: 1 }}
57+
actions={actions}
58+
onAction={handleAction}
59+
/>
60+
<FetchView state={state} deps={[reloadTrigger]}>
61+
{(data) => (
62+
<RecordView
63+
onSearchChanged={(search) => setSearch(search)}
64+
search={search}
65+
data={data}
66+
/>
67+
)}
68+
</FetchView>
69+
</>
10270
);
103-
};
71+
});
10472

10573
export default TodoOnePage;

0 commit comments

Comments
 (0)