Skip to content

Conversation

Sendi0011
Copy link

📝 Description

Fixes the back button navigation issue where clicking the browser's back button would exit the site instead of navigating to the previous step within the workout builder.

Problem

The workout builder uses Zustand for state management, which only stores state in memory. When users navigate through steps (Equipment → Muscles → Exercises), no browser history entries are created. This causes the back button to exit the application entirely instead of going to the previous step.

Solution

  • Added URL synchronization using the browser History API
  • Steps are now tracked in the URL as ?step=1, ?step=2, ?step=3
  • Added popstate event listener to handle back/forward button clicks
  • Store initializes from URL parameter on page load
  • Each step navigation creates a new browser history entry

Changes Made

Main Fix:

  • Modified workout-builder.store.ts to sync with browser history
    • Added updateURL() helper to push history states
    • Added getStepFromURL() to read initial state from URL
    • Added popstate event listener for back/forward navigation
    • Updated setStep, nextStep, prevStep, loadFromSession methods

Additional Improvements:

  • Fixed useSignUp.ts - replaced window.location.href with router.push()
  • Fixed admin modals - replaced window.location.reload() with router.refresh()
    • create-program-modal.tsx
    • add-session-modal.tsx
    • add-week-modal.tsx

Technical Details

  • Uses browser's native History API (pushState, popstate)
  • Zustand store now syncs with URL parameters
  • Backward compatible - existing functionality preserved
  • SSR-safe - checks for window before accessing browser APIs

📋 Checklist

  • My code follows the project conventions
  • This PR includes breaking changes
  • I have updated documentation if necessary

🗃️ Prisma Migrations (if applicable)

  • I have created a migration
  • I have tested the migration locally

📸 Screenshots (if applicable)

Testing completed:

  • ✅ Navigate through Step 1 → Step 2 → Step 3
  • ✅ URL updates to show ?step=1, ?step=2, ?step=3
  • ✅ Back button returns to previous step (not exit site)
  • ✅ Forward button advances to next step
  • ✅ Direct URL access works (/workout-builder?step=2)
  • ✅ Page refresh maintains current step
  • ✅ Equipment and muscle selections persist
  • ✅ No console errors

🔗 Related Issues

Closes #80

- Add URL synchronization to Zustand store using History API
- Sync workout builder step with URL query parameter (?step=1,2,3)
- Add popstate event listener to handle browser back/forward buttons
- Replace window.location.href with router.push in signup flow
- Replace window.location.reload with router.refresh in admin modals
- Initialize store with step from URL on page load

This ensures the back button navigates between workout builder steps
instead of exiting the application entirely.

Fixes Snouzy#80
Copy link

vercel bot commented Oct 10, 2025

@Sendi0011 is attempting to deploy a commit to the Workoutcool Team Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Back button to navigate through app

1 participant