get groups

src/views/home/groups/Groups.tsx

@@ -1,68 +1,84 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { SecondaryButton } from "../../../components/button/SecondaryButton";
 import { cn } from "../../../lib/cn";
-import { useAppDispatch } from "../../../redux/hooks";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import GroupsBlock from "./GroupsBlock";
 import { setMenuActivePage } from "../../../redux/slices/store";
-
-
-export interface Group {
-    id: number;
-    role: "menager" | "member" | "owner" | "viewer";
-    visible: boolean;
-    name: string;
-}
-
+import { fetchMyGroups } from "../../../redux/slices/groups";
 
 const Groups = () => {
-
     const dispatch = useAppDispatch();
 
-    const groups: Group[] = [
-        { id: 1, role: "owner", name: "Main Administration", visible: true },
-        { id: 2, role: "menager", name: "Project Managers", visible: true },
-        { id: 3, role: "member", name: "Developers", visible: true },
-        { id: 4, role: "viewer", name: "QA Viewers", visible: true },
-        { id: 5, role: "member", name: "Design Team", visible: true },
-        { id: 6, role: "owner", name: "Executive Board", visible: true },
-        { id: 7, role: "menager", name: "HR Managers", visible: true },
-        { id: 8, role: "viewer", name: "Marketing Reviewers", visible: false },
-        { id: 9, role: "member", name: "Content Creators", visible: false },
-        { id: 10, role: "menager", name: "Support Managers", visible: true },
-        { id: 11, role: "viewer", name: "External Auditors", visible: false },
-        { id: 12, role: "member", name: "Frontend Developers", visible: true },
-        { id: 13, role: "member", name: "Backend Developers", visible: true },
-        { id: 14, role: "viewer", name: "Guest Access", visible: false },
-        { id: 15, role: "menager", name: "Operations", visible: true },
-    ];
+    // Берём группы из стора
+    const groups = useAppSelector((store) => store.groups.groups);
+
+    // Берём текущего пользователя
+    const currentUserName = useAppSelector((store) => store.auth.username);
 
     useEffect(() => {
-        dispatch(setMenuActivePage("groups"))
-    }, []);
+        dispatch(setMenuActivePage("groups"));
+        dispatch(fetchMyGroups())
+    }, [dispatch]);
+
+    // Разделяем группы
+    const { managedGroups, currentGroups, hiddenGroups } = useMemo(() => {
+        if (!groups || !currentUserName) {
+            return { managedGroups: [], currentGroups: [], hiddenGroups: [] };
+        }
+
+        const managed: typeof groups = [];
+        const current: typeof groups = [];
+        const hidden: typeof groups = []; // пока пустые, без логики
+
+        groups.forEach((group) => {
+            const me = group.members.find((m) => m.username === currentUserName);
+            if (!me) return;
+
+            if (me.role === "Administrator") {
+                managed.push(group);
+            } else {
+                current.push(group);
+            }
+        });
+
+        return { managedGroups: managed, currentGroups: current, hiddenGroups: hidden };
+    }, [groups, currentUserName]);
 
     return (
-        <div className=" h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
+        <div className="h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
             <div className="h-full box-border">
-
                 <div className="relative flex items-center mb-[20px]">
-                    <div className={cn("h-[50px] text-[40px] font-bold text-liquid-white flex items-center")}>
+                    <div
+                        className={cn(
+                            "h-[50px] text-[40px] font-bold text-liquid-white flex items-center"
+                        )}
+                    >
                         Группы
                     </div>
                     <SecondaryButton
-                        onClick={() => { }}
+                        onClick={() => {}}
                         text="Создать группу"
                         className="absolute right-0"
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]">
+                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
 
-                </div>
-
-
-                <GroupsBlock className="mb-[20px]" title="Управляемые" groups={groups.filter((v) => v.visible && (v.role == "owner" || v.role == "menager"))} />
-                <GroupsBlock className="mb-[20px]" title="Текущие" groups={groups.filter((v) => v.visible && (v.role == "member" || v.role == "viewer"))} />
-                <GroupsBlock className="mb-[20px]" title="Скрытые" groups={groups.filter((v) => v.visible == false)} />
+                <GroupsBlock
+                    className="mb-[20px]"
+                    title="Управляемые"
+                    groups={managedGroups}
+                />
+                <GroupsBlock
+                    className="mb-[20px]"
+                    title="Текущие"
+                    groups={currentGroups}
+                />
+                <GroupsBlock
+                    className="mb-[20px]"
+                    title="Скрытые"
+                    groups={hiddenGroups} // пока пусто
+                />
             </div>
         </div>
     );