messages

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
 VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.0.221:3500'
+# VITE_BASE_URL = 'http://192.168.0.207:3500'

src/langs/fa.json

@@ -546,7 +546,8 @@
     "fullName": "نام و نام خانوادگی",
     "email": "ایمیل",
     "subject": "موضوع",
-    "date": "تاریخ"
+    "date": "تاریخ",
+    "message": "پیام"
   },
   "loading": "در حال بارگذاری...",
   "success": "عملیات با موفقیت انجام شد.",

src/pages/messages/Detail.tsx

@@ -0,0 +1,60 @@
+import { FC, Fragment } from 'react'
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import PageLoading from '../../components/PageLoading'
+import { useGetMessageDetail } from './hooks/useMessagesData'
+import Input from '../../components/Input'
+
+const MessageDetail: FC = () => {
+
+    const { id } = useParams()
+    const { t } = useTranslation('global')
+    const getDetail = useGetMessageDetail(id ? id : '')
+
+    return (
+        <div className='mt-4'>
+            {
+                getDetail.isPending ?
+                    <PageLoading />
+                    :
+                    <Fragment>
+                        <div>
+                            {t('messages.message')}
+                            {' #' + getDetail.data?.data?.contactUs?.numericId}
+                        </div>
+
+                        <div className='flex-1 mt-4 bg-white p-8 rounded-2xl'>
+
+                            <div className='rowTwoInput'>
+                                <Input
+                                    label={t('service.fullName')}
+                                    readOnly
+                                    value={getDetail.data?.data?.contactUs?.fullName}
+
+                                />
+                                <Input
+                                    label={t('email')}
+                                    readOnly
+                                    value={getDetail.data?.data?.contactUs?.email}
+
+                                />
+                            </div>
+
+                            <div className='mt-7'>
+                                <div>
+                                    {getDetail.data?.data?.contactUs?.title}
+                                </div>
+
+                                <p className='mt-6 text-sm leading-6'>
+                                    {getDetail.data?.data?.contactUs?.content}
+                                </p>
+                            </div>
+
+                        </div>
+                    </Fragment>
+            }
+        </div>
+    )
+}
+
+export default MessageDetail

src/pages/messages/List.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
@@ -6,10 +6,20 @@ import { Pages } from '../../config/Pages'
 import { Eye } from 'iconsax-react'
 import DatePickerComponent from '../../components/DatePicker'
 import Input from '../../components/Input'
+import { useGetMessages } from './hooks/useMessagesData'
+import PageLoading from '../../components/PageLoading'
+import moment from 'moment-jalaali'
+import { MessageItemType } from './types/MessagesTypes'
+import Pagination from '../../components/Pagination'
 
 const MessagesList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [since, setSince] = useState<string>('')
