business page

src/pages/business/Business.tsx

@@ -0,0 +1,31 @@
+import GridWrapper from "@/components/GridWrapper";
+import CatalogueGridSkeleton from "@/pages/catalogue/components/CatalogueGridSkeleton";
+import CatalogueItem from "@/pages/catalogue/components/CatalogueItem";
+import { type FC } from "react";
+import { useParams } from "react-router-dom";
+import { useGetBusinessCatalog } from "./hooks/useBusinessData";
+
+const Business: FC = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const { data, isPending, refetch } = useGetBusinessCatalog(slug ?? "");
+
+  if (isPending) {
+    return (
+      <div className="w-full mt-5">
+        <CatalogueGridSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full mt-5">
+      <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
+        {data?.data?.map((item) => {
+          return <CatalogueItem refetch={refetch} key={item.id} item={item} />;
+        })}
+      </GridWrapper>
+    </div>
+  );
+};
+
+export default Business;

src/pages/business/hooks/useBusinessData.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/BusinessService";
+
+export const useGetBusinessCatalog = (slug: string) => {
+  return useQuery({
+    queryKey: ["businessCatalog", slug],
+    queryFn: () => api.getBusinessCatalog(slug),
+    enabled: !!slug,
+  });
+};
+
+export const useGetBusinessBySlug = (slug: string) => {
+  return useQuery({
+    queryKey: ["business", slug],
+    queryFn: () => api.getBusinessBySlug(slug),
+    enabled: !!slug,
+  });
+};

src/pages/business/service/BusinessService.ts

@@ -0,0 +1,14 @@
+import axios from "@/config/axios";
+import type { CatalogResponseType } from "@/pages/catalogue/types/Types";
+
+export const getBusinessCatalog = async (slug: string) => {
+  const { data } = await axios.get<CatalogResponseType>(
+    `/public/catalogue/business/slug/${slug}`,
+  );
+  return data;
+};
+
+export const getBusinessBySlug = async (slug: string) => {
+  const { data } = await axios.get(`/public/business/${slug}`);
+  return data;
+};