feat: enable seamless linking to bl-web for /info

boklisten · Jul 2, 2023 · aee3206 · aee3206
1 parent 6cf4637
commit aee3206
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/src/components/DynamicLink.tsx b/src/components/DynamicLink.tsx
@@ -1,5 +1,9 @@
 import NextLink, { LinkProps as NextLinkProps } from "next/link";
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
+import { isLoggedIn } from "../api/auth";
+import { getAccessToken, getRefreshToken } from "../api/token";
+import BL_CONFIG from "../utils/bl-config";
+import { useEffect, useState } from "react";
 
 type CustomNextLinkProps = Omit<NextLinkProps, "href"> & {
   _href: NextLinkProps["href"];
@@ -17,15 +21,27 @@ type DynamicLinkProps = Omit<MuiLinkProps<typeof NextLink>, "href"> & {
   testID?: string;
 };
 
-const DynamicLink = ({ href, testID, ...props }: DynamicLinkProps) => (
-  <MuiLink
-    {...props}
-    component={CustomNextLink}
-    _href={href}
-    data-testid={testID}
-    variant={props.variant ?? "body2"}
-    underline={props.underline ?? "none"}
-  />
-);
+const DynamicLink = ({ href, testID, ...props }: DynamicLinkProps) => {
+  // Since we do not have token info while on the server side, we need to wait until we are on the client side to set the href
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+
+  if (String(href).includes(BL_CONFIG.blWeb.basePath) && isLoggedIn()) {
+    href += `?refresh_token=${getRefreshToken()}&access_token=${getAccessToken()}`;
+  }
+
+  return (
+    <MuiLink
+      {...props}
+      component={CustomNextLink}
+      _href={hydrated ? href : ""}
+      data-testid={testID}
+      variant={props.variant ?? "body2"}
+      underline={props.underline ?? "none"}
+    />
+  );
+};
 
 export default DynamicLink;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -37,12 +37,12 @@ const TabLink = ({ title, href, testID }: TabLinkProps) => {
 
 const TAB_LINKS: TabLinkProps[] = [
   {
-    href: BL_CONFIG.blWeb.basePath + "info/general",
+    href: "/info/general",
     title: "Info",
     testID: "infoBtnNav",
   },
   {
-    href: BL_CONFIG.blWeb.basePath + "order",
+    href: BL_CONFIG.blWeb.basePath + "fastbuy/regions",
     title: "Bestill bøker",
     testID: "",
   },

diff --git a/src/components/SideMenuDrawer.tsx b/src/components/SideMenuDrawer.tsx
@@ -74,20 +74,20 @@ export default function SideMenuDrawer() {
           <List>
             <DrawerLink
               title={"Bestill bøker"}
-              href={BL_CONFIG.blWeb.basePath + "order"}
+              href={BL_CONFIG.blWeb.basePath + "fastbuy/regions"}
               icon={<BookIcon />}
             />
 
             {isLoggedIn() && (
               <>
                 <DrawerLink
                   title={"Dine bøker"}
-                  href={BL_CONFIG.blWeb.basePath + "users/me/items"}
+                  href={BL_CONFIG.blWeb.basePath + "u/items"}
                   icon={<MenuBookIcon />}
                 />
                 <DrawerLink
                   title={"Ordrehistorikk"}
-                  href={BL_CONFIG.blWeb.basePath + "users/me/orders"}
+                  href={BL_CONFIG.blWeb.basePath + "u/order"}
                   icon={<ReceiptIcon />}
                 />
               </>
@@ -96,17 +96,17 @@ export default function SideMenuDrawer() {
 
             <DrawerLink
               title={"Åpningstider"}
-              href={BL_CONFIG.blWeb.basePath + "info/branch/select"}
+              href={"/info/branch/select"}
               icon={<AccessTimeIcon />}
             />
             <DrawerLink
               title={"Generell informasjon"}
-              href={BL_CONFIG.blWeb.basePath + "info/general"}
+              href={"/info/general"}
               icon={<InfoIcon />}
             />
             <DrawerLink
               title={"Kontaktinformasjon"}
-              href={BL_CONFIG.blWeb.basePath + "info/contact"}
+              href={"/info/contact"}
               icon={<EmailIcon />}
             />
 
@@ -116,7 +116,7 @@ export default function SideMenuDrawer() {
               <>
                 <DrawerLink
                   title={"Brukerinnstillinger"}
-                  href={BL_CONFIG.blWeb.basePath + "users/me/settings"}
+                  href={BL_CONFIG.blWeb.basePath + "u/edit"}
                   icon={<SettingsIcon />}
                 />
                 <DrawerLink

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -18,6 +18,9 @@ import { Provider } from "react-redux";
 import store from "redux/store";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import "@mui/lab";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { addAccessToken, addRefreshToken } from "../api/token";
 
 class OverriddenAdapter extends DateAdapter {
   // Get years in decending order
@@ -39,6 +42,17 @@ class OverriddenAdapter extends DateAdapter {
 // eslint-disable-next-line unicorn/prevent-abbreviations
 export default function MyApp(props: AppProps) {
   const { Component, pageProps } = props;
+  const router = useRouter();
+
+  useEffect(() => {
+    const { refresh_token, access_token } = router.query;
+
+    if (typeof refresh_token === "string" && typeof access_token === "string") {
+      addAccessToken(access_token);
+      addRefreshToken(refresh_token);
+      router.replace(router.pathname, undefined, { shallow: true });
+    }
+  }, [router]);
 
   return (
     <>

diff --git a/src/pages/matches/index.tsx b/src/pages/matches/index.tsx
@@ -3,26 +3,12 @@ import Head from "next/head";
 import { MatchesList } from "../../components/matches/matchesList/MatchesList";
 import React, { useEffect, useState } from "react";
 import { Alert, Typography } from "@mui/material";
-import { useRouter } from "next/router";
-import { addAccessToken, addRefreshToken } from "../../api/token";
 import { isLoggedIn } from "../../api/auth";
 import Button from "@mui/material/Button";
 import DynamicLink from "../../components/DynamicLink";
 import BL_CONFIG from "../../utils/bl-config";
 
 const MatchesPage: NextPage = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    const { refresh_token, access_token } = router.query;
-
-    if (typeof refresh_token === "string" && typeof access_token === "string") {
-      addAccessToken(access_token);
-      addRefreshToken(refresh_token);
-      router.replace("/matches", undefined, { shallow: true });
-    }
-  }, [router]);
-
   const [hydrated, setHydrated] = useState(false);
   useEffect(() => {
     setHydrated(true);