diff --git a/app/assets/javascripts/directives/views/sessionsModal.tsx b/app/assets/javascripts/directives/views/sessionsModal.tsx
index 57c24a50fcd..08f3906e3d3 100644
--- a/app/assets/javascripts/directives/views/sessionsModal.tsx
+++ b/app/assets/javascripts/directives/views/sessionsModal.tsx
@@ -1,6 +1,11 @@
import { AppState } from '@/ui_models/app_state';
import { PureViewCtrl } from '@/views';
-import { SNApplication, RemoteSession, UuidString } from '@standardnotes/snjs';
+import {
+ SNApplication,
+ RemoteSession,
+ SessionStrings,
+ UuidString,
+} from '@standardnotes/snjs';
import { autorun, IAutorunOptions, IReactionPublic } from 'mobx';
import { render, FunctionComponent } from 'preact';
import { useState, useEffect, useRef } from 'preact/hooks';
@@ -16,16 +21,20 @@ function useAutorun(view: (r: IReactionPublic) => any, opts?: IAutorunOptions) {
useEffect(() => autorun(view, opts), []);
}
+type Session = RemoteSession & {
+ revoking?: true;
+};
+
function useSessions(
application: SNApplication
): [
- RemoteSession[],
+ Session[],
() => void,
boolean,
(uuid: UuidString) => Promise,
string
] {
- const [sessions, setSessions] = useState([]);
+ const [sessions, setSessions] = useState([]);
const [lastRefreshDate, setLastRefreshDate] = useState(Date.now());
const [refreshing, setRefreshing] = useState(true);
const [errorMessage, setErrorMessage] = useState('');
@@ -41,7 +50,7 @@ function useSessions(
setErrorMessage('An unknown error occured while loading sessions.');
}
} else {
- const sessions = response as RemoteSession[];
+ const sessions = response as Session[];
setSessions(sessions);
setErrorMessage('');
}
@@ -54,9 +63,21 @@ function useSessions(
}
async function revokeSession(uuid: UuidString) {
+ const responsePromise = application.revokeSession(uuid);
+
let sessionsBeforeRevoke = sessions;
- setSessions(sessions.filter((session) => session.uuid !== uuid));
- const response = await application.revokeSession(uuid);
+
+ const sessionsDuringRevoke = sessions.slice();
+ const toRemoveIndex = sessions.findIndex(
+ (session) => session.uuid === uuid
+ );
+ sessionsDuringRevoke[toRemoveIndex] = {
+ ...sessionsDuringRevoke[toRemoveIndex],
+ revoking: true,
+ };
+ setSessions(sessionsDuringRevoke);
+
+ const response = await responsePromise;
if ('error' in response) {
if (response.error?.message) {
setErrorMessage(response.error?.message);
@@ -64,6 +85,8 @@ function useSessions(
setErrorMessage('An unknown error occured while revoking the session.');
}
setSessions(sessionsBeforeRevoke);
+ } else {
+ setSessions(sessions.filter((session) => session.uuid !== uuid));
}
}
@@ -84,7 +107,7 @@ const SessionsModal: FunctionComponent<{
errorMessage,
] = useSessions(application);
- const [revokingSessionUuid, setRevokingSessionUuid] = useState('');
+ const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('');
const closeRevokeSessionAlert = () => setRevokingSessionUuid('');
const cancelRevokeRef = useRef();
@@ -146,6 +169,7 @@ const SessionsModal: FunctionComponent<{