From 9fa6bf36115b2cf5b5f083c159d33e09e9349202 Mon Sep 17 00:00:00 2001
From: Jacqueline Tuyisenge <j.tuyisenge@alustudent.com>
Date: Thu, 24 Oct 2024 11:59:20 +0200
Subject: [PATCH] fix(#404): add skeleton loader on login activities table

---
 src/Skeletons/loginActivities.skeleton.tsx |  49 +++++++
 src/components/LoginActivitiesTable.tsx    | 149 +++++++++++----------
 2 files changed, 129 insertions(+), 69 deletions(-)
 create mode 100644 src/Skeletons/loginActivities.skeleton.tsx

diff --git a/src/Skeletons/loginActivities.skeleton.tsx b/src/Skeletons/loginActivities.skeleton.tsx
new file mode 100644
index 00000000..d500714c
--- /dev/null
+++ b/src/Skeletons/loginActivities.skeleton.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export default function LoginActivitiesSkeleton() {
+  // Define an array with unique keys
+  const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
+
+  return (
+    <div className="w-full p-4 overflow-auto">
+      <table className="w-full table-fixed border border-gray-700 min-w-[600px]">
+        <thead className="bg-[#27167439] text-white">
+          <tr>
+            <th className="p-4 border text-center w-1/6">Date</th>
+            <th className="p-4 border text-center w-1/6">Country Name</th>
+            <th className="p-4 border text-center w-1/6">City</th>
+            <th className="p-4 border text-center w-1/6">State</th>
+            <th className="p-4 border text-center w-1/6">IPV4</th>
+            <th className="p-4 border text-center w-1/6">Attempt</th>
+          </tr>
+        </thead>
+        <tbody>
+          {skeletonRows.map((row) => (
+            <tr key={row.id}>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/src/components/LoginActivitiesTable.tsx b/src/components/LoginActivitiesTable.tsx
index 70554559..e8b571a0 100644
--- a/src/components/LoginActivitiesTable.tsx
+++ b/src/components/LoginActivitiesTable.tsx
@@ -6,6 +6,7 @@
 import React, { useState, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_LOGIN_ACTIVITIES } from '../queries/manageStudent.queries';
+import LoginActivitiesSkeleton from '../Skeletons/loginActivities.skeleton';
 
 interface LoginActivitiesData {
   loginActivities: LoginActivity[];
@@ -99,78 +100,88 @@ const LoginActivitiesTable: React.FC = () => {
   const displayActivities = loginActivities.slice(startIndex, endIndex);
   console.log('displayActivities', displayActivities);
 
-  if (loading && page === 1) {
-    return <div>Loading login activities...</div>;
-  }
-
-  /* istanbul ignore next */
-  if (error) {
-    return <div>Error retrieving login activities.</div>;
-  }
-
-  /* istanbul ignore next */
-  if (displayActivities.length === 0) {
-    return <div>No login activities yet.</div>;
-  }
-
   /* istanbul ignore next */
   return (
     <div className="flex flex-col items-center mt-4 font-serif">
-      <table className="w-full border border-gray-300">
-        <thead className="bg-[#163274a3] text-white">
-          <tr>
-            <th className="py-2 px-4 border">Date</th>
-            <th className="py-2 px-4 border">Country Name</th>
-            <th className="py-2 px-4 border">City</th>
-            <th className="py-2 px-4 border">State</th>
-            <th className="py-2 px-4 border">IPv4</th>
-            <th className="py-2 px-4 border">Attempt</th>
-          </tr>
-        </thead>
-        <tbody>
-          {displayActivities.map((activity, index) => (
-            <tr
-              key={`${activity.date || index}-${activity.IPv4 || index}`}
-              className="transition-colors duration-200"
-            >
-              <td className="py-2 px-4 border">
-                {new Date(Number(activity.date)).toLocaleString()}
-              </td>
-              <td className="py-2 px-4 border">
-                {activity.country_name || 'N/A'}
-              </td>
-              <td className="py-2 px-4 border">{activity.city || 'N/A'}</td>
-              <td className="py-2 px-4 border">{activity.state || 'N/A'}</td>
-              <td className="py-2 px-4 border">{activity.IPv4 || 'N/A'}</td>
-              <td className="py-2 px-4 border">
-                {activity.failed > 0 ? 'Failed' : 'Success'}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <div className="flex justify-center mb-20 mt-4">
-        <span className="mr-2 text-gray-600">
-          Page {page} of {totalPages}
-        </span>
-        {page > 1 && (
-          <button
-            className="px-4 py-2 mr-2 font-bold text-white bg-gray-500 rounded"
-            onClick={handleGoBack}
-          >
-            Previous
-          </button>
-        )}
-        {page < totalPages && (
-          <button
-            className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
-            onClick={handleLoadMore}
-          >
-            Next
-          </button>
-        )}
-      </div>
+      <h1 className="text-3xl font-bold font-lexend pb-3">Login Activities</h1>
+
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {loading && page === 1 ? (
+        <div className="my-2 items-center">
+          <LoginActivitiesSkeleton />
+        </div>
+      ) : /* eslint-disable-next-line no-nested-ternary */
+      error ? (
+        <div>Error retrieving login activities.</div>
+      ) : displayActivities.length === 0 ? (
+        <div>No login activities yet.</div>
+      ) : (
+        <>
+          <div className="w-full overflow-x-auto">
+            <table className="w-full border border-gray-300 min-w-[800px]">
+              <thead className="bg-[#163274a3] text-white">
+                <tr>
+                  <th className="py-2 px-4 border">Date</th>
+                  <th className="py-2 px-4 border">Country Name</th>
+                  <th className="py-2 px-4 border">City</th>
+                  <th className="py-2 px-4 border">State</th>
+                  <th className="py-2 px-4 border">IPv4</th>
+                  <th className="py-2 px-4 border">Attempt</th>
+                </tr>
+              </thead>
+              <tbody>
+                {displayActivities.map((activity, index) => (
+                  <tr
+                    key={`${activity.date || index}-${activity.IPv4 || index}`}
+                    className="transition-colors duration-200"
+                  >
+                    <td className="py-2 px-4 border">
+                      {new Date(Number(activity.date)).toLocaleString()}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.country_name || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.city || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.state || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.IPv4 || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.failed > 0 ? 'Failed' : 'Success'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="flex justify-center mb-20 mt-4">
+            <span className="mr-2 text-gray-600">
+              Page {page} of {totalPages}
+            </span>
+            {page > 1 && (
+              <button
+                className="px-4 py-2 mr-2 font-bold text-white bg-gray-500 rounded"
+                onClick={handleGoBack}
+              >
+                Previous
+              </button>
+            )}
+            {page < totalPages && (
+              <button
+                className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+                onClick={handleLoadMore}
+              >
+                Next
+              </button>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };