update

src/components/Comments.tsx

@@ -3,13 +3,13 @@ import { useEffect, useState } from 'react'
 
 // //component
 import ItemReview from './ItemReview'
-import CircularProgress from '@mui/material/CircularProgress'
+import Loading from './Loading'
 import { toast } from 'react-toastify'
 import Pagination from '@ui/Pagination'
 
 //redux
 import { useAppSelector } from '@hooks/useRedux'
-import { useAddReviewMutation, useGetReviewsByEventIdQuery } from '@redux/apis/review.api'
+import { useCreateReviewMutation, useGetReviewsByEventIdQuery } from '@redux/apis/review.api'
 
 //util
 import classNames from 'classnames'
@@ -39,7 +39,7 @@ const Comments = (props: Props) => {
 
   const [params, setParams] = useState(initParams)
   const { data } = useGetReviewsByEventIdQuery({ eventId, params })
-  const [AddReview, { isLoading }] = useAddReviewMutation()
+  const [AddReview, { isLoading }] = useCreateReviewMutation()
 
   const [rate, setRate] = useState<number>(0.0)
   const [content, setContent] = useState<string>('')
@@ -115,7 +115,7 @@ const Comments = (props: Props) => {
           onChange={(e) => setContent(e.target.value)}
         />
         <button disabled={isLoading} onClick={handleAddReviews} className='btn btn-primary hover:bg-primary-400 w-40'>
-          {isLoading ? <CircularProgress size={24} /> : 'Post comment'}
+          {isLoading ? <Loading /> : 'Post comment'}
         </button>
       </div>
     </div>

src/components/Dialog.tsx

@@ -1,5 +1,5 @@
 //component
-import CircularProgress from '@mui/material/CircularProgress'
+import Loading from './Loading'
 import ModalBase from '@ui/ModalBase'
 
 interface Props {
@@ -32,7 +32,7 @@ const ConfirmDialog = (props: Props) => {
             <span className='text-black'>Cancel</span>
           </button>
           <button className='btn bg-red' onClick={onHandle}>
-            {disabled ? <CircularProgress size='20px' /> : <span className='text-white'>{action}</span>}
+            {disabled ? <Loading /> : <span className='text-white'>{action}</span>}
           </button>
         </div>
       </div>

src/components/ItemReview.tsx

@@ -21,14 +21,14 @@ import dayjs from 'dayjs'
 import { useDeleteReviewMutation } from '@redux/apis/review.api'
 import { toast } from 'react-toastify'
 
-interface Props {
+interface IProps {
   index: number
   review: IReview
   ownerId: string
   userId: string
 }
 
-const ItemReview = (props: Props) => {
+const ItemReview = (props: IProps) => {
   const { index, review, ownerId, userId } = props
 
   const { anchorEl, open, handleClick, handleClose } = useSubmenu()
@@ -104,7 +104,7 @@ const ItemReview = (props: Props) => {
       </div>
       <Divider />
 
-      <ModalUpdate modalOpen={modalUpdate} setModalOpen={setModalUpdate} review={review} />
+      {modalUpdate && <ModalUpdate modalOpen={modalUpdate} setModalOpen={setModalUpdate} review={review} />}
 
       {openDialog && (
         <ConfirmDialog

src/components/Review.tsx

@@ -20,9 +20,15 @@ import { IReview } from 'interfaces/contents/review.interface'
 //utils
 import dayjs from 'dayjs'
 
+//icon
+import { HiTrash } from 'react-icons/hi'
+
 //assets
 import userDefault from '@assets/images/common/user_default.png'
-import { HiTrash } from 'react-icons/hi'
+
+//redux
+import { useDeleteReviewMutation } from '@redux/apis/review.api'
+import { toast } from 'react-toastify'
 
 interface UserProps {
   userName: string
@@ -81,12 +87,12 @@ const EventModal = (props: IEventProps) => {
   )
 }
 
-interface Props {
+interface IProps {
   review: IReview
   index: number
 }
 
-const Review = (props: Props) => {
+const Review = (props: IProps) => {
   const { index, review } = props
 
   const { theme } = useTheme()
@@ -97,6 +103,21 @@ const Review = (props: Props) => {
 
   const [modalOpen, setModalOpen] = useState(false)
 
+  const [DeleteReview, { isLoading: loadingDelete }] = useDeleteReviewMutation()
+
+  const handleDelete = async () => {
+    try {
+      const result = await DeleteReview(review.id).unwrap()
+      if (result) {
+        toast.success('Delete review successfully')
+      }
+    } catch (error) {
+      console.error('Delete review error:', error)
+    } finally {
+      setOpenDialog(false)
+    }
+  }
+
   useEffect(() => {
     setModalOpen(false)
   }, [width])
@@ -197,8 +218,8 @@ const Review = (props: Props) => {
             setOpenDialog(value)
           }}
           action='Delete'
-          onHandle={() => {}}
-          disabled={false}
+          onHandle={handleDelete}
+          disabled={loadingDelete}
         />
       )}
     </Spring>

src/components/events/CardMyEvent.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 //components
-import CircularProgress from '@mui/material/CircularProgress'
+import Loading from '@components/Loading'
 import ConfirmDialog from '@components/Dialog'
 import Checkbox from '@mui/material/Checkbox'
 import Spring from '@components/Spring'
@@ -114,7 +114,7 @@ const CardMyEvent = (props: Props) => {
               >
                 {event.deletedAt ? (
                   loadingRestore ? (
-                    <CircularProgress size={24} />
+                    <Loading />
                   ) : (
                     t('management.button_restore')
                   )

src/components/events/EventCardSearchHome.tsx

@@ -65,7 +65,7 @@ const EventCardSearchHome = (props: Props) => {
         </div>
         <h5 className='text-[12px] font-medium m-0 mt-1 leading-4 text-right'>
           {event?.categories[0]?.name} <br />
-          {event.eventPaymentType === EEventPaymentTicket.PAID ? (
+          {event.eventPaymentType === EEventPaymentTicket.Paid ? (
             <p className='font-bold text-primary'>100.000 VND</p>
           ) : (
             <p className='font-bold text-primary'>{event.eventPaymentType}</p>

src/components/events/EventFavouriteItem.tsx

@@ -1,8 +1,8 @@
 // components
+import Loading from '@components/Loading'
 import { NavLink } from 'react-router-dom'
 import RatingStars from '@ui/RatingStars'
 import Spring from '@components/Spring'
-import { CircularProgress } from '@mui/material'
 
 //interface
 import { IEventFavorite } from '@interfaces/contents/event.interface'
@@ -49,7 +49,7 @@ const EventFavouriteItem = (props: Props) => {
             View
           </NavLink>
           <button onClick={() => onRemove(event.id)} className='btn btn--outline red !text-sm'>
-            {isLoading ? <CircularProgress size={20} /> : 'Remove'}
+            {isLoading ? <Loading /> : 'Remove'}
           </button>
         </div>
       </div>

src/components/Information.tsx → src/components/events/EventInformation.tsx

@@ -3,9 +3,9 @@ import { useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 //components
+import Loading from '@components/Loading'
+import FormToChat from '@components/FormToChat'
 import { toast } from 'react-toastify'
-import FormToChat from './FormToChat'
-import { CircularProgress } from '@mui/material'
 
 //icons
 import { FaRegCalendarAlt } from 'react-icons/fa'
@@ -28,11 +28,14 @@ import userDefault from '@assets/images/common/user_default.png'
 import { useAppSelector } from '@hooks/useRedux'
 import { useFollowUserMutation, useUnFollowUserMutation, useCheckFollowerQuery } from '@redux/apis/user.api'
 
-interface Props {
+//i18n
+import { withTranslation } from 'react-i18next'
+
+interface IProps {
   event: IEvent
 }
 
-const Information = (props: Props) => {
+const EventInformation = (props: IProps) => {
   const { event } = props
 
   const navigate = useNavigate()
@@ -112,7 +115,7 @@ const Information = (props: Props) => {
               <p className='font-semibold text-header'>{event?.creator.userName}</p>
               <button onClick={handleFollowUser}>
                 {loadingFollower || loadingUnFollower ? (
-                  <CircularProgress size={24} color='primary' />
+                  <Loading />
                 ) : (
                   <div className='flex items-center gap-1 px-2 py-1 rounded-md bg-primary hover:bg-primary-300'>
                     {isFollow ? <RiSubtractLine color='white' size={24} /> : <IoMdAdd color='white' size={24} />}
@@ -166,4 +169,4 @@ const Information = (props: Props) => {
   )
 }
 
-export default Information
+export default withTranslation('event')(EventInformation)