refactor: update synchronized data (#2841)

src/__snapshots__/index.test.ts.snap

@@ -5,9 +5,7 @@ exports[`Application root should render without crashing 1`] = `
   "calls": Array [
     Array [
       <BrowserRouter>
-        <App
-          syncInterval={300000}
-        />
+        <App />
       </BrowserRouter>,
       <div
         id="root"

src/app/App.test.tsx

@@ -95,28 +95,4 @@ describe("App", () => {
 			expect(asFragment()).toMatchSnapshot();
 		});
 	});
-
-	it("should render and schedule delegates sync", async () => {
-		process.env.REACT_APP_BUILD_MODE = "demo";
-
-		const { container, asFragment, getByText, getByTestId } = renderWithRouter(<App syncInterval={500} />, {
-			withProviders: false,
-		});
-		expect(getByTestId("Splash__text")).toBeInTheDocument();
-
-		await act(async () => {
-			await new Promise((resolve) => setTimeout(resolve, 3000));
-		});
-
-		await waitFor(() => {
-			expect(getByText(profileTranslations.PAGE_WELCOME.HAS_PROFILES)).toBeInTheDocument();
-
-			expect(container).toBeTruthy();
-
-			expect(getByText("John Doe")).toBeInTheDocument();
-			expect(getByText("Jane Doe")).toBeInTheDocument();
-
-			expect(asFragment()).toMatchSnapshot();
-		});
-	});
 });

src/app/App.tsx

@@ -24,35 +24,32 @@ import { StubStorage } from "tests/mocks";
 import { middlewares, RouterView, routes } from "../router";
 import { EnvironmentProvider, useEnvironmentContext } from "./contexts";
 import { useNetworkStatus } from "./hooks";
+import { useEnvSynchronizer } from "./hooks/use-synchronizer";
 import { i18n } from "./i18n";
-import { httpClient, Scheduler } from "./services";
+import { httpClient } from "./services";
 
 const __DEV__ = process.env.NODE_ENV !== "production";
 
-type Props = {
-	syncInterval?: number;
-};
-
-const Main = ({ syncInterval }: Props) => {
+const Main = () => {
 	const [showSplash, setShowSplash] = useState(true);
 
 	const { pathname } = useLocation();
 	const { env, persist } = useEnvironmentContext();
 	const isOnline = useNetworkStatus();
+	const { start, runAll } = useEnvSynchronizer();
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, [pathname]);
 
-	useLayoutEffect(() => {
-		const syncDelegates = async () => await env.delegates().syncAll();
-		const syncFees = async () => await env.fees().syncAll();
-		const syncExchangeRates = async () => await env.exchangeRates().syncAll();
-		const syncWallets = async () => await env.wallets().syncAll();
+	useEffect(() => {
+		if (!showSplash) {
+			start();
+		}
+	}, [showSplash, start]);
 
+	useLayoutEffect(() => {
 		const boot = async () => {
-			const scheduler = new Scheduler(syncInterval);
-
 			/* istanbul ignore next */
 			const shouldUseFixture: boolean =
 				process.env.REACT_APP_BUILD_MODE === "demo" ||
@@ -61,16 +58,14 @@ const Main = ({ syncInterval }: Props) => {
 
 			await env.verify(shouldUseFixture ? fixtureData : undefined);
 			await env.boot();
-			await Promise.allSettled([syncDelegates(), syncWallets(), syncFees(), syncExchangeRates()]);
+			await runAll();
 			await persist();
 
-			scheduler.schedule([syncDelegates, syncFees, syncWallets, syncExchangeRates], persist);
-
 			setShowSplash(false);
 		};
 
 		boot();
-	}, [env, persist, syncInterval]);
+	}, [env, persist, runAll]);
 
 	if (showSplash) {
 		return <Splash />;
@@ -88,11 +83,7 @@ const Main = ({ syncInterval }: Props) => {
 	);
 };
 
-Main.defaultProps = {
-	syncInterval: 300000,
-};
-
-export const App = ({ syncInterval }: Props) => {
+export const App = () => {
 	/**
 	 * Ensure that the Environment object will not be recreated when the state changes,
 	 * as the data is stored in memory by the `DataRepository`.
@@ -126,13 +117,9 @@ export const App = ({ syncInterval }: Props) => {
 		<ErrorBoundary FallbackComponent={ApplicationError}>
 			<I18nextProvider i18n={i18n}>
 				<EnvironmentProvider env={env}>
-					<Main syncInterval={syncInterval} />
+					<Main />
 				</EnvironmentProvider>
 			</I18nextProvider>
 		</ErrorBoundary>
 	);
 };
-
-App.defaultProps = {
-	syncInterval: 300000,
-};