update. added session token.

frontend/app/Auth.js

@@ -15,7 +15,7 @@ const Auth = ({
   setIsSignup,
   ws,
   status,
-  setSessionToken, // Added to handle session token
+  setSessionToken,
 }) => {
   const [usernameValid, setUsernameValid] = useState(false);
   const [passwordValid, setPasswordValid] = useState(false);

frontend/app/Sidebar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
 
@@ -10,6 +12,7 @@ export default function Sidebar({
 }) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [me, setMe] = useState('');
+  const [allChats, setAllChats] = useState([]);
 
   useEffect(() => {
     // Retrieve 'me' from localStorage
@@ -17,6 +20,17 @@ export default function Sidebar({
     if (storedMe) {
       setMe(storedMe);
     }
+
+    // Retrieve all chats stored in localStorage
+    const allKeys = Object.keys(localStorage);
+    const chats = allKeys.filter((key) => key !== 'me' && key !== 'sessionToken' && key !== 'ally-supports-cache').map((key) => {
+      return {
+        username: key,
+        chatData: JSON.parse(localStorage.getItem(key)),
+      };
+    });
+
+    setAllChats(chats);
   }, []);
 
   const toggleSidebar = () => {
@@ -27,8 +41,12 @@ export default function Sidebar({
     const query = e.target.value;
     setSearchQuery(query);
 
-    const servicesUrl = process.env.NEXT_PUBLIC_SERVICES_URL;
+    if (!query) {
+      setFilteredUsers([]); // No search query, show nothing in search results
+      return;
+    }
 
+    const servicesUrl = process.env.NEXT_PUBLIC_SERVICES_URL;
     if (!servicesUrl) {
       console.error('Environment variable NEXT_PUBLIC_SERVICES_URL is not defined.');
       return;
@@ -38,9 +56,10 @@ export default function Sidebar({
       try {
         const response = await fetch(`${servicesUrl}/search?query=${query}`);
         const data = await response.json();
-        setFilteredUsers(data);
+        setFilteredUsers(Array.isArray(data) ? data : []); // Ensure that filteredUsers is always an array
       } catch (error) {
         console.error('Error fetching search results:', error);
+        setFilteredUsers([]); // In case of error, clear filteredUsers
       }
     } else {
       setFilteredUsers([]);
@@ -95,45 +114,97 @@ export default function Sidebar({
           style={searchInputStyle}
         />
 
-        <ul style={{ listStyleType: 'none', padding: 0 }}>
-          {filteredUsers.map((recipient, index) => (
-            <li
-              key={index}
-              style={{
-                color: '#fff',
-                cursor: 'pointer',
-                marginBottom: '15px',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-              onClick={() => handleUserSelect(recipient)}
-            >
-              {/* Profile Picture */}
-              <div
+        <div style={{ marginBottom: '20px' }}>
+          {/* Display search results */}
+          {searchQuery && (
+            <div>
+              <h4 style={{ color: '#fff', marginBottom: '10px' }}>Search Results</h4>
+              <ul style={{ listStyleType: 'none', padding: 0 }}>
+                {Array.isArray(filteredUsers) && filteredUsers.map((recipient, index) => (
+                  <li
+                    key={index}
+                    style={{
+                      color: '#fff',
+                      cursor: 'pointer',
+                      marginBottom: '15px',
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                    onClick={() => handleUserSelect(recipient)}
+                  >
+                    {/* Profile Picture */}
+                    <div
+                      style={{
+                        width: '40px',
+                        height: '40px',
+                        position: 'relative',
+                        marginRight: '10px',
+                      }}
+                    >
+                      <Image
+                        src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
+                          recipient
+                        )}`}
+                        alt={`${recipient}'s avatar`}
+                        layout="fill"
+                        objectFit="cover"
+                        style={{ borderRadius: '50%' }}
+                      />
+                    </div>
+                    {/* Username */}
+                    <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
+                      {recipient} {recipient === me ? '(Me)' : ''}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        <div>
+          {/* Display localStorage chats */}
+          <h4 style={{ color: '#fff', marginBottom: '10px' }}>Chats</h4>
+          <ul style={{ listStyleType: 'none', padding: 0 }}>
+            {allChats.map((chat, index) => (
+              <li
+                key={index}
                 style={{
-                  width: '40px',
-                  height: '40px',
-                  position: 'relative',
-                  marginRight: '10px',
+                  color: '#fff',
+                  cursor: 'pointer',
+                  marginBottom: '15px',
+                  display: 'flex',
+                  alignItems: 'center',
                 }}
+                onClick={() => handleUserSelect(chat.username)}
               >
-                <Image
-                  src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
-                    recipient
-                  )}`}
-                  alt={`${recipient}'s avatar`}
-                  layout="fill"
-                  objectFit="cover"
-                  style={{ borderRadius: '50%' }}
-                />
-              </div>
-              {/* Username */}
-              <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
-                {recipient} {recipient === me ? '(Me)' : ''}
-              </span>
-            </li>
-          ))}
-        </ul>
+                {/* Profile Picture */}
+                <div
+                  style={{
+                    width: '40px',
+                    height: '40px',
+                    position: 'relative',
+                    marginRight: '10px',
+                  }}
+                >
+                  <Image
+                    src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
+                      chat.username
+                    )}`}
+                    alt={`${chat.username}'s avatar`}
+                    layout="fill"
+                    objectFit="cover"
+                    style={{ borderRadius: '50%' }}
+                  />
+                </div>
+                {/* Username */}
+                <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
+                  {chat.username} {chat.username === me ? '(Me)' : ''}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
     </>
   );

frontend/app/layout.js

@@ -16,7 +16,8 @@ export default function RootLayout({ children }) {
   const [searchQuery, setSearchQuery] = useState('');
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [isSignup, setIsSignup] = useState(false);
+  const [isSignup, setIsSignup] = useState('');
+  const [sessionToken, setSessionToken] = useState(''); // Initialize sessionToken state
 
   useEffect(() => {
     // Check if there's a valid session token in localStorage
@@ -52,6 +53,8 @@ export default function RootLayout({ children }) {
             setIsLoggedIn={setIsLoggedIn}
             isSignup={isSignup}
             setIsSignup={setIsSignup}
+            sessionToken={sessionToken} // Pass sessionToken down to WebSocketLayout
+            setSessionToken={setSessionToken} // Pass setSessionToken down to WebSocketLayout
           >
             {children}
           </WebSocketLayout>
@@ -82,6 +85,8 @@ function WebSocketLayout({
   setIsLoggedIn,
   isSignup,
   setIsSignup,
+  sessionToken,
+  setSessionToken, // Receive setSessionToken
   children,
 }) {
   const { ws, status } = useWebSocket();
@@ -103,6 +108,7 @@ function WebSocketLayout({
           setRecipientList(data.recipients || []);
           localStorage.setItem('me', username);
           localStorage.setItem('sessionToken', data.token); // Store session token
+          setSessionToken(data.token); // Update sessionToken state
         } else if (data.status === 'error') {
           setError(data.message);
           setIsLoading(false);
@@ -141,6 +147,7 @@ function WebSocketLayout({
             setIsSignup={setIsSignup}
             ws={ws}
             status={status}
+            setSessionToken={setSessionToken} // Pass setSessionToken to Auth
           />
         </div>
       )}

frontend/app/page.js

@@ -1,18 +1,30 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState, useEffect } from 'react';
 
 export default function ChatPage() {
+  const [me, setMe] = useState('');
+
+  useEffect(() => {
+    // Retrieve 'me' from localStorage because who doesn't like remembering things?
+    const storedMe = localStorage.getItem('me');
+    if (storedMe) {
+      setMe(storedMe);
+    } else {
+      console.warn("Hey, there's no 'me' in localStorage. Are you sure you're logged in?");
+    }
+  }, []);
+
   return (
-    <div style={{ width: "100%", padding: "20px", backgroundColor: "rgb(28, 28, 47)", minHeight: "100vh" }}>
+    <div style={{ width: '100%', padding: '20px', backgroundColor: 'rgb(28, 28, 47)', minHeight: '100vh' }}>
       <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%' }}>
         <div style={{ textAlign: 'center' }}>
-          <h1 style={{ color: "#4a4a4a", fontSize: "24px", marginBottom: "20px" }}>Welcome to Nexus</h1>
-          <p style={{ color: "#7d7d7d", fontSize: "16px", marginBottom: "20px" }}>
-            Open the sidebar to find and start conversations with your contacts.
+          <h1 style={{ color: '#4a4a4a', fontSize: '24px', marginBottom: '20px' }}>Welcome, {me || 'Stranger'} to Nexus!</h1>
+          <p style={{ color: '#7d7d7d', fontSize: '16px', marginBottom: '20px' }}>
+            Open the sidebar to find and start conversations with your contacts (or your future best friends).
           </p>
-          <div style={{ fontSize: "14px", color: "#aaa" }}>
-            <p>No chats selected yet. Choose a conversation from the sidebar.</p>
+          <div style={{ fontSize: '14px', color: '#aaa' }}>
+            <p>{me ? 'No chats selected yet. Choose a conversation from the sidebar to get started.' : 'Log in to start chatting!'}</p>
           </div>
         </div>
       </div>

frontend/app/u/[recipientusername]/page.js

@@ -13,8 +13,15 @@ export default function ChatPage() {
   const { ws } = useWebSocket();
 
   const [me, setMe] = useState("");
+  const [recipientExists, setRecipientExists] = useState(true);
   const router = useRouter(); // Hook to navigate
 
+  const servicesUrl = process.env.NEXT_PUBLIC_SERVICES_URL;
+  if (!servicesUrl) {
+    console.error('Environment variable NEXT_PUBLIC_SERVICES_URL is not defined.');
+    return;
+  }
+
   useEffect(() => {
     // Retrieve 'me' from localStorage
     const storedMe = localStorage.getItem("me");
@@ -31,16 +38,30 @@ export default function ChatPage() {
 
   useEffect(() => {
     if (recipient) {
-      const storedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
-      setChatLog(formatMessages(storedMessages));
+      // Check if recipient exists by making an API request to the server
+      const checkUserExistence = async () => {
+        try {
+          const response = await fetch(`${servicesUrl}/api/user/${recipient}`);
+          if (response.ok) {
+            setRecipientExists(true);
+            const storedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
+            setChatLog(formatMessages(storedMessages));
+          } else {
+            setRecipientExists(false);
+          }
+        } catch (error) {
+          console.error("Error checking user existence:", error);
+          setRecipientExists(false);
+        }
+      };
+      checkUserExistence();
     }
-  }, [recipient]);
+  }, [recipient, servicesUrl]);
 
   useEffect(() => {
     const interval = setInterval(() => {
       if (recipient) {
-        const updatedMessages =
-          JSON.parse(localStorage.getItem(recipient)) || [];
+        const updatedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
         setChatLog(formatMessages(updatedMessages));
       }
     }, 2000);
@@ -78,7 +99,8 @@ export default function ChatPage() {
   };
 
   const formatMessages = (messages) => {
-    return messages.map(formatMessage);
+    // Ensure that messages is an array before calling map
+    return Array.isArray(messages) ? messages.map(formatMessage) : [];
   };
 
   const formatMessage = (message) => {
@@ -103,152 +125,160 @@ export default function ChatPage() {
       }}
     >
       {recipient ? (
-        <>
-          {/* Chat Header */}
-          <div
-            style={{
-              backgroundColor: "#170f3f",
-              padding: "10px",
-              display: "flex",
-              alignItems: "center",
-              gap: "10px",
-              position: "relative",
-            }}
-          >
-            <Image
-              src={`https://ui-avatars.com/api/?name=${encodeURIComponent(
-                recipient
-              )}&background=random`}
-              alt={`${recipient}'s avatar`}
-              width={40}
-              height={40}
-              style={{ borderRadius: "50%", marginLeft: "40px" }}
-            />
-            <h1 style={{ margin: 0, fontSize: "20px" }}>
-              {recipient === me ? `${recipient} (Me)` : recipient}
-            </h1>
-
-            {/* Close Button */}
-            <button
-              onClick={handleCloseChat}
+        recipientExists ? (
+          <>
+            {/* Chat Header */}
+            <div
               style={{
-                position: "absolute",
-                right: "10px",
-                background: "transparent",
-                border: "none",
-                color: "#fff",
-                fontSize: "30px",
-                cursor: "pointer",
+                backgroundColor: "#170f3f",
+                padding: "10px",
+                display: "flex",
+                alignItems: "center",
+                gap: "10px",
+                position: "relative",
               }}
             >
-              &times;
-            </button>
-          </div>
+              <Image
+                src={`https://ui-avatars.com/api/?name=${encodeURIComponent(
+                  recipient
+                )}&background=random`}
+                alt={`${recipient}'s avatar`}
+                width={40}
+                height={40}
+                style={{ borderRadius: "50%", marginLeft: "40px" }}
+              />
+              <h1 style={{ margin: 0, fontSize: "20px" }}>
+                {recipient === me ? `${recipient} (Me)` : recipient}
+              </h1>
 
-          {/* Chat Log */}
-          <div
-            style={{
-              flex: 1,
-              overflowY: "auto",
-              padding: "20px",
-              backgroundColor: "#1c1c2f",
-              display: "flex",
-              flexDirection: "column",
-              gap: "10px",
-              borderTop: "1px solid #3d3d6b",
-            }}
-          >
-            {chatLog.map((entry, index) => (
-              <div
-                key={index}
+              {/* Close Button */}
+              <button
+                onClick={handleCloseChat}
                 style={{
-                  display: "flex",
-                  alignItems: "flex-end",
-                  flexDirection: entry.from === "You" ? "row-reverse" : "row",
-                  gap: "10px",
+                  position: "absolute",
+                  right: "10px",
+                  background: "transparent",
+                  border: "none",
+                  color: "#fff",
+                  fontSize: "30px",
+                  cursor: "pointer",
                 }}
               >
-                {/* Avatar */}
-                <Image
-                  src={
-                    entry.from === "You"
-                      ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
-                          me
-                        )}&background=random`
-                      : `https://ui-avatars.com/api/?name=${encodeURIComponent(
-                          recipient
-                        )}&background=random`
-                  }
-                  alt={`${entry.from}'s avatar`}
-                  width={30}
-                  height={30}
-                  style={{ borderRadius: "50%" }}
-                />
-
-                {/* Message */}
-                <div
-                  style={{
-                    backgroundColor:
-                      entry.from === "You" ? "#3b2e83" : "#3d446b",
-                    color: "#fff",
-                    padding: "10px",
-                    borderRadius: "10px",
-                    maxWidth: "70%",
-                    wordWrap: "break-word",
-                  }}
-                >
-                  <p style={{ margin: 0, fontWeight: "bold" }}>{entry.from}</p>
-                  <p style={{ margin: "5px 0" }}>{entry.message}</p>
-                  <small style={{ fontSize: "12px", color: "#a1a1c7" }}>
-                    {entry.timestamp}
-                  </small>
-                </div>
-              </div>
-            ))}
-          </div>
+                &times;
+              </button>
+            </div>
 
-          {/* Message Input */}
-          <div
-            style={{
-              backgroundColor: "#171927",
-              borderTop: "1px solid rgb(95, 38, 207)",
-              padding: "10px",
-              display: "flex",
-              gap: "10px",
-            }}
-          >
-            <input
-              type="text"
-              placeholder="Type your message..."
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
+            {/* Chat Log */}
+            <div
               style={{
                 flex: 1,
-                padding: "10px",
-                borderRadius: "5px",
-                border: "1px solid #4b2e83",
-                fontSize: "16px",
-                backgroundColor: "#2e2e4f",
-                color: "#fff",
+                overflowY: "auto",
+                padding: "20px",
+                backgroundColor: "#1c1c2f",
+                display: "flex",
+                flexDirection: "column",
+                gap: "10px",
+                borderTop: "1px solid #3d3d6b",
               }}
-            />
-            <button
-              onClick={handleSendMessage}
+            >
+              {chatLog.length > 0 ? (
+                chatLog.map((entry, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      display: "flex",
+                      alignItems: "flex-end",
+                      flexDirection: entry.from === "You" ? "row-reverse" : "row",
+                      gap: "10px",
+                    }}
+                  >
+                    {/* Avatar */}
+                    <Image
+                      src={
+                        entry.from === "You"
+                          ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
+                              me
+                            )}&background=random`
+                          : `https://ui-avatars.com/api/?name=${encodeURIComponent(
+                              recipient
+                            )}&background=random`
+                      }
+                      alt={`${entry.from}'s avatar`}
+                      width={30}
+                      height={30}
+                      style={{ borderRadius: "50%" }}
+                    />
+
+                    {/* Message */}
+                    <div
+                      style={{
+                        backgroundColor:
+                          entry.from === "You" ? "#3b2e83" : "#3d446b",
+                        color: "#fff",
+                        padding: "10px",
+                        borderRadius: "10px",
+                        maxWidth: "70%",
+                        wordWrap: "break-word",
+                      }}
+                    >
+                      <p style={{ margin: 0, fontWeight: "bold" }}>{entry.from}</p>
+                      <p style={{ margin: "5px 0" }}>{entry.message}</p>
+                      <small style={{ fontSize: "12px", color: "#a1a1c7" }}>
+                        {entry.timestamp}
+                      </small>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p>No messages yet</p>
+              )}
+            </div>
+
+            {/* Message Input */}
+            <div
               style={{
-                padding: "10px 20px",
-                backgroundColor: "#3b2e83",
-                color: "#fff",
-                border: "none",
-                borderRadius: "5px",
-                fontSize: "16px",
-                cursor: "pointer",
-                transition: "background-color 0.3s",
+                backgroundColor: "#171927",
+                borderTop: "1px solid rgb(95, 38, 207)",
+                padding: "10px",
+                display: "flex",
+                gap: "10px",
               }}
             >
-              Send
-            </button>
-          </div>
-        </>
+              <input
+                type="text"
+                placeholder="Type your message..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                style={{
+                  flex: 1,
+                  padding: "10px",
+                  borderRadius: "5px",
+                  border: "1px solid #4b2e83",
+                  fontSize: "16px",
+                  backgroundColor: "#2e2e4f",
+                  color: "#fff",
+                }}
+              />
+              <button
+                onClick={handleSendMessage}
+                style={{
+                  padding: "10px 20px",
+                  backgroundColor: "#3b2e83",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: "5px",
+                  fontSize: "16px",
+                  cursor: "pointer",
+                  transition: "background-color 0.3s",
+                }}
+              >
+                Send
+              </button>
+            </div>
+          </>
+        ) : (
+          <p>User does not exist.</p>
+        )
       ) : (
         <p>Loading recipient...</p>
       )}