Adding search for friends

src/Friends/index.css

@@ -1,3 +1,9 @@
 #friends {
     background: rgba(255,255,255,.4);
+    padding: 0 2em;
+    input {
+        display: block;
+        width: 100%;
+        padding: 5px;
+    }
 }

src/Friends/index.tsx

@@ -1,7 +1,11 @@
 // Import FirebaseAuth and firebase.
+import React, { useState, useEffect, useCallback, ChangeEvent } from 'react';
 import * as firebaseui from 'firebaseui';
 import StyledFirebaseAuth from '../StyledFirebaseAuth';
+
 import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import 'firebase/compat/database';
 import { useAuth } from '../AuthContext';
 import './index.css'
 
@@ -21,13 +25,59 @@ const uiConfig = {
     },
 };
 
-export default function Login({ show }: { show: boolean}) {
+export default function Login({ show }: { show: boolean }) {
+    const [chats, setChats] = useState<firebase.database.DataSnapshot[]>([]);
+    const [selectedChat, setSelectedChat] = useState<firebase.database.DataSnapshot | null>(null);
+    const [search, setSearch] = useState<string>('');
+
+    useEffect(() => {
+        const fetchChats = async () => {
+            const chatRef = firebase.database().ref('chats');
+            chatRef.on('value', (snapshot) => {
+                const chatArray: firebase.database.DataSnapshot[] = [];
+                snapshot.forEach((childSnapshot) => {
+                    chatArray.push(childSnapshot);
+                });
+                setChats(chatArray);
+            });
+        };
+
+        fetchChats();
+    }, []);
+
+    const handleChatClick = useCallback((chat: firebase.database.DataSnapshot) => {
+        setSelectedChat(chat);
+    }, []);
+
+    const onSearch = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+        setSearch(event.currentTarget.value);
+    }, []);
+
     const user = useAuth(); // Local signed-in state.
     if (!show) return null;
     return user ? (
         <div id="friends" className='modal'>
-            <pre>{JSON.stringify(user.uid)}</pre> <a onClick={() => firebase.auth().signOut()}>Sign-out</a>
-            <Friends />
+            <h1>Matches</h1>
+            <a onClick={() => firebase.auth().signOut()}>Sign-out: </a>
+            <span>{user.uid}</span>
+            <div id="chat">
+                <input type="search" placeholder="Search for Friends" onChange={onSearch} />
+                <ul>
+                    {chats.map((chat: firebase.database.DataSnapshot) => (
+                        <li key={chat.key} onClick={() => handleChatClick(chat)}>
+                            {chat.val().name}
+                        </li>
+                    ))}
+                </ul>
+                {selectedChat && (
+                    <div>
+                        <h2>{selectedChat.val().name}</h2>
+                        {selectedChat.val().messages.map((message: string, index: number) => (
+                            <p key={index}>{message}</p>
+                        ))}
+                    </div>
+                )}
+            </div>
         </div>
     ) : (
         <div id="friends" className='modal'>
@@ -37,42 +87,3 @@ export default function Login({ show }: { show: boolean}) {
         </div>
     );
 }
-
-import { useState } from 'react';
-// import firebase from 'firebase/compat/app';
-// import { useAuth } from '../AuthContext';
-import 'firebase/compat/database';
-// import './index.css';
-
-export function Friends() {
-    const user = useAuth();
-    const [chats, setChats] = useState<firebase.database.DataSnapshot>([]);
-    const [selectedChat, setSelectedChat] = useState<firebase.database.DataSnapshot | null>(null);
-
-    const handleChatClick = (chat: firebase.database.DataSnapshot) => {
-        setSelectedChat(chat);
-    };
-
-    return (
-        <div id="chat">
-            <h1>Friends</h1>
-            <ul>
-                {chats.map((chat: firebase.database.DataSnapshot) => (
-                    <li key={chat.key} onClick={() => handleChatClick(chat)}>
-                        {chat.val().name}
-                    </li>
-                ))}
-            </ul>
-
-            <h1>Conversation</h1>
-            {selectedChat && (
-                <div>
-                    <h2>{selectedChat.val().name}</h2>
-                    {selectedChat.val().messages.map((message: string, index: number) => (
-                        <p key={index}>{message}</p>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};

src/Toolbar.css

@@ -1,9 +1,8 @@
 #toolbar {
     gap: 5px;
 
-    a {
+    > a {
         font-weight: bold;
         font-size: 3em;
-        cursor: pointer;
     }
 }

src/index.css

@@ -35,6 +35,10 @@ body,
     inset #bfecf7 0 0 0 23px;
 }
 
+[onClick], a {
+  cursor: pointer;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;