From 665828b284264dc152d327a3513671a687439244 Mon Sep 17 00:00:00 2001
From: Antti Leinonen <antti.leinonen@helsinki.fi>
Date: Wed, 22 May 2024 23:24:31 +0300
Subject: [PATCH] Link to moduleless courses from study-modules page

---
 .../NewLayout/Courses/CourseGrid.tsx          | 10 +++++++++-
 .../NewLayout/Modules/StudyModuleList.tsx     | 19 +++++++++++++++++++
 frontend/translations/study-modules/en.ts     |  1 +
 frontend/translations/study-modules/fi.ts     |  2 ++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/components/NewLayout/Courses/CourseGrid.tsx b/frontend/components/NewLayout/Courses/CourseGrid.tsx
index c97583059..8bbb65061 100644
--- 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
index f7a6e8759..2bae6383b 100644
--- 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
index 35bf137e2..bc4996829 100644
--- 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
index 11eae8a82..a06e80a60 100644
--- 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