restaurant list fix + pager

src/pages/dmenu/hooks/useIconData.ts

@@ -52,10 +52,10 @@ export const useGetReports = () => {
   });
 };
 
-export const useGetRestaurants = () => {
+export const useGetRestaurants = (page: number = 1, limit: number = 10) => {
   return useQuery({
-    queryKey: ["restaurants"],
+    queryKey: ["restaurants", page, limit],
-    queryFn: api.getRestaurants,
+    queryFn: () => api.getRestaurants(page, limit),
   });
 };
 

src/pages/dmenu/restaurant/List.tsx

@@ -3,21 +3,25 @@ import { useTranslation } from 'react-i18next'
 import { useGetRestaurants } from '../hooks/useIconData'
 import PageLoading from '../../../components/PageLoading'
 import Td from '../../../components/Td'
-import { RestaurantType } from '../types/Types'
+import { RestaurantType, RestaurantsResponse } from '../types/Types'
 import moment from 'moment-jalaali'
 import { Copy } from 'iconsax-react'
 import { toast } from 'react-toastify'
 import Button from '../../../components/Button'
 import RestaurantAdminsModal from './components/RestaurantAdminsModal'
+import Pagination from '../../../components/Pagination'
 
 const RestaurantsList: FC = () => {
 
     const { t } = useTranslation('global')
-    const { data: restaurants, isLoading } = useGetRestaurants()
+    const [page, setPage] = useState<number>(1)
+    const limit = 10
+    const { data: restaurants, isLoading } = useGetRestaurants(page, limit)
     const [selectedRestaurantId, setSelectedRestaurantId] = useState<string>('')
     const [isAdminsModalOpen, setIsAdminsModalOpen] = useState<boolean>(false)
 
-    const restaurantsList = (restaurants as { data?: RestaurantType[] })?.data || []
+    const restaurantsList = (restaurants as RestaurantsResponse | undefined)?.data?.restaurants || []
+    const totalPages = (restaurants as RestaurantsResponse | undefined)?.data?.pager?.totalPages || 1
 
     const handleOpenAdminsModal = (restaurantId: string) => {
         setSelectedRestaurantId(restaurantId)
@@ -117,6 +121,14 @@ const RestaurantsList: FC = () => {
                                 }
                             </tbody>
                         </table>
+
+                        {totalPages > 1 && (
+                            <Pagination
+                                currentPage={page}
+                                totalPages={totalPages}
+                                onPageChange={setPage}
+                            />
+                        )}
                     </div>
             }
 

src/pages/dmenu/service/IconService.ts

@@ -47,8 +47,13 @@ export const getReports = async (): Promise<ReportsResponse> => {
   return data;
 };
 
-export const getRestaurants = async (): Promise<RestaurantsResponse> => {
+export const getRestaurants = async (
-  const { data } = await axios.get("/admin/dmenu/restaurants");
+  page: number = 1,
+  limit: number = 10
+): Promise<RestaurantsResponse> => {
+  const { data } = await axios.get(
+    `/admin/dmenu/restaurants?page=${page}&limit=${limit}`
+  );
   return data;
 };
 

src/pages/dmenu/types/Types.ts

@@ -77,7 +77,7 @@ export type RestaurantType = {
   deletedAt: string | null;
   name: string;
   slug: string;
-  logo: string;
+  logo: string | null;
   address: string | null;
   menuColor: string | null;
   latitude: number | null;
@@ -96,14 +96,28 @@ export type RestaurantType = {
   images: string | null;
   vat: number;
   domain: string;
-  score: ScoreType;
+  score: ScoreType | null;
   plan: string;
   subscriptionId: string;
   subscriptionEndDate: string;
   subscriptionStartDate: string;
 };
 
-export interface RestaurantsResponse extends IResponse<RestaurantType[]> {
+export type PagerType = {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  prevPage: boolean;
+  nextPage: string | false;
+};
+
+export type RestaurantsData = {
+  pager: PagerType;
+  restaurants: RestaurantType[];
+};
+
+export interface RestaurantsResponse extends IResponse<RestaurantsData> {
   statusCode: number;
 }