Hydration on the Client (With Effect-RX)

export const GlobalProviders = () => {
  const storedState = getStoredState();
  return (
    <RegistryProvider>
      <HydrationBoundary state={storedState}>
        <StrictMode>
          <AuthSessionManagerWithRouter />
        </StrictMode>
      </HydrationBoundary>
    </RegistryProvider>
  );
};

const AuthSessionManagerWithRouter = () => {
  const session = useRxValue(currentSession);
  const isAuthed = Option.isSome(session);

  return <RouterProvider context={{ isAuthed }} router={router} />;
};

export const currentSession = Rx.make(
  Option.none<CurrentUserAndSessionIdsSchema>(),
).pipe(
  Rx.keepAlive,
);

export const saveStateToStorage = (registry: Registry.Registry) => {
  const dehydratedState = Hydration.dehydrate(registry);
  localStorage.setItem('app-state', JSON.stringify(dehydratedState));
};

export const getStoredState = (): Array<Hydration.DehydratedRx> => {
  const stored = localStorage.getItem('app-state');
  return stored != null ? JSON.parse(stored) : [];
};

Effect.gen(function* () {
      const authService = yield* AuthService;
      const registry = yield* Registry.RxRegistry;
      const session = yield* authService.checkSessionEffect();
      dehydratedState(registry);
      registry.set(currentSession, Option.some(session));
      return session;
    }),