├── .gitignore
├── backend
    ├── .gitignore
    ├── Procfile
    ├── router.js
    ├── package.json
    └── index.js
├── mobilePreview.png
├── webSitePreview.png
├── .idea
    ├── .gitignore
    ├── modules.xml
    └── chatapp.iml
├── frontend
    ├── src
    │   ├── components
    │   │   ├── index.js
    │   │   ├── Messages
    │   │   │   ├── MessagingBox.js
    │   │   │   ├── MessagingHeader.js
    │   │   │   ├── MessagingFooter.js
    │   │   │   └── Messages.js
    │   │   ├── ChatsBox
    │   │   │   └── ChatsBox.js
    │   │   └── Login.js
    │   ├── index.js
    │   ├── index.css
    │   ├── App.js
    │   └── context
    │   │   └── MessagesContext.js
    ├── .gitignore
    ├── public
    │   └── index.html
    └── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | 


--------------------------------------------------------------------------------
/backend/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/backend/Procfile:
--------------------------------------------------------------------------------
1 | web: node index.js
2 | 


--------------------------------------------------------------------------------
/mobilePreview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusufdeepwork/chatapp/HEAD/mobilePreview.png


--------------------------------------------------------------------------------
/webSitePreview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusufdeepwork/chatapp/HEAD/webSitePreview.png


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | 


--------------------------------------------------------------------------------
/frontend/src/components/index.js:
--------------------------------------------------------------------------------
1 | import ChatsBox from './ChatsBox/ChatsBox';
2 | import MessagingBox from './Messages/MessagingBox';
3 | import Login from './Login';
4 | 
5 | export { ChatsBox, MessagingBox, Login };
6 | 


--------------------------------------------------------------------------------
/backend/router.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const router = express.Router();
3 | 
4 | router.get("/", (req, res) => {
5 |     res.send({ response: "Server is up and running." }).status(200);
6 | });
7 | // router
8 | module.exports = router;
9 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/chatapp.iml" filepath="$PROJECT_DIR$/.idea/chatapp.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import ChatAppProvider from './context/MessagesContext';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <ChatAppProvider>
10 |       <App />
11 |     </ChatAppProvider>
12 |   </React.StrictMode>,
13 |   document.getElementById('root'),
14 | );
15 | 


--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | 
12 | 
13 | # production
14 | /build
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # eslint
28 | .eslintrc.json
29 | 


--------------------------------------------------------------------------------
/.idea/chatapp.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Chat App
 2 | You can talk with  online users,
 3 | see all online users & enjoy chatting.
 4 | 
 5 | # Preview
 6 | ## Website Preview
 7 | ![Image of chat](webSitePreview.png)
 8 | ## Mobile Preview
 9 | ![Image of chat](mobilePreview.png)
10 | 
11 | ### Used Technologies
12 | ```React, Styled-Components, Nodejs, Express, Socketio```
13 | ### Deployment
14 | ```backend : heroku```
15 | ```frontend : netlify```
16 | 
17 | ### Thanks
18 | I was inspired: https://dribbble.com/shots/12765133-Chat-Dashboard-Amphi
19 | 


