Migrate mobx to zustand

App.js

@@ -17,7 +17,6 @@ import * as Font from 'expo-font';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
-import { observer } from 'mobx-react-lite';
 import { AsyncTrunk } from 'mobx-sync-lite';
 import PropTypes from 'prop-types';
 import React, { useContext, useEffect, useState } from 'react';
@@ -34,12 +33,12 @@ import StaticScriptLoader from './utils/StaticScriptLoader';
 // Import i18n configuration
 import './i18n';
 
-const App = observer(({ skipLoadingScreen }) => {
+const App = ({ skipLoadingScreen }) => {
 	const [ isSplashReady, setIsSplashReady ] = useState(false);
-	const { rootStore } = useStores();
+	const { rootStore, downloadStore, settingStore } = useStores();
 	const { theme } = useContext(ThemeContext);
 
-	rootStore.settingStore.systemThemeId = useColorScheme();
+	settingStore.systemThemeId = useColorScheme();
 
 	SplashScreen.preventAutoHideAsync();
 
@@ -87,16 +86,16 @@ const App = observer(({ skipLoadingScreen }) => {
 	}, []);
 
 	useEffect(() => {
-		console.info('rotation lock setting changed!', rootStore.settingStore.isRotationLockEnabled);
-		if (rootStore.settingStore.isRotationLockEnabled) {
+		console.info('rotation lock setting changed!', settingStore.isRotationLockEnabled);
+		if (settingStore.isRotationLockEnabled) {
 			ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
 		} else {
 			ScreenOrientation.unlockAsync();
 		}
-	}, [ rootStore.settingStore.isRotationLockEnabled ]);
+	}, [ settingStore.isRotationLockEnabled ]);
 
 	const updateScreenOrientation = async () => {
-		if (rootStore.settingStore.isRotationLockEnabled) {
+		if (settingStore.isRotationLockEnabled) {
 			if (rootStore.isFullscreen) {
 				// Lock to landscape orientation
 				// For some reason video apps on iPhone use LANDSCAPE_RIGHT ¯\_(ツ)_/¯
@@ -163,34 +162,34 @@ const App = observer(({ skipLoadingScreen }) => {
 				});
 		};
 
-		rootStore.downloadStore.downloads
+		downloadStore.downloads
 			.forEach(download => {
 				if (!download.isComplete && !download.isDownloading) {
 					downloadFile(download);
 				}
 			});
-	}, [ rootStore.deviceId, rootStore.downloadStore.downloads.size ]);
+	}, [ rootStore.deviceId, downloadStore.downloads.size ]);
 
 	if (!(isSplashReady && rootStore.storeLoaded) && !skipLoadingScreen) {
 		return null;
 	}
 
 	return (
 		<SafeAreaProvider>
-			<ThemeProvider theme={rootStore.settingStore.theme.Elements}>
+			<ThemeProvider theme={settingStore.getTheme().Elements}>
 				<ThemeSwitcher />
 				<StatusBar
 					style='light'
 					backgroundColor={theme.colors.grey0}
 					hidden={rootStore.isFullscreen}
 				/>
-				<NavigationContainer theme={rootStore.settingStore.theme.Navigation}>
+				<NavigationContainer theme={settingStore.getTheme().Navigation}>
 					<RootNavigator />
 				</NavigationContainer>
 			</ThemeProvider>
 		</SafeAreaProvider>
 	);
-});
+};
 
 App.propTypes = {
 	skipLoadingScreen: PropTypes.bool

__mocks__/zustand.ts

@@ -0,0 +1,65 @@
+// __mocks__/zustand.ts
+import { act } from '@testing-library/react'
+import type * as ZustandExportedTypes from 'zustand'
+export * from 'zustand'
+
+const { create: actualCreate, createStore: actualCreateStore } =
+  jest.requireActual<typeof ZustandExportedTypes>('zustand')
+
+// a variable to hold reset functions for all stores declared in the app
+export const storeResetFns = new Set<() => void>()
+
+const createUncurried = <T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  const store = actualCreate(stateCreator)
+  const initialState = store.getInitialState()
+  storeResetFns.add(() => {
+    store.setState(initialState, true)
+  })
+  return store
+}
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (<T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  console.log('zustand create mock')
+
+  // to support curried version of create
+  return typeof stateCreator === 'function'
+    ? createUncurried(stateCreator)
+    : createUncurried
+}) as typeof ZustandExportedTypes.create
+
+const createStoreUncurried = <T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  const store = actualCreateStore(stateCreator)
+  const initialState = store.getInitialState()
+  storeResetFns.add(() => {
+    store.setState(initialState, true)
+  })
+  return store
+}
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const createStore = (<T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  console.log('zustand createStore mock')
+
+  // to support curried version of createStore
+  return typeof stateCreator === 'function'
+    ? createStoreUncurried(stateCreator)
+    : createStoreUncurried
+}) as typeof ZustandExportedTypes.createStore
+
+// reset all stores after each test run
+afterEach(() => {
+  act(() => {
+    storeResetFns.forEach((resetFn) => {
+      resetFn()
+    })
+  })
+})

