Fix logout, cleanup old events (#793)

* Fix logout, cleanup old events

* Remove `unsetDetails` action

src/components/ErrorBoundary.tsx

@@ -1,17 +1,16 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate, useRouteError } from 'react-router-dom';
+import { useRouteError } from 'react-router-dom';
 
 import ShokoMascot from '@/../images/shoko_mascot.png';
 import Button from '@/components/Input/Button';
+import Events from '@/core/events';
 import { useVersionQuery } from '@/core/react-query/init/queries';
 import { useUpdateWebuiMutation } from '@/core/react-query/webui/mutations';
-import { unsetDetails } from '@/core/slices/apiSession';
 import useEventCallback from '@/hooks/useEventCallback';
 
 const ErrorBoundary = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const error = useRouteError() as Error; // There is no type definition provided.
 
   const versionQuery = useVersionQuery();
@@ -20,8 +19,7 @@ const ErrorBoundary = () => {
   const [updateChannel, setUpdateChannel] = useState<'Stable' | 'Dev'>('Stable');
 
   const handleLogout = useEventCallback(() => {
-    dispatch(unsetDetails());
-    navigate('/webui/login');
+    dispatch({ type: Events.AUTH_LOGOUT });
   });
 
   const handleWebUiUpdate = useEventCallback((channel: 'Stable' | 'Dev') => {

src/components/Layout/TopNav.tsx

@@ -33,12 +33,12 @@ import QueueModal from '@/components/Dialogs/QueueModal';
 import Button from '@/components/Input/Button';
 import ShokoIcon from '@/components/ShokoIcon';
 import toast from '@/components/Toast';
+import Events from '@/core/events';
 import { useCheckNetworkConnectivityMutation } from '@/core/react-query/settings/mutations';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { useCurrentUserQuery } from '@/core/react-query/user/queries';
 import { useUpdateWebuiMutation } from '@/core/react-query/webui/mutations';
 import { useWebuiUpdateCheckQuery } from '@/core/react-query/webui/queries';
-import { unsetDetails } from '@/core/slices/apiSession';
 import { setQueueModalOpen } from '@/core/slices/mainpage';
 import { NetworkAvailability } from '@/core/types/signalr';
 
@@ -169,8 +169,7 @@ function TopNav() {
   };
 
   const handleLogout = useEventCallback(() => {
-    dispatch(unsetDetails());
-    navigate('/webui/login');
+    dispatch({ type: Events.AUTH_LOGOUT });
   });
 
   const handleWebUiUpdate = () => {

src/core/events.ts

@@ -1,27 +1,4 @@
-/**
- * Events are actions that are used to invoke sagas but don't get processed in the reducer usually
- */
-
 export default {
-  // API POLLING
-  START_API_POLLING: 'EVENT_START_API_POLLING',
-  STOP_API_POLLING: 'EVENT_STOP_API_POLLING',
-  // AUTH
-  AUTH_CHANGE_PASSWORD: 'EVENT_AUTH_CHANGE_PASSWORD',
   AUTH_LOGOUT: 'EVENT_AUTH_LOGOUT',
-  // MAINPAGE
-  MAINPAGE_LOAD: 'EVENT_MAINPAGE_LOAD',
-  MAINPAGE_QUEUE_OPERATION: 'EVENT_MAINPAGE_QUEUE_OPERATION',
-  MAINPAGE_RECENT_FILES: 'EVENT_MAINPAGE_RECENT_FILES',
-  // SERVER
-  SERVER_VERSION: 'EVENT_SERVER_VERSION',
-  // SETTINGS
-  SETTINGS_CHECK_PLEX_AUTHENTICATED: 'EVENT_SETTINGS_CHECK_PLEX_AUTHENTICATED',
-  SETTINGS_PLEX_LOGIN_URL: 'EVENT_SETTINGS_PLEX_LOGIN_URL',
-  SETTINGS_SAVE_SERVER: 'EVENT_SETTINGS_SAVE_SERVER',
-  SETTINGS_UNLINK_PLEX: 'EVENT_SETTINGS_UNLINK_PLEX',
-  // STORE
-  STORE_CLEAR_STATE: 'EVENT_STORE_CLEAR_STATE',
-  // LOGS
-  LOGPAGE_LOAD: 'EVENT_LOGPAGE_LOAD',
+  MAINPAGE_LOADED: 'EVENT_MAINPAGE_LOADED',
 };

src/core/middlewares/signalr.ts

@@ -130,7 +130,7 @@ const signalRMiddleware: Middleware<object, RootState> = ({
   next =>
     async (action: UnknownAction) => {
       // register signalR after the user logged in
-      if (action.type === Events.MAINPAGE_LOAD) {
+      if (action.type === Events.MAINPAGE_LOADED) {
         if (connectionEvents !== undefined) return next(action);
         const connectionHub = '/signalr/aggregate?feeds=anidb,shoko,queue,network,avdump';
 

src/core/slices/apiSession.ts

@@ -17,12 +17,9 @@ const apiSessionSlice = createSlice({
     setDetails(sliceState, action: PayloadAction<ApiSessionState>) {
       return Object.assign({}, sliceState, action.payload);
     },
-    unsetDetails(sliceState) {
-      return Object.assign({}, sliceState, { apikey: '', username: '', rememberUser: false });
-    },
   },
 });
 
-export const { setDetails, unsetDetails } = apiSessionSlice.actions;
+export const { setDetails } = apiSessionSlice.actions;
 
 export default apiSessionSlice.reducer;

src/core/store.ts

@@ -11,7 +11,7 @@ import combinedReducer from './reducers';
 import type { UnknownAction } from 'redux';
 
 const rootReducer = (state: ReturnType<typeof combinedReducer>, action: UnknownAction) => {
-  if (action.type === Events.STORE_CLEAR_STATE) { // check for action type
+  if (action.type === Events.AUTH_LOGOUT) { // check for action type
     globalThis.localStorage.clear();
     globalThis.sessionStorage.clear();
     return combinedReducer(undefined, action);

src/pages/main/MainPage.tsx

@@ -21,7 +21,7 @@ function MainPage() {
   const [showSmSidebar, setShowSmSidebar] = useState(false);
 
   useEffect(() => {
-    dispatch({ type: Events.MAINPAGE_LOAD });
+    dispatch({ type: Events.MAINPAGE_LOADED });
   }, [dispatch]);
 
   const scrollRef = useRef<HTMLDivElement>(null);

src/pages/settings/tabs/UserManagementSettings.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { mdiCircleEditOutline, mdiLoading, mdiMagnify, mdiMinusCircleOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { cloneDeep, find, isEqual, remove } from 'lodash';
@@ -12,14 +11,14 @@ import Input from '@/components/Input/Input';
 import InputSmall from '@/components/Input/InputSmall';
 import AvatarEditorModal from '@/components/Settings/AvatarEditorModal';
 import toast from '@/components/Toast';
+import Events from '@/core/events';
 import { useAniDBTagsQuery } from '@/core/react-query/tag/queries';
 import {
   useChangePasswordMutation,
   useDeleteUserMutation,
   usePutUserMutation,
 } from '@/core/react-query/user/mutations';
 import { useCurrentUserQuery, useUsersQuery } from '@/core/react-query/user/queries';
-import { unsetDetails } from '@/core/slices/apiSession';
 import useEventCallback from '@/hooks/useEventCallback';
 
 import type { UserType } from '@/core/types/api/user';
@@ -39,7 +38,6 @@ const initialUser = {
 
 function UserManagementSettings() {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
 
   const currentUserQuery = useCurrentUserQuery();
   const usersQuery = useUsersQuery();
@@ -108,8 +106,7 @@ function UserManagementSettings() {
         if (currentUserQuery.data?.ID === selectedUser.ID && logoutOthers) {
           toast.success('Password changed successfully!', 'You will be logged out in 5 seconds!', { autoClose: 5000 });
           setTimeout(() => {
-            dispatch(unsetDetails());
-            navigate('/webui/login');
+            dispatch({ type: Events.AUTH_LOGOUT });
           }, 6000);
         } else toast.success('Password changed successfully!');
       },