From e0048cb0a134fc5875ef5ef157bd987551163e8f Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Tue, 4 Feb 2025 14:05:17 +0330 Subject: [PATCH] messages --- .env | 2 +- src/langs/fa.json | 3 +- src/pages/messages/Detail.tsx | 60 +++++++++++ src/pages/messages/List.tsx | 102 ++++++++++-------- src/pages/messages/hooks/useMessagesData.ts | 17 +++ src/pages/messages/service/MessagesService.ts | 23 ++++ src/pages/messages/types/MessagesTypes.ts | 9 ++ src/router/Main.tsx | 2 + 8 files changed, 174 insertions(+), 44 deletions(-) create mode 100644 src/pages/messages/Detail.tsx create mode 100644 src/pages/messages/hooks/useMessagesData.ts create mode 100644 src/pages/messages/service/MessagesService.ts create mode 100644 src/pages/messages/types/MessagesTypes.ts diff --git a/.env b/.env index 3c65636..74f350e 100644 --- a/.env +++ b/.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' \ No newline at end of file +# VITE_BASE_URL = 'http://192.168.0.207:3500' \ No newline at end of file diff --git a/src/langs/fa.json b/src/langs/fa.json index ffa1f8e..a79fa57 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -546,7 +546,8 @@ "fullName": "نام و نام خانوادگی", "email": "ایمیل", "subject": "موضوع", - "date": "تاریخ" + "date": "تاریخ", + "message": "پیام" }, "loading": "در حال بارگذاری...", "success": "عملیات با موفقیت انجام شد.", diff --git a/src/pages/messages/Detail.tsx b/src/pages/messages/Detail.tsx new file mode 100644 index 0000000..ca9bf74 --- /dev/null +++ b/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 ( +
+ { + getDetail.isPending ? + + : + +
+ {t('messages.message')} + {' #' + getDetail.data?.data?.contactUs?.numericId} +
+ +
+ +
+ + +
+ +
+
+ {getDetail.data?.data?.contactUs?.title} +
+ +

+ {getDetail.data?.data?.contactUs?.content} +

+
+ +
+ + } +
+ ) +} + +export default MessageDetail \ No newline at end of file diff --git a/src/pages/messages/List.tsx b/src/pages/messages/List.tsx index 79309ff..b0aad90 100644 --- a/src/pages/messages/List.tsx +++ b/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('') + const [search, setSearch] = useState('') + const [page, setPage] = useState(1) + const getMessages = useGetMessages(page, search, since) + return (
@@ -20,7 +30,7 @@ const MessagesList: FC = () => {
{ }} + onChange={setSince} placeholder={t('messages.submit_date')} />
@@ -30,51 +40,59 @@ const MessagesList: FC = () => { placeholder={t('search')} variant='search' className='bg-white border' + onChangeSearchFinal={setSearch} />
-
- - - - - - - - - - - - - -
- - - - - -
- - - - - - - - -
- - - - - - - - -
-
+ { + getMessages.isPending ? + + : +
+ + + + + + + { + getMessages.data?.data?.contactUs?.map((item: MessageItemType) => { + return ( + + + + ) + }) + } + +
+ + + + + +
+ + + + + + + + +
+ +
+ +
+
+ } ) } diff --git a/src/pages/messages/hooks/useMessagesData.ts b/src/pages/messages/hooks/useMessagesData.ts new file mode 100644 index 0000000..a28705d --- /dev/null +++ b/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, + }); +}; diff --git a/src/pages/messages/service/MessagesService.ts b/src/pages/messages/service/MessagesService.ts new file mode 100644 index 0000000..640cb7d --- /dev/null +++ b/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; +}; diff --git a/src/pages/messages/types/MessagesTypes.ts b/src/pages/messages/types/MessagesTypes.ts new file mode 100644 index 0000000..cdcc1ba --- /dev/null +++ b/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; +}; diff --git a/src/router/Main.tsx b/src/router/Main.tsx index df891ae..4e9697b 100644 --- a/src/router/Main.tsx +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> } />