ui: refactor SubscriptionHandler

react-ui/src/stores/reducer/subscription.reducer.ts

-import { PayloadAction, createSlice, current } from '@reduxjs/toolkit';
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import { SubscriptionThunks, THUNK_TYPE } from '@subscription/index';
 import { RootState } from '..';
-import { addSubscription, unsubscribe, unsubscribeAll } from '../../utils/api/subscription.handler';
+import { SubscriptionHandler } from '../../utils/api/subscription.handler';
 import { startListening } from '../middleware/listener.middleware';
+import { setToken } from './user.reducer';
 
 
 
@@ -43,12 +44,7 @@ const SubscriptionSlice = createSlice({
     initialState,
     reducers: {
         triggerSubscription: (state, {payload}: PayloadAction<ThunkEntityDTO>) => {
-            // overwrite old subscription if it exists 
-            const currentState = current(state)
-            const currentThunk = currentState.thunks[CATEGORIES[payload.category]];
-            
             const newThunk: ThunkEntity = {...payload, locked: true};
-            
             state.thunks[CATEGORIES[payload.category]] = newThunk;
         },
 
@@ -63,14 +59,23 @@ const SubscriptionSlice = createSlice({
             state.thunks[CATEGORIES[payload.category]] = {...thunk, id: payload.id, locked: false};
         },
 
-        stopAllSubscriptions: (state) => {
-            unsubscribeAll()
+        removeAll: (state) => {
+            SubscriptionHandler.unsubscribeAll()
             state.thunks = initialState.thunks;
         },
     },
 })
 
-export const { triggerSubscription, stopAllSubscriptions } = SubscriptionSlice.actions
+export const { triggerSubscription } = SubscriptionSlice.actions
+
+// on logout remove all subscriptions
+startListening({
+    predicate: (action) => setToken.match(action) && action.payload.token === null,
+    effect: async (_, listenerApi) => {
+        listenerApi.dispatch(SubscriptionSlice.actions.removeAll());
+    },
+})
+
 
 // unsubscribe old subscription 
 startListening({
@@ -78,7 +83,7 @@ startListening({
     effect: async (action, listenerApi) => {
         const {subscription} = listenerApi.getOriginalState() as RootState;
         const lastThunk = subscription.thunks[CATEGORIES[action.payload.category]];
-        unsubscribe(lastThunk.id);
+        SubscriptionHandler.unsubscribe(lastThunk.id);
     },
 })
 
@@ -95,7 +100,7 @@ startListening({
         }
         
         const subscription = await listenerApi.dispatch(thunkFn(action.payload.payload));
-        const thunkId = await addSubscription(subscription.payload);
+        const thunkId = await SubscriptionHandler.add(subscription.payload);
         listenerApi.dispatch(SubscriptionSlice.actions.setThunkId({id: thunkId, category: action.payload.category}));
 
     },

react-ui/src/utils/api/subscription.handler.ts

 import { QueryActionCreatorResult } from '@reduxjs/toolkit/query';
 
-type SubscriptionType = QueryActionCreatorResult<any>;
+type Subscription = QueryActionCreatorResult<any>;
 
-interface SubscriptionEntity {
-    subscription: SubscriptionType,
+interface Entity {
+    subscription: Subscription,
     id: number
 }
 
-interface SubscriptionReducerState {
-    subscriptions: SubscriptionEntity[]
-}
-
 
-const initialState: SubscriptionReducerState = {
-    subscriptions: []
+const initialState = {
+    subscriptions: [] as Entity[]
 }
 
-let state = initialState;
+export const SubscriptionHandler = (() => {
+    let state = initialState;
+    const add = (subscription: Subscription): number => {
+        const id = state.subscriptions.length;
 
+        const subscriptionEntity: Entity = {
+            subscription,
+            id
+        }
 
-export const addSubscription = (subscription: SubscriptionType): number => {
-    const id = state.subscriptions.length;
+        state.subscriptions = [...state.subscriptions, subscriptionEntity];
 
-    const subscriptionEntity: SubscriptionEntity = {
-        subscription,
-        id
+        return id;
     }
 
-    state.subscriptions = [...state.subscriptions, subscriptionEntity];
 
-    return id;
-}
+    const unsubscribeAll = () => {
+        state.subscriptions.forEach(({ subscription }) => {
+            unsubscribeAction(subscription)
+        });
 
+        state.subscriptions = initialState.subscriptions;
+    }
 
-export const unsubscribeAll = () => {
-    state.subscriptions.forEach(({ subscription }) => {
-        unsubscribeAction(subscription)
-    });
+    /**
+     * @param id 
+     * @returns returns true if the subscription was stopped, false if it was not found
+     */
+    const unsubscribe = (id: number): boolean => {
+        const subscription = state.subscriptions.find(({ id: subscriptionId }) => subscriptionId === id);
 
-    state.subscriptions = initialState.subscriptions;
-}
+        if (subscription) {
+            unsubscribeAction(subscription.subscription);
+        }
 
-/**
- * @param id 
- * @returns returns true if the subscription was stopped, false if it was not found
- */
-export const unsubscribe = (id: number): boolean => {
-    const subscription = state.subscriptions.find(({ id: subscriptionId }) => subscriptionId === id);
+        return !!subscription;
+    }
 
-    if (subscription) {
-        unsubscribeAction(subscription.subscription);
+    /**
+     * Actual unsubscribe action
+     * 
+     * @param subscription 
+     */
+    const unsubscribeAction = (subscription: Subscription) => {
+        subscription.unsubscribe();
     }
 
-    return !!subscription;
-}
 
-/**
- * Actual unsubscribe action
- * 
- * @param subscription 
- */
-const unsubscribeAction = (subscription: SubscriptionType) => {
-    subscription.unsubscribe();
-}
\ No newline at end of file
+    return {
+        add,
+        unsubscribe,
+        unsubscribeAll
+    }
+})();
\ No newline at end of file

react-ui/src/utils/provider/auth.provider.tsx

 import { AuthServiceLoginApiArg, AuthServiceLoginApiResponse, useAuthServiceLoginMutation } from "@api/api";
-import { unsubscribeAll } from "@api/subscription.handler";
 import { getCookieValue } from "@helper/coookie";
 import { useAppDispatch, useAppSelector } from "@hooks";
 import { setToken } from "@reducer/user.reducer";
@@ -100,7 +99,6 @@ export const AuthProvider = ({ children }) => {
     }
 
     const logout = () => {
-        unsubscribeAll();
         dispatch(setToken(null));
         // TODO: purge other information
     }