New urls in menu

NDLANO · Nov 7, 2024 · 402955e · 402955e
1 parent 1503d22
commit 402955e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 29 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -23,6 +23,11 @@ export const MULTIDISCIPLINARY_SUBJECT_ID = "urn:subject:d1fe9d0a-a54d-49db-a4c2
 export const TOOLBOX_TEACHER_SUBJECT_ID = "urn:subject:1:9bb7b427-3f5b-4c45-9719-efc509f3d9cc";
 export const TOOLBOX_STUDENT_SUBJECT_ID = "urn:subject:1:54b1727c-2d91-4512-901c-8434e13339b4";
 
+export const FILM_PAGE_URL = "/f/ndla-film/24d0e0db3c02";
+export const MULTIDISCIPLINARY_URL = "/f/tverrfaglige-temaer/daaf4e2dd8b0";
+export const TOOLBOX_TEACHER_URL = "/f/verktoykassa-%E2%80%93-for-larere/c697e0278768";
+export const TOOLBOX_STUDENT_URL = "/f/verktoykassa-%E2%80%93-for-elever/107af8b8e7d2";
+
 export const SKIP_TO_CONTENT_ID = "SkipToContentId";
 export const SUPPORTED_LANGUAGES = ["nb", "nn", "en", "se"];
 export const STORED_LANGUAGE_COOKIE_KEY = "language";

