refactor: enhance representation info fetching and pass it to relevant components
This commit is contained in:
@@ -2,6 +2,8 @@ import Content from "@/components/panel/Content";
|
|||||||
import { defineAbilitiesFor } from "@/lib/ability";
|
import { defineAbilitiesFor } from "@/lib/ability";
|
||||||
import { getUser } from "@/lib/auth";
|
import { getUser } from "@/lib/auth";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
|
import { cookies } from "next/headers";
|
||||||
|
import { fetchReq } from "@/lib/req";
|
||||||
|
|
||||||
async function LayoutPanel({ children }) {
|
async function LayoutPanel({ children }) {
|
||||||
const user = await getUser();
|
const user = await getUser();
|
||||||
@@ -11,7 +13,34 @@ async function LayoutPanel({ children }) {
|
|||||||
return redirect("/");
|
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;
|
export default LayoutPanel;
|
||||||
|
|||||||
@@ -6,7 +6,9 @@ import { Button } from "@mui/material";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
function Head({ data, loading }) {
|
function Head({ data, loading, representationInfo }) {
|
||||||
|
const cityName = representationInfo?.city?.label || "اهواز";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full flex-col items-center justify-start">
|
<div className="flex w-full flex-col items-center justify-start">
|
||||||
<CircularLoading width={80} height={80} loading={loading}>
|
<CircularLoading width={80} height={80} loading={loading}>
|
||||||
@@ -23,7 +25,7 @@ function Head({ data, loading }) {
|
|||||||
<LocationP />
|
<LocationP />
|
||||||
<TextLoading width={55} height={16} loading={loading}>
|
<TextLoading width={55} height={16} loading={loading}>
|
||||||
<p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
|
<p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
|
||||||
نماینده شهر اهواز
|
نماینده شهر {cityName}
|
||||||
</p>
|
</p>
|
||||||
</TextLoading>
|
</TextLoading>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,14 +2,14 @@ import Head from "./Head";
|
|||||||
import Date from "./Date";
|
import Date from "./Date";
|
||||||
import Activities from "./Activities";
|
import Activities from "./Activities";
|
||||||
|
|
||||||
function UserDetail({ data, loading }) {
|
function UserDetail({ data, loading, representationInfo }) {
|
||||||
return (
|
return (
|
||||||
<div className="hidden xl:flex min-w-[332px] h-full opacity-page">
|
<div className="hidden xl:flex min-w-[332px] h-full opacity-page">
|
||||||
<div
|
<div
|
||||||
className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
|
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"
|
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>
|
<span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px] dark:bg-[#343645]"></span>
|
||||||
<Date />
|
<Date />
|
||||||
<Activities data={data} loading={loading} />
|
<Activities data={data} loading={loading} />
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import UserDetail from "@/components/layoutPanel/userDetail";
|
|||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import BgGray from "@/components/layoutPanel/sidebar/BgGray";
|
import BgGray from "@/components/layoutPanel/sidebar/BgGray";
|
||||||
|
|
||||||
function Content({ children }) {
|
function Content({ children, representationInfo }) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const [active, setActive] = useState(false);
|
const [active, setActive] = useState(false);
|
||||||
const [open, setOpen] = useState(true);
|
const [open, setOpen] = useState(true);
|
||||||
@@ -32,8 +32,7 @@ function Content({ children }) {
|
|||||||
<main
|
<main
|
||||||
className={`
|
className={`
|
||||||
w-full transition-all duration-500 dark:bg-[#1F1D2B]
|
w-full transition-all duration-500 dark:bg-[#1F1D2B]
|
||||||
${
|
${pathname.includes("dashboard")
|
||||||
pathname.includes("dashboard")
|
|
||||||
? open
|
? 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%_-_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)]"
|
: "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
|
||||||
@@ -53,7 +52,11 @@ function Content({ children }) {
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
{pathname.includes("dashboard") && (
|
{pathname.includes("dashboard") && (
|
||||||
<UserDetail data={Information} loading={loading} />
|
<UserDetail
|
||||||
|
data={Information}
|
||||||
|
loading={loading}
|
||||||
|
representationInfo={representationInfo}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -123,4 +123,6 @@ export const request = {
|
|||||||
Authorization: "",
|
Authorization: "",
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
getRepresentationInfo: (uuid) =>
|
||||||
|
api.get(`api/v1/representation/${uuid}`, { requireAuth: true }),
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user