website refactor

apps/website/client-wrapper/CreateLeagueWizard.tsx

@@ -12,6 +12,7 @@ import type { Weekday } from '@/lib/types/Weekday';
 import type { WizardErrors } from '@/lib/types/WizardErrors';
 import type { LeagueScoringPresetViewModel } from '@/lib/view-models/LeagueScoringPresetViewModel';
 import { CreateLeagueWizardTemplate, Step } from '@/templates/CreateLeagueWizardTemplate';
+import { SearchParamBuilder } from '@/lib/routing/search-params/SearchParamBuilder';
 import { 
   Award, 
   Calendar, 
@@ -91,7 +92,7 @@ type LeagueWizardFormModel = LeagueConfigFormModel & {
 
 interface CreateLeagueWizardProps {
   stepName: StepName;
-  onStepChange: (stepName: StepName) => void;
+  onStepChange?: (stepName: StepName) => void;
 }
 
 function stepNameToStep(stepName: StepName): Step {
@@ -200,6 +201,16 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
   const router = useRouter();
   const { session } = useAuth();
 
+  const handleStepChange = useCallback((newStepName: StepName) => {
+    if (onStepChange) {
+      onStepChange(newStepName);
+    } else {
+      const builder = new SearchParamBuilder();
+      builder.step(newStepName);
+      router.push(`/leagues/create${builder.build()}`);
+    }
+  }, [onStepChange, router]);
+
   const step = stepNameToStep(stepName);
   const [loading, setLoading] = useState(false);
   const [presetsLoading, setPresetsLoading] = useState(true);
@@ -330,19 +341,19 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
     const nextStep = (step < 7 ? ((step + 1) as Step) : step);
     saveHighestStep(nextStep);
     setHighestCompletedStep((prev) => Math.max(prev, nextStep));
-    onStepChange(stepToStepName(nextStep));
+    handleStepChange(stepToStepName(nextStep));
   };
 
   const goToPreviousStep = () => {
     const prevStep = (step > 1 ? ((step - 1) as Step) : step);
-    onStepChange(stepToStepName(prevStep));
+    handleStepChange(stepToStepName(prevStep));
   };
 
   const goToStep = useCallback((targetStep: Step) => {
     if (targetStep <= highestCompletedStep) {
-      onStepChange(stepToStepName(targetStep));
+      handleStepChange(stepToStepName(targetStep));
     }
-  }, [highestCompletedStep, onStepChange]);
+  }, [highestCompletedStep, handleStepChange]);
 
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
@@ -413,7 +424,7 @@ export function CreateLeagueWizard({ stepName, onStepChange }: CreateLeagueWizar
     }));
 
     if (LeagueWizardCommandModel.hasWizardErrors(allErrors)) {
-      onStepChange('basics');
+      handleStepChange('basics');
       return;
     }