feat: add some component

Author: ArianHamdi

src/animations/variants.ts

@@ -1,11 +1,14 @@
 export const pageVariants = {
   initial: {
+    opacity: 0,
     x: '100vw',
   },
   in: {
+    opacity: 1,
     x: 0,
   },
   out: {
+    opacity: 0,
     x: '-100vw',
   },
 };

src/api/todo-list.ts

@@ -4,8 +4,14 @@ import {
   ITodoListPost,
   ITodoListEdit,
   ITodoListDelete,
+  ITodoListGet,
 } from '@/types';
 
+export const getTodoList = async (id: ITodoListGet['id']) => {
+  const { data } = await axios.get<ITodoList>('/todoList/' + id);
+  return data;
+};
+
 export const createTodoList = async (body: ITodoListPost) => {
   const { data } = await axios.post<ITodoList>('/todoList', body);
   return data;

src/components/FormRHF/ColorPicker.tsx

@@ -1,23 +1,15 @@
-import { ColorPickerUI } from '@/components/FormUI';
-import { useController, useFormContext, useFormState } from 'react-hook-form';
-import ErrorMessage from '@/components/ErrorMessage';
-import { useTranslation } from '@/hooks/useTranslation';
-import type { IColorPickerUI } from '@/components/FormUI/ColorPickerUI';
+import { ColorPickerUI, IColorPickerUI } from '@/components/FormUI';
+import { useController } from 'react-hook-form';
 import { RequiredName } from '@/types';
 
 type IProps = RequiredName<Partial<IColorPickerUI>>;
 
 const ColorPicker = ({ name, ...props }: IProps) => {
   const { field } = useController({ name });
-  const { errors } = useFormState({ name });
-  const { t } = useTranslation();
-
-  const error = errors[name]?.message;
 
   return (
     <div>
       <ColorPickerUI {...props} {...field} />
-      {/* <ErrorMessage>{t(error?.key, error?.values)}</ErrorMessage> */}
     </div>
   );
 };

src/components/FormRHF/TextArea.tsx

@@ -0,0 +1,24 @@
+import { TextAreaUI, ITextAreaUI } from '@/components/FormUI';
+import { useFormContext, useFormState } from 'react-hook-form';
+import ErrorMessage from '@/components/ErrorMessage';
+import { useTranslation } from '@/hooks/useTranslation';
+import { IFormError, RequiredName } from '@/types';
+
+type IProps = RequiredName<ITextAreaUI>;
+
+const TextField = ({ name, ...props }: IProps) => {
+  const { register } = useFormContext();
+  const { errors } = useFormState({ name });
+  const { t } = useTranslation();
+
+  const error = errors[name]?.message as IFormError;
+
+  return (
+    <div>
+      <TextAreaUI {...props} {...register(name)} />
+      <ErrorMessage>{error && t(error)}</ErrorMessage>
+    </div>
+  );
+};
+
+export default TextField;

src/components/FormRHF/TextField.tsx

@@ -1,9 +1,8 @@
-import { TextFieldUI } from '@/components/FormUI';
+import { TextFieldUI, ITextFieldUI } from '@/components/FormUI';
 import { useFormContext, useFormState } from 'react-hook-form';
 import ErrorMessage from '@/components/ErrorMessage';
 import { useTranslation } from '@/hooks/useTranslation';
-import type { ITextFieldUI } from '@/components/FormUI/TextFieldUI';
-import { RequiredName } from '@/types';
+import { IFormError, RequiredName } from '@/types';
 
 type IProps = RequiredName<ITextFieldUI>;
 
@@ -12,12 +11,12 @@ const TextField = ({ name, ...props }: IProps) => {
   const { errors } = useFormState({ name });
   const { t } = useTranslation();
 
-  const error = errors[name]?.message;
+  const error = errors[name]?.message as IFormError;
 
   return (
     <div>
       <TextFieldUI {...props} {...register(name)} />
-      {/* <ErrorMessage>{t(error?.key, error?.values)}</ErrorMessage> */}
+      <ErrorMessage>{error && t(error)}</ErrorMessage>
     </div>
   );
 };

src/components/FormRHF/index.ts

@@ -1,2 +1,3 @@
 export { default as TextField } from './TextField';
+export { default as TextArea } from './TextArea';
 export { default as ColorPicker } from './ColorPicker';

src/components/FormUI/TextAreaUI/TextAreaUI.module.scss

@@ -0,0 +1,17 @@
+.label {
+}
+
+.textarea {
+    width: 100%;
+    outline: none;
+    padding: 12px;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid $color-twa-header;
+
+    transition: all 0.2s;
+
+    &:focus {
+        border-color: $color-button;
+    }
+}

src/components/FormUI/TextAreaUI/TextAreaUI.tsx

@@ -0,0 +1,25 @@
+import { ForwardedRef, TextareaHTMLAttributes, forwardRef } from 'react';
+import styles from './TextAreaUI.module.scss';
+
+export interface ITextAreaUI
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: string;
+}
+
+const TextAreaUI = (
+  { label, ...props }: ITextAreaUI,
+  ref: ForwardedRef<HTMLTextAreaElement>
+) => {
+  return (
+    <label className={styles.label}>
+      <textarea
+        ref={ref}
+        className={styles.textarea}
+        placeholder={label}
+        {...props}
+      />
+    </label>
+  );
+};
+
+export default forwardRef(TextAreaUI);

