Create icon

src/pages/icon/List.tsx

@@ -3,12 +3,13 @@ import { useGetIcons } from './hooks/useIconData'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { Add } from 'iconsax-react'
+import CreateIcon from './components/CreateIcon'
 
 const IconsList: FC = () => {
 
     const { t } = useTranslation('global')
     const [showModal, setShowModal] = useState<boolean>(false)
-    const { data: icons, isLoading, refetch } = useGetIcons()
+    const { refetch } = useGetIcons()
 
     const handleCloseModal = () => {
         setShowModal(false)
@@ -35,6 +36,10 @@ const IconsList: FC = () => {
                 </Button>
             </div>
 
+            <CreateIcon
+                open={showModal}
+                close={handleCloseModal}
+            />
         </div>
     )
 }

src/pages/icon/components/CreateIcon.tsx

@@ -0,0 +1,139 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import DefaulModal from '../../../components/DefaulModal'
+import UploadBox from '../../../components/UploadBox'
+import Select from '../../../components/Select'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { TickCircle } from 'iconsax-react'
+import { useCreateIcon, useGetGroupIcons } from '../hooks/useIconData'
+import { useSingleUpload } from '../../service/hooks/useServiceData'
+import { CreateIconType, GroupIconType } from '../types/Types'
+import { ErrorType } from '../../../helpers/types'
+
+interface CreateIconProps {
+    open: boolean
+    close: () => void
+    onSuccess?: () => void
+}
+
+const CreateIcon: FC<CreateIconProps> = ({ open, close, onSuccess }) => {
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const createIcon = useCreateIcon()
+    const singleUpload = useSingleUpload()
+    const { data: groupIcons } = useGetGroupIcons()
+
+    const groups = (groupIcons as unknown as { data?: GroupIconType[] })?.data || []
+    const groupOptions = groups.map((group: GroupIconType) => ({
+        value: group.id,
+        label: group.name
+    }))
+
+    const handleCreateIcon = (values: CreateIconType) => {
+        createIcon.mutate(values, {
+            onSuccess: () => {
+                formik.resetForm()
+                setFile(undefined)
+                close()
+                toast.success(t('success'))
+                onSuccess?.()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const formik = useFormik<CreateIconType>({
+        initialValues: {
+            url: '',
+            groupId: ''
+        },
+        validationSchema: Yup.object({
+            groupId: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: async (values) => {
+            if (!file) {
+                toast.error(t('errors.required'))
+                return
+            }
+            const formData = new FormData()
+            formData.append('file', file)
+            await singleUpload.mutateAsync(formData, {
+                onSuccess: (data) => {
+                    values.url = data?.data?.url
+                    handleCreateIcon(values)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    const handleClose = () => {
+        formik.resetForm()
+        setFile(undefined)
+        close()
+    }
+
+    return (
+        <DefaulModal
+            open={open}
+            close={handleClose}
+            title_header={t('icon.add_new_icon')}
+            isHeader
+        >
+            <div className='mt-6'>
+                <UploadBox
+                    label={t('icon.url')}
+                    onChange={(files) => setFile(files[0])}
+                    isReset={!open}
+                    accept="image/svg+xml"
+                />
+
+                <div className='mt-4'>
+                    <Select
+                        label={t('icon.group')}
+                        className='bg-white bg-opacity-30'
+                        items={groupOptions}
+                        placeholder={t('icon.select_group')}
+                        {...formik.getFieldProps('groupId')}
+                        error_text={formik.touched.groupId && formik.errors.groupId ? formik.errors.groupId : ''}
+                    />
+                </div>
+
+                <div className='mt-12 border-t border-border pt-5 flex justify-end'>
+                    <div className='flex gap-5 items-center'>
+                        <Button
+                            className='w-[150px] bg-white bg-opacity-15 text-description'
+                            label={t('cancel')}
+                            onClick={handleClose}
+                        />
+
+                        <Button
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createIcon.isPending || singleUpload.isPending}
+                        >
+                            <div className='flex gap-2'>
+                                <TickCircle
+                                    size={20}
+                                    color='white'
+                                />
+                                <div>
+                                    {t('submit')}
+                                </div>
+                            </div>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default CreateIcon

src/pages/icon/hooks/useIconData.ts

@@ -27,3 +27,9 @@ export const useDeleteGroupIcon = () => {
     mutationFn: (id: string) => api.deleteGroupIcon(id),
   });
 };
+
+export const useCreateIcon = () => {
+  return useMutation({
+    mutationFn: api.createIcon,
+  });
+};

src/pages/icon/service/IconService.ts

@@ -1,5 +1,9 @@
 import axios from "../../../config/axios";
-import { CreateGroupIconType, GroupIconsResponse } from "../types/Types";
+import {
+  CreateGroupIconType,
+  CreateIconType,
+  GroupIconsResponse,
+} from "../types/Types";
 
 export const getIcons = async () => {
   const { data } = await axios.get("/admin/icons");
@@ -20,3 +24,8 @@ export const deleteGroupIcon = async (id: string) => {
   const { data } = await axios.delete(`/admin/icons/groups/${id}`);
   return data;
 };
+
+export const createIcon = async (params: CreateIconType) => {
+  const { data } = await axios.post("/admin/icons", params);
+  return data;
+};

src/pages/icon/types/Types.ts

@@ -1,4 +1,4 @@
-import { IResponse } from "@/types/response.types";
+import { IResponse } from "../../../types/response.types";
 
 export type CreateGroupIconType = {
   name: string;
@@ -16,3 +16,8 @@ export type GroupIconType = {
 export interface GroupIconsResponse extends IResponse<GroupIconType[]> {
   statusCode: number;
 }
+
+export type CreateIconType = {
+  url: string;
+  groupId: string;
+};