components/AudioPlayer.js

@@ -5,15 +5,14 @@
  */
 
 import { Audio, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av';
-import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
 import MediaTypes from '../constants/MediaTypes';
 import { useStores } from '../hooks/useStores';
 import { msToTicks } from '../utils/Time';
 
-const AudioPlayer = observer(() => {
-	const { rootStore } = useStores();
+const AudioPlayer = () => {
+	const { mediaStore } = useStores();
 
 	const [ player, setPlayer ] = useState();
 
@@ -57,48 +56,48 @@ const AudioPlayer = observer(() => {
 						didJustFinish === undefined ||
 						isPlaying === undefined ||
 						positionMs === undefined ||
-						rootStore.mediaStore.isFinished
+						mediaStore.isFinished
 					) {
 						return;
 					}
-					rootStore.mediaStore.isFinished = didJustFinish;
-					rootStore.mediaStore.isPlaying = isPlaying;
-					rootStore.mediaStore.positionTicks = msToTicks(positionMs);
+					mediaStore.isFinished = didJustFinish;
+					mediaStore.isPlaying = isPlaying;
+					mediaStore.positionTicks = msToTicks(positionMs);
 				});
 				setPlayer(sound);
 			}
 		};
 
-		if (rootStore.mediaStore.type === MediaTypes.Audio) {
+		if (mediaStore.type === MediaTypes.Audio) {
 			createPlayer({
-				uri: rootStore.mediaStore.uri,
-				positionMillis: rootStore.mediaStore.positionMillis
+				uri: mediaStore.uri,
+				positionMillis: mediaStore.positionMillis
 			});
 		}
-	}, [ rootStore.mediaStore.type, rootStore.mediaStore.uri ]);
+	}, [ mediaStore.type, mediaStore.uri ]);
 
 	// Update the play/pause state when the store indicates it should
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Audio && rootStore.mediaStore.shouldPlayPause) {
-			if (rootStore.mediaStore.isPlaying) {
+		if (mediaStore.type === MediaTypes.Audio && mediaStore.shouldPlayPause) {
+			if (mediaStore.isPlaying) {
 				player?.pauseAsync();
 			} else {
 				player?.playAsync();
 			}
-			rootStore.mediaStore.shouldPlayPause = false;
+			mediaStore.shouldPlayPause = false;
 		}
-	}, [ rootStore.mediaStore.shouldPlayPause ]);
+	}, [ mediaStore.shouldPlayPause ]);
 
 	// Stop the player when the store indicates it should stop playback
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Audio && rootStore.mediaStore.shouldStop) {
+		if (mediaStore.type === MediaTypes.Audio && mediaStore.shouldStop) {
 			player?.stopAsync();
 			player?.unloadAsync();
-			rootStore.mediaStore.shouldStop = false;
+			mediaStore.shouldStop = false;
 		}
-	}, [ rootStore.mediaStore.shouldStop ]);
+	}, [ mediaStore.shouldStop ]);
 
 	return <></>;
-});
+};
 
 export default AudioPlayer;