Fixes PR Preview Link Auto Redirecting

package.json

@@ -34,7 +34,7 @@
     "react-map-gl": "5.2.11",
     "react-overlays": "^5.1.1",
     "react-resize-panel": "^0.3.5",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "react-tooltip": "^5.5.1",
     "react-transition-group": "^4.4.2",

src/components/InvitationModal/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useState,
   useRef,
+  useMemo,
 } from 'react';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { faCircle, faClose, faXmark } from '@fortawesome/free-solid-svg-icons';
@@ -38,6 +39,11 @@ export function InvitationModalContent(): React.ReactElement {
   const [validMessage, setValidMessage] = useState('');
   const [validClassName, setValidClassName] = useState('');
 
+  const redirectURL = useMemo(
+    () => window.location.href.split('/#')[0] ?? '/',
+    []
+  );
+
   const handleChangeSearch = useCallback(() => {
     setValidMessage('');
     setValidClassName('');
@@ -50,6 +56,7 @@ export function InvitationModalContent(): React.ReactElement {
       friendEmail: input.current?.value,
       IDToken: IdToken,
       version: currentVersion,
+      redirectURL,
     });
     return axios.post(
       `${CLOUD_FUNCTION_BASE_URL}/createFriendInvitation`,
@@ -60,7 +67,7 @@ export function InvitationModalContent(): React.ReactElement {
         },
       }
     );
-  }, [accountContext, currentVersion, term]);
+  }, [accountContext, currentVersion, term, redirectURL]);
 
   // verify email with a regex and send invitation if valid
   const verifyEmail = useCallback((): void => {

src/components/InvitationModal/stylesheet.scss

@@ -108,41 +108,6 @@
       }
     }
 
