[finishes 187354275] chat on the App to ask for some information publ…

…icly
atlp-rwanda · May 14, 2024 · 7bdc1b8 · 7bdc1b8
1 parent 2117cb4
commit 7bdc1b8
Show file tree

Hide file tree

Showing 5 changed files with 230 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "pg-hstore": "^2.3.4",
     "randomstring": "^1.3.0",
     "sequelize": "^6.37.2",
+    "socket.io": "^4.7.5",
+    "socket.io-client": "^4.7.5",
     "swagger-ui-express": "^5.0.0",
     "uuid": "^9.0.1",
     "winston": "^3.13.0",
@@ -67,6 +69,7 @@
     "@types/passport-google-oauth20": "^2.0.14",
     "@types/randomstring": "^1.3.0",
     "@types/sequelize": "^4.28.20",
+    "@types/socket.io-client": "^3.0.0",
     "@types/supertest": "^6.0.2",
     "@types/swagger-jsdoc": "^6.0.4",
     "@types/swagger-ui-express": "^4.1.6",

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,199 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Socket.IO chat</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <style>
+        body {
+            margin: 0;
+            padding-bottom: 3rem;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                Helvetica, Arial, sans-serif;
+            background-color: white;
+        }
+
+        #great-container {
+            background-color: white;
+            position: relative;
+            margin: auto;
+            width: 50%;
+            border-bottom: none;
+            padding: 0.25rem;
+            box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.348);
+        }
+
+        #form {
+            background: rgba(51, 74, 178, 0.717);
+            padding: 0.25rem;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            height: 3rem;
+            box-sizing: border-box;
+            backdrop-filter: blur(10px);
+            width: 50%;
+            margin: auto;
+        }
+
+        #input {
+            border: none;
+            padding: 0 1rem;
+            flex-grow: 1;
+            border-radius: 2rem;
+            margin: 0.25rem;
+        }
+
+        #input:focus {
+            outline: none;
+        }
+
+        #form>button {
+            background: #fcfcfcc4;
+            border: none;
+            padding: 0 1rem;
+            margin: 0.25rem;
+            border-radius: 3px;
+            outline: none;
+            color: #000000;
+        }
+
+        #img {
+            width: 70px;
+            height: 70px;
+            border-radius: 50%;
+        }
+
+        #typingStatus {
+            color: rgb(54, 54, 253);
+        }
+
+        #profile-status {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            padding: 20px 0px;
+        }
+
+        #messages {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        #messages>li {
+            padding: 0.5rem 1rem;
+        }
+
+        .time,
+        .MyTime {
+            font-size: 13px;
+            max-width: 80%;
+            padding: 0.5rem 1rem;
+            white-space: nowrap;
+        }
+
+        .time {
+            color: blue;
+            margin-left: auto;
+        }
+
+        .MyTime {
+            color: white;
+        }
+
+        .mine {
+            background-color: rgba(2, 68, 167, 0.752);
+            color: white;
+            width: fit-content;
+            margin-bottom: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            margin-left: auto;
+        }
+
+        #typingStatus {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #377b37;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 5px;
+        }
+
+        .Others {
+            background-color: rgba(211, 211, 211, 0.752);
+            color: black;
+            width: fit-content;
+            margin-bottom: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            margin-right: auto;
+        }
+
+        #welmsg {
+            text-align: center;
+            background-color: rgba(128, 128, 128, 0.218);
+            margin: 0;
+            padding: 0;
+        }
+
+        #loginForm {
+            margin: 0 auto;
+            width: 50%;
+        }
+
+        #loginForm input {
+            width: 300px;
+            height: 40px;
+            margin-bottom: 30px;
+            background-color: rgb(121, 109, 109);
+            padding-left: 10px;
+            border: dotted 1px black;
+        }
+
+        #loginForm button {
+            margin-left: 130px;
+            width: 100px;
+            background-color: blue;
+            color: white;
+            padding: 10px 10px;
+            border-radius: 10px;
+            cursor: pointer;
+            border: none;
+            font-size: 19px;
+        }
+    </style>
+</head>
+
+<body>
+    <section id="great-container">
+        <div class="main-container" id="chatApp">
+            <h3 id="welmsg"></h3>
+            <div id="profile-status">
+                <img src="https://images.unsplash.com/photo-1710971228630-f59c4cb257a8?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                    alt="" id="img" />
+                <div>
+                    <p id="name"></p>
+                </div>
+            </div>
+            <ul id="messages"></ul>
+            <div id="typingStatus"></div>
+            <form id="form" action="">
+                <input id="input" /><button type="submit" id="send">Send</button>
+            </form>
+            <div id="userStatus"></div>
+        </div>
+    </section>
+    <script>
+        console.log("Hello World")
+    </script>
+</body>
+
+</html>
diff --git a/src/controllers/chatController.ts b/src/controllers/chatController.ts
@@ -0,0 +1,7 @@
+import { Request, Response } from 'express';
+import { join } from 'path';
+
+export const chatApplication = (req: Request, res: Response) => {
+  const filePath = join(__dirname, '../../public/index.html');
+  res.sendFile(filePath);
+};
diff --git a/src/database/migrations/20240514132443-create-chats.js b/src/database/migrations/20240514132443-create-chats.js
@@ -0,0 +1,19 @@
+'use strict';
+
+import sequelize from 'sequelize';
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('Chat', {
+      id: {
+        type: Sequelize.UUID,
+        primaryKey: true,
+        allowNull: false,
+        defaultValue: sequelize.UUIDV4,
+      },
+    });
+  },
+
+  async down(queryInterface, Sequelize) {},
+};
diff --git a/src/routes/userRoute.ts b/src/routes/userRoute.ts
@@ -16,6 +16,7 @@ import multerUpload from '../helpers/multer';
 import { checkUserRoles, isAuthenticated } from '../middlewares/authMiddlewares';
 import { isCheckedOTP } from '../middlewares/otpAuthMiddleware';
 import { verifyOTP } from '../controllers/authController';
+import { chatApplication } from '../controllers/chatController';
 
 const router = Router();
 
@@ -30,5 +31,6 @@ router.post('/resend-verify', resendVerifyLink);
 router.put('/deactivate/:userId', isAuthenticated, deactivateUserAccount);
 router.put('/activate/:userId', isAuthenticated, checkUserRoles('admin'), activateUserAccount);
 router.patch('/enable2fa', isAuthenticated, checkUserRoles('seller'), enable2FA);
+router.get('/chat', chatApplication);
 
 export default router;