Resolved all ts lint errors on build

src/components/CastList.vue

@@ -13,10 +13,16 @@
 <script setup lang="ts">
   import { defineProps } from "vue";
   import CastListItem from "src/components/CastListItem.vue";
-  import type { MediaTypes, CreditTypes } from "../interfaces/IList";
+  import type {
+    IMovie,
+    IShow,
+    IPerson,
+    ICast,
+    ICrew
+  } from "../interfaces/IList";
 
   interface Props {
-    cast: Array<MediaTypes | CreditTypes>;
+    cast: Array<IMovie | IShow | IPerson | ICast | ICrew>;
   }
 
   defineProps<Props>();

src/components/CastListItem.vue

@@ -11,10 +11,10 @@
 <script setup lang="ts">
   import { defineProps, computed } from "vue";
   import { useStore } from "vuex";
-  import type { MediaTypes, CreditTypes } from "../interfaces/IList";
+  import type { ICast, ICrew, IMovie, IShow } from "../interfaces/IList";
 
   interface Props {
-    creditItem: MediaTypes | CreditTypes;
+    creditItem: ICast | ICrew | IMovie | IShow;
   }
 
   const props = defineProps<Props>();

src/components/Popup.vue

@@ -14,13 +14,12 @@
   import { useStore } from "vuex";
   import Movie from "@/components/popup/Movie.vue";
   import Person from "@/components/popup/Person.vue";
-  import { ListTypes } from "../interfaces/IList";
-  import type { MediaTypes } from "../interfaces/IList";
+  import { MediaTypes } from "../interfaces/IList";
   import type { Ref } from "vue";
 
   interface URLQueryParameters {
     id: number;
-    type: ListTypes;
+    type: MediaTypes;
   }
 
   const store = useStore();
@@ -41,14 +40,23 @@
   });
 
   function getFromURLQuery(): URLQueryParameters {
-    let id, type;
+    let id: number;
+    let type: MediaTypes;
 
     const params = new URLSearchParams(window.location.search);
     params.forEach((value, key) => {
-      if (!(key in ListTypes)) return;
+      if (
+        !(
+          key === MediaTypes.Movie ||
+          key === MediaTypes.Show ||
+          key === MediaTypes.Person
+        )
+      ) {
+        return;
+      }
 
       id = Number(params.get(key));
-      type = key;
+      type = MediaTypes[key];
     });
 
     return { id, type };

src/components/ResultsList.vue

@@ -7,7 +7,7 @@
     >
       <results-list-item
         v-for="(result, index) in results"
-        :key="`${result.type}-${result.id}-${index}`"
+        :key="generateResultKey(index, `${result.type}-${result.id}`)"
         :listItem="result"
       />
     </ul>
@@ -28,6 +28,10 @@
   }
 
   const props = defineProps<Props>();
+
+  function generateResultKey(index: string | number | symbol, value: string) {
+    return `${String(index)}-${value}`;
+  }
 </script>
 
 <style lang="scss" scoped>

src/components/ResultsListItem.vue

@@ -38,10 +38,10 @@
   import { useStore } from "vuex";
   import { buildImageProxyUrl } from "../utils";
   import type { Ref } from "vue";
-  import type { MediaTypes } from "../interfaces/IList";
+  import type { IMovie, IShow, IPerson, IRequest } from "../interfaces/IList";
 
   interface Props {
-    listItem: MediaTypes;
+    listItem: IMovie | IShow | IPerson;
   }
 
   const props = defineProps<Props>();

src/components/header/SearchInput.vue

@@ -52,13 +52,13 @@
   import IconClose from "@/icons/IconClose.vue";
   import config from "../../config";
   import type { Ref } from "vue";
-  import type { ListTypes } from "../../interfaces/IList";
+  import type { MediaTypes } from "../../interfaces/IList";
 
   interface ISearchResult {
     title: string;
     id: number;
     adult: boolean;
-    type: ListTypes;
+    type: MediaTypes;
   }
 
   const store = useStore();

src/components/popup/Movie.vue

