Skip to content

Commit

Permalink
feat: add chat peer list (#147)
Browse files Browse the repository at this point in the history
fixes #21

Co-authored-by: Daniel N <2color@users.noreply.github.com>
  • Loading branch information
2color and 2color authored May 8, 2024
1 parent ba9c27c commit 6636f2b
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 134 deletions.
1 change: 0 additions & 1 deletion js-peer/blockies.d.ts

This file was deleted.

9 changes: 9 additions & 0 deletions js-peer/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion js-peer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
50 changes: 50 additions & 0 deletions js-peer/src/components/chat-peer-list.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
17 changes: 5 additions & 12 deletions js-peer/src/components/chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down Expand Up @@ -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) => (
Expand Down Expand Up @@ -194,6 +186,7 @@ export default function ChatContainer() {
</div>
</div>
</div>
<ChatPeerList />
</div>
</div>
)
Expand Down
46 changes: 18 additions & 28 deletions js-peer/src/components/message.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
}
92 changes: 0 additions & 92 deletions js-peer/src/components/room-list.tsx

This file was deleted.

0 comments on commit 6636f2b

Please sign in to comment.