From 315b0cd48a36f3ebda1d7319501b130c8b27f54b Mon Sep 17 00:00:00 2001 From: jolynloh Date: Mon, 21 Oct 2024 00:43:37 +0800 Subject: [PATCH] Add back navigation confirmation popup on matching pages --- frontend/package-lock.json | 46 ++++++++++++-------------- frontend/package.json | 3 +- frontend/src/contexts/MatchContext.tsx | 14 ++++++++ frontend/src/pages/Home/index.tsx | 2 +- 4 files changed, 39 insertions(+), 26 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 006d964fc1..5833bd7fd3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,11 +18,12 @@ "@mui/material": "^6.1.0", "@uiw/react-md-editor": "^4.0.4", "axios": "^1.7.7", + "history": "^5.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", "react-material-ui-carousel": "^3.4.2", - "react-router-dom": "^6.26.2", + "react-router-dom": "^6.3.0", "react-toastify": "^10.0.5", "socket.io-client": "^4.8.0", "vite-plugin-svgr": "^4.2.0" @@ -3719,14 +3720,6 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@remix-run/router": { - "version": "1.19.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", - "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@rollup/pluginutils": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz", @@ -7293,6 +7286,15 @@ "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==", "license": "MIT" }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -11503,29 +11505,25 @@ } }, "node_modules/react-router": { - "version": "6.26.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", - "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.19.2" - }, - "engines": { - "node": ">=14.0.0" + "history": "^5.2.0" }, "peerDependencies": { "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "6.26.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", - "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.19.2", - "react-router": "6.26.2" - }, - "engines": { - "node": ">=14.0.0" + "history": "^5.2.0", + "react-router": "6.3.0" }, "peerDependencies": { "react": ">=16.8", diff --git a/frontend/package.json b/frontend/package.json index f6cfbc02fa..7f0aba9259 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,11 +22,12 @@ "@mui/material": "^6.1.0", "@uiw/react-md-editor": "^4.0.4", "axios": "^1.7.7", + "history": "^5.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", "react-material-ui-carousel": "^3.4.2", - "react-router-dom": "^6.26.2", + "react-router-dom": "^6.3.0", "react-toastify": "^10.0.5", "socket.io-client": "^4.8.0", "vite-plugin-svgr": "^4.2.0" diff --git a/frontend/src/contexts/MatchContext.tsx b/frontend/src/contexts/MatchContext.tsx index 2554034159..1f4646fccf 100644 --- a/frontend/src/contexts/MatchContext.tsx +++ b/frontend/src/contexts/MatchContext.tsx @@ -15,6 +15,8 @@ import { import { useAuth } from "./AuthContext"; import { toast } from "react-toastify"; import useAppNavigate from "../components/UseAppNavigate"; +import { UNSAFE_NavigationContext } from "react-router-dom"; +import { Action, type History, type Transition } from "history"; type MatchUser = { id: string; @@ -109,6 +111,8 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => { const [matchPending, setMatchPending] = useState(false); const [loading, setLoading] = useState(true); + const navigator = useContext(UNSAFE_NavigationContext).navigator as History; + useEffect(() => { if (user) { setMatchUser({ @@ -135,6 +139,16 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => { openSocketConnection(); matchSocket.emit(MatchEvents.USER_CONNECTED, matchUser?.id); + const unblock = navigator.block((transition: Transition) => { + if ( + transition.action === Action.Replace || + confirm(ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE) + ) { + unblock(); + appNavigate(transition.location.pathname); + } + }); + const handleBeforeUnload = (e: BeforeUnloadEvent) => { e.preventDefault(); e.returnValue = ABORT_MATCH_PROCESS_CONFIRMATION_MESSAGE; // for legacy support, does not actually display message diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx index a48b0a0675..fb5d94108e 100644 --- a/frontend/src/pages/Home/index.tsx +++ b/frontend/src/pages/Home/index.tsx @@ -296,7 +296,7 @@ const Home: React.FC = () => { } onClick={() => { setIsQueryingQnDB(true); - getQuestionList(1, 10, "", complexities, categories, dispatch); + getQuestionList(1, 1, "", complexities, categories, dispatch); }} > {isQueryingQnDB ? : "Find my match!"}