@@ -15,7 +15,7 @@
       </figure>
 
       <div v-if="media" class="movie__title">
-        <h1>{{ media.title || media.name }}</h1>
+        <h1>{{ media.title }}</h1>
         <i>{{ media.tagline }}</i>
       </div>
       <loading-placeholder v-else :count="2" />
@@ -111,9 +111,13 @@
               title="Release date"
               :detail="media.year"
             />
-            <Detail v-if="media.rating" title="Rating" :detail="media.rating" />
             <Detail
-              v-if="media.type == ListTypes.Show"
+              v-if="media.type === MediaTypes.Movie && media.rating"
+              title="Rating"
+              :detail="media.rating"
+            />
+            <Detail
+              v-if="media.type == MediaTypes.Show"
               title="Seasons"
               :detail="media.seasons"
             />
@@ -184,7 +188,7 @@
     IMediaCredits,
     ICast
   } from "../../interfaces/IList";
-  import { ListTypes } from "../../interfaces/IList";
+  import { MediaTypes } from "../../interfaces/IList";
 
   import { humanMinutes } from "../../utils";
   import {
@@ -200,7 +204,7 @@
 
   interface Props {
     id: number;
-    type: ListTypes.Movie | ListTypes.Show;
+    type: MediaTypes.Movie | MediaTypes.Show;
   }
 
   const props = defineProps<Props>();
@@ -243,10 +247,10 @@
     let apiFunction: Function;
     let parameters: object;
 
-    if (props.type === ListTypes.Movie) {
+    if (props.type === MediaTypes.Movie) {
       apiFunction = getMovie;
       parameters = { checkExistance: true, credits: false };
-    } else if (props.type === ListTypes.Show) {
+    } else if (props.type === MediaTypes.Show) {
       apiFunction = getShow;
       parameters = { checkExistance: true, credits: false };
     }
@@ -260,11 +264,11 @@
   }
 
   function getCredits(
-    type: ListTypes.Movie | ListTypes.Show
+    type: MediaTypes.Movie | MediaTypes.Show
   ): Promise<IMediaCredits> {
-    if (type === ListTypes.Movie) {
+    if (type === MediaTypes.Movie) {
       return getMovieCredits(props.id);
-    } else if (type === ListTypes.Show) {
+    } else if (type === MediaTypes.Show) {
       return getShowCredits(props.id);
     }
 
@@ -301,7 +305,7 @@
   }
 
   function openTmdb() {
-    const tmdbType = props.type === ListTypes.Show ? "tv" : props.type;
+    const tmdbType = props.type === MediaTypes.Show ? "tv" : props.type;
     const tmdbURL = "https://www.themoviedb.org/" + tmdbType + "/" + props.id;
     window.location.href = tmdbURL;
   }

src/components/popup/Person.vue

@@ -3,7 +3,7 @@
     <header ref="header">
       <div class="info">
         <h1 v-if="person">
-          {{ person.title || person.name }}
+          {{ person.name }}
         </h1>
         <div v-else>
           <loading-placeholder :count="1" />
@@ -84,7 +84,7 @@
     IMovie,
     IShow
   } from "../../interfaces/IList";
-  import { ListTypes } from "../../interfaces/IList";
+  import { MediaTypes } from "../../interfaces/IList";
 
   interface Props {
     id: number;
@@ -137,12 +137,12 @@
 
   function personCreditedFrom(cast: Array<IMovie | IShow>): void {
     creditedMovies.value = cast
-      .filter(credit => credit.type === ListTypes.Movie)
+      .filter(credit => credit.type === MediaTypes.Movie)
       .filter(alreadyExists)
       .sort(sortPopularity);
 
     creditedShows.value = cast
-      .filter(credit => credit.type === ListTypes.Show)
+      .filter(credit => credit.type === MediaTypes.Show)
       .filter(alreadyExists)
       .sort(sortPopularity);
   }

src/components/profile/ChangePassword.vue

@@ -34,8 +34,9 @@
   import SeasonedInput from "@/components/ui/SeasonedInput.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
   import type { Ref } from "vue";
-  import type IErrorMessage from "../../interfaces/IErrorMessage";
+  import type { IErrorMessage } from "../../interfaces/IErrorMessage";
 
   interface ResetPasswordPayload {
     old_password: string;
@@ -52,7 +53,11 @@
   }
 
   function addWarningMessage(message: string, title?: string) {
-    messages.value.push({ message, title, type: "warning" });
+    messages.value.push({
+      message,
+      title,
+      type: ErrorMessageTypes.Warning
+    } as IErrorMessage);
   }
 
   function validate() {

src/components/profile/LinkPlexAccount.vue

@@ -49,8 +49,9 @@
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
   import { linkPlexAccount, unlinkPlexAccount } from "../../api";
+  import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
   import type { Ref, ComputedRef } from "vue";
-  import type IErrorMessage from "../../interfaces/IErrorMessage";
+  import type { IErrorMessage } from "../../interfaces/IErrorMessage";
 
   interface Emit {
     (e: "reload");
@@ -89,10 +90,10 @@
     }
 
     messages.value.push({
-      type: success ? "success" : "error",
+      type: success ? ErrorMessageTypes.Success : ErrorMessageTypes.Error,
       title: success ? "Authenticated with plex" : "Something went wrong",
       message: message
-    });
+    } as IErrorMessage);
   }
 
   async function unauthenticatePlex() {
@@ -103,12 +104,14 @@
     }
 
     messages.value.push({
-      type: response.success ? "success" : "error",
+      type: response.success
+        ? ErrorMessageTypes.Success
+        : ErrorMessageTypes.Error,
       title: response.success
         ? "Unlinked plex account "
         : "Something went wrong",
       message: response.message
-    });
+    } as IErrorMessage);
   }
 </script>
 

