edit message add classname

backend/app.js

@@ -10,8 +10,6 @@ const jwt = require('jsonwebtoken');
 const bcrypt = require('bcrypt');
 require('dotenv').config(); // add dotnv for config
 
-console.log(Message)
-
 
 const server = http.createServer(app);
 app.use(cors());

frontend/src/App.js

@@ -12,6 +12,6 @@ export default function App() {
         localStorage.setItem('token', store.getState().token)
     });
     
-    return token ? <ChatPage /> : <LoginForm/> // delete setToken after unmounted
+    return token ? <ChatPage /> : <LoginForm/>
 };
 

frontend/src/components/chatPage/ChatPage.js

@@ -139,8 +139,14 @@ export const ChatPage = () => {
                             </Avatar>   
                             <div 
                                 key={item._id}
+                                onClick = {(e) => {
+                                    if(e.target.className.includes('myMessage')){
+                                        e.currentTarget.className += ' editMessage' 
+                                    }
+                                }}
+
                                 className={ 
-                                (item.userName == user.userName)
+                                (item.userName ==user.userName)
                                 ? 
                                 'message myMessage' 
                                 :
@@ -168,7 +174,7 @@ export const ChatPage = () => {
                         </Box>
                             <MessageForm 
                                     data = {user} 
-                                    sendMessage = {(data) => {sendMessage(data, socket)}}>
+                                    sendMessage = {data => sendMessage(data, socket)}>
                             </MessageForm>
                         </Box>
 

frontend/src/components/chatPage/chatPage.scss

@@ -25,7 +25,12 @@
 .myMessage {
     align-self: flex-end;
     background-color: rgb(240, 231, 136);
+    cursor: pointer;
 }
+.editMessage{
+    background-color: rgb(31, 7, 75);
+}
+
 .messageBox { 
     display: flex;
     padding: 20px;

frontend/src/store.js

@@ -1,4 +1,3 @@
-// import {createStore} from 'redux';
 import reducer from './reducers/reducer';
 import thunk from 'redux-thunk';
 import { createStore, compose, applyMiddleware } from 'redux';