Communities and channels

src/views/ChannelView/ChannelView.tsx

@@ -1,11 +1,83 @@
-import type { Component } from "solid-js";
+import { createEffect, createMemo, type Component } from "solid-js";
 import { CommunityView } from "../CommunityView";
+import { dispatch, state } from "../../store/state";
+import { CommunityActionTypes, ICommunity } from "../../store/community";
+import { ChannelActionTypes } from "../../store/channel";
+import { Channel } from "../../components/Channel";
+import { CommunityBar } from "../../components/CommunityBar";
 
 const ChannelView: Component = () => {
+    const channelIds = createMemo(() => {
+        const activeCommunityId = state.community.active;
+        if (!activeCommunityId) {
+            return [];
+        }
+
+        const community = state.community.communities[activeCommunityId];
+        if (!community) {
+            return [];
+        }
+
+        return community.channels ?? [];
+    });
+
+    const communityInfo = createMemo<ICommunity | undefined>(() => {
+        const activeCommunityId = state.community.active;
+        return state.community.communities[activeCommunityId];
+    });
+
+    createEffect(() => {
+        if (state.community.active) {
+            dispatch({
+                type: CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_START,
+                payload: state.community.active,
+            });
+        }
+    });
+
+    const onChannelClick = (id: string) => {
+        dispatch({
+            type: ChannelActionTypes.FETCH_CHANNEL_START,
+            payload: id,
+        });
+        dispatch({
+            type: ChannelActionTypes.SET_ACTIVE_CHANNEL,
+            payload: id,
+        });
+    };
+
+    const mapChannel = (channelId: string) => {
+        const channel = state.channel.channels[channelId];
+        if (!channel) {
+            return undefined;
+        }
+
+        return (
+            <Channel
+                id={channel.id}
+                name={channel.name ?? ""}
+                active={channel.id === state.channel.active}
+                onChannelClick={onChannelClick}
+            />
+        );
+    };
+
     return (
-        <div class="bg-stone-900 w-96 shadow-panel z-20">
+        <div class="flex flex-row bg-stone-900 w-80 shadow-panel z-20">
             <CommunityView />
-            <div></div>
+            <div class="h-full w-full relative">
+                <CommunityBar
+                    id={communityInfo()?.id}
+                    name={communityInfo()?.name}
+                    description={communityInfo()?.description}
+                    avatar={
+                        "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp"
+                    }
+                />
+                <ul class="h-full list flex flex-col p-2 gap-1 pt-18 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-gray-800">
+                    {channelIds().map(mapChannel)}
+                </ul>
+            </div>
         </div>
     );
 };