feat: pagination + session revoking UI

web/src/pages/Admin/UserSessions/index.tsx

@@ -1,13 +1,14 @@
-import { adminGetUserSessionsApi } from "@/api/admin/sessions";
 import Breadcrumbs from "@/components/ui/breadcrumbs";
 import { Button } from "@/components/ui/button";
 import Avatar from "@/feature/Avatar";
-import type { DeviceInfo, UserSession } from "@/types";
+import type { DeviceInfo } from "@/types";
 import { Ban } from "lucide-react";
-import { useEffect, useMemo, useState, type FC } from "react";
+import { useCallback, useEffect, useMemo, type FC } from "react";
 import { Link } from "react-router";
 import moment from "moment";
 import Pagination from "@/components/ui/pagination";
+import { useUserSessions } from "@/store/admin/userSessions";
+import { useAuth } from "@/store/auth";
 
 const SessionSource: FC<{ deviceInfo: string }> = ({ deviceInfo }) => {
   const parsed = useMemo<DeviceInfo>(
@@ -23,20 +24,29 @@ const SessionSource: FC<{ deviceInfo: string }> = ({ deviceInfo }) => {
 };
 
 const AdminSessionsPage: FC = () => {
-  const loading = false;
+  const loading = useUserSessions((s) => s.loading);
-  const [sessions, setSessions] = useState<UserSession[]>([]);
+  const sessions = useUserSessions((s) => s.items);
+
+  const page = useUserSessions((s) => s.page);
+  const totalPages = useUserSessions((s) => s.totalPages);
+
+  const fetchSessions = useUserSessions((s) => s.fetch);
+  const revokeSession = useUserSessions((s) => s.revoke);
+
+  const revokingId = useUserSessions((s) => s.revokingId);
+
+  const profile = useAuth((s) => s.profile);
+
+  const handleRevokeSession = useCallback(
+    (id: string) => {
+      revokeSession(id);
+    },
+    [revokeSession],
+  );
 
   useEffect(() => {
-    adminGetUserSessionsApi({
+    fetchSessions(1);
-      limit: 10,
+  }, [fetchSessions]);
-      offset: 0,
-    }).then((res) => {
-      console.log("get sessions response:", res);
-      if (Array.isArray(res)) {
-        return setSessions(res);
-      }
-    });
-  }, []);
 
   return (
     <div className="relative flex flex-col items-stretch w-full">
@@ -113,11 +123,6 @@ const AdminSessionsPage: FC = () => {
                   key={session.id}
                   className="hover:bg-gray-50 dark:hover:bg-gray-800"
                 >
-                  {/* <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-300 dark:border-gray-700">
-                    <span className="inline-block px-2 py-1 text-xs rounded-full font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
-                      {sessionsType}
-                    </span>
-                  </td> */}
                   <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
                     <div className="flex flex-row items-center gap-2 justify-start">
                       {typeof session.user?.profile_picture === "string" && (
@@ -126,9 +131,11 @@ const AdminSessionsPage: FC = () => {
                           className="w-7 h-7 min-w-7"
                         />
                       )}
-                      <Link to={`/admin/users/${session.user_id}`}>
+
-                        <p className="cursor-pointer text-blue-500">
+                      <Link to={`/admin/users/view/${session.user_id}`}>
-                          {session.user?.full_name ?? ""}
+                        <p className="cursor-pointer text-blue-500 text-nowrap">
+                          {session.user?.full_name ?? ""}{" "}
+                          {session.user_id === profile?.id ? "(You)" : ""}
                         </p>
                       </Link>
                     </div>
@@ -177,6 +184,8 @@ const AdminSessionsPage: FC = () => {
                       <Button
                         variant="contained"
                         className="bg-red-500 hover:bg-red-600 !px-1.5 !py-1.5"
+                        onClick={() => handleRevokeSession(session.id)}
+                        disabled={revokingId === session.id}
                       >
                         <Ban size={18} />
                       </Button>
@@ -187,9 +196,12 @@ const AdminSessionsPage: FC = () => {
             )}
           </tbody>
         </table>
-
-        <Pagination currentPage={1} onPageChange={console.log} totalPages={2} />
       </div>
+      <Pagination
+        currentPage={page}
+        onPageChange={(newPage) => fetchSessions(newPage)}
+        totalPages={totalPages}
+      />
     </div>
   );
 };