refactor: enhance representation info fetching and pass it to relevant components

2025-12-02 15:38:42 +03:30
parent e6cb27a714
commit 3ca69dcd0f
5 changed files with 51 additions and 15 deletions
@@ -2,6 +2,8 @@ import Content from "@/components/panel/Content";
 import { defineAbilitiesFor } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import { fetchReq } from "@/lib/req";

 async function LayoutPanel({ children }) {
  const user = await getUser();
@@ -11,7 +13,34 @@ async function LayoutPanel({ children }) {
    return redirect("/");
  }

-  return <Content children={children} />;
+  let representationInfo = null;
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+  try {
+    const cookieStore = cookies();
+    const userInfo = cookieStore.get("userInfo");
+    const accessToken = cookieStore.get("access_token");
+
+    if (userInfo && accessToken) {
+      const parsedUserInfo = JSON.parse(userInfo.value);
+      const representationUuid = parsedUserInfo?.representation_uuid;
+
+      if (representationUuid) {
+        representationInfo = await fetchReq(
+          `${API_URL}/api/v1/representation/${representationUuid}`,
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken.value}`,
+            },
+          }
+        );
+      }
+    }
+  } catch (error) {
+    console.error("Error fetching representation info:", error);
+  }
+
+  return <Content children={children} representationInfo={representationInfo} />;
 }

 export default LayoutPanel;
@@ -6,7 +6,9 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import React from "react";

-function Head({ data, loading }) {
+function Head({ data, loading, representationInfo }) {
+  const cityName = representationInfo?.city?.label || "اهواز";
+
  return (
    <div className="flex w-full flex-col items-center justify-start">
      <CircularLoading width={80} height={80} loading={loading}>
@@ -23,7 +25,7 @@ function Head({ data, loading }) {
        <LocationP />
        <TextLoading width={55} height={16} loading={loading}>
          <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
-            نماینده شهر اهواز
+            نماینده شهر {cityName}
          </p>
        </TextLoading>
      </div>
@@ -2,14 +2,14 @@ import Head from "./Head";
 import Date from "./Date";
 import Activities from "./Activities";

-function UserDetail({ data, loading }) {
+function UserDetail({ data, loading, representationInfo }) {
  return (
    <div className="hidden xl:flex min-w-[332px] h-full opacity-page">
      <div
        className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
        g-[#FFF] py-[40px] px-[16px] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
      >
-        <Head data={data} loading={loading} />
+        <Head data={data} loading={loading} representationInfo={representationInfo} />
        <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px] dark:bg-[#343645]"></span>
        <Date />
        <Activities data={data} loading={loading} />
@@ -8,7 +8,7 @@ import UserDetail from "@/components/layoutPanel/userDetail";
 import { usePathname } from "next/navigation";
 import BgGray from "@/components/layoutPanel/sidebar/BgGray";

-function Content({ children }) {
+function Content({ children, representationInfo }) {
  const pathname = usePathname();
  const [active, setActive] = useState(false);
  const [open, setOpen] = useState(true);
@@ -32,14 +32,13 @@ function Content({ children }) {
      <main
        className={`
          w-full transition-all duration-500 dark:bg-[#1F1D2B]
-          ${
-            pathname.includes("dashboard")
-              ? open
-                ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
-                : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
-              : open
-                ? "md:w-[calc(100%-243px)]"
-                : "md:w-[calc(100%-96px)]"
+          ${pathname.includes("dashboard")
+            ? open
+              ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
+              : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
+            : open
+              ? "md:w-[calc(100%-243px)]"
+              : "md:w-[calc(100%-96px)]"
          }
        `}
      >
@@ -53,7 +52,11 @@ function Content({ children }) {
        </section>
      </main>
      {pathname.includes("dashboard") && (
-        <UserDetail data={Information} loading={loading} />
+        <UserDetail
+          data={Information}
+          loading={loading}
+          representationInfo={representationInfo}
+        />
      )}
    </div>
  );
@@ -123,4 +123,6 @@ export const request = {
        Authorization: "",
      },
    }),
+  getRepresentationInfo: (uuid) =>
+    api.get(`api/v1/representation/${uuid}`, { requireAuth: true }),
 };