src/components/ui/SeasonedInput.vue

@@ -39,7 +39,7 @@
 
   interface Emit {
     (e: "change");
-    (e: "enter");
+    (e: "enter", event?: KeyboardEvent);
     (e: "update:modelValue", value: string);
   }
 

src/components/ui/SeasonedMessages.vue

@@ -3,34 +3,32 @@
     <div
       class="card"
       v-for="(message, index) in messages"
-      :key="`${index}-${message.title}-${message.type}}`"
+      :key="generateMessageKey(index, message)"
       :class="message.type || 'warning'"
     >
       <span class="pinstripe"></span>
       <div class="content">
         <h2 class="title">
-          {{ message.title || defaultTitles[message.type] }}
+          {{ message.title }}
         </h2>
         <span v-if="message.message" class="message">{{
           message.message
         }}</span>
       </div>
 
-      <button class="dismiss" @click="dismiss(index)">X</button>
+      <button class="dismiss" @click="dismiss(Number(index))">X</button>
     </div>
   </transition-group>
 </template>
 
 <script setup lang="ts">
   import { defineProps, defineEmits } from "vue";
+  import type {
+    ErrorMessageTypes,
+    IErrorMessage
+  } from "../../interfaces/IErrorMessage";
   import type { Ref } from "vue";
 
-  interface IErrorMessage {
-    title: string;
-    message: string;
-    type: "error" | "success" | "warning";
-  }
-
   interface Props {
     messages: IErrorMessage[];
   }
@@ -45,14 +43,25 @@
   const defaultTitles = {
     error: "Unexpected error",
     warning: "Something went wrong",
-    success: "",
+    success: "Success!",
     undefined: "Something went wrong"
   };
 
+  function titleFromType(type: ErrorMessageTypes) {
+    return defaultTitles[type];
+  }
+
   function dismiss(index: number) {
     props.messages.splice(index, 1);
     emit("update:messages", [...props.messages]);
   }
+
+  function generateMessageKey(
+    index: string | number | symbol,
+    errorMessage: IErrorMessage
+  ) {
+    return `${String(index)}-${errorMessage.title}-${errorMessage.type}`;
+  }
 </script>
 
 <style lang="scss" scoped>