Fix typecheck errors

client/package.json

@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.7",
-    "axios": "^0.26.1",
     "d3": "^7.6.1",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.0",

client/src/components/learningPath/CircleDiagram.vue

@@ -6,10 +6,11 @@ import * as log from "loglevel";
 import { computed, onMounted } from "vue";
 
 import colors from "@/colors.json";
+import type { LearningSequence } from "@/types";
 
 const circleStore = useCircleStore();
 
-function someFinished(learningSequence) {
+function someFinished(learningSequence: LearningSequence) {
   if (circleStore.circle) {
     return circleStore.circle.someFinishedInLearningSequence(
       learningSequence.translation_key
@@ -18,7 +19,7 @@ function someFinished(learningSequence) {
   return false;
 }
 
-function allFinished(learningSequence) {
+function allFinished(learningSequence: LearningSequence) {
   if (circleStore.circle) {
     return circleStore.circle.allFinishedInLearningSequence(
       learningSequence.translation_key
@@ -43,11 +44,11 @@ const pieData = computed(() => {
     const pieGenerator = d3.pie();
     let angles = pieGenerator(pieWeights);
     _.forEach(angles, (pie) => {
-      const thisLearningSequence = circle.learningSequences[parseInt(pie.index)];
-      pie.title = thisLearningSequence.title;
-      pie.icon = thisLearningSequence.icon;
       pie.startAngle = pie.startAngle + Math.PI;
       pie.endAngle = pie.endAngle + Math.PI;
+      const thisLearningSequence = circle.learningSequences[pie.index];
+      pie.title = thisLearningSequence.title;
+      pie.icon = thisLearningSequence.icon;
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2;
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2;
       pie.translation_key = thisLearningSequence.translation_key;

client/src/components/mediaLibrary/MediaLink.vue

@@ -3,14 +3,16 @@
 // https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/
 
 import { computed } from "vue";
-import type { RouterLinkProps } from "vue-router";
+import { RouterLink } from "vue-router";
 
-export interface Props extends RouterLinkProps {
+const props = defineProps({
-  blank?: boolean;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-}
+  // @ts-ignore
-
+  ...RouterLink.props,
-const props = withDefaults(defineProps<Props>(), {
+  blank: {
-  blank: false,
+    type: Boolean,
+    default: false,
+  },
 });
 
 const isExternalLink = computed(
@@ -24,7 +26,7 @@ const isExternalLink = computed(
       v-if="isExternalLink"
       :target="props.blank ? '_blank' : '_self'"
       rel="noopener"
-      :href="(props.to as string)"
+      :href="props.to"
     >
       <slot />
     </a>

client/src/fetchHelpers.ts

@@ -28,11 +28,7 @@ export const itPost = (url: RequestInfo, data: unknown, options: RequestInit = {
       "Content-Type": "application/json;charset=UTF-8",
     },
     options?.headers
-  );
+  ) as HeadersInit;
-
-  if (options?.headers) {
-    delete options.headers;
-  }
 
   options = Object.assign(
     {

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -2,6 +2,7 @@
 import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
 import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
 import { useMediaLibraryStore } from "@/stores/mediaLibrary";
+import type { MediaBlockType } from "@/types";
 import * as log from "loglevel";
 import { computed } from "vue";
 import { useRoute } from "vue-router";
@@ -33,28 +34,28 @@ const backLink = computed(() => {
 const maxCardItems = 4;
 const maxListItems = 6;
 
-const displayAsCard = (itemType: string): boolean => {
+const displayAsCard = (itemType: MediaBlockType): boolean => {
   return itemType === "learn_media" || itemType === "relative_link";
 };
 
-const hasMoreItems = (items: object[], maxItems: number): boolean => {
+function hasMoreItems<T>(items: T[], maxItems: number): boolean {
   return items.length > maxItems;
-};
+}
 
-const getMaxDisplayItems = (items: object[], maxItems: number) => {
+function getMaxDisplayItems<T>(items: T[], maxItems: number) {
   return items.slice(0, maxItems);
-};
+}
 
-const getMaxDisplayItemsForType = (itemType: string, items: object[]) => {
+function getMaxDisplayItemsForType<T>(itemType: MediaBlockType, items: T[]) {
   return displayAsCard(itemType)
     ? getMaxDisplayItems(items, maxCardItems)
     : getMaxDisplayItems(items, maxListItems);
-};
+}
 
-const hasMoreItemsForType = (itemType: string, items: object[]) => {
+function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
   const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems;
   return hasMoreItems(items, maxItems);
-};
+}
 </script>
 
 <template>
@@ -65,7 +66,10 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
     <div class="bg-gray-200 pb-4 lg:pb-12">
       <div class="container-large">
         <nav class="py-4 lg:pb-8">
-          <router-link class="btn-text inline-flex items-center pl-0" :to="backLink">
+          <router-link
+            class="btn-text inline-flex items-center pl-0"
+            :to="(backLink as string)"
+          >
             <it-icon-arrow-left />
             <span>zurück</span>
           </router-link>
@@ -93,7 +97,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
         <ul>
           <li
             v-for="item in mediaCategory.items"
-            :key="item"
+            :key="item.id"
             class="mb-2 flex items-center"
           >
             <it-icon-check class="h-8 w-8 text-sky-500 mr-4 flex-none"></it-icon-check>
@@ -141,13 +145,13 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
               />
               <div v-else class="flex items-center justify-between border-b py-4">
                 <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
-                <media-link
+                <MediaLink
                   :blank="mediaItem.value.open_window"
                   :to="mediaItem.value.url"
                   class="link"
                 >
                   {{ mediaItem.value.link_display_text }}
-                </media-link>
+                </MediaLink>
               </div>
             </li>
           </ul>

client/src/types.ts

@@ -230,16 +230,20 @@ export interface RelativeLinkBlock {
   value: MediaLibraryContentBlockValue;
 }
 
+export type MediaBlock =
+  | LearnMediaBlock
+  | ExternalLinkBlock
+  | InternalLinkBlock
+  | RelativeLinkBlock;
+
+export type MediaBlockType = MediaBlock["type"];
+
 export interface MediaContentCollection {
   type: "content_collection";
   value: {
     title: string;
-    contents: (
+    description: string;
-      | LearnMediaBlock
+    contents: MediaBlock[];
-      | ExternalLinkBlock
-      | InternalLinkBlock
-      | RelativeLinkBlock
-    )[];
   };
 }
 
@@ -253,7 +257,7 @@ export interface MediaCategoryPage extends BaseCourseWagtailPage {
     type: "item";
     value: string;
     id: string;
-  };
+  }[];
   course_category: CourseCategory;
   body: MediaContentCollection[];
 }