xtablo-source/ui/src/providers/UserStoreProvider.tsx

import { createStore, StoreApi, useStore } from "zustand";
import React from "react";
import { supabase } from "@ui/hooks/auth";
import { useQuery } from "@tanstack/react-query";
import { Tables } from "@ui/types/database.types";
import { useSession } from "@ui/contexts/SessionContext";
import { api } from "@ui/lib/api";
import { LoadingSpinner } from "@ui/components/LoadingSpinner";

type User = Tables<"profiles"> & {
  streamToken: string | null;
};

const UserStoreContext = React.createContext<StoreApi<User> | null>(null);

export const UserStoreProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const { session } = useSession();
  const shouldFetchUser = !!session?.access_token;
  const { data, isPending } = useQuery<User | null>({
    queryKey: ["user"],
    queryFn: async () => {
      const { data, error } = await supabase.from("profiles").select("*");
      if (error) throw error;
      let token = null;
      try {
        const {
          data: { token: streamToken },
        } = await api.get("/api/v1/users/get-stream-token", {
          headers: {
            Authorization: `Bearer ${session?.access_token}`,
          },
        });
        token = streamToken;
      } catch (error) {
        console.error("Failed to get stream token:", error);
      }
      return {
        ...data[0],
        streamToken: token,
      };
    },
    enabled: shouldFetchUser,
  });

  if (isPending && shouldFetchUser) {
    return <LoadingSpinner />;
  }

  if (!data) {
    return children;
  }

  const store = createStore<User>()(() => data);

  return (
    <UserStoreContext.Provider value={store as StoreApi<User>}>
      {children}
    </UserStoreContext.Provider>
  );
};

export const useUser = () => {
  const store = React.useContext(UserStoreContext);
  if (!store) {
    throw new Error("Missing UserStoreProvider");
  }
  return useStore(store);
};