Skip to content

Commit

Permalink
fix(#404): add skeleton loader on login activities table
Browse files Browse the repository at this point in the history
  • Loading branch information
@JacquelineTuyisenge
JacquelineTuyisenge committed Oct 24, 2024
1 parent 9e05149 commit 9fa6bf3
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 69 deletions.
49 changes: 49 additions & 0 deletions src/Skeletons/loginActivities.skeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
149 changes: 80 additions & 69 deletions src/components/LoginActivitiesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -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>
);
};
Expand Down

0 comments on commit 9fa6bf3

Please sign in to comment.