This commit is contained in:
@@ -9,14 +9,17 @@ import { MediaDto } from "@/interface/media";
|
|||||||
import { UserMetaCardProps } from "@/interface/user";
|
import { UserMetaCardProps } from "@/interface/user";
|
||||||
import { apiGetCurrentUser } from "@/service/auth";
|
import { apiGetCurrentUser } from "@/service/auth";
|
||||||
import { apiGetCurrentUserApplications, apiGetCurrentUserMedia } from "@/service/userService";
|
import { apiGetCurrentUserApplications, apiGetCurrentUserMedia } from "@/service/userService";
|
||||||
|
import { setUserData } from "@/store/features/userSlice";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
import { useDispatch } from "react-redux";
|
||||||
|
|
||||||
export default function Profile() {
|
export default function Profile() {
|
||||||
const [user, setUser] = useState<UserMetaCardProps | null>(null);
|
const [user, setUser] = useState<UserMetaCardProps | null>(null);
|
||||||
const [mediaData, setMediaData] = useState<MediaDto | null>(null);
|
const [mediaData, setMediaData] = useState<MediaDto | null>(null);
|
||||||
const [applications, setApplications] = useState<any[]>([]);
|
const [applications, setApplications] = useState<any[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchUser = async () => {
|
const fetchUser = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -24,11 +27,12 @@ export default function Profile() {
|
|||||||
const mediaResponse = await apiGetCurrentUserMedia();
|
const mediaResponse = await apiGetCurrentUserMedia();
|
||||||
const userApplications = await apiGetCurrentUserApplications();
|
const userApplications = await apiGetCurrentUserApplications();
|
||||||
|
|
||||||
console.log(userData);
|
console.log("user", userData);
|
||||||
|
|
||||||
if (userApplications?.data) {
|
if (userApplications?.data) {
|
||||||
setApplications(userApplications.data);
|
setApplications(userApplications.data);
|
||||||
}
|
}
|
||||||
|
dispatch(setUserData(userData.data));
|
||||||
|
|
||||||
setMediaData(mediaResponse);
|
setMediaData(mediaResponse);
|
||||||
setUser(userData);
|
setUser(userData);
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export default function GetUser() {
|
|||||||
const [user, setUser] = useState(null);
|
const [user, setUser] = useState(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchUser = async () => {
|
const fetchUser = async () => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -117,25 +117,21 @@ const AppSidebar: React.FC = () => {
|
|||||||
// Lấy data gốc từ Redux (không bị render lại vô cớ)
|
// Lấy data gốc từ Redux (không bị render lại vô cớ)
|
||||||
const rolesData = useSelector((state: RootState) => state.user.data?.roles);
|
const rolesData = useSelector((state: RootState) => state.user.data?.roles);
|
||||||
|
|
||||||
// Chỉ tạo mảng map mới khi rolesData thực sự thay đổi
|
|
||||||
const userRoles = useMemo(() => {
|
const userRoles = useMemo(() => {
|
||||||
return rolesData?.map((r: any) => r.name) || [];
|
return rolesData?.map((r: any) => r.name) || [];
|
||||||
}, [rolesData]);
|
}, [rolesData]);
|
||||||
|
|
||||||
// 2. Logic lọc Menu theo Role
|
|
||||||
const filterMenuByRole = useCallback((items: NavItem[]) => {
|
const filterMenuByRole = useCallback((items: NavItem[]) => {
|
||||||
return items
|
return items
|
||||||
.map((item) => ({
|
.map((item) => ({
|
||||||
...item,
|
...item,
|
||||||
subItems: item.subItems?.filter((sub) => {
|
subItems: item.subItems?.filter((sub) => {
|
||||||
if (!sub.roles) return true; // Ai cũng xem được nếu không định nghĩa role
|
if (!sub.roles) return true;
|
||||||
return sub.roles.some((role) => userRoles.includes(role));
|
return sub.roles.some((role) => userRoles.includes(role));
|
||||||
}),
|
}),
|
||||||
}))
|
}))
|
||||||
.filter((item) => {
|
.filter((item) => {
|
||||||
// Ẩn mục cha nếu nó yêu cầu role mà user không có
|
|
||||||
if (item.roles && !item.roles.some((role) => userRoles.includes(role))) return false;
|
if (item.roles && !item.roles.some((role) => userRoles.includes(role))) return false;
|
||||||
// Ẩn mục cha nếu các mục con đã bị lọc sạch (đối với menu dạng dropdown)
|
|
||||||
if (item.subItems && item.subItems.length === 0 && !item.path) return false;
|
if (item.subItems && item.subItems.length === 0 && !item.path) return false;
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
@@ -144,7 +140,6 @@ const AppSidebar: React.FC = () => {
|
|||||||
const filteredNavItems = useMemo(() => filterMenuByRole(ALL_NAV_ITEMS), [filterMenuByRole]);
|
const filteredNavItems = useMemo(() => filterMenuByRole(ALL_NAV_ITEMS), [filterMenuByRole]);
|
||||||
const filteredOthersItems = useMemo(() => filterMenuByRole(OTHERS_ITEMS), [filterMenuByRole]);
|
const filteredOthersItems = useMemo(() => filterMenuByRole(OTHERS_ITEMS), [filterMenuByRole]);
|
||||||
|
|
||||||
// --- State quản lý đóng mở Submenu ---
|
|
||||||
const [openSubmenu, setOpenSubmenu] = useState<{
|
const [openSubmenu, setOpenSubmenu] = useState<{
|
||||||
type: "main" | "others";
|
type: "main" | "others";
|
||||||
index: number;
|
index: number;
|
||||||
|
|||||||
Reference in New Issue
Block a user