feat: enable seamless linking to bl-web for /info (#351)

* feat: enable seamless linking to bl-web for /info * fix(logout): purge bl-next access token on logout * fix(logout): logout of both bl-next and bl-web upon logout * chore: forgotten prettier from other feature branch :O * chore(info): remove sentence about list of unused books _coming soon_ ™️ * chore: update info/pupil info with latest from bl-web
boklisten · Aug 24, 2023 · e5e89fd · e5e89fd · vercel · Aug 24, 2023
1 parent ea01547
commit e5e89fd
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 40 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
@@ -20,6 +20,7 @@ import LogoutIcon from "@mui/icons-material/Logout";
 import { isLoggedIn, logout } from "api/auth";
 import DynamicLink from "./DynamicLink";
 import BL_CONFIG from "../utils/bl-config";
+import { useRouter } from "next/router";
 
 interface DrawerLinkProps {
   title: string;
@@ -39,6 +40,7 @@ const DrawerLink = ({ title, href, icon, onClick }: DrawerLinkProps) => (
 
 export default function SideMenuDrawer() {
   const [open, setOpen] = useState(false);
+  const router = useRouter();
 
   const toggleDrawer =
     (open: boolean) => (event: KeyboardEvent | MouseEvent) => {
@@ -74,20 +76,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 +98,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,14 +118,17 @@ 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
                   title={"Logg ut"}
-                  href={BL_CONFIG.blWeb.basePath}
+                  href={""}
                   icon={<LogoutIcon />}
-                  onClick={logout}
+                  onClick={() => {
+                    logout();
+                    router.push(BL_CONFIG.blWeb.basePath + "auth/logout");
+                  }}
                 />
               </>
             )}

diff --git a/src/components/matches/UserMatchDetail.tsx b/src/components/matches/UserMatchDetail.tsx
@@ -75,9 +75,9 @@ const UserMatchDetail = ({
       <Box>
         <Typography variant="h2">Hvordan fungerer det?</Typography>
         <Typography>
-          Du skal møte en annen elev og utveksle bøker.
-          Det er viktig at den som mottar bøker scanner hver bok,
-          hvis ikke blir ikke bøkene registrert som levert, og avsender kan få faktura.
+          Du skal møte en annen elev og utveksle bøker. Det er viktig at den som
+          mottar bøker scanner hver bok, hvis ikke blir ikke bøkene registrert
+          som levert, og avsender kan få faktura.
         </Typography>
       </Box>
       <MatchHeader>Du skal møte</MatchHeader>

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);