feat: add getAllUsers function and integrate user fetching in dashboard

backend/database.js

@@ -1,5 +1,6 @@
 import mysql from "mysql2";
 import dotenv from "dotenv";
+import { error } from "console";
 dotenv.config();
 
 // Create a MySQL connection pool using environment variables for configuration
@@ -130,3 +131,12 @@ export async function deleteUser(
     }
   } catch (err) {}
 }
+
+export async function getAllUsers() {
+  try {
+    const [data] = await pool.query("SELECT * FROM users;");
+    return { result: data, success: true };
+  } catch (err) {
+    return { result: err, success: false };
+  }
+}

backend/server.js

@@ -4,7 +4,13 @@ const app = express();
 const port = 4000;
 
 // Importing database functions for user operations
-import { loginUser, createUser, updateUser, deleteUser } from "./database.js";
+import {
+  loginUser,
+  createUser,
+  updateUser,
+  deleteUser,
+  getAllUsers,
+} from "./database.js";
 
 // Middleware to parse URL-encoded bodies (form submissions)
 app.use(express.urlencoded({ extended: true }));
@@ -39,9 +45,23 @@ app.get("/", (req, res) => {
 
 // Variable to keep track of the latest logged-in user
 let latestUser;
+let response;
+
+// static function to get all users
+function allUsers() {
+  getAllUsers().then((resultFromFunc) => {
+    if (resultFromFunc.success) {
+      response = resultFromFunc.result;
+    } else {
+      response = resultFromFunc.result;
+    }
+  });
+}
 
 // Route to handle user login
 app.post("/login", (req, res) => {
+  allUsers();
+
   // Attempt to log in the user with provided credentials
   loginUser(req.body.username, req.body.password).then((result) => {
     if (result.success) {
@@ -51,6 +71,7 @@ app.post("/login", (req, res) => {
         newLink: `/dashboard/${result.user.id}`,
         alert: null,
         success: null,
+        users: response,
       });
       latestUser = result;
     } else {
@@ -77,12 +98,22 @@ app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
     if (latestUser && req.body.username !== latestUser.user.username) {
       funcName = deleteUser;
     } else {
+      let response;
+
+      getAllUsers().then((resultFromFunc) => {
+        if (resultFromFunc.success) {
+          response = resultFromFunc.result;
+        } else {
+          response = resultFromFunc.result;
+        }
+      });
       // Render dashboard with alert if trying to delete logged-in user
       res.status(400).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: latestUser ? `/dashboard/${latestUser.id}` : "#",
         alert: "Cannot delete the currently logged-in user!",
         success: null,
+        users: response,
       });
       return;
     }
@@ -100,20 +131,41 @@ app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
     req.body.email
   ).then((result) => {
     if (result.success === true) {
+      let response;
+
+      getAllUsers().then((resultFromFunc) => {
+        if (resultFromFunc.success) {
+          response = resultFromFunc.result;
+        } else {
+          response = resultFromFunc.result;
+        }
+      });
       // On success, render dashboard with success message
       res.status(201).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: `/dashboard/${latestUser.id}`,
         alert: null,
         success: "User action successful!",
+        users: response,
       });
     } else {
+      let response;
+
+      getAllUsers().then((resultFromFunc) => {
+        if (resultFromFunc.success) {
+          response = resultFromFunc.result;
+        } else {
+          response = resultFromFunc.result;
+        }
+      });
+
       // On failure, render dashboard with alert
       res.status(400).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: `/dashboard/${latestUser.id}`,
         alert: "User action failed!",
         success: null,
+        users: response,
       });
     }
   });

backend/views/dashboard.ejs

@@ -227,6 +227,16 @@
                   Delete User
                 </button>
               </div>
+
+              <div class="col-sm">
+                <button
+                  type="button"
+                  onclick="callFunc('fetchAllUsers')"
+                  class="btn btn-info w-100"
+                >
+                  Fetch all Users
+                </button>
+              </div>
             </div>
           </form>
         </div>
@@ -239,6 +249,37 @@
           </p>
         </div>
       </div>
+
+      <div class="user-table">
+        <h4 class="mt-5 mb-3">All Users</h4>
+        <!-- Table to display all users -->
+        <table class="table">
+          <thead>
+            <tr>
+              <th scope="col">id</th>
+              <th scope="col">Username</th>
+              <th scope="col">First name</th>
+              <th scope="col">Last name</th>
+              <th scope="col">E-Mail</th>
+              <th scope="col">Password</th>
+              <th scope="col">Created</th>
+            </tr>
+          </thead>
+          <tbody class="table-group-divider">
+            <% users.forEach(user => { %>
+            <tr>
+              <td><%= user.id %></td>
+              <td><%= user.username %></td>
+              <td><%= user.first_name %></td>
+              <td><%= user.last_name %></td>
+              <td><%= user.email %></td>
+              <td><%= user.password %></td>
+              <td><%= user.created.toISOString() %></td>
+            </tr>
+            <% }) %>
+          </tbody>
+        </table>
+      </div>
     </div>
 
     <!-- Bootstrap JS Bundle -->