persist username via localStorage and implement conditional profile layout badge

Author: jamallaqdiem

chat-app/client/src/App.tsx

@@ -3,8 +3,9 @@ import { type Message } from "./types/type";
 import FormInput from "./components/ChatInput";
 
 function App() {
+  const savedUsername = localStorage.getItem("chat_username") || "";
   const initialForm = {
-    username: "",
+    username: savedUsername,
     text: "",
   };
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -91,6 +92,10 @@ function App() {
 
   const handleFormChat = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    if (!formChat.username.trim() || !formChat.text.trim()) {
+      showNotification("Username and message cannot be empty!", "text-red-500");
+      return;
+    }
     try {
       const response = await fetch(`${port}/messages`, {
         method: "POST",
@@ -103,8 +108,8 @@ function App() {
       }
       showNotification("Message sent successfully!", "text-green-500");
       await arrayMessages();
-
-      setFormChat({ ...initialForm });
+      localStorage.setItem("chat_username", formChat.username);
+      setFormChat({ username: formChat.username, text: "" });
     } catch (err: unknown) {
       const errorMessage =
         err instanceof Error ? err.message : "An unknown error occurred";
@@ -216,6 +221,7 @@ function App() {
             onSubmit={handleFormChat}
             alert={alert}
             messageType={messageType}
+            isNameSaved={!!localStorage.getItem("chat_username")}
           />
         </div>
 

chat-app/client/src/components/ChatInput.tsx

@@ -9,6 +9,7 @@ interface FormInputProps {
   >;
   alert: string;
   messageType: string;
+  isNameSaved: boolean;
 }
 
 const FormInput = ({
@@ -17,6 +18,7 @@ const FormInput = ({
   setFormChat,
   messageType,
   alert,
+  isNameSaved,
 }: FormInputProps) => {
   return (
     <div className="w-full p-4 border-t border-slate-700 bg-slate-900">
@@ -28,16 +30,27 @@ const FormInput = ({
             {alert}
           </p>
         )}
-        <input
-          type="text"
-          placeholder="Enter your name.."
-          required
-          className="w-1/4 max-w-[150px] px-3 py-2 bg-slate-800 text-slate-100 border border-slate-600 rounded-lg outline-none focus:border-indigo-500 transition-all text-sm"
-          value={formChat.username}
-          onChange={(e) =>
-            setFormChat({ ...formChat, username: e.target.value })
-          }
-        />
+        {!isNameSaved ? (
+          <input
+            type="text"
+            placeholder="Enter your name.."
+            required
+            className="w-1/4 max-w-[150px] px-3 py-2 bg-slate-800 text-slate-100 border border-slate-600 rounded-lg outline-none focus:border-indigo-500 transition-all text-sm"
+            value={formChat.username}
+            onChange={(e) =>
+              setFormChat({ ...formChat, username: e.target.value })
+            }
+          />
+        ) : (
+          <div className="w-1/4 max-w-[150px] flex items-center space-x-1.5 text-xs text-slate-400 font-semibold px-2 py-2 bg-slate-800/60 border border-slate-700/50 rounded-lg truncate select-none">
+            <span className="w-2 h-2 min-w-[8px] bg-emerald-400 rounded-full animate-pulse" />
+            <span className="truncate">
+              User:{" "}
+              <strong className="text-emerald-400">{formChat.username}</strong>
+            </span>
+          </div>
+        )}
+
         <input
           type="text"
           placeholder="Start typing a message..."