percantage

src/components/Button.tsx

@@ -6,6 +6,7 @@ import { clx } from '../helpers/utils'
 type Props = {
     className?: string;
     isLoading?: boolean,
+    percentage?: number,
 } & ButtonHTMLAttributes<HTMLButtonElement> &
     XOR<{ children: ReactNode }, { label: string }>;
 
@@ -21,7 +22,14 @@ const Button: FC<Props> = memo((props: Props) => {
         <button {...props} className={`${buttonClass} ${props.className}`} >
             {
                 props.isLoading ?
-                    <MoonLoader color="white" size={20} />
+                    <div className='flex gap-2 items-center'>
+                        {
+                            !props.percentage ?
+                                <MoonLoader size={20} color='#fff' />
+                                :
+                                <span>{props.percentage}%</span>
+                        }
+                    </div>
                     :
                     props.label || props.children
             }

src/components/Select.tsx

@@ -35,7 +35,7 @@ const Select: FC<Props> = (props: Props) => {
                     <option value="" disabled selected>{props.placeholder}</option>
                 }
                 {
-                    props.items.map((item) => {
+                    props.items?.map((item) => {
                         return (
                             <option key={item.value} value={item.value}>
                                 {item.label}

src/pages/criticisms/Add.tsx

@@ -18,7 +18,8 @@ const AddCriticisms: FC = () => {
 
     const { t } = useTranslation('global')
     const [files, setFiles] = useState<File[]>([])
-    const multiUpload = useMultiUpload()
+    const [percent, setPercent] = useState<number>(0)
+    const multiUpload = useMultiUpload(setPercent)
     const createCriticisms = useCreateCriticisms()
 
     const formik = useFormik<CreateCriticismsTypes>({
@@ -118,6 +119,7 @@ const AddCriticisms: FC = () => {
                             className='xl:max-w-[100px]'
                             onClick={() => formik.handleSubmit()}
                             isLoading={createCriticisms.isPending || multiUpload.isPending}
+                            percentage={percent}
                         >
                             <div className='flex gap-2 items-center'>
                                 <TickCircle size={20} color='white' />

src/pages/profile/Profile.tsx

@@ -22,10 +22,11 @@ import Phone from './components/Phone'
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
-    const singleUpload = useSingleUpload()
     const [file, setFile] = useState<File>()
     const getProvines = useGetProvines()
     const getProfile = useGetProfile()
+    const [percent, setPercent] = useState<number>(0)
+    const singleUpload = useSingleUpload(setPercent)
     const updateProfile = useUpdateProfile()
 
     const formik = useFormik<UpdateProfileType>({
@@ -126,6 +127,7 @@ const Profile: FC = () => {
                                     <Button
                                         isLoading={singleUpload.isPending || updateProfile.isPending}
                                         className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
+                                        percentage={percent}
                                     >
                                         <input {...getInputProps()} />
                                         <div {...getRootProps()} className='flex items-center gap-3'>

src/pages/ticket/CreateTicket.tsx

@@ -25,9 +25,10 @@ const CreateTicket: FC = () => {
     const { t } = useTranslation('global')
     const navigate = useNavigate()
     const [files, setFiles] = useState<File[]>([])
+    const [percent, setPercent] = useState<number>(0)
     const getProfile = useGetProfile()
     const getCategories = useGetCategoriesTicket()
-    const multiUpload = useMultiUpload()
+    const multiUpload = useMultiUpload(setPercent)
     const createTicket = useCreateTicket()
     const getMyservice = useGetMyServices('')
 
@@ -206,6 +207,7 @@ const CreateTicket: FC = () => {
                                     className='xl:max-w-[100px]'
                                     onClick={() => formik.handleSubmit()}
                                     isLoading={createTicket.isPending || multiUpload.isPending}
+                                    percentage={percent}
                                 >
                                     <div className='flex gap-2 items-center'>
                                         <TickCircle size={20} color='white' />

src/pages/ticket/Detail.tsx

@@ -23,10 +23,11 @@ const TicketDetail: FC = () => {
     const { t } = useTranslation('global')
     const navigate = useNavigate()
     const { id } = useParams()
-    const getMessages = useGetMessages(id ? id : '')
     const [files, setFiles] = useState<File[]>([])
+    const [percent, setPercent] = useState<number>(0)
+    const getMessages = useGetMessages(id ? id : '')
     const addMessage = useAddMessageTicket(id ? id : '')
-    const multiUpload = useMultiUpload()
+    const multiUpload = useMultiUpload(setPercent)
     const [isResetFiles, setIsResetFiles] = useState<boolean>(false)
     const closeTicket = useCloseTicket()
 
@@ -223,6 +224,7 @@ const TicketDetail: FC = () => {
                                         <Button
                                             className='xl:max-w-[100px]'
                                             onClick={() => formik.handleSubmit()}
+                                            percentage={percent}
                                             isLoading={addMessage.isPending || multiUpload.isPending}
                                         >
                                             <div className='flex gap-2 items-center'>

src/pages/ticket/hooks/useTicketData.ts

@@ -22,14 +22,15 @@ export const useGetCategoriesTicket = () => {
   });
 };
 
-export const useSingleUpload = () => {
+export const useSingleUpload = (callback?: (value: number) => void) => {
   return useMutation({
-    mutationFn: (variables: FormData) => api.uploadSingle(variables),
+    mutationFn: (variables: FormData) => api.uploadSingle(variables, callback),
   });
 };
-export const useMultiUpload = () => {
+export const useMultiUpload = (callback?: (value: number) => void) => {
   return useMutation({
-    mutationFn: (variables: FormData) => api.uploadMultiple(variables),
+    mutationFn: (variables: FormData) =>
+      api.uploadMultiple(variables, callback),
   });
 };
 

src/pages/ticket/service/TicketService.ts

@@ -20,13 +20,45 @@ export const getCategoriesTicket = async () => {
   return data;
 };
 
-export const uploadSingle = async (params: FormData) => {
+export const uploadSingle = async (
-  const { data } = await axios.post(`/uploader/single-file`, params);
+  params: FormData,
+  callback?: (value: number) => void
+) => {
+  const { data } = await axios.post(`/uploader/single-file`, params, {
+    onUploadProgress: (progressEvent: any) => {
+      if (progressEvent.bytes) {
+        if (callback) {
+          callback(
+            Math.round((progressEvent.loaded / progressEvent.total) * 100)
+          );
+        }
+      }
+    },
+  });
+  if (callback) {
+    callback(0);
+  }
   return data;
 };
 
-export const uploadMultiple = async (params: FormData) => {
+export const uploadMultiple = async (
-  const { data } = await axios.post(`/uploader/multi-file`, params);
+  params: FormData,
+  callback?: (value: number) => void
+) => {
+  const { data } = await axios.post(`/uploader/multi-file`, params, {
+    onUploadProgress: (progressEvent: any) => {
+      if (progressEvent.bytes) {
+        if (callback) {
+          callback(
+            Math.round((progressEvent.loaded / progressEvent.total) * 100)
+          );
+        }
+      }
+    },
+  });
+  if (callback) {
+    callback(0);
+  }
   return data;
 };
 

src/pages/wallet/components/CardtoCard.tsx

@@ -17,10 +17,11 @@ import { TickCircle } from 'iconsax-react'
 const CardtoCard: FC = () => {
 
     const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const [percent, setPercent] = useState<number>(0)
     const getBankAccount = useGetBankAccount()
     const depositTransfer = useDepositTransfer()
-    const upload = useSingleUpload()
+    const upload = useSingleUpload(setPercent)
-    const [file, setFile] = useState<File>()
 
     const formik = useFormik<DepositTransferType>({
         initialValues: {
@@ -103,6 +104,7 @@ const CardtoCard: FC = () => {
                                 className='xl:w-[180px]'
                                 onClick={() => formik.handleSubmit()}
                                 isLoading={depositTransfer.isPending || upload.isPending}
+                                percentage={percent}
                             >
                                 <div className='flex gap-2 items-center'>
                                     <TickCircle

src/pages/wallet/components/Sheba.tsx

@@ -17,10 +17,11 @@ import { TickCircle } from 'iconsax-react'
 const CardtoCard: FC = () => {
 
     const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const [percent, setPercent] = useState<number>(0)
     const getBankAccount = useGetBankAccount()
     const depositTransfer = useDepositTransfer()
-    const upload = useSingleUpload()
+    const upload = useSingleUpload(setPercent)
-    const [file, setFile] = useState<File>()
 
     const formik = useFormik<DepositTransferType>({
         initialValues: {
@@ -104,6 +105,7 @@ const CardtoCard: FC = () => {
                                 className='xl:w-[180px]'
                                 onClick={() => formik.handleSubmit()}
                                 isLoading={depositTransfer.isPending || upload.isPending}
+                                percentage={percent}
                             >
                                 <div className='flex gap-2 items-center'>
                                     <TickCircle