Fix navigation to support base path

RADAR-base · Oct 2, 2024 · 4e25bf8 · 4e25bf8
1 parent 20e62f6
commit 4e25bf8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -14,9 +14,6 @@ const GlobalStyle = createGlobalStyle((props: ThemeProps) =>
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <div data-testid="app-react">
-      <Head>
-        <base href="/kratos-ui/" />
-      </Head>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
         <Component {...pageProps} />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -15,6 +15,7 @@ const Home: NextPage = () => {
   const [hasSession, setHasSession] = useState<boolean>(false)
   const router = useRouter()
   const onLogout = LogoutLink()
+  const handleNavigation = (href: string) => () => router.push(href)
 
   useEffect(() => {
     ory
@@ -60,62 +61,62 @@ const Home: NextPage = () => {
               <div className="row">
                 <DocsButton
                   testid="study"
-                  href="/study?projectId=STAGING_PROJECT"
                   disabled={hasSession}
                   title={"Study"}
+                  onClick={handleNavigation("/study?projectId=STAGING_PROJECT")}
                 />
                 <DocsButton
                   testid="eligibility"
-                  href="/eligibility"
                   disabled={hasSession}
                   title={"Eligibility"}
+                  onClick={handleNavigation("/eligibility")}
                 />
                 <DocsButton
                   testid="login"
-                  href="/login"
                   disabled={hasSession}
                   title={"Login"}
+                  onClick={handleNavigation("/login")}
                 />
                 <DocsButton
                   testid="sign-up"
-                  href="/registration"
                   disabled={hasSession}
                   title={"Sign Up"}
+                  onClick={handleNavigation("/registration")}
                 />
                 <DocsButton
                   testid="recover-account"
-                  href="/recovery"
                   disabled={hasSession}
                   title="Recover Account"
+                  onClick={handleNavigation("/recovery")}
                 />
                 <DocsButton
                   testid="verify-account"
-                  href="/verification"
                   title="Verify Account"
+                  onClick={handleNavigation("/verification")}
                 />
                 <DocsButton
                   testid="consent"
-                  href="/study-consent"
                   title="Study Consent"
                   disabled={!hasSession}
+                  onClick={handleNavigation("/study-consent")}
                 />
                 <DocsButton
                   testid="apps"
-                  href="/apps"
                   title="Apps"
                   disabled={!hasSession}
+                  onClick={handleNavigation("/apps")}
                 />
                 <DocsButton
                   testid="profile"
-                  href="/profile"
                   title="Profile"
                   disabled={!hasSession}
+                  onClick={handleNavigation("/profile")}
                 />
                 <DocsButton
                   testid="account-settings"
-                  href="/settings"
                   disabled={!hasSession}
                   title={"Account Settings"}
+                  onClick={handleNavigation("/settings")}
                 />
                 <DocsButton
                   testid="logout"

diff --git a/pkg/styled/index.tsx b/pkg/styled/index.tsx
@@ -8,8 +8,6 @@ import {
 import cn from "classnames"
 import styled from "styled-components"
 
-const BASE_URL = process.env.BASE_PATH || ""
-
 export const MarginCard = styled(Card)`
   margin-top: 70px;
   margin-bottom: 18px;
@@ -109,15 +107,14 @@ export const DocsButton = ({
   disabled,
   unresponsive,
 }: DocsButtonProps) => {
-  const url = BASE_URL + href
   return (
     <div className={cn("col-xs-4", { "col-md-12": !unresponsive })}>
       <div className="box">
         <TextLeftButton
           onClick={onClick}
           disabled={disabled}
           data-testid={testid}
-          href={url}
+          href={href}
         >
           {title}
         </TextLeftButton>