From d73f90b6cef6c6770f12d24bd06816332d06a2a5 Mon Sep 17 00:00:00 2001
From: dotX12 <dev@shitposting.team>
Date: Sun, 26 Jan 2025 16:43:17 +0300
Subject: [PATCH] Refactor session invalidation logic for improved readability
 and structure.

Fix: `./src/components/accountSessions.tsx
      27:8  Warning: React Hook useCallback has a missing dependency: 'loadSessions'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
      50:8  Warning: React Hook useEffect has a missing dependency: 'loadSessions'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps`
---
 .../src/components/accountSessions.tsx        | 78 +++++++++----------
 1 file changed, 36 insertions(+), 42 deletions(-)

diff --git a/authentication/src/components/accountSessions.tsx b/authentication/src/components/accountSessions.tsx
index 8f6d3d8..094a8c2 100644
--- a/authentication/src/components/accountSessions.tsx
+++ b/authentication/src/components/accountSessions.tsx
@@ -7,27 +7,10 @@ import SessionItem from '@/components/sessionItem';
 import { Separator } from '@/components/ui/separator';
 
 export default function AccountSessions() {
-
     const [current, setCurrent] = useState<Session>();
     const [sessions, setSessions] = useState<Session[]>();
 
-    const invalidateSession = useCallback(async (id: string) => {
-
-        console.log('Disabling session with id', id);
-
-        kratos.disableMySession({ id: id })
-            .then(() => console.log('Disabled session with id', id))
-            .catch(() => console.error('Error while disabling session with id', id))
-            .finally(() => {
-                loadSessions().then((response) => {
-                    setCurrent(response.current);
-                    setSessions(response.sessions);
-                });
-            });
-    }, []);
-
     const loadSessions = useCallback(async () => {
-
         console.log('Refreshing sessions');
 
         const current = await kratos.toSession();
@@ -42,38 +25,49 @@ export default function AccountSessions() {
         };
     }, []);
 
+    const invalidateSession = useCallback(
+        async (id: string) => {
+            console.log('Disabling session with id', id);
+
+            kratos
+                .disableMySession({ id: id })
+                .then(() => console.log('Disabled session with id', id))
+                .catch(() => console.error('Error while disabling session with id', id))
+                .finally(() => {
+                    loadSessions().then((response) => {
+                        setCurrent(response.current);
+                        setSessions(response.sessions);
+                    });
+                });
+        },
+        [loadSessions]
+    );
+
     useEffect(() => {
-        loadSessions().then(response => {
+        loadSessions().then((response) => {
             setCurrent(response.current);
             setSessions(response.sessions);
         });
-    }, []);
+    }, [loadSessions]);
 
     return (
         <div className="flex flex-col items-center space-y-4 w-full max-w-md">
-            {
-                current ?
-                    <SessionItem session={current!!} showInvalidate={false} invalidateSession={invalidateSession}/>
-                    :
-                    <></>
-            }
-            {
-                sessions && sessions.length > 0 ?
-                    <Separator/>
-                    :
-                    <></>
-            }
-            {
-                sessions?.map(item => {
-                    return (
-                        <SessionItem
-                            key={item.id}
-                            session={item}
-                            showInvalidate={true}
-                            invalidateSession={invalidateSession}/>
-                    );
-                })
-            }
+            {current ? (
+                <SessionItem session={current!!} showInvalidate={false} invalidateSession={invalidateSession} />
+            ) : (
+                <></>
+            )}
+            {sessions && sessions.length > 0 ? <Separator /> : <></>}
+            {sessions?.map((item) => {
+                return (
+                    <SessionItem
+                        key={item.id}
+                        session={item}
+                        showInvalidate={true}
+                        invalidateSession={invalidateSession}
+                    />
+                );
+            })}
         </div>
     );
 }