feat: add chat peer list (#147)

fixes #21

Co-authored-by: Daniel N <[email protected]>

Author: 2color

js-peer/blockies.d.ts

@@ -10,7 +10,6 @@
     "@chainsafe/libp2p-gossipsub": "^13.0.0",
     "@chainsafe/libp2p-noise": "^15.0.0",
     "@chainsafe/libp2p-yamux": "^6.0.2",
-    "@download/blockies": "^1.0.3",
     "@headlessui/react": "^2.0.1",
     "@helia/delegated-routing-v1-http-api-client": "^3.0.1",
     "@heroicons/react": "^2.1.3",
@@ -32,6 +31,7 @@
     "libp2p": "^1.5.1",
     "next": "14.2.2",
     "react": "18.2.0",
+    "react-18-blockies": "^1.0.6",
     "react-dom": "18.2.0",
     "uint8arrays": "^5.0.3",
     "usehooks-ts": "^3.1.0",

js-peer/package-lock.json

@@ -0,0 +1,50 @@
+import { useLibp2pContext } from '@/context/ctx'
+import { CHAT_TOPIC } from '@/lib/constants'
+import React, { useEffect, useState } from 'react'
+import type { PeerId } from '@libp2p/interface'
+import Blockies from 'react-18-blockies'
+
+export function ChatPeerList() {
+  const { libp2p } = useLibp2pContext()
+  const [subscribers, setSubscribers] = useState<PeerId[]>([])
+
+  useEffect(() => {
+    const onSubscriptionChange = () => {
+      const subscribers = libp2p.services.pubsub.getSubscribers(CHAT_TOPIC)
+      setSubscribers(subscribers)
+    }
+    onSubscriptionChange()
+    libp2p.services.pubsub.addEventListener('subscription-change', onSubscriptionChange)
+    return () => {
+      libp2p.services.pubsub.removeEventListener('subscription-change', onSubscriptionChange)
+    }
+  }, [libp2p, setSubscribers])
+
+  return (
+    <div className="border-l border-gray-300 lg:col-span-1">
+      <h2 className="my-2 mb-2 ml-2 text-lg text-gray-600">Peers</h2>
+      <ul className="overflow-auto h-[32rem]">
+        {<Peer key={libp2p.peerId.toString()} peer={libp2p.peerId} self />}
+        {subscribers.map((p) => (
+          <Peer key={p.toString()} peer={p} self={false} />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function Peer({ peer, self }: { peer: PeerId; self: boolean }) {
+  return (
+    <li className="flex items-center px-3 py-2 text-sm transition duration-150 ease-in-out border-b border-gray-300 focus:outline-none">
+      <Blockies seed={peer.toString()} size={15} scale={3} className="rounded max-h-10 max-w-10" />
+      <div className="w-full pb-2">
+        <div className="flex justify-between">
+          <span className={`block ml-2 font-semibold ${self ? 'text-indigo-700-600' : 'text-gray-600'}`}>
+            {peer.toString().slice(-7)}
+            {self && ' (You)'}
+          </span>
+        </div>
+      </div>
+    </li>
+  )
+}

js-peer/package.json

@@ -5,6 +5,7 @@ import { ChatFile, ChatMessage, useChatContext } from '../context/chat-ctx'
 import { v4 as uuidv4 } from 'uuid'
 import { MessageComponent } from './message'
 import { forComponent } from '@/lib/logger'
+import { ChatPeerList } from './chat-peer-list'
 
 const log = forComponent('chat')
 
@@ -121,22 +122,13 @@ export default function ChatContainer() {
 
   return (
     <div className="container mx-auto">
-      <div className="min-w-full border rounded lg:grid lg:grid-cols-3">
-        {/* <RoomList /> */}
-        <div className="lg:col-span-3 lg:block">
+      <div className="min-w-full border rounded lg:grid lg:grid-cols-6">
+        <div className="lg:col-span-5 lg:block">
           <div className="w-full">
             <div className="relative flex items-center p-3 border-b border-gray-300">
-              {/* disable
-              <img
-                className="object-cover w-10 h-10 rounded-full"
-                src="https://github.com/achingbrain.png"
-                alt="username"
-              />
-              <span className="absolute w-3 h-3 bg-green-600 rounded-full left-10 top-3"></span> */}
-              <span className="text-3xl">💁🏽‍♀️💁🏿‍♂️</span>
               <span className="block ml-2 font-bold text-gray-600">Public Chat</span>
             </div>
-            <div className="relative w-full flex flex-col-reverse p-6 overflow-y-auto h-[40rem] bg-gray-100">
+            <div className="relative w-full flex flex-col-reverse p-3 overflow-y-auto h-[40rem] bg-gray-100">
               <ul className="space-y-2">
                 {/* messages start */}
                 {messageHistory.map(({ msg, fileObjectUrl, from, peerId }, idx) => (
@@ -194,6 +186,7 @@ export default function ChatContainer() {
             </div>
           </div>
         </div>
+        <ChatPeerList />
       </div>
     </div>
   )

js-peer/src/components/chat-peer-list.tsx

@@ -1,43 +1,33 @@
 import { useLibp2pContext } from '@/context/ctx'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { createIcon } from '@download/blockies'
 import { ChatMessage } from '@/context/chat-ctx'
+import Blockies from 'react-18-blockies'
 
-
-interface MessageProps extends ChatMessage { }
-
+interface MessageProps extends ChatMessage {}
 
 export function MessageComponent({ msg, fileObjectUrl, from, peerId }: MessageProps) {
-  const msgref = React.useRef<HTMLLIElement>(null)
   const { libp2p } = useLibp2pContext()
 
-
-  useEffect(() => {
-    const icon = createIcon({
-      seed: peerId,
-      size: 15,
-      scale: 3,
-    })
-    icon.className = 'rounded mr-2 max-h-10 max-w-10'
-    const childrenCount = msgref.current?.childElementCount
-    // Prevent inserting an icon more than once.
-    if (childrenCount && childrenCount < 2) {
-      msgref.current?.insertBefore(icon, msgref.current?.firstChild)
-    }
-  }, [peerId])
-
   return (
-    <li ref={msgref} className={`flex ${from === 'me' ? 'justify-end' : 'justify-start'}`}>
-      <div
-
-        className="flex relative max-w-xl px-4 py-2 text-gray-700 rounded shadow bg-white"
-      >
+    <li className={`flex ${from === 'me' && 'flex-row-reverse'} gap-2`}>
+      <Blockies seed={peerId} size={15} scale={3} className="rounded max-h-10 max-w-10" />
+      <div className="flex relative max-w-xl px-4 py-2 text-gray-700 rounded shadow bg-white">
         <div className="block">
           {msg}
-          <p>{fileObjectUrl ? <a href={fileObjectUrl} target="_blank"><b>Download</b></a> : ""}</p>
-          <p className="italic text-gray-400">{peerId !== libp2p.peerId.toString() ? `from: ${peerId.slice(-4)}` : null} </p>
+          <p>
+            {fileObjectUrl ? (
+              <a href={fileObjectUrl} target="_blank">
+                <b>Download</b>
+              </a>
+            ) : (
+              ''
+            )}
+          </p>
+          <p className="italic text-gray-400">
+            {peerId !== libp2p.peerId.toString() ? `from: ${peerId.slice(-4)}` : null}{' '}
+          </p>
         </div>
       </div>
     </li>
   )
-}
+}