Fix navigation to support base href

RADAR-base · Oct 3, 2024 · 3548a82 · 3548a82
1 parent 20e62f6
commit 3548a82
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,4 +38,5 @@ dist/
 cypress/videos
 cypress/screenshots
 
-.idea
+.idea
+.env
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/sdk/index.ts b/pkg/sdk/index.ts
@@ -2,14 +2,14 @@ import { Configuration, FrontendApi } from "@ory/client"
 import { edgeConfig } from "@ory/integrations/next"
 
 const localConfig = {
-  basePath: process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL ?? "" + "/api/.ory",
+  basePath: `${process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL}/api/.ory`,
   baseOptions: {
     withCredentials: true,
   },
 }
 
 export default new FrontendApi(
   new Configuration(
-    process.env.NEXT_PUBLIC_KRATOS_PUBLIC_URL ? localConfig : edgeConfig,
+    localConfig,
   ),
 )
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>