feat: UI fixes, persist messages, set up cxn limit (#39)

Co-authored-by: Prithvi Shahi <[email protected]>

Author: maschad

package-lock.json

@@ -15,7 +15,6 @@
     "@heroicons/react": "^2.0.16",
     "@libp2p/bootstrap": "^6.0.0",
     "@libp2p/kad-dht": "^8.0.6",
-    "@libp2p/peer-id": "^2.0.1",
     "@libp2p/webrtc": "^1.1.2",
     "@libp2p/websockets": "^5.0.3",
     "@libp2p/webtransport": "^1.0.7",
@@ -24,9 +23,6 @@
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
-    "blockstore-core": "^3.0.0",
-    "datastore-core": "^8.0.4",
-    "datastore-level": "^9.0.4",
     "debug": "^4.3.4",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",

packages/frontend/package.json

@@ -3,17 +3,15 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { Message } from '@libp2p/interface-pubsub'
 import { CHAT_TOPIC } from '@/lib/constants'
 import { createIcon } from '@download/blockies'
+import { ChatMessage, useChatContext } from '../context/chat-ctx'
 
-interface ChatMessage {
-  msg: string
-  from: 'me' | 'other'
-  peerId: string
-}
 
-interface MessageProps extends ChatMessage {}
+interface MessageProps extends ChatMessage { }
 
 function Message({ msg, from, peerId }: MessageProps) {
   const msgref = React.useRef<HTMLLIElement>(null)
+  const { libp2p } = useLibp2pContext()
+
 
   useEffect(() => {
     const icon = createIcon({
@@ -33,17 +31,20 @@ function Message({ msg, from, peerId }: MessageProps) {
     <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"
+        className="flex relative max-w-xl px-4 py-2 text-gray-700 rounded shadow bg-white"
       >
-        <span className="block">{msg}</span>
+        <div className="block">
+          {msg}
+          <p className="italic text-gray-400">{peerId !== libp2p.peerId.toString() ? `from: ${peerId.slice(-4)}` : null} </p>
+        </div>
       </div>
     </li>
   )
 }
 
 export default function ChatContainer() {
   const { libp2p } = useLibp2pContext()
-  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const { messageHistory, setMessageHistory } = useChatContext();
   const [input, setInput] = useState<string>('')
 
   // Effect hook to subscribe to pubsub events and update the message state hook
@@ -57,7 +58,7 @@ export default function ChatContainer() {
 
       // Append signed messages, otherwise discard
       if (evt.detail.type === 'signed') {
-        setMessages([...messages, { msg, from: 'other', peerId: evt.detail.from.toString() }])
+        setMessageHistory([...messageHistory, { msg, from: 'other', peerId: evt.detail.from.toString() }])
       }
     }
 
@@ -68,7 +69,7 @@ export default function ChatContainer() {
       // libp2p.pubsub.unsubscribe(CHAT_TOPIC)
       libp2p.pubsub.removeEventListener('message', messageCB)
     }
-  }, [libp2p, messages, setMessages])
+  }, [libp2p, messageHistory, setMessageHistory])
 
   const sendMessage = useCallback(async () => {
     if (input === '') return
@@ -89,9 +90,9 @@ export default function ChatContainer() {
 
     const myPeerId = libp2p.peerId.toString()
 
-    setMessages([...messages, { msg: input, from: 'me', peerId: myPeerId }])
+    setMessageHistory([...messageHistory, { msg: input, from: 'me', peerId: myPeerId }])
     setInput('')
-  }, [input, messages, setInput, libp2p])
+  }, [input, messageHistory, setInput, libp2p, setMessageHistory])
 
   const handleKeyUp = useCallback(
     async (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -136,10 +137,10 @@ export default function ChatContainer() {
                 Public Chat
               </span>
             </div>
-            <div className="relative w-full p-6 overflow-y-auto h-[40rem]">
+            <div className="relative w-full p-6 overflow-y-auto h-[40rem] bg-gray-100">
               <ul className="space-y-2">
                 {/* messages start */}
-                {messages.map(({ msg, from, peerId }, idx) => (
+                {messageHistory.map(({ msg, from, peerId }, idx) => (
                   <Message key={idx} msg={msg} from={from} peerId={peerId} />
                 ))}
                 {/* messages end */}
@@ -156,9 +157,9 @@ export default function ChatContainer() {
                   stroke="currentColor"
                 >
                   <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
@@ -172,9 +173,9 @@ export default function ChatContainer() {
                   stroke="currentColor"
                 >
                   <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
                   />
                 </svg>
@@ -199,9 +200,9 @@ export default function ChatContainer() {
                   stroke="currentColor"
                 >
                   <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                   />
                 </svg>
@@ -233,9 +234,9 @@ export function RoomList() {
             <svg
               fill="none"
               stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
               viewBox="0 0 24 24"
               className="w-6 h-6 text-gray-300"
             >

packages/frontend/src/components/chat.tsx

@@ -5,12 +5,6 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 
-const user = {
-  name: 'Juan Benet',
-  email: '[email protected]',
-  imageUrl: 'https://github.com/achingbrain.png',
-}
-
 const navigationItems = [
   { name: 'Connecting to a Peer', href: '/' },
   { name: 'Chat', href: '/chat' },
@@ -42,16 +36,6 @@ export default function Navigation() {
                     height="46"
                     width="46"
                   />
-                  {/* <img
-                    className="block h-12 w-auto lg:hidden"
-                    src="/libp2p-logo.svg"
-                    alt="Your Company"
-                  />
-                  <img
-                    className="hidden h-12 w-auto lg:block"
-                    src="/libp2p-logo.svg"
-                    alt="Your Company"
-                  /> */}
                 </div>
                 <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
                   {navigationItems.map((item) => (
@@ -161,44 +145,6 @@ export default function Navigation() {
                 </Link>
               ))}
             </div>
-            <div className="border-t border-gray-200 pt-4 pb-3">
-              <div className="flex items-center px-4">
-                <div className="flex-shrink-0">
-                  <img
-                    className="h-10 w-10 rounded-full"
-                    src={user.imageUrl}
-                    alt=""
-                  />
-                </div>
-                <div className="ml-3">
-                  <div className="text-base font-medium text-gray-800">
-                    {user.name}
-                  </div>
-                  <div className="text-sm font-medium text-gray-500">
-                    {user.email}
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                  <span className="sr-only">View notifications</span>
-                  <BellIcon className="h-6 w-6" aria-hidden="true" />
-                </button>
-              </div>
-              {/* <div className="mt-3 space-y-1">
-                {userNavigation.map((item) => (
-                  <Disclosure.Button
-                    key={item.name}
-                    as="a"
-                    href={item.href}
-                    className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-                  >
-                    {item.name}
-                  </Disclosure.Button>
-                ))}
-              </div> */}
-            </div>
           </Disclosure.Panel>
         </>
       )}