fix(frontend): hard reload when starting new workout

IgnisDa · Dec 27, 2024 · 18f4c36 · 18f4c36
1 parent 4ab9149
commit 18f4c36
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 49 deletions.
diff --git a/apps/frontend/app/lib/hooks.ts b/apps/frontend/app/lib/hooks.ts
@@ -1,7 +1,6 @@
 import { useComputedColorScheme, useMantineTheme } from "@mantine/core";
 import { useForceUpdate } from "@mantine/hooks";
 import {
-	useNavigate,
 	useRevalidator,
 	useRouteLoaderData,
 	useSearchParams,
@@ -96,13 +95,12 @@ export const useConfirmSubmit = () => {
 };
 
 export const useGetWorkoutStarter = () => {
-	const navigate = useNavigate();
 	const revalidator = useRevalidator();
 	const [_, setCurrentWorkout] = useCurrentWorkout();
 
 	const fn = (wkt: InProgressWorkout, action: FitnessAction) => {
 		setCurrentWorkout(wkt);
-		navigate($path("/fitness/:action", { action }), { flushSync: true });
+		window.location.href = $path("/fitness/:action", { action });
 		revalidator.revalidate();
 	};
 	return fn;

diff --git a/apps/frontend/app/routes/_dashboard.fitness.$action.tsx b/apps/frontend/app/routes/_dashboard.fitness.$action.tsx
@@ -272,10 +272,9 @@ export default function Page() {
 	const [supersetWithExerciseIdentifier, setSupersetModalOpened] = useState<
 		string | null
 	>(null);
-	const [
-		reorderDrawerOpened,
-		{ close: reorderDrawerClose, toggle: reorderDrawerToggle },
-	] = useDisclosure(false);
+	const [isReorderDrawerOpened, setIsReorderDrawerOpened] = useState<
+		string | null
+	>();
 	const [_, setMeasurementsDrawerOpen] = useMeasurementsDrawerOpen();
 	const [currentTimer, setCurrentTimer] = useTimerAtom();
 	const [assetsModalOpened, setAssetsModalOpened] = useState<
@@ -284,6 +283,9 @@ export default function Page() {
 	const promptForRestTimer = userPreferences.fitness.logging.promptForRestTimer;
 	const performTasksAfterSetConfirmed = usePerformTasksAfterSetConfirmed();
 	const isWorkoutPaused = isString(currentWorkout?.durations.at(-1)?.to);
+	const isAnySetConfirmed = currentWorkout?.exercises.some(
+		(_e, idx) => getProgressOfExercise(currentWorkout, idx) !== "not-started",
+	);
 
 	useInterval(() => {
 		if (
@@ -368,6 +370,13 @@ export default function Page() {
 		}
 		setCurrentTimer(RESET);
 	};
+	const openReorderDrawer = (exerciseIdentifier: string | null) => {
+		setIsReorderDrawerOpened(exerciseIdentifier);
+		if (!exerciseIdentifier) return;
+		setTimeout(() => {
+			setIsReorderDrawerOpened(null);
+		}, 4000);
+	};
 
 	return (
 		<Container size="sm">
@@ -387,9 +396,10 @@ export default function Page() {
 								pauseOrResumeTimer={pauseOrResumeTimer}
 							/>
 							<ReorderDrawer
-								opened={reorderDrawerOpened}
-								onClose={reorderDrawerClose}
 								key={currentWorkout.exercises.toString()}
+								exerciseToReorder={isReorderDrawerOpened}
+								opened={isReorderDrawerOpened !== undefined}
+								onClose={() => setIsReorderDrawerOpened(undefined)}
 							/>
 							<DisplaySupersetModal
 								supersetWith={supersetWithExerciseIdentifier}
@@ -451,7 +461,7 @@ export default function Page() {
 											? -1
 											: 0) +
 										Number(currentWorkout.exercises.length > 0) +
-										Number(currentWorkout.exercises.length > 1)
+										Number(isAnySetConfirmed)
 									}
 								>
 									<Button
@@ -472,17 +482,17 @@ export default function Page() {
 									{currentWorkout.exercises.length > 1 ? (
 										<>
 											<Button
+												radius="md"
 												color="blue"
 												variant="subtle"
-												onClick={reorderDrawerToggle}
-												radius="md"
 												size="compact-sm"
+												onClick={() => openReorderDrawer(null)}
 											>
 												Reorder
 											</Button>
 										</>
 									) : null}
-									{currentWorkout.exercises.length > 0 ? (
+									{isAnySetConfirmed ? (
 										<>
 											<Button
 												radius="md"
@@ -613,7 +623,7 @@ export default function Page() {
 										startTimer={startTimer}
 										isWorkoutPaused={isWorkoutPaused}
 										openTimerDrawer={openTimerDrawer}
-										reorderDrawerToggle={reorderDrawerToggle}
+										reorderDrawerToggle={openReorderDrawer}
 										openSupersetModal={(s) => setSupersetModalOpened(s)}
 										setOpenAssetsModal={() =>
 											setAssetsModalOpened(ex.identifier)
@@ -1264,9 +1274,9 @@ const ExerciseDisplay = (props: {
 	isWorkoutPaused: boolean;
 	startTimer: FuncStartTimer;
 	openTimerDrawer: () => void;
-	reorderDrawerToggle: () => void;
 	openSupersetModal: (s: string) => void;
 	setOpenAssetsModal: (identifier: string) => void;
+	reorderDrawerToggle: (exerciseIdentifier: string | null) => void;
 }) => {
 	const { isCreatingTemplate } = useLoaderData<typeof loader>();
 	const theme = useMantineTheme();
@@ -1448,8 +1458,8 @@ const ExerciseDisplay = (props: {
 								</Menu.Item>
 							) : null}
 							<Menu.Item
-								onClick={props.reorderDrawerToggle}
 								leftSection={<IconReorder size={14} />}
+								onClick={() => props.reorderDrawerToggle(exercise.identifier)}
 							>
 								Reorder
 							</Menu.Item>
@@ -2493,7 +2503,11 @@ const TimerDrawer = (props: {
 	);
 };
 
-const ReorderDrawer = (props: { opened: boolean; onClose: () => void }) => {
+const ReorderDrawer = (props: {
+	opened: boolean;
+	onClose: () => void;
+	exerciseToReorder: string | null | undefined;
+}) => {
 	const [currentWorkout, setCurrentWorkout] = useCurrentWorkout();
 	const [exerciseElements, exerciseElementsHandlers] = useListState(
 		currentWorkout?.exercises || [],
@@ -2541,38 +2555,51 @@ const ReorderDrawer = (props: { opened: boolean; onClose: () => void }) => {
 							gap="xs"
 						>
 							<Text c="dimmed">Hold and release to reorder exercises</Text>
-							{exerciseElements.map((de, index) => (
-								<Draggable
-									index={index}
-									draggableId={index.toString()}
-									key={`${index}-${de.exerciseId}`}
-								>
-									{(provided) => (
-										<Paper
-											py={6}
-											px="sm"
-											radius="md"
-											withBorder
-											ref={provided.innerRef}
-											{...provided.draggableProps}
-											{...provided.dragHandleProps}
-										>
-											<Group justify="space-between" wrap="nowrap">
-												<Text size="sm">{de.name}</Text>
-												<ThemeIcon size="xs" variant="transparent" color="gray">
-													{match(getProgressOfExercise(currentWorkout, index))
-														.with("complete", () => <IconDropletFilled />)
-														.with("in-progress", () => (
-															<IconDropletHalf2Filled />
-														))
-														.with("not-started", () => <IconDroplet />)
-														.exhaustive()}
-												</ThemeIcon>
-											</Group>
-										</Paper>
-									)}
-								</Draggable>
-							))}
+							{exerciseElements.map((de, index) => {
+								const isForThisExercise =
+									props.exerciseToReorder === de.identifier;
+								return (
+									<Draggable
+										index={index}
+										draggableId={index.toString()}
+										key={`${index}-${de.exerciseId}`}
+									>
+										{(provided) => (
+											<Paper
+												py={6}
+												px="sm"
+												withBorder
+												radius="md"
+												ref={provided.innerRef}
+												{...provided.draggableProps}
+												{...provided.dragHandleProps}
+											>
+												<Group justify="space-between" wrap="nowrap">
+													<Text
+														size="sm"
+														c={isForThisExercise ? "teal" : undefined}
+													>
+														{de.name}
+													</Text>
+													<ThemeIcon
+														size="xs"
+														variant="transparent"
+														color={isForThisExercise ? "teal" : "gray"}
+													>
+														{match(getProgressOfExercise(currentWorkout, index))
+															.with("complete", () => <IconDropletFilled />)
+															.with("in-progress", () => (
+																<IconDropletHalf2Filled />
+															))
+															.with("not-started", () => <IconDroplet />)
+															.exhaustive()}
+													</ThemeIcon>
+												</Group>
+											</Paper>
+										)}
+									</Draggable>
+								);
+							})}
 							{provided.placeholder}
 						</Stack>
 					)}