From 626e336db95f4e4cf42de89c0eb4348a9835b783 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 20 Jun 2022 14:38:02 +0200
Subject: [PATCH] Add more typescript checks

---
 .../components/circle/LearningSequence.vue    |  8 +++--
 .../src/{fetchHelpers.js => fetchHelpers.ts}  | 18 ++++++++---
 client/src/views/CircleView.vue               | 32 ++++++++++++-------
 client/tsconfig.app.json                      |  1 +
 4 files changed, 41 insertions(+), 18 deletions(-)
 rename client/src/{fetchHelpers.js => fetchHelpers.ts} (67%)

diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index 0352addd..04c243a9 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import ItCheckbox from '@/components/ui/ItCheckbox.vue';
+import type {LearningContent, LearningSequence} from '@/services/circle';
 
-const props = defineProps(['learningSequence', 'completionData'])
+const props = defineProps<{
+  learningSequence: LearningSequence
+  completionData: any
+}>()
 
-const contentCompleted = (learningContent) => {
+const contentCompleted = (learningContent: LearningContent) => {
   if (props.completionData?.completed_learning_contents) {
     return props.completionData.completed_learning_contents.findIndex((e) => {
       return e.learning_content_key === learningContent.translation_key && e.completed;
diff --git a/client/src/fetchHelpers.js b/client/src/fetchHelpers.ts
similarity index 67%
rename from client/src/fetchHelpers.js
rename to client/src/fetchHelpers.ts
index bc397aa1..23fa5b33 100644
--- a/client/src/fetchHelpers.js
+++ b/client/src/fetchHelpers.ts
@@ -1,13 +1,15 @@
-import { getCookieValue } from '@/router/guards';
+import {getCookieValue} from '@/router/guards';
 
 class FetchError extends Error {
-  constructor(response, message = 'HTTP error ' + response.status) {
+  response: Response;
+
+  constructor(response: Response, message = 'HTTP error ' + response.status) {
     super(message);
     this.response = response;
   }
 }
 
-export const itFetch = (url, options) => {
+export const itFetch = (url: RequestInfo, options: RequestInit) => {
   return fetch(url, options).then(response => {
     if (!response.ok) {
       throw new FetchError(response);
@@ -17,7 +19,11 @@ export const itFetch = (url, options) => {
   });
 };
 
-export const itPost = (url, data, options) => {
+export const itPost = (
+  url: RequestInfo,
+  data: unknown,
+  options: RequestInit = {},
+) => {
   options = Object.assign({}, options);
 
   const headers = Object.assign({
@@ -35,6 +41,8 @@ export const itPost = (url, data, options) => {
     body: JSON.stringify(data)
   }, options);
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   options.headers['X-CSRFToken'] = getCookieValue('csrftoken');
 
   if (options.method === 'GET') {
@@ -48,6 +56,6 @@ export const itPost = (url, data, options) => {
   });
 };
 
-export const itGet = (url) => {
+export const itGet = (url: RequestInfo) => {
   return itPost(url, {}, {method: 'GET'});
 };
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 9e1ea236..ac169625 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -1,24 +1,32 @@
-<script>
+<script lang="ts">
 import * as log from 'loglevel';
 
 import MainNavigationBar from '../components/MainNavigationBar.vue';
 import LearningSequence from '../components/circle/LearningSequence.vue';
-import { itGet, itPost } from '../fetchHelpers';
-import { parseLearningSequences } from '../services/circle';
+import type {Circle, LearningContent} from '../services/circle';
+import {parseLearningSequences} from '../services/circle';
 
-export default {
+import {defineComponent} from 'vue'
+import {itGet, itPost} from '@/fetchHelpers';
+
+export default defineComponent({
   components: { LearningSequence, MainNavigationBar },
-  props: ['circleSlug',],
+  props: {
+    circleSlug: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       count: 0,
-      circleData: {},
-      learningSequences: [],
+      circleData: {} as Circle,
+      learningSequences: [] as LearningSequence[],
       completionData: {},
     }
   },
   methods: {
-    toggleLearningContentCheckbox(learningContent, completed=true) {
+    toggleLearningContentCheckbox(learningContent: LearningContent, completed=true) {
       log.debug('toggleLearningContentCheckbox', learningContent, completed);
       console.log(learningContent);
 
@@ -43,8 +51,7 @@ export default {
       });
     });
   }
-
-}
+});
 </script>
 
 <template>
@@ -80,7 +87,10 @@ export default {
       </div>
 
       <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
-        <div v-for="learningSequence in learningSequences">
+        <div
+          v-for="learningSequence in learningSequences"
+          :key="learningSequence.translation_key"
+        >
           <LearningSequence
             :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
             :completion-data="completionData"
diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index cdbea1d7..98e2e534 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -4,6 +4,7 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
+    "strict": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]