display channel members

src/app/channel/components/member.tsx

@@ -8,12 +8,12 @@ export function Member({ pubkey }: { pubkey: string }) {
 	return (
 		<>
 			{isError || isLoading ? (
-				<div className="h-8 w-8 animate-pulse rounded-md bg-zinc-800" />
+				<div className="h-7 w-7 animate-pulse rounded bg-zinc-800" />
 			) : (
 				<Image
-					className="inline-block h-8 w-8 rounded-md bg-white ring-2 ring-zinc-950 transition-all duration-150 ease-in-out"
+					className="inline-block h-7 w-7 rounded"
 					src={user?.image || DEFAULT_AVATAR}
-					alt={user?.pubkey || "user avatar"}
+					alt={pubkey}
 				/>
 			)}
 		</>

src/app/channel/components/members.tsx

@@ -1,13 +1,27 @@
 import { Member } from "@app/channel/components/member";
-import { useChannelMessages } from "@stores/channels";
-import { useEffect } from "react";
+import { getChannelUsers } from "@libs/storage";
+import useSWR from "swr";
+
+const fetcher = ([, id]) => getChannelUsers(id);
+
+export function ChannelMembers({ id }: { id: string }) {
+	const { data, isLoading }: any = useSWR(["channel-members", id], fetcher);
 
-export function ChannelMembers() {
 	return (
-		<div className="flex flex-wrap gap-1">
-			{[].map((member) => (
-				<Member key={member} pubkey={member} />
-			))}
+		<div className="mt-3">
+			<h5 className="border-b border-zinc-900 pb-1 font-semibold text-zinc-200">
+				Members
+			</h5>
+			<div className="mt-3 w-full flex flex-wrap gap-1.5">
+				{isLoading && <p>Loading...</p>}
+				{!data ? (
+					<p>Loading...</p>
+				) : (
+					data.map((member: { pubkey: string }) => (
+						<Member key={member.pubkey} pubkey={member.pubkey} />
+					))
+				)}
+			</div>
 		</div>
 	);
 }

src/app/channel/pages/index.page.tsx

@@ -112,7 +112,7 @@ export function Page() {
 				/>
 				<div className="p-3 flex flex-col gap-3">
 					<ChannelMetadata id={channelID} />
-					<ChannelMembers />
+					<ChannelMembers id={channelID} />
 				</div>
 			</div>
 		</div>

src/libs/storage.tsx

@@ -328,6 +328,14 @@ export async function getChannelMessages(channel_id: string) {
 	);
 }
 
+// get channel users
+export async function getChannelUsers(channel_id: string) {
+	const db = await connect();
+	return await db.select(
+		`SELECT DISTINCT pubkey FROM channel_messages WHERE channel_id = "${channel_id}";`,
+	);
+}
+
 // get all chats by pubkey
 export async function getChatsByPubkey(pubkey: string) {
 	const db = await connect();