--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chatapp-server",
 3 |   "version": "1.0.0",
 4 |   "description": "chat app socket.io server",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node index.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [
11 |     "chat",
12 |     "app",
13 |     "socket.io"
14 |   ],
15 |   "author": "yusufdeepwork",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "cors": "^2.8.5",
19 |     "express": "^4.17.1",
20 |     "socket.io": "^4.1.2"
21 |   },
22 |   "devDependencies": {
23 |     "nodemon": "^2.0.7"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/backend/index.js:
--------------------------------------------------------------------------------
 1 | const app = require('express')();
 2 | const http = require('http').createServer(app);
 3 | const cors = require('cors');
 4 | const router = require('./router');
 5 | 
 6 | 
 7 | const socketIO = require('socket.io')(http,{
 8 |     cors: {
 9 |         origins: ['http://localhost:3000']
10 |     }
11 | });
12 | const port = process.env.PORT || 5555;
13 | 
14 | socketIO.on('connection', socket => {
15 |     socket.on('message', (props) => {
16 |         socketIO.emit('message',props);
17 |     })
18 |     socket.on('online', ({userName}) => {
19 |         socketIO.emit('online',{userName});
20 |     })
21 | })
22 | app.use(cors());
23 | app.use(router);
24 | 
25 | 
26 | 
27 | app.use(router);
28 | 
29 | http.listen(port, ()=> console.log("Chat app is running"));
30 | 
31 | 


--------------------------------------------------------------------------------
/frontend/src/components/Messages/MessagingBox.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from 'styled-components';
 3 | import MessagingHeader from './MessagingHeader';
 4 | import MessagingFooter from './MessagingFooter';
 5 | import Messages from './Messages';
 6 | 
 7 | const MessagingBox = () => (
 8 |   <MessagingBoxContainer>
 9 |     <MessagingHeader />
10 |     <Messages />
11 |     <MessagingFooter />
12 |   </MessagingBoxContainer>
13 | );
14 | export default MessagingBox;
15 | 
16 | const MessagingBoxContainer = styled.div`
17 |   display: flex;
18 |   flex-direction: column;
19 |   background-color: #f2f2f2;
20 |   justify-content: space-between;
21 |   align-items: center;
22 |   height: 100%;
23 |   width: 70%;
24 |   border-radius:  0 2rem 2rem 0;
25 |   @media screen and (max-width: 550px){
26 |     width: 70vw;
27 |     border-radius: 2rem;
28 |   }
29 | `;
30 | 


--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Message App"
10 |     />
11 | 
12 |     <title>React App</title>
13 |   </head>
14 |   <body>
15 |   <link rel="preconnect" href="https://fonts.gstatic.com">
16 |   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@397;500&display=swap" rel="stylesheet">
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 | 
20 |     <!--
21 |       This HTML file is a template.
22 |       If you open it directly in the browser, you will see an empty page.
23 | 
24 |       You can add webfonts, meta tags, or analytics to this file.
25 |       The build step will place the bundled scripts into the <body> tag.
26 | 
27 |       To begin the development, run `npm start` or `yarn start`.
28 |       To create a production bundle, use `npm run build` or `yarn build`.
29 |     -->
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import styled from 'styled-components';
 3 | import { ChatsBox, Login, MessagingBox } from './components';
 4 | import { MessagesContext } from './context/MessagesContext';
 5 | 
 6 | function App() {
 7 |   const { liveUser } = useContext(MessagesContext);
 8 | 
 9 |   return (
10 |     <ChatAppBody>
11 |       <ChatAppContainer>
12 |         <ChatsBox />
13 |         {liveUser.isLogin ? <MessagingBox /> : <Login />}
14 |       </ChatAppContainer>
15 |     </ChatAppBody>
16 |   );
17 | }
18 | 
19 | export default App;
20 | const ChatAppBody = styled.div`
21 |   display: flex;
22 |   height:100vh;
23 |   width: 100%;
24 |   background-color: #c2bcce;
25 |   justify-content: center;
26 |   align-items: center;
27 |   
28 | 
29 | ;
30 | `;
31 | const ChatAppContainer = styled.div`
32 |   display: flex;
33 |   height: 80%;
34 |   width: 70%;
35 |   border-radius: 2rem;
36 |   background-color: #f2f1f4;
37 |   justify-content: space-between;
38 |   align-items: center;
39 |   @media screen and (max-width: 550px){
40 |     justify-content: center;
41 |   }
42 | 
43 |   @media screen and (max-width: 750px){  
44 |     height: 95%;
45 |     width: 80%;
46 |   }
47 | `;
48 | 


--------------------------------------------------------------------------------
/frontend/src/context/MessagesContext.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState, useEffect } from 'react';
 2 | import io from 'socket.io-client';
 3 | 
 4 | export const MessagesContext = createContext(undefined, undefined);
 5 | const socket = io.connect('https://awesome-chatapp-socketio.herokuapp.com');
 6 | const ChatApp = ({ children }) => {
 7 |   const [allUserMessages, setAllUserMessages] = useState([]);
 8 |   const [onlineUsers, setOnlineUsers] = useState([]);
 9 |   const [liveUser, setLiveUser] = useState({ isLogin: false, loginUserName: '', loginUserId: '' });
10 | 
11 |   useEffect(() => {
12 |     socket.on('message', ({ messageContent, id, name }) => {
13 |       setAllUserMessages((prevState) => [...prevState, { messageContent, id, name }]);
14 |     });
15 |   }, []);
16 | 
17 |   useEffect(() => {
18 |     socket.on('online', ({ userName }) => {
19 |       setOnlineUsers((prevUsers) => [...prevUsers, { userName }]);
20 |     });
21 |   }, []);
22 | 
23 |   return (
24 |     <MessagesContext.Provider value={{
25 |       allUserMessages, setAllUserMessages, liveUser, setLiveUser, setOnlineUsers, onlineUsers,
26 |     }}
27 |     >
28 |       {children}
29 |     </MessagesContext.Provider>
30 |   );
31 | };
32 | export default ChatApp;
33 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-icons": "^4.2.0",
12 |     "react-scripts": "4.0.3",
13 |     "react-toastify": "^7.0.4",
14 |     "react-typical": "^0.1.3",
15 |     "socket.io-client": "^4.1.2",
16 |     "styled-components": "^5.3.0",
17 |     "web-vitals": "^1.0.1"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test",
23 |     "eject": "react-scripts eject"
24 |   },
25 |   "eslintConfig": {
26 |     "extends": [
27 |       "react-app",
28 |       "react-app/jest"
29 |     ]
30 |   },
31 |   "browserslist": {
32 |     "production": [
33 |       ">0.2%",
34 |       "not dead",
35 |       "not op_mini all"
36 |     ],
37 |     "development": [
38 |       "last 1 chrome version",
39 |       "last 1 firefox version",
40 |       "last 1 safari version"
41 |     ]
42 |   },
43 |   "devDependencies": {
44 |     "eslint": "^7.28.0",
45 |     "eslint-config-airbnb": "^18.2.1",
46 |     "eslint-config-react": "^1.1.7",
47 |     "eslint-plugin-import": "^2.23.4",
48 |     "eslint-plugin-jsx-a11y": "^6.4.1",
49 |     "eslint-plugin-react": "^7.24.0",
50 |     "eslint-plugin-react-hooks": "^4.2.0"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/frontend/src/components/ChatsBox/ChatsBox.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import styled from 'styled-components';
 3 | import { MessagesContext } from '../../context/MessagesContext';
 4 | 
 5 | const ChatsBox = () => {
 6 |   const { onlineUsers } = useContext(MessagesContext);
 7 |   return (
 8 |     <ChatsBoxContainer>
 9 |       <Header>Online Users</Header>
10 |       <OnlineUsers>{onlineUsers.map((user) => <OnlineUser>{` 👋 ${user.userName} `}</OnlineUser>)}</OnlineUsers>
11 |     </ChatsBoxContainer>
12 |   );
13 | };
14 | export default ChatsBox;
15 | 
16 | const ChatsBoxContainer = styled.div`
17 |   display: flex;
18 |   justify-content: space-between;
19 |   align-items: center;
20 |   flex-direction: column;
21 |   height: 100%;
22 |   width: 30%;
23 |   border-radius:  2rem 0 0 2rem;
24 |   border-right: #cecece 1px solid;
25 |   font-family:  'Quicksand', sans-serif;
26 | 
27 |   @media screen and (max-width: 550px){
28 |     display: none;
29 |     font-size: 10px;
30 |   }
31 |   @media screen and (max-width: 700px){
32 |     font-size: 10px;
33 |   }
34 | `;
35 | const Header = styled.div`
36 |   height: 8.9rem;
37 |   font-size: 30px;
38 |   display: flex;
39 |   justify-content: center;
40 |   align-items: center;
41 |   border-bottom: #cecece 1px solid;
42 |   width: 100%;
43 |   
44 |   @media screen and (max-width: 900px){
45 |     font-size: 20px;
46 |   }
47 | `;
48 | const OnlineUsers = styled.div`
49 |   display: flex;
50 |   flex-direction: column;
51 |   align-items: center;
52 |   width: 100%;
53 |   height: 100%;
54 | `;
55 | const OnlineUser = styled.div`
56 |   border-bottom: #cecece 1px solid;
57 |   display: flex;
58 |   text-align: center;
59 |   height: 4rem;
60 |   width: 100%;
61 |   font-size: 30px;
62 |   min-height: 4rem;
63 |   align-items: center;
64 |   justify-content: flex-start ;
65 |   padding-left:10px;
66 |   
67 |   :hover{
68 |     color: plum;
69 |   }
70 | 
71 |   @media screen and (max-width: 1000px){
72 |     font-size: 20px;
73 |   }
74 | `;
75 | 


--------------------------------------------------------------------------------
/frontend/src/components/Messages/MessagingHeader.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import styled from 'styled-components';
 3 | import Typical from 'react-typical';
 4 | import { MessagesContext } from '../../context/MessagesContext';
 5 | 
 6 | const MessagingHeader = () => {
 7 |   const { liveUser } = useContext(MessagesContext);
 8 |   const { loginUserName } = liveUser;
 9 | 
10 |   return (
11 |     <HeaderContainer>
12 |       <ProfileName>
13 |         {' '}
14 |         <Typical
15 |           steps={[`Welcome ${loginUserName} 👋`, 5000, 'Talk Everything', 2000,
16 |             'You can talk about : ', 3000,
17 |             ' birds🐦', 3000,
18 |             '🐈cats ', 3000,
19 |             '💐flowers', 3000,
20 |             'You can talk about everything🌱', 3000,
21 |           ]}
22 |           loop={Infinity}
23 |           wrapper="p"
24 |         />
25 | 
26 |       </ProfileName>
27 |       <Chatting />
28 |     </HeaderContainer>
29 |   );
30 | };
31 | export default MessagingHeader;
32 | 
33 | const HeaderContainer = styled.div`
34 |   display: flex;
35 |   align-items: center;
36 |   justify-content: center;
37 |   
38 |   height: 8rem;
39 |   width: 100%;
40 |   border-bottom: #cecece 1px solid;
41 |   @media screen and (max-width: 600px ){
42 |     height: 4rem;
43 |   }
44 |  
45 | `;
46 | // const ProfilePhoto = styled.img`
47 | //   object-fit: cover;
48 | //   margin-left: 3rem;
49 | //   border-radius: 2rem;
50 | //   width: 3rem;
51 | //   height: 3rem;
52 | // `;
53 | const ProfileName = styled.text`
54 |   font-size: 30px; 
55 |   text-align: center;
56 |   display: flex;
57 |   align-items: center;
58 |   justify-content: center;
59 |   font-family:  'Quicksand', sans-serif;
60 |   @media screen and (max-width: 600px ){
61 |     font-size: 17px;
62 |   }
63 | 
64 | `;
65 | const Chatting = styled.div`   
66 |   font-size: 25px;
67 |   text-align: center;
68 |   display: flex;
69 |   align-items: center;
70 |   justify-content: center;
71 |   font-family:  'Quicksand', sans-serif;
72 |   @media screen and (max-width: 600px ){
73 |     font-size: 17px;
74 |   }
75 | `;
76 | 


--------------------------------------------------------------------------------
/frontend/src/components/Messages/MessagingFooter.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useContext } from 'react';
 2 | import styled from 'styled-components';
 3 | import { FaTelegram } from 'react-icons/fa';
 4 | import io from 'socket.io-client';
 5 | import { ToastContainer, toast } from 'react-toastify';
 6 | import { MessagesContext } from '../../context/MessagesContext';
 7 | import 'react-toastify/dist/ReactToastify.css';
 8 | 
 9 | const socket = io.connect('https://awesome-chatapp-socketio.herokuapp.com');
