list of reviews
This commit is contained in:
hamid zarghami
@@ -0,0 +1,58 @@
|
||||
import { type FC } from 'react'
|
||||
import Table from '@/components/Table'
|
||||
import Filters from '@/components/Filters'
|
||||
import { useGetReviews } from './hooks/useReviewData'
|
||||
import { useReviewFilters } from './hooks/useReviewFilters'
|
||||
import { getReviewTableColumns } from './components/ReviewTableColumns'
|
||||
import { useReviewFiltersFields } from './components/ReviewFiltersFields'
|
||||
import type { Review } from './types/Types'
|
||||
import type { RowDataType } from '@/components/types/TableTypes'
|
||||
|
||||
const ReviewsList: FC = () => {
|
||||
const {
|
||||
filters,
|
||||
currentPage,
|
||||
apiParams,
|
||||
handleFiltersChange,
|
||||
handlePageChange,
|
||||
limit,
|
||||
} = useReviewFilters()
|
||||
|
||||
const { data: reviewsData, isLoading } = useGetReviews(apiParams)
|
||||
|
||||
const reviews = reviewsData?.data || []
|
||||
const columns = getReviewTableColumns()
|
||||
const filterFields = useReviewFiltersFields()
|
||||
|
||||
const totalPages = Math.ceil(reviews.length / limit) || 1
|
||||
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h1 className='text-lg font-light'>لیست نظرات</h1>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Filters
|
||||
fields={filterFields}
|
||||
onChange={handleFiltersChange}
|
||||
initialValues={filters}
|
||||
searchField="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table<Review & RowDataType>
|
||||
columns={columns}
|
||||
data={reviews as (Review & RowDataType)[]}
|
||||
isloading={isLoading}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange: handlePageChange,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReviewsList
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useMemo } from 'react'
|
||||
import type { FieldType } from '@/components/Filters'
|
||||
|
||||
export const useReviewFiltersFields = (): FieldType[] => {
|
||||
return useMemo(() => [
|
||||
{
|
||||
type: 'input',
|
||||
name: 'search',
|
||||
placeholder: 'جستجو (نام کاربر یا غذا)',
|
||||
},
|
||||
], [])
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Eye, Star1 } from 'iconsax-react'
|
||||
import type { ColumnType } from '@/components/types/TableTypes'
|
||||
import type { Review } from '../types/Types'
|
||||
import { formatOptionalDate } from '@/helpers/func'
|
||||
import Status from '@/components/Status'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '@/config/Pages'
|
||||
|
||||
const getStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'pending' => {
|
||||
const variantMap: Record<string, 'success' | 'error' | 'warning' | 'info' | 'pending'> = {
|
||||
'pending': 'pending',
|
||||
'approved': 'success',
|
||||
'rejected': 'error',
|
||||
}
|
||||
return variantMap[status] || 'pending'
|
||||
}
|
||||
|
||||
export const getReviewTableColumns = (): ColumnType<Review>[] => {
|
||||
return [
|
||||
{
|
||||
key: 'user',
|
||||
title: 'کاربر',
|
||||
render: (item: Review) => {
|
||||
const name = [item.user.firstName, item.user.lastName].filter(Boolean).join(' ')
|
||||
return name || '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'food',
|
||||
title: 'غذا',
|
||||
render: (item: Review) => {
|
||||
return item.food.title || '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'rating',
|
||||
title: 'امتیاز',
|
||||
render: (item: Review) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Star1
|
||||
size={16}
|
||||
color="black"
|
||||
variant="Bold"
|
||||
/>
|
||||
<div className='mt-1 text-sm'>{item.rating}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'comment',
|
||||
title: 'نظر',
|
||||
render: (item: Review) => {
|
||||
return (
|
||||
<div className="max-w-xs truncate" title={item.comment}>
|
||||
{item.comment || '-'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'وضعیت',
|
||||
render: (item: Review) => {
|
||||
const statusLabels: Record<string, string> = {
|
||||
'pending': 'در انتظار',
|
||||
'approved': 'تایید شده',
|
||||
'rejected': 'رد شده',
|
||||
}
|
||||
return (
|
||||
<Status
|
||||
variant={getStatusVariant(item.status)}
|
||||
label={statusLabels[item.status] || item.status}
|
||||
/>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'تاریخ ثبت',
|
||||
render: (item: Review) => {
|
||||
return formatOptionalDate(item.createdAt, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'details',
|
||||
title: '',
|
||||
render: (item: Review) => {
|
||||
return (
|
||||
<Link to={Pages.reviews.detail + item.id}>
|
||||
<Eye size={20} color="#8C90A3" className="cursor-pointer" />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import * as api from "../service/ReviewService";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const useGetReviews = (params?: Record<string, string | number>) => {
|
||||
return useQuery({
|
||||
queryKey: ["reviews", params],
|
||||
queryFn: () => api.getReviews(params),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import type { FilterValues } from "@/components/Filters";
|
||||
|
||||
const DEFAULT_PAGE = 1;
|
||||
const DEFAULT_LIMIT = 10;
|
||||
|
||||
export const useReviewFilters = () => {
|
||||
const [filters, setFilters] = useState<FilterValues>({});
|
||||
const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
|
||||
const [limit] = useState(DEFAULT_LIMIT);
|
||||
|
||||
const apiParams = useMemo(() => {
|
||||
const params: Record<string, string | number> = {
|
||||
page: currentPage,
|
||||
limit: limit,
|
||||
};
|
||||
|
||||
if (filters.search) {
|
||||
params.search = filters.search as string;
|
||||
}
|
||||
|
||||
if (filters.status) {
|
||||
params.status = filters.status as string;
|
||||
}
|
||||
|
||||
if (filters.rating) {
|
||||
params.rating = filters.rating as string;
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [filters, currentPage, limit]);
|
||||
|
||||
const handleFiltersChange = (newFilters: FilterValues) => {
|
||||
setFilters(newFilters);
|
||||
setCurrentPage(DEFAULT_PAGE);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
return {
|
||||
filters,
|
||||
currentPage,
|
||||
apiParams,
|
||||
handleFiltersChange,
|
||||
handlePageChange,
|
||||
limit,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import axios from "@/config/axios";
|
||||
import type { GetReviewsResponse } from "../types/Types";
|
||||
|
||||
export const getReviews = async (
|
||||
params?: Record<string, string | number>
|
||||
): Promise<GetReviewsResponse> => {
|
||||
const { data } = await axios.get<GetReviewsResponse>("/admin/reviews", {
|
||||
params,
|
||||
});
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { IResponse } from "@/types/response.types";
|
||||
import type { RowDataType } from "@/components/types/TableTypes";
|
||||
|
||||
export interface ReviewFood {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
restaurant: string;
|
||||
category: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
content: string | null;
|
||||
price: number;
|
||||
points: number | null;
|
||||
order: number | null;
|
||||
prepareTime: number | null;
|
||||
sat: boolean;
|
||||
sun: boolean;
|
||||
mon: boolean;
|
||||
breakfast: boolean;
|
||||
noon: boolean;
|
||||
dinner: boolean;
|
||||
stock: number;
|
||||
stockDefault: number;
|
||||
isActive: boolean;
|
||||
images: string[];
|
||||
inPlaceServe: boolean;
|
||||
pickupServe: boolean;
|
||||
rate: number;
|
||||
discount: number;
|
||||
isSpecialOffer: boolean;
|
||||
}
|
||||
|
||||
export interface ReviewUser {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
birthDate: string;
|
||||
marriageDate: string;
|
||||
referrer: string | null;
|
||||
isActive: boolean;
|
||||
gender: boolean;
|
||||
wallet: number;
|
||||
points: number;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
export interface Review extends RowDataType {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
order: string;
|
||||
food: ReviewFood;
|
||||
user: ReviewUser;
|
||||
comment: string;
|
||||
rating: number;
|
||||
positivePoints: string[];
|
||||
negativePoints: string[];
|
||||
status: string;
|
||||
}
|
||||
|
||||
export type GetReviewsResponse = IResponse<Review[]>;
|
||||
Reference in New Issue
Block a user