From d4cb37d2297351597f1780e24f74d908baf537c1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 25 Apr 2023 16:39:04 +0200
Subject: [PATCH] Refactor LearningContentSimpleLayout component

---
 .../learningContentPage/blocks/IframeBlock.vue   | 10 +++-------
 .../blocks/MediaLibraryBlock.vue                 | 10 ++++------
 .../blocks/PlaceholderBlock.vue                  |  8 +++-----
 .../learningContentPage/blocks/VideoBlock.vue    | 11 +++--------
 .../layouts/LearningContentSimpleLayout.vue      | 16 +++++++---------
 client/src/utils/typeMaps.ts                     |  6 ++++--
 6 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue
index f7a1abb6..7fe051a6 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/IframeBlock.vue
@@ -1,8 +1,5 @@
 <template>
-  <LearningContentSimpleLayout
-    :subtitle="learningContentTypeData('resource').title"
-    :learning-content-type="'resource'"
-  >
+  <LearningContentSimpleLayout learning-content-type="resource">
     <div class="h-screen">
       <iframe width="100%" height="100%" scrolling="no" :src="value.url" />
     </div>
@@ -12,13 +9,12 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Value {
+export interface Value {
   url: string;
 }
 
-const props = defineProps<{
+defineProps<{
   value: Value;
   content: LearningContent;
 }>();
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue
index 87ee3be5..61282c1c 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/MediaLibraryBlock.vue
@@ -1,8 +1,7 @@
 <template>
   <LearningContentSimpleLayout
     :title="content.title"
-    :subtitle="learningContentTypeData('media_library').title"
-    :learning-content-type="'media_library'"
+    learning-content-type="media_library"
   >
     <div class="container-medium">
       <p class="text-large my-4 lg:my-8">{{ value.description }}</p>
@@ -16,16 +15,15 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 import { useRoute } from "vue-router";
 
-const route = useRoute();
-
-interface Value {
+export interface Value {
   description: string;
   url: string;
 }
 
+const route = useRoute();
+
 defineProps<{
   value: Value;
   content: LearningContent;
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
index 50354e50..99ead727 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/PlaceholderBlock.vue
@@ -1,21 +1,19 @@
 <template>
   <LearningContentSimpleLayout
     :title="content.title"
-    :subtitle="learningContentTypeData('placeholder').title"
-    :learning-content-type="'placeholder'"
+    learning-content-type="placeholder"
   ></LearningContentSimpleLayout>
 </template>
 
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Value {
+export interface Value {
   description: string;
 }
 
-const props = defineProps<{
+defineProps<{
   value: Value;
   content: LearningContent;
 }>();
diff --git a/client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue b/client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue
index 043afbc4..f8637f15 100644
--- a/client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue
+++ b/client/src/pages/learningPath/learningContentPage/blocks/VideoBlock.vue
@@ -1,9 +1,5 @@
 <template>
-  <LearningContentSimpleLayout
-    :title="content.title"
-    :subtitle="learningContentTypeData('video').title"
-    :learning-content-type="'video'"
-  >
+  <LearningContentSimpleLayout :title="content.title" learning-content-type="video">
     <div class="container-medium">
       <iframe
         class="mt-8 aspect-video w-full"
@@ -20,13 +16,12 @@
 <script setup lang="ts">
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
 import type { LearningContent } from "@/types";
-import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Value {
+export interface Value {
   url: string;
 }
 
-const props = defineProps<{
+defineProps<{
   value: Value;
   content: LearningContent;
 }>();
diff --git a/client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue b/client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue
index 7068e799..9ea1f578 100644
--- a/client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue
+++ b/client/src/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue
@@ -4,15 +4,16 @@ import LearningContentFooter from "@/pages/learningPath/learningContentPage/layo
 import type { LearningContentType } from "@/types";
 import { learningContentTypeData } from "@/utils/typeMaps";
 
-interface Props {
-  title: string | undefined;
-  subtitle: string;
+export interface Props {
+  title: string;
   learningContentType: LearningContentType;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
+  title: "",
 });
+
+const type = learningContentTypeData(props.learningContentType);
 </script>
 
 <template>
@@ -21,12 +22,9 @@ const props = withDefaults(defineProps<Props>(), {
       v-if="props.learningContentType !== 'placeholder'"
       class="flex h-min w-full items-center gap-2 pb-8"
     >
-      <component
-        :is="learningContentTypeData(props.learningContentType).icon"
-        class="h-6 w-6 text-gray-900"
-      ></component>
+      <component :is="type.icon" class="h-6 w-6 text-gray-900"></component>
       <p class="whitespace-nowrap text-gray-900">
-        {{ props.subtitle }}
+        {{ type.title }}
       </p>
     </div>
 
diff --git a/client/src/utils/typeMaps.ts b/client/src/utils/typeMaps.ts
index c6292fdd..725846d7 100644
--- a/client/src/utils/typeMaps.ts
+++ b/client/src/utils/typeMaps.ts
@@ -1,10 +1,12 @@
 import type { LearningContentType } from "@/types";
 import { assertUnreachable } from "@/utils/utils";
 
-export function learningContentTypeData(t: LearningContentType): {
+export interface LearningContentIdentifier {
   title: string;
   icon: string;
-} {
+}
+
+export function learningContentTypeData(t: LearningContentType): LearningContentIdentifier {
   switch (t) {
     case "assignment":
       return { title: "Transferauftrag", icon: "it-icon-lc-assignment" };