-    //Style for search dropdown
-
-    #recent-invites {
-      width: 282px;
-      max-height: 96px;
-      overflow-y: scroll;
-      border-radius: 4px;
-      background-color: rgb(51, 51, 51);
-      text-align: start;
-      position: absolute;
-      z-index: 2;
-      margin-top: 30px;
-
-      @include light {
-        background-color: $color-background-light;
-      }
-
-      .search-option {
-        width: 282px;
-        height: 32px;
-        align-content: flex-start;
-        padding: 5px;
-        padding-left: 15px;
-        position: relative;
-
-        &.active {
-          background-color: $color-neutral;
-        }
-
-        &:hover {
-          background-color: $color-border;
-        }
-      }
-    }
-
     .divider {
       height: 1.5px;
       display: flex;
@@ -168,6 +133,8 @@
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: flex-start;
+      align-content: flex-start;
+      row-gap: 8px;
       padding-left: 25px;
       padding-right: 25px;
       height: 100px;
@@ -182,7 +149,7 @@
         @include card;
         background-color: rgb(67, 67, 67);
         padding: 4px 8px;
-        height: 26px;
+        height: 100%;
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -207,6 +174,7 @@
     .email-and-status {
       display: flex;
       flex-direction: column;
+      height: 26px;
     }
 
     .Pending {

src/components/InviteBackLink/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import axios from 'axios';
 
 import { CLOUD_FUNCTION_BASE_URL } from '../../constants';
@@ -30,26 +30,33 @@ const handleInvite = async (inviteId: string | undefined): Promise<void> => {
 
 export default function InviteBackLink(): React.ReactElement {
   const navigate = useNavigate();
+  const location = useLocation();
+
   const { id } = useParams();
   const [state, setState] = useState(LoadingState.LOADING);
 
+  const redirectURL = useMemo(
+    () => location.pathname.split('/#')[0] ?? '/',
+    [location]
+  );
+
   useEffect(() => {
     if (id && navigate) {
       handleInvite(id)
         .then(() => {
           setState(LoadingState.SUCCESS);
           setTimeout(() => {
-            navigate('/');
+            navigate(redirectURL);
           }, 5000);
         })
         .catch(() => {
           setState(LoadingState.ERROR);
           setTimeout(() => {
-            navigate('/');
+            navigate(redirectURL);
           }, 10000);
         });
     }
-  }, [id, navigate]);
+  }, [id, navigate, redirectURL]);
 
   if (state === LoadingState.LOADING) {
     return (
@@ -77,7 +84,7 @@ export default function InviteBackLink(): React.ReactElement {
         type="button"
         className="continue-button"
         onClick={(): void => {
-          navigate('/');
+          navigate(redirectURL);
         }}
       >
         Continue

src/components/RouterComponent/index.tsx

@@ -1,24 +1,21 @@
 import React from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate, HashRouter } from 'react-router-dom';
 
 import App from '../App';
 import InviteBackLink from '../InviteBackLink';
 
 export default function RouterComponent(): React.ReactElement {
-  console.log('BASE_URL', process.env.PUBLIC_URL);
-  console.log('NODE_ENV', process.env.NODE_ENV);
   return (
-    <BrowserRouter>
+    <HashRouter>
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/invite/:id" element={<InviteBackLink />} />
-        <Route path="/pr-preview/:pr/invite/:id" element={<InviteBackLink />} />
-        <Route
-          path="/pr-preview/:pr/*"
-          element={<Navigate to="/pr-preview/:pr/" replace />}
-        />
+        <Route path="/pr-preview/:id">
+          <Route path="" element={<App />} />
+          <Route path="invite/:id" element={<InviteBackLink />} />
+        </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
-    </BrowserRouter>
+    </HashRouter>
   );
 }

src/constants.ts

@@ -76,8 +76,8 @@ const CAMPUSES: Record<string, string> = {
 
 const BACKEND_BASE_URL = 'https://gt-scheduler.azurewebsites.net';
 const FIREBASE_PROJECT_ID = firebaseConfig.projectId || `gt-scheduler-web-dev`;
-// const CLOUD_FUNCTION_BASE_URL = `https://us-central1-${FIREBASE_PROJECT_ID}.cloudfunctions.net`;
-const CLOUD_FUNCTION_BASE_URL = `http://127.0.0.1:5001/${FIREBASE_PROJECT_ID}/us-central1`;
+const CLOUD_FUNCTION_BASE_URL = `https://us-central1-${FIREBASE_PROJECT_ID}.cloudfunctions.net`;
+// const CLOUD_FUNCTION_BASE_URL = `http://127.0.0.1:5001/${FIREBASE_PROJECT_ID}/us-central1`;
 
 const LARGE_DESKTOP_BREAKPOINT = 1200;
 const DESKTOP_BREAKPOINT = 1024;

yarn.lock

@@ -2071,10 +2071,10 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@remix-run/router@1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.2.tgz#58cd2bd25df2acc16c628e1b6f6150ea6c7455bc"
-  integrity sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==
+"@remix-run/router@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.10.0.tgz#e2170dc2049b06e65bbe883adad0e8ddf8291278"
+  integrity sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==
 
 "@restart/hooks@^0.4.7":
   version "0.4.7"
@@ -9754,20 +9754,20 @@ react-resize-panel@^0.3.5:
     lodash.debounce "^4.0.8"
     react-draggable "^4.0.3"
 
-react-router-dom@^6.8.1:
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.8.1.tgz#7e136b67d9866f55999e9a8482c7008e3c575ac9"
-  integrity sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==
+react-router-dom@^6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.17.0.tgz#ea73f89186546c1cf72b10fcb7356d874321b2ad"
+  integrity sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==
   dependencies:
-    "@remix-run/router" "1.3.2"
-    react-router "6.8.1"
+    "@remix-run/router" "1.10.0"
+    react-router "6.17.0"
 
-react-router@6.8.1:
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.8.1.tgz#e362caf93958a747c649be1b47cd505cf28ca63e"
-  integrity sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==
+react-router@6.17.0:
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.17.0.tgz#7b680c4cefbc425b57537eb9c73bedecbdc67c1e"
+  integrity sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==
   dependencies:
-    "@remix-run/router" "1.3.2"
+    "@remix-run/router" "1.10.0"
 
 [email protected]:
   version "5.0.1"