Stopwatch during workout logging (#1166)

* refactor(frontend): change variable names * refactor(frontend): change order of imports * feat(frontend): start displaying stop watch details * feat(frontend): make the loading screen for current workout better * feat(frontend): reset values of timer and stopwatch when it is reset * feat(frontend): get stopwatch functionality working * feat(frontend): allow cancelling stopwatch * chore(utils/dependent): remove useless unwrap * chore(frontend): remove stale time for query * fix(frontend): display items * feat(frontend): remove dependency on exercise name to be stored in the atom * feat(frontend): close the drawer on cancel * ci: Run CI * build(frontend): upgrade mantine deps * build(typescript): upgrade most deps * build(typescript): upgrade other deps too * fix(frontend): use internal methods instead of remix utils * ci: Run CI
IgnisDa · Jan 2, 2025 · 1161083 · 1161083
1 parent 17cf833
commit 1161083
Show file tree

Hide file tree

Showing 16 changed files with 1,185 additions and 650 deletions.
diff --git a/apps/frontend/app/lib/generals.tsx b/apps/frontend/app/lib/generals.tsx
@@ -430,7 +430,6 @@ export const getMetadataDetailsQuery = (metadataId?: string | null) =>
 						.request(MetadataDetailsDocument, { metadataId })
 						.then((data) => data.metadataDetails)
 			: skipToken,
-		staleTime: dayjs.duration(1, "day").asMilliseconds(),
 	});
 
 export const getUserMetadataDetailsQuery = (metadataId?: string | null) =>

diff --git a/apps/frontend/app/lib/hooks.ts b/apps/frontend/app/lib/hooks.ts
@@ -23,7 +23,12 @@ import {
 	getUserMetadataDetailsQuery,
 	selectRandomElement,
 } from "~/lib/generals";
-import { type InProgressWorkout, useCurrentWorkout } from "~/lib/state/fitness";
+import {
+	type InProgressWorkout,
+	useCurrentWorkout,
+	useCurrentWorkoutStopwatchAtom,
+	useCurrentWorkoutTimerAtom,
+} from "~/lib/state/fitness";
 import type { loader as dashboardLoader } from "~/routes/_dashboard";
 
 export const useGetMantineColors = () => {
@@ -96,9 +101,13 @@ export const useConfirmSubmit = () => {
 
 export const useGetWorkoutStarter = () => {
 	const revalidator = useRevalidator();
-	const [_, setCurrentWorkout] = useCurrentWorkout();
+	const [_w, setCurrentWorkout] = useCurrentWorkout();
+	const [_t, setTimer] = useCurrentWorkoutTimerAtom();
+	const [_s, setStopwatch] = useCurrentWorkoutStopwatchAtom();
 
 	const fn = (wkt: InProgressWorkout, action: FitnessAction) => {
+		setTimer(null);
+		setStopwatch(null);
 		setCurrentWorkout(wkt);
 		window.location.href = $path("/fitness/:action", { action });
 		revalidator.revalidate();

diff --git a/apps/frontend/app/lib/state/fitness.ts b/apps/frontend/app/lib/state/fitness.ts
@@ -52,7 +52,6 @@ type AlreadyDoneExerciseSet = Pick<ExerciseSet, "statistic">;
 type Media = { imageSrc: string; key: string };
 
 export type Exercise = {
-	name: string;
 	lot: ExerciseLot;
 	identifier: string;
 	exerciseId: string;
@@ -87,6 +86,7 @@ export type InProgressWorkout = {
 	replacingExerciseIdx?: number;
 	updateWorkoutTemplateId?: string;
 	durations: Array<WorkoutDuration>;
+	timerDrawerLot: "timer" | "stopwatch";
 	currentActionOrCompleted: FitnessAction;
 };
 
@@ -118,6 +118,7 @@ export const getDefaultWorkout = (
 		videos: [],
 		supersets: [],
 		exercises: [],
+		timerDrawerLot: "timer",
 		startTime: date.toISOString(),
 		currentActionOrCompleted: fitnessEntity,
 		durations: [{ from: date.toISOString() }],
@@ -132,7 +133,6 @@ export const getExerciseDetailsQuery = (exerciseId: string) =>
 			clientGqlService
 				.request(ExerciseDetailsDocument, { exerciseId })
 				.then((data) => data.exerciseDetails),
-		staleTime: dayjsLib.duration(1, "day").asMilliseconds(),
 	});
 
 export const getUserExerciseDetailsQuery = (exerciseId: string) =>
@@ -262,12 +262,23 @@ export type CurrentWorkoutTimer = {
 	triggeredBy?: { exerciseIdentifier: string; setIdx: number };
 };
 
-const timerAtom = atomWithStorage<CurrentWorkoutTimer | null>(
+const currentWorkoutTimerAtom = atomWithStorage<CurrentWorkoutTimer | null>(
 	"CurrentWorkoutTimer",
 	null,
 );
 
-export const useTimerAtom = () => useAtom(timerAtom);
+export const useCurrentWorkoutTimerAtom = () =>
+	useAtom(currentWorkoutTimerAtom);
+
+export type CurrentWorkoutStopwatch = Array<WorkoutDuration> | null;
+
+const currentWorkoutStopwatchAtom = atomWithStorage<CurrentWorkoutStopwatch>(
+	"CurrentWorkoutStopwatch",
+	null,
+);
+
+export const useCurrentWorkoutStopwatchAtom = () =>
+	useAtom(currentWorkoutStopwatchAtom);
 
 const measurementsDrawerOpenAtom = atom(false);
 
@@ -308,7 +319,6 @@ export const duplicateOldWorkout = async (
 		const exerciseDetails = await getExerciseDetails(ex.id);
 		inProgress.exercises.push({
 			identifier: randomUUID(),
-			name: exerciseDetails.details.name,
 			isShowDetailsOpen: userFitnessPreferences.logging.showDetailsWhileEditing
 				? exerciseIdx === 0
 				: false,
@@ -397,7 +407,6 @@ export const addExerciseToWorkout = async (
 		}
 		draft.exercises.push({
 			identifier: randomUUID(),
-			name: exerciseDetails.details.name,
 			isShowDetailsOpen: userFitnessPreferences.logging.showDetailsWhileEditing,
 			exerciseId: ex.name,
 			lot: ex.lot,

diff --git a/apps/frontend/app/routes/_dashboard.collections.list.tsx b/apps/frontend/app/routes/_dashboard.collections.list.tsx
@@ -74,7 +74,6 @@ import {
 	PRO_REQUIRED_MESSAGE,
 	clientGqlService,
 	commaDelimitedString,
-	dayjsLib,
 	getPartialMetadataDetailsQuery,
 	openConfirmationModal,
 	queryClient,
@@ -309,7 +308,6 @@ const DisplayCollection = (props: {
 			}
 			return images;
 		},
-		staleTime: dayjsLib.duration(1, "hour").asMilliseconds(),
 	});
 
 	const [hoveredStates, setHoveredStates] = useListState<boolean>([]);