+    const [search, setSearch] = useState<string>('')
+    const [page, setPage] = useState<number>(1)
+    const getMessages = useGetMessages(page, search, since)
+
 
     return (
         <div className='mt-4'>
@@ -20,7 +30,7 @@ const MessagesList: FC = () => {
             <div className='mt-6 flex justify-between items-center'>
                 <div>
                     <DatePickerComponent
-                        onChange={() => { }}
+                        onChange={setSince}
                         placeholder={t('messages.submit_date')}
                     />
                 </div>
@@ -30,11 +40,16 @@ const MessagesList: FC = () => {
                         placeholder={t('search')}
                         variant='search'
                         className='bg-white border'
+                        onChangeSearchFinal={setSearch}
                     />
                 </div>
 
             </div>
 
+            {
+                getMessages.isPending ?
+                    <PageLoading />
+                    :
                     <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                         <table className='w-full text-sm '>
                             <thead className='thead'>
@@ -48,34 +63,37 @@ const MessagesList: FC = () => {
                                 </tr>
                             </thead>
                             <tbody>
-                        <tr className='tr'>
+                                {
-                            <Td text={'۱۲۳۳۴'} />
+                                    getMessages.data?.data?.contactUs?.map((item: MessageItemType) => {
-                            <Td text={'سیما فرهادی'} />
+                                        return (
-                            <Td text={'info@example.com'} />
+                                            <tr key={item.id} className='tr'>
-                            <Td text={'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ'} />
+                                                <Td text={item.numericId + ''} />
-                            <Td text={'(۲۰۲۴-۱۱-۱) ۱۴۰۳/۰۹/۰۱'} />
+                                                <Td text={item.fullName} />
+                                                <Td text={item?.email} />
+                                                <Td text={item.title} />
+                                                <Td text={moment(item?.createdAt).format('jYYYY-jMM-jDD')} />
                                                 <Td text={''}>
-                                <Link to={Pages.messages.detail + '1'}>
+                                                    <Link to={Pages.messages.detail + item.id}>
-                                    <Eye size={20} color='black' />
-                                </Link>
-                            </Td>
-                        </tr>
-                        <tr className='tr'>
-                            <Td text={'۱۲۳۳۴'} />
-                            <Td text={'سیما فرهادی'} />
-                            <Td text={'info@example.com'} />
-                            <Td text={'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ'} />
-                            <Td text={'(۲۰۲۴-۱۱-۱) ۱۴۰۳/۰۹/۰۱'} />
-                            <Td text={''}>
-                                <Link to={Pages.messages.detail + '1'}>
                                                         <Eye size={20} color='black' />
                                                     </Link>
                                                 </Td>
                                             </tr>
+                                        )
+                                    })
+                                }
                             </tbody>
                         </table>
+
+                        <div className='flex justify-end pb-4'>
+                            <Pagination
+                                currentPage={page}
+                                onPageChange={setPage}
+                                totalPages={getMessages.data?.data?.pager?.totalPages}
+                            />
                         </div>
                     </div>
+            }
+        </div>
     )
 }
 

src/pages/messages/hooks/useMessagesData.ts

@@ -0,0 +1,17 @@
+import * as api from "../service/MessagesService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetMessages = (page: number, search: string, since: string) => {
+  return useQuery({
+    queryKey: ["messages", page, search, since],
+    queryFn: () => api.getMessages(page, search, since),
+  });
+};
+
+export const useGetMessageDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["message", id],
+    queryFn: () => api.getMessageDetail(id),
+    enabled: !!id,
+  });
+};

src/pages/messages/service/MessagesService.ts

@@ -0,0 +1,23 @@
+import moment from "moment-jalaali";
+import axios from "../../../config/axios";
+
+export const getMessages = async (
+  page: number,
+  search: string,
+  since: string
+) => {
+  let query = `?page=${page}`;
+  if (search) {
+    query += `&q=${search}`;
+  }
+  if (since) {
+    query += `&since=${moment(since, "jYYYY-jMM-jDD").format("YYYY-MM-DD")}`;
+  }
+  const { data } = await axios.get(`/contact-us${query}`);
+  return data;
+};
+
+export const getMessageDetail = async (id: string) => {
+  const { data } = await axios.get(`/contact-us/${id}`);
+  return data;
+};

src/pages/messages/types/MessagesTypes.ts

@@ -0,0 +1,9 @@
+export type MessageItemType = {
+  numericId: number;
+  id: number;
+  title: string;
+  fullName: string;
+  email: string;
+  content: string;
+  createdAt: string;
+};

src/router/Main.tsx

@@ -44,6 +44,7 @@ import UsersList from '../pages/users/List'
 import CreateUser from '../pages/users/Create'
 import RolesList from '../pages/users/RolesList'
 import RoleCreate from '../pages/users/RoleCreate'
+import MessageDetail from '../pages/messages/Detail'
 
 const MainRouter: FC = () => {
 
@@ -96,6 +97,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.customer.list} element={<CustomerList />} />
                             <Route path={Pages.customer.create} element={<CreateCustomer />} />
                             <Route path={Pages.messages.list} element={<MessagesList />} />
+                            <Route path={Pages.messages.detail + ':id'} element={<MessageDetail />} />
                             <Route path={Pages.users.list} element={<UsersList />} />
                             <Route path={Pages.users.create} element={<CreateUser />} />
                             <Route path={Pages.users.roleList} element={<RolesList />} />