Redesign UI

dsleandro · Feb 24, 2021 · c8b5fd9 · c8b5fd9
1 parent 15eb0ed
commit c8b5fd9
Show file tree

Hide file tree

Showing 19 changed files with 741 additions and 525 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -1,2 +1,15 @@
-# chateAR
-A Java chat application with Spring Boot
+# ChateAR
+
+A Java chat application with Spring Boot, WebSockets and MongoDB. It has also a User Authentication with JWT.
+
+The UI is created with React.js
+
+## Screenshots
+
+### User Form
+
+![alt text](img/chatear_form.png)
+
+### Chat
+
+![alt text](img/chatear_chat.png)
diff --git a/chatear-ui/package.json b/chatear-ui/package.json
@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.5.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-stomp": "^5.0.0",
     "sockjs-client": "^1.5.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^1.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/chatear-ui/src/App.css b/chatear-ui/src/App.css
@@ -1,3 +1,4 @@
 .App{
-  height: 95vh;
+  height: 100vh;
+  overflow: hidden;
 }
diff --git a/chatear-ui/src/App.js b/chatear-ui/src/App.js
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { BrowserRouter as Router, Route } from "react-router-dom";
-import Signin from "./components/Signin";
-import Signup from "./components/Signup";
 import Chat from "./components/Chat";
 import { ActiveContacts, LogedIn, Messages } from "./context/AuthContext";
+import "./css/Chat.css";
+import "./css/FormsAuth.css";
 import "./App.css";