10 | 
11 | const MessagingFooter = () => {
12 |   const { liveUser } = useContext(MessagesContext);
13 |   const [messageContent, setMessageContent] = useState();
14 |   const { loginUserId: id, loginUserName: name } = liveUser;
15 | 
16 |   const sendMessage = () => {
17 |     if (messageContent) {
18 |       socket.emit('message', { messageContent, id, name });
19 |       setMessageContent('');
20 |     } else {
21 |       toast.error('Please, type a message! ', {
22 |         position: 'top-right',
23 |         autoClose: 4000,
24 |         hideProgressBar: false,
25 |         closeOnClick: true,
26 |         pauseOnHover: true,
27 |         draggable: true,
28 |         progress: undefined,
29 |       });
30 |     }
31 |   };
32 | 
33 |   const handleEnter = (event) => (event.key === 'Enter' ? sendMessage() : null);
34 |   return (
35 |     <FooterContainer>
36 |       <MessageInput
37 |         value={messageContent}
38 |         onChange={(event) => setMessageContent(event.target.value)}
39 |         onKeyDown={handleEnter}
40 |         placeholder="type message here"
41 |       />
42 |       <SendIcon
43 |         size={45}
44 |         onClick={() => sendMessage()}
45 |       />
46 |       <ToastContainer
47 |         position="top-right"
48 |         autoClose={4000}
49 |         hideProgressBar={false}
50 |         newestOnTop={false}
51 |         closeOnClick
52 |         rtl={false}
53 |         pauseOnFocusLoss
54 |         draggable
55 |         pauseOnHover
56 |       />
57 |     </FooterContainer>
58 |   );
59 | };
60 | 
61 | export default MessagingFooter;
62 | 
63 | const FooterContainer = styled.div`
64 |   display: flex;
65 |   justify-content: center;
66 |   align-items: center;
67 |   height: 6rem;
68 |   width: 100%;
69 |   border-radius:  0 0 2rem 0;
70 |   border-top: #cecece 1px solid;
71 | `;
72 | 
73 | const MessageInput = styled.input`
74 |   font-family:  'Quicksand', sans-serif;
75 |   padding: 0 1rem;
76 |   width: 60%;
77 |   font-size: 20px;
78 |   height: 3rem;
79 |   outline: none;
80 |   border: none;
81 |   border-radius: 0.5rem;
82 |   
83 |   @media screen and (max-width: 550px){
84 |     margin-left: 10px;
85 |     padding: 0 0.5rem;
86 |     font-size: 15px;
87 |     height: 2rem;
88 |   }
89 | `;
90 | const SendIcon = styled(FaTelegram)`
91 |   cursor: pointer;
92 |   margin: 1rem;
93 |   color: #6c52a0;
94 | `;
95 | 