src/components/FormUI/TextAreaUI/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TextAreaUI';
+export type { ITextAreaUI } from './TextAreaUI';

src/components/FormUI/index.ts

@@ -1,2 +1,8 @@
 export { default as TextFieldUI } from './TextFieldUI';
+export { default as TextAreaUI } from './TextAreaUI';
 export { default as ColorPickerUI } from './ColorPickerUI';
+
+//types
+export type { ITextFieldUI } from './TextFieldUI';
+export type { ITextAreaUI } from './TextAreaUI';
+export type { IColorPickerUI } from './ColorPickerUI';

src/containers/Category/Category.tsx

@@ -7,16 +7,15 @@ import Delete from '@/assets/icons/delete.svg';
 import Edit from '@/assets/icons/edit.svg';
 import { usePopup } from '@/hooks/usePopup';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useTodoLists } from '@/hooks/api/todo-list';
 import LinkButton from '@/components/LinkButton';
 import TodoList from '@/components/TodoList';
 
 const Category = () => {
   const {
-    query: { id },
+    query: { categoryId },
   } = useRouter();
 
-  const { data, isLoading } = useCategory(id as string);
+  const { data, isLoading } = useCategory(categoryId as string);
   const { open } = usePopup();
   const { t } = useTranslation();
 
@@ -63,7 +62,7 @@ const Category = () => {
           </ContextMenu>
         </div>
       </div>
-      <LinkButton href={`/create/category/${id}/todo-list`}>
+      <LinkButton href={`/create/category/${categoryId}/todo-list`}>
         {t('new_todo_list')}
       </LinkButton>
       <div>

src/containers/CategoryForm/CategoryForm.tsx

@@ -22,10 +22,10 @@ interface IProps {
 
 const CategoryForm = ({ type }: IProps) => {
   const {
-    query: { id },
+    query: { categoryId },
   } = useRouter();
 
-  const { data: category, isLoading } = useCategory(id as string);
+  const { data: category, isLoading } = useCategory(categoryId as string);
 
   const randomHexColor = useMemo(generateRandomHexColor, []);
 

src/containers/TaskForm/TaskForm.tsx

@@ -2,7 +2,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import styles from './TaskForm.module.scss';
 import { ColorPicker, TextField } from '@/components/FormRHF';
 import { useMainButton } from '@/hooks/useMainButton';
-import { categorySchema } from '@/schema';
+import { categorySchema, taskSchema } from '@/schema';
 import { generateRandomHexColor } from '@/utils';
 import {
   useCategory,
@@ -13,32 +13,32 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useClosingBehaviour } from '@/hooks/useClosingBehaviour';
 import { IFormType } from '@/types';
 import { useRouter } from '@/hooks/useRouter';
-import { useMemo } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { useCreateTask, useEditTask, useTask } from '@/hooks/api/task';
 
 interface IProps {
   type: IFormType;
 }
 
 const TaskForm = ({ type }: IProps) => {
   const {
-    query: { id },
+    query: { todoListId, taskId },
   } = useRouter();
 
-  const { data: category, isLoading } = useCategory(id as string);
-
-  const randomHexColor = useMemo(generateRandomHexColor, []);
+  const { data: task, isLoading } = useTask({
+    todoListId: todoListId as string,
+    taskId: taskId as string,
+  });
 
   const methods = useForm({
-    resolver: yupResolver(categorySchema),
-    values: {
-      title: category?.title ?? '',
-      color: category?.color ?? randomHexColor,
-    },
+    resolver: yupResolver(taskSchema),
+    // values: {
+
+    // },
   });
 
-  const { mutate: create, isLoading: isCreateLoading } = useCreateCategory();
-  const { mutate: edit, isLoading: isEditLoading } = useEditCategory();
+  const { mutate: create, isLoading: isCreateLoading } = useCreateTask();
+  const { mutate: edit, isLoading: isEditLoading } = useEditTask();
 
   const { t } = useTranslation();
 
@@ -51,8 +51,8 @@ const TaskForm = ({ type }: IProps) => {
     if (type === 'create') {
       create(data);
     } else {
-      if (!category?.id) return;
-      edit({ ...data, id: category.id });
+      if (!task?.id) return;
+      edit({ ...data, id: task.id });
     }
   });
 
@@ -74,8 +74,7 @@ const TaskForm = ({ type }: IProps) => {
       <h1>{t('new_category')}</h1>
       <FormProvider {...methods}>
         <form>
-          <TextField name='title' label='Category name' />
-          <ColorPicker name='color' label='Color' />
+          <TextField name='title' label={t('task_name')} />
         </form>
       </FormProvider>
     </div>

src/hooks/api/task.ts

@@ -0,0 +1,37 @@
+import * as api from '@/api/task';
+import { useMutation } from '@tanstack/react-query';
+import { useTodoList } from './todo-list';
+
+export const useTask = ({
+  todoListId,
+  taskId,
+}: {
+  todoListId: string;
+  taskId: string;
+}) => {
+  const result = useTodoList(todoListId);
+  const data = result.data?.tasks.find(task => task.id === taskId);
+
+  return {
+    ...result,
+    data,
+  };
+};
+
+export const useCreateTask = () => {
+  return useMutation({
+    mutationFn: api.createTask,
+  });
+};
+
+export const useEditTask = () => {
+  return useMutation({
+    mutationFn: api.editTask,
+  });
+};
+
+export const useDeleteTask = () => {
+  return useMutation({
+    mutationFn: api.deleteTask,
+  });
+};

src/hooks/api/todo-list.ts

@@ -6,24 +6,11 @@ import { useCategories, useCategory } from './category';
 import { produce } from 'immer';
 import { findTodoListById } from '@/utils';
 
-export const useTodoLists = (categoryId: string) => {
-  const result = useCategory(categoryId);
-  const data = result.data?.todoLists;
-
-  return {
-    ...result,
-    data,
-  };
-};
-
 export const useTodoList = (todoListId: string) => {
-  const result = useCategories();
-  const data = findTodoListById(result.data, todoListId);
-
-  return {
-    ...result,
-    data,
-  };
+  return useQuery({
+    queryKey: ['todo-list', todoListId],
+    queryFn: () => api.getTodoList(todoListId),
+  });
 };
 
 export const useCreateTodoList = () => {

src/pages/category/[id]/index.tsx src/pages/category/[categoryId]/index.tsx

@@ -2,6 +2,8 @@ import { Properties } from 'csstype';
 
 export type RequiredName<T> = T & { name: string };
 
+export type IFormError = 'required';
+
 export type IFormType = 'create' | 'edit';
 export interface ITask {
   id: string;
@@ -24,6 +26,7 @@ export interface ITodoList {
   completed: number;
   tasks: ITask[];
 }
+export type ITodoListGet = Pick<ITodoList, 'id'>;
 export type ITodoListPost = Pick<ITodoList, 'title' | 'categoryId'>;
 export type ITodoListEdit = Pick<ITodoList, 'title' | 'categoryId' | 'id'>;
 export type ITodoListDelete = Pick<ITodoList, 'id'>;