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`

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() {
         };
     }, []);
 
-    useEffect(() => {
+    const invalidateSession = useCallback(
-        loadSessions().then(response => {
+        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) => {
+            setCurrent(response.current);
+            setSessions(response.sessions);
+        });
+    }, [loadSessions]);
 
     return (
         <div className="flex flex-col items-center space-y-4 w-full max-w-md">
-            {
+            {current ? (
-                current ?
                 <SessionItem session={current!!} showInvalidate={false} invalidateSession={invalidateSession} />
-                    :
+            ) : (
                 <></>
-            }
+            )}
-            {
+            {sessions && sessions.length > 0 ? <Separator /> : <></>}
-                sessions && sessions.length > 0 ?
+            {sessions?.map((item) => {
-                    <Separator/>
-                    :
-                    <></>
-            }
-            {
-                sessions?.map(item => {
                 return (
                     <SessionItem
                         key={item.id}
                         session={item}
                         showInvalidate={true}
-                            invalidateSession={invalidateSession}/>
+                        invalidateSession={invalidateSession}
+                    />
                 );
-                })
+            })}
-            }
         </div>
     );
 }