--------------------------------------------------------------------------------
/frontend/src/components/Messages/Messages.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useRef, useEffect } from 'react';
 2 | import styled from 'styled-components';
 3 | import { MessagesContext } from '../../context/MessagesContext';
 4 | 
 5 | const Messages = () => {
 6 |   const messagesRef = useRef(null);
 7 |   const { allUserMessages, liveUser } = useContext(MessagesContext);
 8 |   const { loginUserId } = liveUser;
 9 |   useEffect(() => {
10 |     if (messagesRef && messagesRef.current) {
11 |       const element = messagesRef.current;
12 |       element.scroll({
13 |         top: element.scrollHeight,
14 |         left: 0,
15 |         behavior: 'smooth',
16 |       });
17 |     }
18 |   }, [messagesRef, allUserMessages]);
19 |   return (
20 |     <MessagesContainer ref={messagesRef}>
21 |       {allUserMessages
22 |         .map((message) => (
23 |           <>
24 |             <MessageBox
25 |               own={loginUserId === message.id}
26 |             >
27 |               {message.messageContent}
28 |             </MessageBox>
29 |             <ProfileName own={loginUserId === message.id}>{message.name}</ProfileName>
30 |           </>
31 |         ))}
32 |     </MessagesContainer>
33 |   );
34 | };
35 | export default Messages;
36 | 
37 | const MessagesContainer = styled.div`
38 |   display: flex;
39 |   flex-direction: column;
40 |   justify-content: flex-start;
41 |   align-items: flex-start;
42 |   height: 50rem;
43 |   width: 100%;
44 |   font-family:  'Quicksand', sans-serif;
45 |   overflow: auto;
46 | `;
47 | const MessageBox = styled.text`
48 |   font-family:  'Quicksand', sans-serif;
49 |   height: 4rem;
50 |   display: flex;
51 |   justify-content: center;
52 |   align-items: center;
53 |   padding: 0 1rem;
54 |   border-radius:${({ own }) => (own ? '0.5rem 0.5rem 0 0.5rem' : '0.5rem 0.5rem 0.5rem 0')};
55 |   background-color: ${({ own }) => (own ? '#bbb6c6' : '#6c52a0')};
56 |   align-self: ${({ own }) => (own ? 'flex-end' : 'flex-start')};
57 |   color: ${({ own }) => (own ? null : '#f2f1f4')};
58 |   margin: 1rem 2rem;
59 |   text-align: center;
60 |   min-height: 4rem;
61 |  
62 |   animation-name: createMessage;
63 |   animation-duration: 1s;
64 |   @keyframes createMessage {
65 |     from {opacity: 0;}
66 |     to {opacity: 100%;}
67 |   }
68 |   
69 |   @media screen and (max-width: 1000px){
70 |     padding: 0 0.5rem;
71 |     margin: 0.5rem 1rem;
72 |     min-height: 3rem;
73 |   }
74 | `;
75 | const ProfileName = styled.text`
76 |   display: flex;
77 |   justify-content: center;
78 |   align-items: center;
79 |   align-self: ${({ own }) => (own ? 'flex-end' : 'flex-start')};
80 |   text-align: center;
81 |   margin: 0 1rem;
82 |   color: ${({ own }) => (own ? 'darkgray' : '#51348f')};;
83 |   font-size: 12px;
84 |   animation-name: createMessage;
85 |   animation-duration: 0.5s;
86 |   @keyframes createMessage {
87 |     from {opacity: 0;}
88 |     to {opacity: 100%;}
89 |   }
90 |   
91 | `;
92 | 


