From 5b6b6353f1bda9dbee77c553c740fd397c4e9b04 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Mon, 26 Feb 2024 14:23:22 -0500 Subject: [PATCH] Don't let back button get stuck on loading screen --- src/goals/DefaultGoal/BaseGoalScreen.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/goals/DefaultGoal/BaseGoalScreen.tsx b/src/goals/DefaultGoal/BaseGoalScreen.tsx index dbcb5fd7f4..cb710e0735 100644 --- a/src/goals/DefaultGoal/BaseGoalScreen.tsx +++ b/src/goals/DefaultGoal/BaseGoalScreen.tsx @@ -1,5 +1,6 @@ import loadable from "@loadable/component"; -import { ReactElement, useEffect } from "react"; +import { type ReactElement, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; import { setCurrentGoal } from "components/GoalTimeline/Redux/GoalActions"; import PageNotFound from "components/PageNotFound/component"; @@ -7,9 +8,10 @@ import DisplayProgress from "goals/DefaultGoal/DisplayProgress"; import Loading from "goals/DefaultGoal/Loading"; import { clearTree } from "goals/MergeDuplicates/Redux/MergeDupsActions"; import { resetReviewEntries } from "goals/ReviewEntries/Redux/ReviewEntriesActions"; -import { StoreState } from "types"; +import { type StoreState } from "types"; import { Goal, GoalStatus, GoalType } from "types/goals"; import { useAppDispatch, useAppSelector } from "types/hooks"; +import { Path } from "types/path"; const CharacterInventory = loadable(() => import("goals/CharacterInventory")); const MergeDup = loadable(() => import("goals/MergeDuplicates")); @@ -35,10 +37,19 @@ function displayComponent(goal: Goal): ReactElement { } export default function LoadingGoalScreen(): ReactElement { - const goalStatus = useAppSelector( - (state: StoreState) => state.goalsState.currentGoal.status + const { goalType, status } = useAppSelector( + (state: StoreState) => state.goalsState.currentGoal ); - return goalStatus === GoalStatus.Loading ? : ; + const navigate = useNavigate(); + + useEffect(() => { + // Prevent getting stuck on loading screen when user clicks the back button. + if (goalType === GoalType.Default) { + navigate(Path.Goals); + } + }, [goalType, navigate]); + + return status === GoalStatus.Loading ? : ; } /**