diff --git a/src/containers/Masthead/MastheadContainer.tsx b/src/containers/Masthead/MastheadContainer.tsx
@@ -75,11 +75,11 @@ const DrawerWrapper = styled("div", {
 
 const mastheadQuery = gql`
   query mastHead($subjectId: String!) {
-    subject: node(id: $subjectId) {
-      ...MastheadDrawer_Subject
+    root: node(id: $subjectId) {
+      ...MastheadDrawer_Root
     }
   }
-  ${MastheadDrawer.fragments.subject}
+  ${MastheadDrawer.fragments.root}
 `;
 
 const MastheadContainer = () => {
@@ -120,7 +120,7 @@ const MastheadContainer = () => {
     <ErrorBoundary>
       <Masthead fixed skipToMainContentId={SKIP_TO_CONTENT_ID} onCloseAlert={(id) => closeAlert(id)} messages={alerts}>
         <DrawerWrapper>
-          <MastheadDrawer subject={data?.subject} crumbs={crumbs} />
+          <MastheadDrawer root={data?.root} crumbs={crumbs} />
           <MastheadSearch />
         </DrawerWrapper>
         <SafeLink to="/" aria-label="NDLA" title="NDLA">

diff --git a/src/containers/Masthead/drawer/DefaultMenu.tsx b/src/containers/Masthead/drawer/DefaultMenu.tsx
@@ -18,11 +18,16 @@ import { MenuType } from "./drawerMenuTypes";
 import { DrawerPortion, DrawerHeader, DrawerList, DrawerListItem } from "./DrawerPortion";
 import DrawerRowHeader from "./DrawerRowHeader";
 import useArrowNavigation from "./useArrowNavigation";
+import { useEnablePrettyUrls } from "../../../components/PrettyUrlsContext";
 import {
   FILM_PAGE_PATH,
+  FILM_PAGE_URL,
   MULTIDISCIPLINARY_SUBJECT_ID,
+  MULTIDISCIPLINARY_URL,
   TOOLBOX_STUDENT_SUBJECT_ID,
+  TOOLBOX_STUDENT_URL,
   TOOLBOX_TEACHER_SUBJECT_ID,
+  TOOLBOX_TEACHER_URL,
 } from "../../../constants";
 import { GQLDefaultMenu_RootFragment, GQLDrawerContent_FrontpageMenuFragment } from "../../../graphqlTypes";
 import { removeUrn } from "../../../routeHelpers";
@@ -49,26 +54,31 @@ const StyledDrawerPortion = styled(DrawerPortion, {
   },
 });
 
-const multiDiscUrl = `/${removeUrn(MULTIDISCIPLINARY_SUBJECT_ID)}`;
-const studentToolboxUrl = `/${removeUrn(TOOLBOX_STUDENT_SUBJECT_ID)}`;
-const teacherToolboxUrl = `/${removeUrn(TOOLBOX_TEACHER_SUBJECT_ID)}`;
+const filmUrl = (enablePrettyUrl: Boolean) => (enablePrettyUrl ? FILM_PAGE_URL : FILM_PAGE_PATH);
+const multiDiscUrl = (enablePrettyUrl: Boolean) =>
+  enablePrettyUrl ? MULTIDISCIPLINARY_URL : `/${removeUrn(MULTIDISCIPLINARY_SUBJECT_ID)}`;
+const studentToolboxUrl = (enablePrettyUrl: Boolean) =>
+  enablePrettyUrl ? TOOLBOX_STUDENT_URL : `/${removeUrn(TOOLBOX_STUDENT_SUBJECT_ID)}`;
+const teacherToolboxUrl = (enablePrettyUrl: Boolean) =>
+  enablePrettyUrl ? TOOLBOX_TEACHER_URL : `/${removeUrn(TOOLBOX_TEACHER_SUBJECT_ID)}`;
 
 interface Props {
   onClose: () => void;
   setActiveMenu: (type: MenuType | undefined) => void;
   setFrontpageMenu: (menu: GQLDrawerContent_FrontpageMenuFragment) => void;
   dynamicMenus: GQLDrawerContent_FrontpageMenuFragment[];
   dynamicId?: string;
-  subject?: GQLDefaultMenu_RootFragment;
+  root?: GQLDefaultMenu_RootFragment;
   type?: MenuType;
   onCloseMenuPortion: () => void;
 }
 
 const validMenus: MenuType[] = ["subject", "programme", "about"];
 
-const DefaultMenu = ({ onClose, setActiveMenu, subject, type, setFrontpageMenu, dynamicMenus, dynamicId }: Props) => {
+const DefaultMenu = ({ onClose, setActiveMenu, root, type, setFrontpageMenu, dynamicMenus, dynamicId }: Props) => {
   const previousType = usePrevious(type);
   const { t } = useTranslation();
+  const enablePrettyUrl = useEnablePrettyUrls();
   const { setShouldCloseLevel } = useDrawerContext();
 
   const onRightClick = useCallback(
@@ -113,12 +123,12 @@ const DefaultMenu = ({ onClose, setActiveMenu, subject, type, setFrontpageMenu,
           title={t("masthead.menuOptions.programme")}
           onClick={() => setActiveMenu("programme")}
         />
-        {subject && (
+        {root && root.nodeType === "SUBJECT" && (
           <DrawerRowHeader
             ownsId="subject-menu"
             id="subject"
             type="button"
-            title={subject.name}
+            title={root.name}
             onClick={() => setActiveMenu("subject")}
           />
         )}
@@ -129,21 +139,21 @@ const DefaultMenu = ({ onClose, setActiveMenu, subject, type, setFrontpageMenu,
           title={t("masthead.menuOptions.subjects")}
           onClose={onClose}
         />
-        <DrawerMenuItem id="film" type="link" to={FILM_PAGE_PATH} onClose={onClose}>
+        <DrawerMenuItem id="film" type="link" to={filmUrl(enablePrettyUrl)} onClose={onClose}>
           {t("masthead.menuOptions.film")}
         </DrawerMenuItem>
-        <DrawerMenuItem id="multidisciplinary" type="link" to={multiDiscUrl} onClose={onClose}>
+        <DrawerMenuItem id="multidisciplinary" type="link" to={multiDiscUrl(enablePrettyUrl)} onClose={onClose}>
           {t("masthead.menuOptions.multidisciplinarySubjects")}
         </DrawerMenuItem>
         <DrawerListItem>
           <DrawerHeader textStyle="label.large" tabIndex={-1} fontWeight="bold" asChild consumeCss>
             <span>{t("menu.tipsAndAdvice")}</span>
           </DrawerHeader>
         </DrawerListItem>
-        <DrawerMenuItem id="toolboxStudents" type="link" to={studentToolboxUrl} onClose={onClose}>
+        <DrawerMenuItem id="toolboxStudents" type="link" to={studentToolboxUrl(enablePrettyUrl)} onClose={onClose}>
           {t("masthead.menuOptions.toolboxStudents")}
         </DrawerMenuItem>
-        <DrawerMenuItem id="toolboxTeachers" type="link" to={teacherToolboxUrl} onClose={onClose}>
+        <DrawerMenuItem id="toolboxTeachers" type="link" to={teacherToolboxUrl(enablePrettyUrl)} onClose={onClose}>
           {t("masthead.menuOptions.toolboxTeachers")}
         </DrawerMenuItem>
         <DrawerListItem>
@@ -171,6 +181,9 @@ DefaultMenu.fragments = {
     fragment DefaultMenu_Root on Node {
       id
       name
+      url
+      path
+      nodeType
     }
   `,
 };

diff --git a/src/containers/Masthead/drawer/DrawerContent.tsx b/src/containers/Masthead/drawer/DrawerContent.tsx
@@ -22,7 +22,7 @@ interface Props {
   onClose: () => void;
   onCloseMenuPortion: () => void;
   topicPath: string[];
-  subject?: GQLDrawerContent_RootFragment;
+  root?: GQLDrawerContent_RootFragment;
   type: MenuType;
   setFrontpageMenu: Dispatch<SetStateAction<GQLDrawerContent_FrontpageMenuFragment[]>>;
   setTopicPathIds: Dispatch<SetStateAction<string[]>>;
@@ -35,7 +35,7 @@ const DrawerContent = ({
   type,
   onCloseMenuPortion,
   topicPath,
-  subject,
+  root,
   setTopicPathIds,
   setFrontpageMenu,
   menuItems,
@@ -46,7 +46,7 @@ const DrawerContent = ({
   } else if (type === "subject") {
     return (
       <SubjectMenu
-        subject={subject}
+        subject={root}
         onClose={onClose}
         onCloseMenuPortion={onCloseMenuPortion}
         topicPathIds={topicPath}

diff --git a/src/containers/Masthead/drawer/MastheadDrawer.tsx b/src/containers/Masthead/drawer/MastheadDrawer.tsx
@@ -20,7 +20,7 @@ import { LanguageSelector } from "../../../components/LanguageSelector";
 import { SKIP_TO_CONTENT_ID } from "../../../constants";
 import {
   GQLDrawerContent_FrontpageMenuFragment,
-  GQLMastheadDrawer_SubjectFragment,
+  GQLMastheadDrawer_RootFragment,
   GQLMastheadFrontpageQuery,
   GQLMastheadProgrammeQuery,
 } from "../../../graphqlTypes";
@@ -100,7 +100,7 @@ const StyledDrawer = styled(DialogContent, {
 });
 
 interface Props {
-  subject?: GQLMastheadDrawer_SubjectFragment;
+  root?: GQLMastheadDrawer_RootFragment;
   crumbs: string[];
 }
 
@@ -122,11 +122,11 @@ const mastheadProgrammeQuery = gql`
   ${DrawerContent.fragments.programmeMenu}
 `;
 
-const MastheadDrawer = ({ subject, crumbs }: Props) => {
+const MastheadDrawer = ({ root, crumbs }: Props) => {
   const [open, setOpen] = useState(false);
   const [frontpageMenu, setFrontpageMenu] = useState<GQLDrawerContent_FrontpageMenuFragment[]>([]);
   const { subjectId: maybeSubjectId, topicList: tL, programme, slug } = useUrnIds();
-  const subjectId = subject?.id || maybeSubjectId;
+  const subjectId = root?.id || maybeSubjectId;
   const topicList = tL.length > 0 ? tL : crumbs;
   const prevProgramme = usePrevious(programme);
   const [type, setType] = useState<MenuType | undefined>(undefined);
@@ -257,7 +257,7 @@ const MastheadDrawer = ({ subject, crumbs }: Props) => {
                   dynamicMenus={
                     (frontpageQuery.data?.frontpage?.menu ?? []) as GQLDrawerContent_FrontpageMenuFragment[]
                   }
-                  subject={subject}
+                  root={root}
                   type={type}
                 />
                 {type && (
@@ -266,7 +266,7 @@ const MastheadDrawer = ({ subject, crumbs }: Props) => {
                     type={type}
                     menuItems={frontpageMenu}
                     topicPath={topicPath}
-                    subject={subject}
+                    root={root}
                     setFrontpageMenu={setFrontpageMenu}
                     setTopicPathIds={setTopicPath}
                     onCloseMenuPortion={onCloseMenuPortion}
@@ -294,8 +294,8 @@ const MastheadDrawer = ({ subject, crumbs }: Props) => {
 };
 
 MastheadDrawer.fragments = {
-  subject: gql`
-    fragment MastheadDrawer_Subject on Node {
+  root: gql`
+    fragment MastheadDrawer_Root on Node {
       ...DefaultMenu_Root
       ...DrawerContent_Root
     }

diff --git a/src/graphqlTypes.ts b/src/graphqlTypes.ts
@@ -2912,7 +2912,7 @@ export type GQLMastHeadQueryVariables = Exact<{
 
 export type GQLMastHeadQuery = {
   __typename?: "Query";
-  subject?: { __typename?: "Node" } & GQLMastheadDrawer_SubjectFragment;
+  root?: { __typename?: "Node" } & GQLMastheadDrawer_RootFragment;
 };
 
 export type GQLAboutMenuFragment = {
@@ -2942,7 +2942,14 @@ export type GQLAboutMenu_FrontpageMenuFragment = {
   >;
 } & GQLAboutMenuFragment;
 
-export type GQLDefaultMenu_RootFragment = { __typename?: "Node"; id: string; name: string };
+export type GQLDefaultMenu_RootFragment = {
+  __typename?: "Node";
+  id: string;
+  name: string;
+  url?: string;
+  path?: string;
+  nodeType: string;
+};
 
 export type GQLDrawerContent_RootFragment = { __typename?: "Node" } & GQLSubjectMenu_RootFragment;
 
@@ -2968,7 +2975,7 @@ export type GQLMastheadProgrammeQuery = {
   programmes?: Array<{ __typename?: "ProgrammePage" } & GQLDrawerContent_ProgrammePageFragment>;
 };
 
-export type GQLMastheadDrawer_SubjectFragment = { __typename?: "Node" } & GQLDefaultMenu_RootFragment &
+export type GQLMastheadDrawer_RootFragment = { __typename?: "Node" } & GQLDefaultMenu_RootFragment &
   GQLDrawerContent_RootFragment;
 
 export type GQLProgrammeMenu_ProgrammePageFragment = {