--------------------------------------------------------------------------------
/frontend/src/components/Login.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from 'react';
  2 | import styled from 'styled-components';
  3 | import { ToastContainer, toast } from 'react-toastify';
  4 | import { MessagesContext } from '../context/MessagesContext';
  5 | import 'react-toastify/dist/ReactToastify.css';
  6 | // eslint-disable-next-line import/order
  7 | import io from 'socket.io-client';
  8 | 
  9 | const socket = io.connect('https://awesome-chatapp-socketio.herokuapp.com');
 10 | 
 11 | const Login = () => {
 12 |   const { setLiveUser } = useContext(MessagesContext);
 13 |   const [newUserName, setNewUserName] = useState();
 14 |   const handleEnter = (event) => (event.key === 'Enter' ? addLiveUser() : null);
 15 | 
 16 |   const createLoginUser = () => {
 17 |     socket.emit('online', { userName: newUserName });
 18 |   };
 19 |   const addLiveUser = () => {
 20 |     if (newUserName) {
 21 |       setLiveUser((prevState) => ({
 22 |         ...prevState,
 23 |         loginUserName: newUserName,
 24 |         isLogin: true,
 25 |         loginUserId: (Math.random() * 100).toFixed(0),
 26 |       }));
 27 |       createLoginUser();
 28 |     } else {
 29 |       toast.error('Please, type a name!', {
 30 |         position: 'top-right',
 31 |         autoClose: 4000,
 32 |         hideProgressBar: false,
 33 |         closeOnClick: true,
 34 |         pauseOnHover: true,
 35 |         draggable: true,
 36 |         progress: undefined,
 37 |       });
 38 |     }
 39 |   };
 40 | 
 41 |   return (
 42 |     <LoginContainer>
 43 |       <LoginInput
 44 |         placeholder="enter your name"
 45 |         value={newUserName}
 46 |         onKeyDown={handleEnter}
 47 |         onChange={((event) => setNewUserName(event.target.value))}
 48 |       />
 49 | 
 50 |       {/* eslint-disable-next-line react/button-has-type */}
 51 |       <ToastContainer
 52 |         position="top-right"
 53 |         autoClose={4000}
 54 |         hideProgressBar={false}
 55 |         newestOnTop={false}
 56 |         closeOnClick
 57 |         rtl={false}
 58 |         pauseOnFocusLoss
 59 |         draggable
 60 |         pauseOnHover
 61 |       />
 62 |       <LoginButton onClick={() => addLiveUser()}>
 63 |         Login
 64 |       </LoginButton>
 65 |     </LoginContainer>
 66 |   );
 67 | };
 68 | export default Login;
 69 | const LoginContainer = styled.div`
 70 |   display: flex;
 71 |   flex-direction: column;
 72 |   justify-content: center;
 73 |   align-items: center;
 74 |   height: 100%;
 75 |   width: 70%;
 76 |   font-family:  'Quicksand', sans-serif;
 77 | `;
 78 | const LoginInput = styled.input`
 79 |   font-family: inherit;
 80 |   width: 60%;
 81 |   padding: 1rem;
 82 |   font-size: 30px;
 83 |   border: none;
 84 |   margin: 1rem;
 85 |   outline: inherit;
 86 |   :focus{
 87 |     border:#bbb6c6 solid 4px;
 88 |   }
 89 |   @media screen and (max-width: 800px){
 90 |     font-size: 20px;
 91 |   }
 92 |   @media screen and (max-width: 550px){
 93 |     width: 80%;
 94 |     font-size: 15px;
 95 |   }
 96 | `;
 97 | const LoginButton = styled.button`
 98 |   text-align: center;
 99 |   display: flex;
100 |   align-items: center;
101 |   justify-content: center;
102 |   font-family: inherit;
103 |   height: 3rem;
104 |   width: 15rem;
105 |   border-radius: 1rem;
106 |   font-size: 20px;
107 |  
108 |   margin: 1rem;
109 |   background-color: royalblue;
110 |   border: none;
111 |   color: lightcyan;
112 |   :hover{
113 |     cursor: pointer;
114 |     background-color: deepskyblue;
115 | 
116 |   }
117 |   @media screen and (max-width: 800px){
118 |     font-size: 15px;
119 |     width: 12rem;
120 |     height: 2rem;
121 |     padding: 0.5rem;
122 |     margin: 0.5rem;
123 |   }
124 |   @media screen and (max-width: 550px){
125 |     width: 40%;
126 |     font-size: 15px;
127 |   }
128 | `;
129 | 


--------------------------------------------------------------------------------