Skip to content

Commit f743d51

Browse files
staszekzstaszekz
committed
fix types and silmplyfied function to add and edit elements
1 parent 3c94394 commit f743d51

File tree

9 files changed

+50
-46
lines changed

9 files changed

+50
-46
lines changed

‎src/components/Form/note-management-form.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,24 @@ import { zodValidator } from '@tanstack/zod-form-adapter';
55
import { useRemoteData } from '@notes/hooks';
66
import { Button, TextInput, Textarea } from '@mantine/core';
77
import { modals } from '@mantine/modals';
8-
import { CollectionType, Note } from '@notes/types';
8+
import { CollectionType, Note, NoteWithId } from '@notes/types';
99
import { Timestamp } from 'firebase/firestore';
10+
import { removeId } from '@notes/utils';
1011

11-
export const NoteManagementForm = ({
12-
data,
13-
editNote
14-
}: {
15-
data: Note;
16-
editNote: (element: Note, id: string) => void;
17-
}) => {
18-
const { addElement } = useRemoteData<Note>({ key: CollectionType.NOTES });
12+
export const NoteManagementForm = ({ data }: { data?: NoteWithId }) => {
13+
const { addElement, editElement } = useRemoteData<Note>({ key: CollectionType.NOTES });
1914

20-
const { Field, Subscribe, handleSubmit, state, useStore } = useForm({
15+
const { Field, Subscribe, handleSubmit } = useForm({
2116
defaultValues: data
22-
? data
17+
? removeId<NoteWithId>(data)
2318
: {
2419
title: '',
2520
content: '',
2621
createdOn: Timestamp.now()
2722
},
2823
validatorAdapter: zodValidator,
2924
onSubmit: async ({ value }) => {
30-
data ? editNote(value) : addElement.mutate(value); // TODO: id in types
25+
data ? editElement.mutate({ element: value, id: data.id }) : addElement.mutate(value);
3126
modals.closeAll();
3227
}
3328
});

‎src/components/Form/todo-management-form.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import { useRemoteData } from '@notes/hooks';
55
import { Button, TextInput, Textarea } from '@mantine/core';
66
import { DateTimePicker } from '@mantine/dates';
77
import { modals } from '@mantine/modals';
8-
import { CollectionType, Todo } from '@notes/types';
8+
import { CollectionType, Todo, TodoWithId } from '@notes/types';
99
import { Timestamp } from 'firebase/firestore';
10+
import { removeId } from '@notes/utils';
1011

11-
export const TodoManagementForm = ({ data, editTodo }: { data: Todo; editTodo }) => {
12-
const { addElement } = useRemoteData<Todo>({ key: CollectionType.TODOS });
12+
export const TodoManagementForm = ({ data }: { data?: TodoWithId }) => {
13+
const { addElement, editElement } = useRemoteData<Todo>({ key: CollectionType.TODOS });
1314

14-
const { Field, Subscribe, handleSubmit, state, useStore } = useForm({
15+
const { Field, Subscribe, handleSubmit } = useForm({
1516
defaultValues: data
16-
? data
17+
? removeId<TodoWithId>(data)
1718
: {
1819
title: '',
1920
extraContent: '',
@@ -23,7 +24,7 @@ export const TodoManagementForm = ({ data, editTodo }: { data: Todo; editTodo })
2324
},
2425
validatorAdapter: zodValidator,
2526
onSubmit: async ({ value }) => {
26-
data ? editTodo({ ...value, id: data.id }) : addElement.mutate(value);
27+
data ? editElement.mutate({ element: value, id: data.id }) : addElement.mutate(value);
2728
modals.closeAll();
2829
}
2930
});
@@ -71,10 +72,12 @@ export const TodoManagementForm = ({ data, editTodo }: { data: Todo; editTodo })
7172
<Field
7273
name="deadline"
7374
validators={{
74-
onSubmit: z.object({
75-
seconds: z.number(),
76-
nanoseconds: z.number()
77-
})
75+
onSubmit: z
76+
.object({
77+
seconds: z.number().optional(),
78+
nanoseconds: z.number().optional()
79+
})
80+
.optional()
7881
}}
7982
children={({ state, handleChange, handleBlur }) => {
8083
return (
@@ -88,7 +91,6 @@ export const TodoManagementForm = ({ data, editTodo }: { data: Todo; editTodo })
8891
const timestamp = Timestamp.fromDate(e as Date);
8992
handleChange(timestamp);
9093
}}
91-
withAsterisk
9294
placeholder="Enter todo deadline date"
9395
error={state.meta?.errors[0]}
9496
/>

‎src/components/table/modals.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { Title, Text } from '@mantine/core';
22
import { modals } from '@mantine/modals';
33
import { NoteManagementForm, TodoManagementForm } from '@notes/components';
4-
import { Note, Todo } from '@notes/types';
4+
import { Note, NoteWithId, Todo, TodoWithId } from '@notes/types';
55

6-
export function openNoteModal(data: Note, edit: (id: string, element: Note) => void) {
6+
export function openNoteModal(data?: NoteWithId) {
77
return modals.open({
88
title: <Title size={'1.5rem'}>{data ? 'Edit: ' : 'Add:'}</Title>,
99
centered: true,
10-
children: <NoteManagementForm data={data} editNote={data => edit(id, data)} />
10+
children: <NoteManagementForm data={data} />
1111
});
1212
}
1313

14-
export function openTodoModal(data: Todo, edit) {
14+
export function openTodoModal(data?: TodoWithId) {
1515
return modals.open({
1616
title: <Title size={'1.5rem'}>{data ? 'Edit: ' : 'Add:'}</Title>,
1717
centered: true,
18-
children: <TodoManagementForm data={data} editTodo={edit} />
18+
children: <TodoManagementForm data={data} />
1919
});
2020
}
2121

‎src/components/views/Notes/Notes.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
PaginationState,
2222
useReactTable
2323
} from '@tanstack/react-table';
24-
import { CollectionType, ControlConfig, Note } from '@notes/types';
24+
import { CollectionType, ControlConfig, Note, NoteWithId } from '@notes/types';
2525
import { IconBubbleText, IconEdit, IconTrash } from '@tabler/icons-react';
2626

2727
export const Notes = () => {
@@ -31,17 +31,15 @@ export const Notes = () => {
3131
});
3232
const {
3333
collection: { isPending, isFetching, isLoading, data: notes },
34-
addElement,
35-
editElement,
3634
deleteElement
3735
} = useRemoteData<Note>({ key: CollectionType.NOTES });
3836

39-
const columnHelper = createColumnHelper<Note>();
37+
const columnHelper = createColumnHelper<NoteWithId>();
4038
// TODO: zrobic tez zeby mozna było właczac edycja z modal od detailsów
4139

42-
const controlsConfig: ControlConfig<Note> = {
40+
const controlsConfig: ControlConfig<NoteWithId> = {
4341
Edit: {
44-
onClick: (original, id) => openNoteModal(original, editElement.mutate),
42+
onClick: openNoteModal,
4543
icon: <IconEdit />,
4644
color: 'var(--secondary)',
4745
tooltipMessage: 'Edit this note'

‎src/components/views/Todos/Todos.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
PaginationState,
2121
useReactTable
2222
} from '@tanstack/react-table';
23-
import { ControlConfig, Todo } from '@notes/types';
23+
import { CollectionType, ControlConfig, Todo, TodoWithId } from '@notes/types';
2424
import { AddNewButton } from 'src/components/button-link/add-new-button';
2525
import { Checkbox, Flex } from '@mantine/core';
2626
import { IconBubbleText, IconEdit, IconTrash } from '@tabler/icons-react';
@@ -32,16 +32,15 @@ export const Todos = () => {
3232
});
3333
const {
3434
collection: { isPending, isFetching, isLoading, data: todos },
35-
addElement,
3635
editElement,
3736
deleteElement
38-
} = useRemoteData({ key: 'todos' });
37+
} = useRemoteData<Todo>({ key: CollectionType.TODOS });
3938

40-
const columnHelper = createColumnHelper<Todo>();
39+
const columnHelper = createColumnHelper<TodoWithId>();
4140

42-
const controlsConfig: ControlConfig<Todo> = {
41+
const controlsConfig: ControlConfig<TodoWithId> = {
4342
Edit: {
44-
onClick: original => openTodoModal(original, editElement.mutate),
43+
onClick: openTodoModal,
4544
icon: <IconEdit />,
4645
color: 'var(--secondary)',
4746
tooltipMessage: 'Edit this note'
@@ -83,7 +82,7 @@ export const Todos = () => {
8382
columnHelper.accessor('deadline', {
8483
header: 'Deadline',
8584
cell: props => {
86-
return <span>{props.cell.getValue().toDate().toLocaleString()}</span>;
85+
return <span>{props.cell.getValue()?.toDate().toLocaleString() || '---'}</span>;
8786
}
8887
}),
8988
columnHelper.accessor('completed', {
@@ -95,7 +94,10 @@ export const Todos = () => {
9594
color={'var(--primary)'}
9695
variant="outline"
9796
onChange={e => {
98-
editElement.mutate({ ...props.row.original, completed: e.target.checked });
97+
editElement.mutate({
98+
element: { ...props.row.original, completed: e.target.checked },
99+
id: props.row.original.id
100+
});
99101
}}
100102
checked={props.cell.getValue()}
101103
/>

‎src/hooks/use-remote-data.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { addElementFn, editSingleElementFn, getCollection, deleteSingleElementFn
44
export function useRemoteData<T extends {}>({ key }: { key: string }) {
55
const collection = useQuery({
66
queryKey: [key],
7-
queryFn: async () => await getCollection({ key }),
7+
queryFn: async () => await getCollection<T>({ key }),
88
staleTime: 30000,
99
placeholderData: keepPreviousData
1010
});

‎src/types/collections.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@ export type Note = {
66
content: string;
77
};
88

9+
export type NoteWithId = Note & { id: string }
910

1011
export type Todo = {
11-
id?: string;
1212
title: string;
1313
createdOn: Timestamp;
1414
extraContent: string;
1515
completed: boolean;
16-
deadline: Timestamp;
16+
deadline: Timestamp | null;
1717
};
1818

19+
export type TodoWithId = Todo & { id: string }
20+
1921
export enum CollectionType {
2022
NOTES = 'notes',
2123
TODOS = 'todos'

‎src/utils/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export * from './colors'
1+
export * from './colors'
2+
export * from './remove-id'

‎src/utils/remove-id.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function removeId<T extends { id: string }>(data: T): Omit<T, 'id'> {
2+
const { id, ...rest } = data;
3+
return rest;
4+
}

0 commit comments

Comments
 (0)