-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fixes #21 Co-authored-by: Daniel N <2color@users.noreply.github.com>
- Loading branch information
Showing
7 changed files
with
83 additions
and
134 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ) | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.