added join channel function

src/components/channels/browseChannelItem.tsx

@@ -3,20 +3,37 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useRouter } from 'next/router';
+import { useCallback } from 'react';
 
 export const BrowseChannelItem = ({ data }: { data: any }) => {
   const router = useRouter();
   const channel = JSON.parse(data.content);
 
-  const openChannel = (id) => {
-    router.push({
-      pathname: '/channels/[id]',
-      query: { id: id },
-    });
-  };
+  const openChannel = useCallback(
+    (id: string) => {
+      router.push({
+        pathname: '/channels/[id]',
+        query: { id: id },
+      });
+    },
+    [router]
+  );
+
+  const joinChannel = useCallback(
+    async (id: string) => {
+      const { updateChannel } = await import('@utils/bindings');
+      updateChannel({ event_id: id, active: true })
+        .then(() => openChannel(id))
+        .catch(console.error);
+    },
+    [openChannel]
+  );
 
   return (
-    <div onClick={() => openChannel(data.eventId)} className="flex items-center gap-2 px-3 py-2 hover:bg-zinc-950">
+    <div
+      onClick={() => openChannel(data.eventId)}
+      className="group relative flex items-center gap-2 border-b border-zinc-800 px-3 py-2.5 hover:bg-black/20"
+    >
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md border border-white/10">
         <ImageWithFallback
           src={channel.picture || DEFAULT_AVATAR}
@@ -29,6 +46,14 @@ export const BrowseChannelItem = ({ data }: { data: any }) => {
         <span className="truncate font-medium leading-tight text-zinc-200">{channel.name}</span>
         <span className="text-sm leading-tight text-zinc-400">{channel.about}</span>
       </div>
+      <div className="absolute right-2 top-1/2 hidden -translate-y-1/2 transform group-hover:inline-flex">
+        <button
+          onClick={() => joinChannel(data.eventId)}
+          className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Join
+        </button>
+      </div>
     </div>
   );
 };

src/components/channels/channelList.tsx

@@ -1,9 +1,24 @@
+import { ChannelListItem } from '@components/channels/channelListItem';
 import { CreateChannelModal } from '@components/channels/createChannelModal';
 
 import { GlobeIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 
 export default function ChannelList() {
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    const fetchChannels = async () => {
+      const { getActiveChannels } = await import('@utils/bindings');
+      return await getActiveChannels({ active: true });
+    };
+
+    fetchChannels()
+      .then((res) => setList(res))
+      .catch(console.error);
+  }, []);
+
   return (
     <div className="flex flex-col gap-px">
       <Link
@@ -17,6 +32,9 @@ export default function ChannelList() {
           <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>
         </div>
       </Link>
+      {list.map((item) => (
+        <ChannelListItem key={item.id} data={item} />
+      ))}
       <CreateChannelModal />
     </div>
   );

src/components/channels/channelListItem.tsx

@@ -0,0 +1,36 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useRouter } from 'next/router';
+
+export const ChannelListItem = ({ data }: { data: any }) => {
+  const router = useRouter();
+  const channel = JSON.parse(data.content);
+
+  const openChannel = (id: string) => {
+    router.push({
+      pathname: '/channels/[id]',
+      query: { id: id },
+    });
+  };
+
+  return (
+    <div
+      onClick={() => openChannel(data.eventId)}
+      className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
+    >
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
+        <ImageWithFallback
+          src={channel?.picture || DEFAULT_AVATAR}
+          alt={data.eventId}
+          fill={true}
+          className="rounded object-cover"
+        />
+      </div>
+      <div>
+        <h5 className="truncate text-sm font-medium text-zinc-400">{channel.name}</h5>
+      </div>
+    </div>
+  );
+};