Refactor new layout: no extra languages; responsive layout (#1186)

* added special other_language language tag; refactored courses page to be more responsive * fix tests * remove some comments
rage · May 12, 2023 · 240770f · 240770f
1 parent baa62a1
commit 240770f
Show file tree

Hide file tree

Showing 15 changed files with 465 additions and 166 deletions.
diff --git a/backend/migrations/20230512085720_update-tags-create_other_language_tags.ts b/backend/migrations/20230512085720_update-tags-create_other_language_tags.ts
@@ -0,0 +1,49 @@
+import { Knex } from "knex"
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.raw(`
+    insert into tag (id, hidden) values ('other_language', false) on conflict do nothing;
+  `)
+  await knex.raw(`
+    insert into tag_type (name) values ('language') on conflict do nothing;
+  `)
+  await knex.raw(`
+    insert into "_TagToTagType" ("A", "B") values ('other_language', 'language') 
+      on conflict do nothing;
+  `)
+  await knex.raw(`
+    insert into "_CourseToTag" ("A", "B")
+    select c.id, 'other_language' from course c
+        join "_CourseToTag" ctt on c.id = ctt."A"
+        join tag on ctt."B" = tag.id
+        join "_TagToTagType" ttt on tag.id = ttt."A"
+        where ttt."B" = 'language'
+        and tag.id not in ('en', 'fi', 'se')
+    on conflict do nothing;
+  `)
+  await knex.raw(`
+    insert into tag_translation (tag_id, language, name)
+      values ('other_language', 'en_US', 'other language')
+      on conflict do nothing;
+  `)
+  await knex.raw(`
+    insert into tag_translation (tag_id, language, name)
+      values ('other_language', 'fi_FI', 'muu kieli')
+      on conflict do nothing;
+  `)
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.raw(`
+    delete from tag_translation where tag_id = 'other_language';
+  `)
+  await knex.raw(`
+    delete from "_CourseToTag" where "B" = 'other_language';
+  `)
+  await knex.raw(`
+    delete from "_TagToTagType" where "A" = 'other_language';
+  `)
+  await knex.raw(`
+    delete from tag where id = 'other_language';
+  `)
+}
diff --git a/backend/tests/index.ts b/backend/tests/index.ts
@@ -150,6 +150,19 @@ function prismaTestContext() {
   let prisma: null | PrismaClient = null
   let knexClient: Knex | null = null
 
+  const clean = async () => {
+    await knexClient?.raw(`DO $$ BEGIN 
+    EXECUTE(
+      SELECT 'TRUNCATE TABLE ' 
+        || string_agg(format('%I.%I', schemaname, tablename), ', ') 
+        || ' CASCADE' 
+      FROM pg_tables 
+      WHERE schemaname = '${schemaName}'
+      AND tableowner = '${DB_USER}'
+    ); 
+  END $$;
+  `)
+  }
   return {
     async before() {
       // Generate a unique schema identifier for this test context
@@ -174,7 +187,8 @@ function prismaTestContext() {
         schemaName,
         database: databaseUrl,
       })
-
+      // Clear data that might have been inserted during the migrations
+      await clean()
       // Construct a new Prisma Client connected to the generated Postgres schema
       DEBUG && console.log(`creating prisma ${databaseUrl}`)
       prisma = new PrismaClient({
@@ -185,19 +199,7 @@ function prismaTestContext() {
         prisma,
       }
     },
-    async clean() {
-      await knexClient?.raw(`DO $$ BEGIN 
-        EXECUTE(
-          SELECT 'TRUNCATE TABLE ' 
-            || string_agg(format('%I.%I', schemaname, tablename), ', ') 
-            || ' CASCADE' 
-          FROM pg_tables 
-          WHERE schemaname = '${schemaName}'
-          AND tableowner = '${DB_USER}'
-        ); 
-      END $$;
-      `)
-    },
+    clean,
     async after() {
       // Drop the schema after the tests have completed
       DEBUG && console.log(`dropping schema ${schemaName}`)

diff --git a/frontend/components/BorderedSection.tsx b/frontend/components/BorderedSection.tsx
@@ -52,12 +52,19 @@ const BorderedSectionBase = styled("div")`
   }
 `
 
+type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never
+
 function BorderedSection({
   title,
   children,
-}: PropsWithChildren<{ title?: string | React.ReactNode }>) {
+  ...props
+}: PropsWithChildren<
+  Omit<PropsOf<typeof BorderedSectionBase>, "title"> & {
+    title?: string | React.ReactNode
+  }
+>) {
   return (
-    <BorderedSectionBase>
+    <BorderedSectionBase {...props}>
       <div className="header">
         <div className="headerBorderBefore"></div>
         {title && <div className="headerTitle">{title}</div>}

diff --git a/frontend/components/NewLayout/Courses/Catalogue.tsx b/frontend/components/NewLayout/Courses/Catalogue.tsx
@@ -8,6 +8,7 @@ import CoursesTranslations from "/translations/_new/courses"
 const Container = styled("section")`
   display: grid;
   justify-items: center;
+  margin: 0 auto;
 `
 
 const Header = styled(Typography)`

diff --git a/frontend/components/NewLayout/Courses/CourseCard.tsx b/frontend/components/NewLayout/Courses/CourseCard.tsx
@@ -211,6 +211,8 @@ const MoocfiLogo = styled(CardHeaderImage)``
 const prettifyDate = (date: string) =>
   date.split("T").shift()?.split("-").reverse().join(".")
 
+const allowedLanguages = ["en", "fi", "se"]
+
 interface CourseCardProps {
   course: CourseFieldsFragment
   tags?: string[]
@@ -303,6 +305,7 @@ function CourseCard({ course }: CourseCardProps) {
           <LanguageTags>
             {course?.tags
               ?.filter((t) => t.types?.includes("language"))
+              .filter((t) => allowedLanguages.includes(t.id))
               .map((tag) => (
                 <LanguageTag
                   key={tag.id}