Link to moduleless courses from study-modules page

rage · May 22, 2024 · 665828b · 665828b
1 parent 9261395
commit 665828b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/frontend/components/NewLayout/Courses/CourseGrid.tsx b/frontend/components/NewLayout/Courses/CourseGrid.tsx
@@ -283,6 +283,10 @@ function CourseGrid() {
     enforce: false,
     array: true,
   }) as CourseStatus[]
+  const moduleless = useQueryParameter("moduleless", {
+    enforce: false,
+    array: false,
+  })
 
   const { loading: coursesLoading, data: coursesData } = useQuery(
     NewCoursesDocument,
@@ -380,13 +384,17 @@ function CourseGrid() {
         if (course.hidden || course.course_translations.length === 0) {
           return false
         }
+        if (moduleless === "true" && course.study_modules.length > 0) {
+          return false
+        }
         if (
           !course.name
             .toLocaleLowerCase(locale)
             .includes(searchString.toLocaleLowerCase(locale)) &&
           !course.description
             ?.toLocaleLowerCase(locale)
-            .includes(searchString.toLocaleLowerCase(locale))
+            .includes(searchString.toLocaleLowerCase(locale)) &&
+          !moduleless
         ) {
           return false
         }

diff --git a/frontend/components/NewLayout/Modules/StudyModuleList.tsx b/frontend/components/NewLayout/Modules/StudyModuleList.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router"
 import { useQuery } from "@apollo/client"
 import { styled } from "@mui/material/styles"
 
+import CTALink from "../Common/CTALink"
 import Introduction from "../Common/Introduction"
 import { moduleColorSchemes } from "../Courses/common"
 import ModuleNaviList from "../Frontpage/Modules/ModuleNaviList"
@@ -34,6 +35,14 @@ const ModuleList = styled("ul")(
 `,
 )
 
+const StyledCTALink = styled(CTALink)`
+  padding: 2rem;
+`
+
+const ModulelessLinkContainer = styled("div")`
+  text-align: center;
+`
+
 export function StudyModuleList() {
   const t = useTranslator(StudyModulesTranslations)
   const { locale = "fi" } = useRouter()
@@ -76,6 +85,11 @@ export function StudyModuleList() {
     <section>
       <Introduction title={t("modulesTitle")} />
       <ModuleNaviList modules={data?.study_modules} loading={loading} />
+      <ModulelessLinkContainer>
+        <StyledCTALink href={`/courses/?moduleless=true`}>
+          {t("modulelessCoursesLink")}
+        </StyledCTALink>
+      </ModulelessLinkContainer>
       <ModuleList>
         {data?.study_modules?.map((studyModule) => (
           <ListItem
@@ -89,6 +103,11 @@ export function StudyModuleList() {
           />
         ))}
       </ModuleList>
+      <ModulelessLinkContainer>
+        <StyledCTALink href={`/courses/?moduleless=true`}>
+          {t("modulelessCoursesLink")}
+        </StyledCTALink>
+      </ModulelessLinkContainer>
     </section>
   )
 }
diff --git a/frontend/translations/study-modules/en.ts b/frontend/translations/study-modules/en.ts
@@ -43,4 +43,5 @@ export default {
   modulePhotoTitle: "Photo",
   edit: "Edit",
   create: "Create",
+  modulelessCoursesLink: "Browse courses outside of these study modules.",
 } as const
diff --git a/frontend/translations/study-modules/fi.ts b/frontend/translations/study-modules/fi.ts
@@ -43,4 +43,6 @@ export default {
   modulePhotoTitle: "Kuva",
   edit: "Muokkaa",
   create: "Luo",
+  modulelessCoursesLink:
+    "Tutustu näiden opintokokonaisuuksien ulkopuolisiin kursseihin.",
 } as const