feat: implement complex selection flow

apps/frontend/src/features/home/home-page.tsx

@@ -20,13 +20,10 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { ApiClientError, apiClient } from '@/lib/api-client';
-import {
-  getCurrentComplexSlug,
-  setCurrentComplexSlug as persistCurrentComplexSlug,
-} from '@/lib/current-complex';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { AdminBooking } from '@repo/api-contract';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 import { Check, Copy } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -123,9 +120,9 @@ function effectiveStatusClassName(status: 'CONFIRMED' | 'CANCELLED' | 'COMPLETED
 
 export function HomePage() {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   const todayIso = useMemo(() => toIsoDateLocal(new Date()), []);
 
-  const [currentComplexSlug, setCurrentComplexSlug] = useState<string | null>(null);
   const [fromDate, setFromDate] = useState(todayIso);
   const [manualDate, setManualDate] = useState(todayIso);
   const [selectedSportId, setSelectedSportId] = useState<string | undefined>();
@@ -134,35 +131,32 @@ export function HomePage() {
   const [isManualBookingOpen, setIsManualBookingOpen] = useState(false);
   const [urlCopied, setUrlCopied] = useState(false);
 
-  useEffect(() => {
-    setCurrentComplexSlug(getCurrentComplexSlug());
-  }, []);
+  const currentComplexQuery = useQuery({
+    queryKey: ['current-complex'],
+    queryFn: () => apiClient.complexes.getCurrent(),
+  });
 
   const myComplexesQuery = useQuery({
     queryKey: ['my-complexes'],
     queryFn: () => apiClient.complexes.listMine(),
   });
 
-  const selectedComplex = useMemo(() => {
-    const complexes = myComplexesQuery.data ?? [];
-
-    if (complexes.length === 0) return null;
-
-    if (currentComplexSlug) {
-      const match = complexes.find((complex) => complex.complexSlug === currentComplexSlug);
-
-      if (match) return match;
+  useEffect(() => {
+    async function autoSelect() {
+      if (myComplexesQuery.data && myComplexesQuery.data.length === 1) {
+        await apiClient.complexes.select({ complexId: myComplexesQuery.data[0].id });
+        queryClient.invalidateQueries({ queryKey: ['current-complex'] });
+      } else if (myComplexesQuery.data && myComplexesQuery.data.length > 1 && !currentComplexQuery.data) {
+        navigate({ to: '/select-complex' });
+      }
     }
 
-    return complexes[0];
-  }, [currentComplexSlug, myComplexesQuery.data]);
+    if (!currentComplexQuery.isLoading && !currentComplexQuery.data && myComplexesQuery.data) {
+      autoSelect();
+    }
+  }, [currentComplexQuery.isLoading, currentComplexQuery.data, myComplexesQuery.data, navigate, queryClient]);
 
-  useEffect(() => {
-    if (!selectedComplex) return;
-
-    setCurrentComplexSlug(selectedComplex.complexSlug);
-    persistCurrentComplexSlug(selectedComplex.complexSlug);
-  }, [selectedComplex]);
+  const selectedComplex = currentComplexQuery.data ?? null;
 
   useEffect(() => {
     if (!selectedComplex?.id) return;