fix: todo-list api

Author: ArianHamdi

src/containers/TodoList/TodoList.tsx

@@ -21,7 +21,6 @@ const TodoList = () => {
   const { open } = usePopup();
   const { t } = useTranslation();
 
-  // const { mutate } = useDeleteCategory();
   const { mutate } = useDeleteTodoList();
 
   if (isLoading) return 'loading ...';
@@ -30,7 +29,7 @@ const TodoList = () => {
 
   const deletePopupHandler = () => {
     open({
-      message: t('delete_category', { title: data.title }),
+      message: t('delete_todo_list', { title: data.title }),
       title: t('delete'),
       buttons: [
         {

src/containers/TodoListForm/TodoListForm.tsx

@@ -30,6 +30,7 @@ const TodoListForm = ({ type }: IProps) => {
     resolver: yupResolver(todoListSchema),
     values: {
       title: todoList?.title ?? '',
+      description: todoList?.description ?? '',
       categoryId: categoryId as string,
     },
   });
@@ -45,8 +46,8 @@ const TodoListForm = ({ type }: IProps) => {
   } = methods;
 
   const onSubmit = handleSubmit(data => {
-    if (type === 'create') {
-      create(data);
+    if (type === 'create' && data.categoryId) {
+      create({ ...data, categoryId: data.categoryId });
     } else {
       if (!todoList?.id) return;
       edit({ ...data, id: todoList.id });

src/hooks/api/todo-list.ts

@@ -51,55 +51,46 @@ export const useEditTodoList = () => {
   return useMutation({
     mutationFn: api.editTodoList,
     onMutate: async variables => {
-      const snapshot = queryClient.getQueryData<ICategory[]>(['categories']);
+      const snapshot = queryClient.getQueryData<ITodoList>([
+        'todo-list',
+        variables.id,
+      ]);
 
       // Optimistically update to the new value
-      queryClient.setQueryData<ICategory[]>(
-        ['categories'],
-        produce(draft => {
-          const category = draft?.find(
-            category => category.id === variables.categoryId
-          );
-          let todoList = category?.todoLists.find(
-            todo => todo.id === variables.id
-          );
-
-          if (todoList) {
-            todoList = { ...todoList, ...variables };
-          }
-        })
-      );
+      queryClient.setQueryData<ITodoList>(['todo-list', variables.id], prev => {
+        if (!prev) return;
+        return {
+          ...prev,
+          ...variables,
+        };
+      });
 
       router.replace('/todo-list/' + variables.id);
 
       // Return a context object with the snapshot value
       return { snapshot };
     },
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        exact: true,
+        queryKey: ['categories'],
+      });
+    },
   });
 };
 
-//Should converted to Todo List with immer
 export const useDeleteTodoList = () => {
   const queryClient = useQueryClient();
   const router = useRouter();
 
   return useMutation({
     mutationFn: api.deleteTodoList,
-    onMutate: async ({ id }) => {
-      // Snapshot the previous value
-      const snapshot = queryClient.getQueryData<ICategory[]>(['categories']);
-
-      // Optimistically update to the new value
-      queryClient.setQueryData<ICategory[]>(['categories'], old => old);
-
-      // Redirect to landing page
-      router.replace('/');
-
-      // Return a context object with the snapshot value
-      return { snapshot };
-    },
-    onError: (_error, _variables, context) => {
-      queryClient.setQueryData(['categories'], context?.snapshot);
+    onSuccess: () => {
+      router.push('/');
+      queryClient.refetchQueries({
+        exact: true,
+        queryKey: ['categories'],
+      });
     },
   });
 };

src/schema/index.ts

@@ -7,7 +7,7 @@ export const categorySchema = yup.object().shape({
 
 export const todoListSchema = yup.object().shape({
   title: yup.string().required(),
-  categoryId: yup.string().required(),
+  categoryId: yup.string(),
   description: yup.string(),
   left: yup.number(),
   completed: yup.number(),

src/types/index.ts

@@ -36,7 +36,7 @@ export interface ITodoList {
 }
 export type ITodoListGet = Pick<ITodoList, 'id'>;
 export type ITodoListPost = Pick<ITodoList, 'title' | 'categoryId'>;
-export type ITodoListEdit = Pick<ITodoList, 'title' | 'categoryId' | 'id'>;
+export type ITodoListEdit = Pick<ITodoList, 'title' | 'id'>;
 export type ITodoListDelete = Pick<ITodoList, 'id'>;
 
 export interface ICategory {