docker mirror

src/pages/dpage/hooks/useStickerData.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/StickerService";
+import { GroupStickersResponse } from "../types/Types";
+
+export const useGetStickers = () => {
+  return useQuery({
+    queryKey: ["dpage-stickers"],
+    queryFn: api.getStickers,
+  });
+};
+
+export const useGetGroupStickers = () => {
+  return useQuery<GroupStickersResponse>({
+    queryKey: ["dpage-group-stickers"],
+    queryFn: api.getGroupStickers,
+  });
+};
+
+export const useCreateSticker = () => {
+  return useMutation({
+    mutationFn: api.createSticker,
+  });
+};
+
+export const useDeleteSticker = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteSticker(id),
+  });
+};

src/pages/dpage/service/StickerService.ts

@@ -0,0 +1,26 @@
+import axios from "../../../config/axios";
+import {
+  CreateStickerType,
+  GroupStickersResponse,
+  StickersResponse,
+} from "../types/Types";
+
+export const getStickers = async (): Promise<StickersResponse> => {
+  const { data } = await axios.get("/admin/dpage/stickers");
+  return data;
+};
+
+export const getGroupStickers = async (): Promise<GroupStickersResponse> => {
+  const { data } = await axios.get("/admin/dpage/stickers/groups");
+  return data;
+};
+
+export const createSticker = async (params: CreateStickerType) => {
+  const { data } = await axios.post("/admin/dpage/stickers", params);
+  return data;
+};
+
+export const deleteSticker = async (id: string) => {
+  const { data } = await axios.delete(`/admin/dpage/stickers/${id}`);
+  return data;
+};

src/pages/dpage/sticker/List.tsx

@@ -0,0 +1,144 @@
+import { useState, type FC } from 'react'
+import { useGetStickers, useDeleteSticker } from '../hooks/useStickerData'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { Add } from 'iconsax-react'
+import CreateSticker from './components/CreateSticker'
+import Td from '../../../components/Td'
+import Input from '../../../components/Input'
+import PageLoading from '../../../components/PageLoading'
+import TrashWithConfrim from '../../../components/TrashWithConfrim'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+import { StickerType } from '../types/Types'
+import moment from 'moment-jalaali'
+
+const StickersList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const [search, setSearch] = useState<string>('')
+    const { data: stickersData, isLoading, refetch } = useGetStickers()
+    const deleteSticker = useDeleteSticker()
+
+    const handleCloseModal = () => {
+        setShowModal(false)
+        refetch()
+    }
+
+    const handleDelete = (id: string) => {
+        deleteSticker.mutate(id, {
+            onSuccess: () => {
+                refetch()
+                toast.success(t('success'))
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const stickers = (stickersData as unknown as { data?: StickerType[] })?.data || []
+    const filteredStickers = stickers.filter((sticker: StickerType) =>
+        sticker.url.toLowerCase().includes(search.toLowerCase()) ||
+        sticker.group?.name?.toLowerCase().includes(search.toLowerCase())
+    )
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('sticker.list_sticker')}
+                </div>
+
+                <Button
+                    className='w-[172px]'
+                    onClick={() => setShowModal(true)}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <Add size={20} color='white' />
+                        <div>
+                            {t('sticker.add_new_sticker')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-4'>
+                <div className='flex justify-end items-center'>
+                    <div className='xl:w-[300px] w-full'>
+                        <Input
+                            variant='search'
+                            placeholder={t('ads.search')}
+                            className='bg-white w-full'
+                            onChangeSearchFinal={(value) => setSearch(value)}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {
+                isLoading ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm'>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={t('sticker.url')} />
+                                    <Td text={t('sticker.group')} />
+                                    <Td text={t('sticker.created_at')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    filteredStickers.map((item: StickerType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={''}>
+                                                    <div className='flex items-center gap-3'>
+                                                        <div className='size-10 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center'>
+                                                            <img
+                                                                src={item.url}
+                                                                alt={item.url}
+                                                                className='size-full object-contain'
+                                                                onError={(e) => {
+                                                                    const target = e.target as HTMLImageElement
+                                                                    target.style.display = 'none'
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <div className='truncate max-w-xs' title={item.url}>
+                                                            {item.url}
+                                                        </div>
+                                                    </div>
+                                                </Td>
+                                                <Td text={item.group?.name || '-'} />
+                                                <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
+                                                <Td text={''}>
+                                                    <div className='flex gap-2 items-center'>
+                                                        <TrashWithConfrim
+                                                            onDelete={() => handleDelete(item.id)}
+                                                            isLoading={deleteSticker.isPending}
+                                                        />
+                                                    </div>
+                                                </Td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+            <CreateSticker
+                open={showModal}
+                close={handleCloseModal}
+            />
+        </div>
+    )
+}
+
+export default StickersList

src/pages/dpage/sticker/components/CreateSticker.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 { useCreateSticker, useGetGroupStickers } from '../../hooks/useStickerData'
+import { useSingleUpload } from '../../../service/hooks/useServiceData'
+import { CreateStickerType, GroupStickerType } from '../../types/Types'
+import { ErrorType } from '../../../../helpers/types'
+
+interface CreateStickerProps {
+    open: boolean
+    close: () => void
+    onSuccess?: () => void
+}
+
+const CreateSticker: FC<CreateStickerProps> = ({ open, close, onSuccess }) => {
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const createSticker = useCreateSticker()
+    const singleUpload = useSingleUpload()
+    const { data: groupStickers } = useGetGroupStickers()
+
+    const groups = (groupStickers as unknown as { data?: GroupStickerType[] })?.data || []
+    const groupOptions = groups.map((group: GroupStickerType) => ({
+        value: group.id,
+        label: group.name
+    }))
+
+    const handleCreateSticker = (values: CreateStickerType) => {
+        createSticker.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<CreateStickerType>({
+        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
+                    handleCreateSticker(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('sticker.add_new_sticker')}
+            isHeader
+        >
+            <div className='mt-6'>
+                <UploadBox
+                    label={t('sticker.url')}
+                    onChange={(files) => setFile(files[0])}
+                    isReset={!open}
+                    accept="image/svg+xml"
+                />
+
+                <div className='mt-4'>
+                    <Select
+                        label={t('sticker.group')}
+                        className='bg-white bg-opacity-30'
+                        items={groupOptions}
+                        placeholder={t('sticker.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={createSticker.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 CreateSticker

src/pages/dpage/types/Types.ts

@@ -0,0 +1,40 @@
+import { IResponse } from "../../../types/response.types";
+
+export type CreateStickerType = {
+  url: string;
+  groupId: string;
+};
+
+export type StickerGroupType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+};
+
+export type StickerType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  url: string;
+  group: StickerGroupType;
+};
+
+export interface StickersResponse extends IResponse<StickerType[]> {
+  statusCode: number;
+}
+
+export type GroupStickerType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  stickers: unknown[];
+};
+
+export interface GroupStickersResponse extends IResponse<GroupStickerType[]> {
+  statusCode: number;
+}