Files
HaBit/components/layout/global-bottom-nav.tsx
2026-05-24 08:49:37 -06:00

72 lines
1.9 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { AppNav } from "@/components/layout/app-nav";
import { AppDataPrefetcher } from "@/components/layout/app-data-prefetcher";
import { AuthBottomNav } from "@/components/layout/auth-bottom-nav";
import {
NavOffsetProvider,
useNavOffsetRef,
} from "@/components/layout/nav-offset-provider";
import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
import { getOnboardingStatusClient } from "@/lib/onboarding-status";
import { createClient } from "@/lib/supabase/client";
type NavKind = "none" | "auth" | "app";
function MeasuredAppNav() {
const navRef = useNavOffsetRef();
return <AppNav ref={navRef} />;
}
function MeasuredAuthNav() {
const navRef = useNavOffsetRef();
return <AuthBottomNav ref={navRef} />;
}
export function GlobalBottomNav() {
const [navKind, setNavKind] = useState<NavKind>("none");
useEffect(() => {
const supabase = createClient();
async function syncNavState() {
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
setNavKind("auth");
return;
}
const status = await getOnboardingStatusClient();
setNavKind(status?.appComplete === true ? "app" : "none");
}
void syncNavState();
const {
data: { subscription },
} = supabase.auth.onAuthStateChange(() => {
void syncNavState();
});
window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, syncNavState);
return () => {
subscription.unsubscribe();
window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, syncNavState);
};
}, []);
return (
<NavOffsetProvider enabled={navKind !== "none"}>
<AppDataPrefetcher enabled={navKind === "app"} />
{navKind === "app" ? <MeasuredAppNav /> : null}
{navKind === "auth" ? <MeasuredAuthNav /> : null}
</NavOffsetProvider>
);
}