Rework store

src/views/CommunityView/CommunityView.tsx

@@ -1,35 +1,48 @@
-import type { Component } from "solid-js";
+import { createMemo, type Component } from "solid-js";
 import { Community } from "../../components/Community";
+import { state } from "../../store/state";
 
 const CommunityView: Component = () => {
-    const communitiesTest = [
-        {
-            id: "21",
-            communityName: "Community 1",
-            avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
-        },
-        {
-            id: "22",
-            communityName: "Gamer's Lair",
-            avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
-        },
-    ];
+    const communityIds = createMemo(() => {
+        const loggedUserId = state.user.loggedUserId;
+        if (!loggedUserId) {
+            return [];
+        }
+
+        const loggedUser = state.user.users[loggedUserId];
+        if (!loggedUser) {
+            return [];
+        }
+
+        return loggedUser.communities ?? [];
+    });
 
     const onCommunityClick = (id: string) => {
         console.log(id);
     };
 
+    const mapCommunity = (communityId: string) => {
+        const community = state.community.communities[communityId];
+        if (!community) {
+            return undefined;
+        }
+
+        return (
+            <Community
+                id={community.id}
+                name={community.name ?? ""}
+                avatar={
+                    "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp"
+                }
+                onCommunityClick={onCommunityClick}
+            />
+        );
+    };
+
     return (
         <div class="p-3 h-full">
             <div class="bg-stone-950 w-20 h-full rounded-full shadow-panel z-30 flex flex-col p-3 gap-3">
-                {communitiesTest.map((community) => (
-                    <Community
-                        id={community.id}
-                        name={community.communityName}
-                        avatar={community.avatar}
-                        onCommunityClick={onCommunityClick}
-                    />
-                ))}
+                {communityIds().map(mapCommunity)}
             </div>
         </div>
     );