+import FormsAuth from './components/FormsAuth';
+
 
 export const AppContext = React.createContext();
 const App = () => {
@@ -21,8 +23,7 @@ const App = () => {
           <ActiveContacts.Provider value={{ activeContact, setActiveContact }}>
             <Messages.Provider value={{ messages, setMessages }}>
 
-              <Route path="/signup" exact component={Signup} />
-              <Route path="/signin" exact component={Signin} />
+              <Route path={["/login", "/signup"]} exact component={FormsAuth} />
               <Route exact path="/" component={Chat} />
 
             </Messages.Provider>

diff --git a/chatear-ui/src/components/Chat.js b/chatear-ui/src/components/Chat.js
@@ -4,41 +4,44 @@ import {
   countNewMessages,
   findChatMessages,
   getCurrentUser,
-} from "../util/ApiUtil";
+  getLastMessage,
+} from "../util/ApiRequest";
 import { useActivecontacts, useLogedIn, useMessages } from "../context/AuthContext";
-import "../css/Chat.css";
-import { PaperPlane, UserCircle } from "./Icons";
+import { PaperPlane, DotsMenu } from "./Icons";
+import Navbar from "./Navbar";
+import { Search, UserData, AppLogo } from "./UtilComponents";
 
 var stompClient = null;
-const Chat = (props) => {
+function Chat(props) {
+
   const currentUser = useLogedIn();
-  const [text, setText] = useState("");
-  const [contacts, setContacts] = useState([]);
   const aContact = useActivecontacts();
   const userMessages = useMessages();
+  const [text, setText] = useState("");
+  const [contacts, setContacts] = useState([]);
 
   useEffect(() => {
     if (localStorage.getItem("accessToken") === null) {
-      props.history.push("/signin");
+      props.history.push("/login");
     }
     getCurrentUser().then((res) => {
       currentUser.setUser(res);
     })
   }, []);
 
   useEffect(() => {
-    if (currentUser.user != null) {
+    if (currentUser.user != null && contacts.length === 0) {
       connect();
-      loadContacts();
+      handleLoadContacts();
     }
   }, [currentUser.user]);
 
   useEffect(() => {
-    if (aContact.activeContact === undefined) return;
-    findChatMessages(aContact.activeContact.id, currentUser.user.id).then((msgs) =>
-      userMessages.setMessages(msgs)
-    );
-    loadContacts();
+    if (aContact.activeContact !== undefined) {
+      findChatMessages(aContact.activeContact.id, currentUser.user.id).then((msgs) =>
+        userMessages.setMessages(msgs)
+      );
+    }
   }, [aContact.activeContact]);
 
   const connect = () => {
@@ -71,16 +74,16 @@ const Chat = (props) => {
         userMessages.setMessages(msgs)
       );
     }
-    loadContacts();
+    handleLoadContacts();
   };
 
-  const sendMessage = (msg) => {
+  const handleSendMessage = (msg) => {
     if (msg.trim() !== "") {
       const message = {
         senderId: currentUser.user.id,
         recipientId: aContact.activeContact.id,
-        senderName: currentUser.user.username,
-        recipientName: aContact.activeContact.username,
+        senderUsername: currentUser.user.username,
+        recipientUsername: aContact.activeContact.username,
         content: msg,
         timestamp: new Date(),
       };
@@ -92,124 +95,98 @@ const Chat = (props) => {
     }
   };
 
-  const loadContacts = () => {
-    const promise = getUsers().then((users) =>
+  const handleLoadContacts = () => {
 
-      users.map((contact) =>
-        countNewMessages(contact.id, currentUser.user.id).then((count) => {
-          contact.newMessages = count;
-          return contact;
-        })
-      )
-    );
+    getUsers().then((users) => {
+
+      users.map((contact) => {
+        countNewMessages(contact.id, currentUser.user.id).then(count => contact.newMessages = count)
 
-    promise.then((promises) =>
-      Promise.all(promises).then((users) => {
-        setContacts(users);
-        if (aContact.activeContact === undefined && users.length > 0) {
-          aContact.setActiveContact(users[0]);
-        }
+        getLastMessage(contact.id, currentUser.user.id).then(msg => contact.lastMessage = msg.content)
+
+        return contact;
       })
-    );
-  };
+      setContacts(users);
+    });
+  }
 
-  //save contact to get it when new message
-  const saveActiveContact = (contact) => {
+  const handleSaveActiveContact = (contact) => {
     aContact.setActiveContact(contact);
-    localStorage.setItem("activeContactId", contact.id);
+    localStorage.setItem("activeContactId", contact.id); //save contact to get it on new message
   }
 
-  const logout = () => {
-    localStorage.removeItem("accessToken");
-    localStorage.removeItem("activeContactId");
-    props.history.push("/signin");
-  };
-
   return (
-    <div id="base">
-      <div id="sidepanel">
-        <div id="profile" className="d-flex flex-row justify-content-around">
-          <div id="userProfile">
-            <UserCircle />
-            <p>{currentUser.user ? currentUser.user.username : null}</p>
-          </div>
-          {/*TODO: add User Profile component
-          
-           <span id="viewProfile">View Profile {'>'}</span> */}
-          <button id="logoutBtn" className="btn btn-primary" onClick={() => logout()}>Logout</button>
-        </div>
-        <div id="contacts">
-          <ul>
-            {contacts.map((contact) => (
-              <li
-                onClick={() => saveActiveContact(contact)}
-                className={
-                  aContact.activeContact && contact.id === aContact.activeContact.id
-                    ? "contact active"
-                    : "contact"
-                }
-                key={contact.id}
-              >
-                <div className="wrap">
-                  <UserCircle />
-                  <div className="meta">
-                    <p className="name">{contact.username}</p>
-                    {contact.newMessages !== undefined &&
-                      contact.newMessages > 0 && (
-                        <p className="preview">
-                          {contact.newMessages} new messages
-                        </p>
-                      )}
-                  </div>
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-
+    <div id="chat">
+      <Navbar history={props.history} user={currentUser.user ? currentUser.user : ""} />
+      <div id="contacts">
+        <div id="searchContainer"><Search /></div>
+        <ul>
+          {contacts.map((contact) => (
+            <li
+              onClick={() => handleSaveActiveContact(contact)}
+              className={
+                aContact.activeContact && contact.id === aContact.activeContact.id
+                  ? "contact active"
+                  : "contact"
+              }
+              key={contact.id}
+            >
+              <div className="ContactMessage">
+                <span><UserData user={contact} isContact={true} /></span>
+                {contact.newMessages !== undefined &&
+                  contact.newMessages > 0 && (
+                    <span className="newMessages">
+                      {contact.newMessages}
+                    </span>
+                  )}
+              </div>
+            </li>
+          ))}
+        </ul>
       </div>
-      <div className="content">
-        <div className="contact-profile">
-          <span><UserCircle /></span>
-          <p>{aContact.activeContact && aContact.activeContact.username}</p>
-        </div>
-        <div className="messages">
-          <ul>
-            {userMessages.messages !== undefined ? (userMessages.messages.map((msg) => (
-              <li key={msg.id} className={msg.senderId === currentUser.user.id ? "sent" : "replies"}>
-                {msg.senderId !== currentUser.user.id && (
-                  <UserCircle />
-                )}
-                <p>{msg.content}</p>
-              </li>
-            ))) : null}
-          </ul>
-        </div>
-        <div className="message-input">
-          <div className="wrap">
-            <input
-              name="user_input"
-              size="large"
-              placeholder="Type message..."
-              value={text}
-              onChange={(event) => setText(event.target.value)}
-              onKeyPress={(event) => {
-                if (event.key === "Enter") {
-                  sendMessage(text);
+
+      {aContact.activeContact !== undefined ?
+        (
+          <div className="content">
+            <div id="activeContactProfile">
+              <UserData user={aContact.activeContact && aContact.activeContact} />
+              <span className="dotsMenuIcon"><DotsMenu /></span>
+            </div>
+            <div className="messages">
+              <ul>
+                {userMessages.messages !== undefined ? (userMessages.messages.map((msg) => (
+                  <li key={msg.id} className={msg.senderId === currentUser.user.id ? "sent" : "replies"}>
+                    <p>{msg.content}</p>
+                  </li>
+                ))) : null}
+              </ul>
+            </div>
+            <div className="messageInput">
+              <input
+                type="text"
+                name="userInput"
+                size="large"
+                placeholder="Type message..."
+                value={text}
+                onChange={(event) => setText(event.target.value)}
+                onKeyPress={(event) => {
+                  if (event.key === "Enter") {
+                    handleSendMessage(text);
+                    setText("");
+                  }
+                }}
+              />
+
+              <button
+                onClick={() => {
+                  handleSendMessage(text);
                   setText("");
-                }
-              }}
-            />
-
-            <button
-              onClick={() => {
-                sendMessage(text);
-                setText("");
-              }}
-            > <PaperPlane /></button>
+                }}
+              > <PaperPlane /></button>
+            </div>
           </div>
-        </div>
-      </div>
+        ) :
+        <AppLogo />}
     </div>
   );
 };

diff --git a/chatear-ui/src/components/ErrorMessage.js b/chatear-ui/src/components/ErrorMessage.js