create page aliases for admin (#1239)

frontend/components/Dashboard/CourseCard.tsx

@@ -11,6 +11,7 @@ import { ButtonWithPaddingAndMargin as StyledButton } from "/components/Buttons/
 import CourseImage from "/components/CourseImage"
 import { CardTitle } from "/components/Text/headers"
 import { useFilterContext } from "/contexts/FilterContext"
+import useIsNew from "/hooks/useIsNew"
 import { useTranslator } from "/hooks/useTranslator"
 import CoursesTranslations from "/translations/courses"
 import { formatDateTime } from "/util/dataFormatFunctions"
@@ -173,6 +174,9 @@ interface CourseCardProps {
 
 const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
   const t = useTranslator(CoursesTranslations)
+  const isNewLayout = useIsNew()
+  const baseUrl = isNewLayout ? "/_new/admin" : ""
+
   const { onStatusClick } = useFilterContext()
   const courseFound = !loading && !!course
 
@@ -185,7 +189,10 @@ const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
             <CourseImage photo={course.photo} alt={course.name} />
           )}
           {isNew && (
-            <StyledLink href="/courses/new" aria-label={t("courseNewCourse")}>
+            <StyledLink
+              href={`${baseUrl}/courses/new`}
+              aria-label={t("courseNewCourse")}
+            >
               <CreateCourseIconContainer>
                 <AddCircleIcon fontSize="large" />
               </CreateCourseIconContainer>
@@ -234,7 +241,7 @@ const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
             {courseFound && (
               <>
                 <StyledButton
-                  href={`/courses/${course.slug}`}
+                  href={`${baseUrl}/courses/${course.slug}`}
                   prefetch={false}
                   aria-label={t("courseToCoursePage", { name: course.name })}
                   variant="text"
@@ -243,7 +250,7 @@ const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
                   Dashboard
                 </StyledButton>
                 <StyledButton
-                  href={`/courses/new?clone=${course.slug}`}
+                  href={`${baseUrl}/courses/new?clone=${course.slug}`}
                   prefetch={false}
                   aria-label={t("courseCloneCourse", { name: course.name })}
                   variant="text"
@@ -253,7 +260,7 @@ const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
                   Clone...
                 </StyledButton>
                 <StyledButton
-                  href={`/courses/${course.slug}/edit`}
+                  href={`${baseUrl}/courses/${course.slug}/edit`}
                   prefetch={false}
                   aria-label={t("courseEditCourse", { name: course.name })}
                   variant="text"
@@ -266,7 +273,7 @@ const CourseCard = ({ course, loading, isNew }: CourseCardProps) => {
             {isNew && (
               <StyledButton
                 prefetch={false}
-                href="/courses/new"
+                href={`${baseUrl}/courses/new`}
                 aria-label={t("courseNewCourse")}
                 variant="text"
                 color="secondary"

frontend/components/Dashboard/StudyModules/ModuleCard.tsx

@@ -15,6 +15,7 @@ import { css, styled } from "@mui/material/styles"
 import { ButtonWithPaddingAndMargin } from "/components/Buttons/ButtonWithPaddingAndMargin"
 import LoaderImage from "/components/LoaderImage"
 import { ClickableDiv } from "/components/Surfaces/ClickableCard"
+import useIsNew from "/hooks/useIsNew"
 import { useTranslator } from "/hooks/useTranslator"
 import StudyModulesTranslations from "/translations/study-modules"
 
@@ -117,6 +118,8 @@ interface ModuleCardProps {
 
 function ModuleCard({ studyModule, image, loading }: ModuleCardProps) {
   const t = useTranslator(StudyModulesTranslations)
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const moduleFound = !loading && studyModule
   const moduleNotFound = !loading && !studyModule
 
@@ -162,7 +165,7 @@ function ModuleCard({ studyModule, image, loading }: ModuleCardProps) {
           )}
           {moduleFound && (
             <ModuleButton
-              href={`/study-modules/${studyModule.slug}/edit`}
+              href={`${baseUrl}/study-modules/${studyModule.slug}/edit`}
               aria-label={t("editStudyModule")}
               variant="text"
               color="secondary"
@@ -173,7 +176,7 @@ function ModuleCard({ studyModule, image, loading }: ModuleCardProps) {
           )}
           {moduleNotFound && (
             <ModuleButton
-              href="/study-modules/new"
+              href={`${baseUrl}/study-modules/new`}
               aria-label={t("newStudyModule")}
               variant="text"
               color="secondary"

frontend/pages/_new/admin/courses/[slug]/completions.tsx

@@ -0,0 +1,3 @@
+import CourseCompletionPage from "pages/courses/[slug]/completions"
+
+export default CourseCompletionPage

frontend/pages/_new/admin/courses/[slug]/edit.tsx

@@ -0,0 +1,3 @@
+import CourseEditPage from "pages/courses/[slug]/edit"
+
+export default CourseEditPage

frontend/pages/_new/admin/courses/[slug]/index.tsx

@@ -0,0 +1,3 @@
+import CourseIndexPage from "pages/courses/[slug]/index"
+
+export default CourseIndexPage

frontend/pages/_new/admin/courses/[slug]/manual-completions.tsx

@@ -0,0 +1,3 @@
+import ManualCompletionsPage from "pages/courses/[slug]/manual-completions"
+
+export default ManualCompletionsPage

frontend/pages/_new/admin/courses/[slug]/points.tsx

@@ -0,0 +1,3 @@
+import CoursePointsPage from "pages/courses/[slug]/points"
+
+export default CoursePointsPage

frontend/pages/_new/admin/courses/new.tsx

@@ -0,0 +1,3 @@
+import NewCoursePage from "pages/courses/new"
+
+export default NewCoursePage

frontend/pages/_new/admin/email-templates/[id].tsx

@@ -0,0 +1,3 @@
+import EmailTemplateEditPage from "pages/email-templates/[id]"
+
+export default EmailTemplateEditPage

frontend/pages/_new/admin/study-modules/[slug]/edit.tsx

@@ -0,0 +1,3 @@
+import StudyModuleEditPage from "pages/study-modules/[slug]/edit"
+
+export default StudyModuleEditPage

frontend/pages/_new/admin/study-modules/new.tsx

@@ -0,0 +1,3 @@
+import NewStudyModulePage from "pages/study-modules/new"
+
+export default NewStudyModulePage

frontend/pages/_new/study-modules/index.tsx

@@ -15,7 +15,7 @@ function StudyModules() {
   useBreadcrumbs([
     {
       translation: "studyModules",
-      href: "/study-modules",
+      href: "/_new/study-modules",
     },
   ])
 

frontend/pages/courses/[slug]/completions.tsx

@@ -17,6 +17,7 @@ import Spinner from "/components/Spinner"
 import { H1NoBackground, SubtitleNoBackground } from "/components/Text/headers"
 import CourseLanguageContext from "/contexts/CourseLanguageContext"
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+import useIsNew from "/hooks/useIsNew"
 import { useQueryParameter } from "/hooks/useQueryParameter"
 import { useTranslator } from "/hooks/useTranslator"
 import withAdmin from "/lib/with-admin"
@@ -32,6 +33,8 @@ const ContentArea = styled("div")`
 `
 
 const Completions = () => {
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const t = useTranslator(CoursesTranslations)
   const slug = useQueryParameter("slug")
   const router = useRouter()
@@ -44,7 +47,7 @@ const Completions = () => {
     (e: ChangeEvent<HTMLInputElement>) => {
       // prevents reloading page, URL changes
 
-      const href = `/courses/${slug}/completions?language=${e.target.value}`
+      const href = `${baseUrl}/courses/${slug}/completions?language=${e.target.value}`
       changeLng(e.target.value)
       router.replace(router.pathname, href, { shallow: true })
     },
@@ -71,15 +74,15 @@ const Completions = () => {
   useBreadcrumbs([
     {
       translation: "courses",
-      href: `/courses`,
+      href: `${baseUrl}/courses`,
     },
     {
       label: data?.course?.name,
-      href: `/courses/${slug}`,
+      href: `${baseUrl}/courses/${slug}`,
     },
     {
       translation: "courseCompletions",
-      href: `/courses/${slug}/completions`,
+      href: `${baseUrl}/courses/${slug}/completions`,
     },
   ])
   const title = data?.course?.name ?? "..."

frontend/pages/courses/[slug]/edit.tsx

@@ -15,6 +15,7 @@ import ModifiableErrorMessage from "/components/ModifiableErrorMessage"
 import { H1Background } from "/components/Text/headers"
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
 import { useEditorCourses } from "/hooks/useEditorCourses"
+import useIsNew from "/hooks/useIsNew"
 import { useQueryParameter } from "/hooks/useQueryParameter"
 import { useTranslator } from "/hooks/useTranslator"
 import withAdmin from "/lib/with-admin"
@@ -38,6 +39,8 @@ const LegacyCourseEdit = dynamic(
 
 const EditCourse = () => {
   const t = useTranslator(CoursesTranslations)
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const slug = useQueryParameter("slug") ?? ""
   const legacy = useQueryParameter("legacy", { enforce: false })
   const router = useRouter()
@@ -55,7 +58,7 @@ const EditCourse = () => {
 
     if (!loading && !course) {
       redirectTimeout = setTimeout(
-        () => router.push("/courses", undefined, { shallow: true }),
+        () => router.push(`${baseUrl}/courses`, undefined, { shallow: true }),
         5000,
       )
     }
@@ -70,15 +73,15 @@ const EditCourse = () => {
   useBreadcrumbs([
     {
       translation: "courses",
-      href: `/courses`,
+      href: `${baseUrl}/courses`,
     },
     {
       label: error || (!loading && !course) ? slug : course?.name,
-      href: `/courses/${slug}`,
+      href: `${baseUrl}/courses/${slug}`,
     },
     {
       translation: "courseEdit",
-      href: `/courses/${slug}/edit`,
+      href: `${baseUrl}/courses/${slug}/edit`,
     },
   ])
 

frontend/pages/courses/[slug]/index.tsx

@@ -21,6 +21,7 @@ import ModifiableErrorMessage from "/components/ModifiableErrorMessage"
 import Spinner from "/components/Spinner"
 import { H1NoBackground, SubtitleNoBackground } from "/components/Text/headers"
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+import useIsNew from "/hooks/useIsNew"
 import { useQueryParameter } from "/hooks/useQueryParameter"
 import { useTranslator } from "/hooks/useTranslator"
 import withAdmin from "/lib/with-admin"
@@ -50,6 +51,8 @@ const Row = styled(Paper)`
 `
 
 const Course = () => {
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const slug = useQueryParameter("slug")
   const t = useTranslator(CoursesTranslations)
   const confirm = useConfirm()
@@ -71,11 +74,11 @@ const Course = () => {
   useBreadcrumbs([
     {
       translation: "courses",
-      href: `/courses`,
+      href: `${baseUrl}/courses`,
     },
     {
       label: data?.course?.name,
-      href: `/courses/${slug}`,
+      href: `${baseUrl}/courses/${slug}`,
     },
   ])
   const title = data?.course?.name ?? "..."
@@ -176,7 +179,7 @@ const Course = () => {
           <Row>
             {data.course?.completion_email != null ? (
               <Link
-                href={`/email-templates/${data.course.completion_email?.id}`}
+                href={`${baseUrl}/email-templates/${data.course.completion_email?.id}`}
                 prefetch={false}
                 passHref
               >
@@ -194,7 +197,7 @@ const Course = () => {
             {data.course?.course_stats_email !== null ? (
               <>
                 <Link
-                  href={`/email-templates/${data.course.course_stats_email?.id}`}
+                  href={`${baseUrl}/email-templates/${data.course.course_stats_email?.id}`}
                   prefetch={false}
                   passHref
                 >

frontend/pages/courses/[slug]/manual-completions.tsx

@@ -23,6 +23,7 @@ import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon"
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"
 
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+import useIsNew from "/hooks/useIsNew"
 import { useQueryParameter } from "/hooks/useQueryParameter"
 import withAdmin from "/lib/with-admin"
 
@@ -47,6 +48,8 @@ interface CompletionData {
 }
 
 const ManualCompletions = () => {
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
   const { locale } = useRouter()
   const confirm = useConfirm()
   const [submitting, setSubmitting] = useState(false)
@@ -78,15 +81,15 @@ const ManualCompletions = () => {
   useBreadcrumbs([
     {
       translation: "courses",
-      href: `/courses`,
+      href: `${baseUrl}/courses`,
     },
     {
       label: courseData?.course?.name,
-      href: `/courses/${slug}`,
+      href: `${baseUrl}/courses/${slug}`,
     },
     {
       translation: "courseManualCompletions",
-      href: `/courses/${slug}/manual-completions`,
+      href: `${baseUrl}/courses/${slug}/manual-completions`,
     },
   ])
   const title = courseData?.course?.name ?? "..."

frontend/pages/courses/[slug]/points.tsx

@@ -10,6 +10,7 @@ import ModifiableErrorMessage from "/components/ModifiableErrorMessage"
 import Spinner from "/components/Spinner"
 import { H1NoBackground, SubtitleNoBackground } from "/components/Text/headers"
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+import useIsNew from "/hooks/useIsNew"
 import { useQueryParameter } from "/hooks/useQueryParameter"
 import { useTranslator } from "/hooks/useTranslator"
 import withAdmin from "/lib/with-admin"
@@ -19,6 +20,8 @@ import { CourseFromSlugDocument } from "/graphql/generated"
 
 const Points = () => {
   const t = useTranslator(CoursesTranslations)
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
 
   const slug = useQueryParameter("slug")
 
@@ -29,15 +32,15 @@ const Points = () => {
   useBreadcrumbs([
     {
       translation: "courses",
-      href: `/courses`,
+      href: `${baseUrl}/courses`,
     },
     {
       label: data?.course?.name,
-      href: `/courses/${slug}`,
+      href: `${baseUrl}/courses/${slug}`,
     },
     {
       translation: "coursePoints",
-      href: `/courses/${slug}/points`,
+      href: `${baseUrl}/courses/${slug}/points`,
     },
   ])
   const title = data?.course?.name ?? "..."

frontend/pages/courses/new.tsx

@@ -11,6 +11,7 @@ import ModifiableErrorMessage from "/components/ModifiableErrorMessage"
 import { H1NoBackground } from "/components/Text/headers"
 import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
 import { useEditorCourses } from "/hooks/useEditorCourses"
+import useIsNew from "/hooks/useIsNew"
 import { useQueryParameter } from "/hooks/useQueryParameter"
 import { useTranslator } from "/hooks/useTranslator"
 import withAdmin from "/lib/with-admin"
@@ -31,6 +32,8 @@ const LegacyCourseEdit = dynamic(
 
 const NewCourse = () => {
   const t = useTranslator(CoursesTranslations)
+  const isNew = useIsNew()
+  const baseUrl = isNew ? "/_new/admin" : ""
 
   const clone = useQueryParameter("clone", { enforce: false })
   const legacy = useQueryParameter("legacy", { enforce: false })
@@ -44,11 +47,11 @@ const NewCourse = () => {
   useBreadcrumbs([
     {
       translation: "courses",
-      href: `/courses`,
+      href: `${baseUrl}/courses`,
     },
     {
       translation: "courseNew",
-      href: `/courses/new`,
+      href: `${baseUrl}/courses/new`,
     },
   ])