fix: wrong reset state on exit

src/components/topmenu.tsx

@@ -88,7 +88,7 @@ export const TopMenu = function(props: { onClick?: () => void }) {
     }, [dispatch, handleMenuClose, discTitle]);
 
     const handleExit = useCallback(() => {
-        dispatch(appActions.setState('WELCOME'));
+        dispatch(appActions.setMainView('WELCOME'));
         handleMenuClose();
     }, [dispatch, handleMenuClose]);
 
@@ -196,7 +196,7 @@ export const TopMenu = function(props: { onClick?: () => void }) {
                     ref={helpLinkRef}
                     onClick={handleHelpLink}
                 >
-                    Support and FAQs
+                    Support and FAQ
                 </Link>
             </ListItemText>
         </MenuItem>

src/components/win95/app.tsx

@@ -68,7 +68,7 @@ export const W95App = () => {
     const [isMenuOpen, setMenuOpen] = useState(false);
 
     const handleExit = useCallback(() => {
-        dispatch(appActions.setState('WELCOME'));
+        dispatch(appActions.setMainView('WELCOME'));
     }, [dispatch]);
 
     const closeMenu = useCallback(() => {

src/index.tsx

@@ -36,7 +36,7 @@ serviceRegistry.mediaRecorderService = new MediaRecorderService();
 
     if (navigator && navigator.usb) {
         navigator.usb.ondisconnect = function() {
-            store.dispatch(appActions.setState('WELCOME'));
+            store.dispatch(appActions.setMainView('WELCOME'));
         };
     } else {
         store.dispatch(appActions.setBrowserSupported(false));

src/redux/actions.ts

@@ -56,7 +56,7 @@ export function pair() {
         try {
             let connected = await serviceRegistry.netmdService!.connect();
             if (connected) {
-                dispatch(appStateActions.setState('MAIN'));
+                dispatch(appStateActions.setMainView('MAIN'));
                 return;
             }
         } catch (err) {
@@ -67,7 +67,7 @@ export function pair() {
         try {
             let paired = await serviceRegistry.netmdService!.pair();
             if (paired) {
-                dispatch(appStateActions.setState('MAIN'));
+                dispatch(appStateActions.setMainView('MAIN'));
                 return;
             }
             dispatch(batchActions([appStateActions.setPairingMessage(`Connection Failed`), appStateActions.setPairingFailed(true)]));

src/redux/app-feature.ts

@@ -17,7 +17,8 @@ export interface AppState {
     hasNotificationSupport: boolean;
 }
 
-const initialState: AppState = {
+export const buildInitialState = (): AppState => {
+    return {
         mainView: 'WELCOME',
         loading: false,
         pairingFailed: false,
@@ -28,13 +29,17 @@ const initialState: AppState = {
         aboutDialogVisible: false,
         notifyWhenFinished: loadPreference('notifyWhenFinished', false),
         hasNotificationSupport: true,
+    };
 };
 
+const initialState: AppState = buildInitialState();
+
 export const slice = createSlice({
     name: 'app',
     initialState,
     reducers: {
-        setState: (state, action: PayloadAction<Views>) => {
+        setMainView: (state, action: PayloadAction<Views>) => {
+            // CAVEAT: There's a middleware that resets the state when mainView is set to WELCOME
             state.mainView = action.payload;
         },
         setLoading: (state, action: PayloadAction<boolean>) => {
@@ -62,7 +67,7 @@ export const slice = createSlice({
         },
         setVintageMode: (state, action: PayloadAction<boolean>) => {
             state.vintageMode = action.payload;
-            savePreference('vintageMode', state.vintageMode);
+            savePreference('vintageMode', action.payload);
         },
         showAboutDialog: (state, action: PayloadAction<boolean>) => {
             state.aboutDialogVisible = action.payload;

src/redux/store.ts

@@ -6,7 +6,7 @@ import panicDialog, { actions as panicDialogActions } from './panic-dialog-featu
 import convertDialog from './convert-dialog-feature';
 import dumpDialog from './dump-dialog-feature';
 import recordDialog from './record-dialog-feature';
-import appState, { actions as appActions } from './app-feature';
+import appState, { actions as appActions, buildInitialState as buildInitialAppState } from './app-feature';
 import main from './main-feature';
 
 const errorCatcher: Middleware = store => next => async action => {
@@ -30,12 +30,15 @@ let reducer = combineReducers({
     main,
 });
 
-const resetStateAction = appActions.setState.toString();
+const resetStateAction = appActions.setMainView.toString();
 const resetStatePayoload = 'WELCOME';
 const resetStateReducer: typeof reducer = function(...args) {
     const [state, action] = args;
     if (action.type === resetStateAction && action.payload === resetStatePayoload) {
-        return initialState;
+        return {
+            ...initialState,
+            appState: buildInitialAppState(),
+        };
     }
     return reducer(...args);
 };