gitmost/apps/client/src/features/user/user-provider.tsx

import { useAtom } from "jotai";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import React, { useEffect } from "react";
import useCurrentUser from "@/features/user/hooks/use-current-user";
import { useTranslation } from "react-i18next";
import { socketAtom } from "@/features/websocket/atoms/socket-atom.ts";
import { io } from "socket.io-client";
import { SOCKET_URL } from "@/features/websocket/types";
import { useQuerySubscription } from "@/features/websocket/use-query-subscription.ts";
import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
import { useNotificationSocket } from "@/features/notification/hooks/use-notification-socket.ts";
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
import { Error404 } from "@/components/ui/error-404.tsx";
import { queryClient } from "@/main.tsx";
import { makeConnectHandler } from "@/features/user/connect-resync.ts";
import {
  triggerGuardedReload,
  useVersionReloadOnNavigation,
  surfacePreviousReloadBreadcrumb,
} from "@/features/user/guarded-reload.tsx";
import type { AppVersionSocketPayload } from "@/features/user/version-coherence.ts";

export function UserProvider({ children }: React.PropsWithChildren) {
  const [, setCurrentUser] = useAtom(currentUserAtom);
  const { data, isLoading, error, isError } = useCurrentUser();
  const { i18n } = useTranslation();
  const [, setSocket] = useAtom(socketAtom);
  // fetch collab token on load
  const { data: collab } = useCollabToken();

  // version-coherence: fire the armed one-shot reload on the next in-app
  // navigation (variant C — a safe point, not on tab backgrounding).
  useVersionReloadOnNavigation();

  // Surface any breadcrumb left by an auto-reload in the previous page load
  // (the reload cleared the console) so a field report stays diagnosable.
  useEffect(() => {
    surfacePreviousReloadBreadcrumb();
  }, []);

  useEffect(() => {
    if (isLoading || isError) {
      return;
    }

    const newSocket = io(SOCKET_URL, {
      transports: ["websocket"],
      withCredentials: true,
    });

    // @ts-ignore
    setSocket(newSocket);

    // Distinguish the first connect from a reconnect so we only resync after a
    // gap. The handler owns the first-connect-vs-reconnect decision through a
    // private closure flag (see makeConnectHandler): on RECONNECT it refetches
    // the sidebar tree through the authorized API so the view re-converges after
    // a gap where ws events were missed (wifi blip, laptop sleep), invalidating
    // both the root level and the nested-page levels of every space tree.
    const handleConnect = makeConnectHandler(queryClient);
    newSocket.on("connect", () => {
      console.log("ws connected");
      handleConnect();
    });

    // Register the version-coherence listener SYNCHRONOUSLY, before the socket
    // connects: the server emits `app-version` immediately in handleConnection,
    // so a listener attached after connect would miss it on a fast localhost
    // connect. On a version mismatch the client shows a banner and defers the
    // auto-reload to the next in-app navigation (variant C — avoids reloading a
    // backgrounded tab that may hold unsaved input) before it hits a stale chunk.
    newSocket.on("app-version", (payload?: AppVersionSocketPayload) => {
      triggerGuardedReload(payload?.version);
    });

    return () => {
      console.log("ws disconnected");
      newSocket.disconnect();
    };
  }, [isError, isLoading]);

  useQuerySubscription();
  useTreeSocket();
  useNotificationSocket();

  useEffect(() => {
    if (data && data.user && data.workspace) {
      setCurrentUser(data);
      i18n.changeLanguage(
        data.user.locale === "en" ? "en-US" : data.user.locale,
      );
    }
  }, [data, isLoading]);

  useEffect(() => {
    document.documentElement.lang = i18n.resolvedLanguage || i18n.language || "en-US";
  }, [i18n.language, i18n.resolvedLanguage]);

  if (isLoading) return <></>;

  if (isError && error?.["response"]?.status === 404) {
    return <Error404 />;
  }

  if (error) {
    return <></>;
  }

  return <>{children}</>;
}