added tags to frontend anime item

frontend/src/anilist/types/AniListCurrentUserWatchListType.ts

@@ -2,79 +2,92 @@ export interface AniListCurrentUserWatchList {
   data: {
     Page: {
       pageInfo: {
-                total: number
-                perPage: number
-                currentPage: number
-                lastPage: number
-                hasNextPage: boolean
-            },
-            mediaList: MediaList[]
-        }
-    }
+        total: number;
+        perPage: number;
+        currentPage: number;
+        lastPage: number;
+        hasNextPage: boolean;
+      };
+      mediaList: MediaList[];
+    };
+  };
 }
 
 export interface AniListGetSingleAnime {
   data: {
-        MediaList: MediaList
-    }
+    MediaList: MediaList;
+  };
 }
 
 export interface MediaList {
-    id: number
-    mediaId: number
-    userId: number
+  id: number;
+  mediaId: number;
+  userId: number;
   media: {
-        id: number
-        idMal: number
+    id: number;
+    idMal: number;
     title: {
-            romaji: string
-            english?: string
-            native: string
-        }
-        description: string
+      romaji: string;
+      english?: string;
+      native: string;
+    };
+    description: string;
     coverImage: {
-            large: string
-        }
-        season: string
-        seasonYear: number
-        status: string
-        episodes?: number
+      large: string;
+    };
+    season: string;
+    seasonYear: number;
+    status: string;
+    episodes?: number;
     nextAiringEpisode?: {
-            airingAt: number
-            timeUntilAiring: number
-            episode: number
-        }
-    }
-    status: string
+      airingAt: number;
+      timeUntilAiring: number;
+      episode: number;
+    };
+    tags: [
+      {
+        id: number;
+        name: string;
+        description: string;
+        rank: number;
+        isMediaSpoiler: boolean;
+        isAdult: boolean;
+      },
+    ];
+    isAdult: boolean;
+  };
+  status: string;
   startedAt: {
-        year: number
-        month: number
-        day: number
-    }
+    year: number;
+    month: number;
+    day: number;
+  };
   completedAt: {
-        year?: number
-        month?: number
-        day?: number
-    }
-    notes?: string
-    progress: number
-    score: number
-    repeat: number
+    year?: number;
+    month?: number;
+    day?: number;
+  };
+  notes?: string;
+  progress: number;
+  score: number;
+  repeat: number;
   user: {
-        id: number
-        name: string
+    id: number;
+    name: string;
     avatar: {
-            large: string
-            medium: string
-        }
+      large: string;
+      medium: string;
+    };
     statistics: {
       anime: {
-                count: number
-                statuses: [{
-                    status: string
-                    count: number
-                }]
-            }
-        }
-    }
+        count: number;
+        statuses: [
+          {
+            status: string;
+            count: number;
+          },
+        ];
+      };
+    };
+  };
 }

frontend/src/helperComponents/Anime.svelte

@@ -22,7 +22,10 @@
     } from "../mal/types/MALTypes";
     import type { SimklAnime } from "../simkl/types/simklTypes";
     import { writable } from "svelte/store";
-  import type { StatusOption, StatusOptions } from "../helperTypes/StatusTypes";
+    import type {
+        StatusOption,
+        StatusOptions,
+    } from "../helperTypes/StatusTypes";
     import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
     import { convertDateToAniList } from "../helperFunctions/convertDateToAniList";
     import {
@@ -38,6 +41,7 @@
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
+    import { Badge } from "flowbite-svelte";
     const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let isAniListLoggedIn: boolean;
@@ -76,7 +80,8 @@
         { id: 5, aniList: "REPEATING", mal: "rewatching", simkl: "watching" },
     ];
     let startingAnilistStatusOption: StatusOption = statusOptions.filter(
-    (option) => currentAniListAnime.data.MediaList.status === option.aniList,
+        (option) =>
+            currentAniListAnime.data.MediaList.status === option.aniList,
     )[0];
     let startedAtDate: Date | null = convertAniListDateToDate(
         currentAniListAnime.data.MediaList.startedAt,
@@ -107,11 +112,15 @@
         let startDate = "";
         let finishDate = "";
         if (currentMalAnime.my_list_status.start_date !== "") {
-      const startArray = re.exec(currentMalAnime.my_list_status.start_date);
+            const startArray = re.exec(
+                currentMalAnime.my_list_status.start_date,
+            );
             startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
         }
         if (currentMalAnime.my_list_status.finish_date !== "") {
-      const finishArray = re.exec(currentMalAnime.my_list_status.finish_date);
+            const finishArray = re.exec(
+                currentMalAnime.my_list_status.finish_date,
+            );
             finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
         }
         AddAnimeServiceToTable({
@@ -188,7 +197,10 @@
             submitData[key] = value;
         }
 
-    if (isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0) {
+        if (
+            isAniListLoggedIn &&
+            currentAniListAnime.data.MediaList.mediaId !== 0
+        ) {
             let body: AniListUpdateVariables = {
                 mediaId: currentAniListAnime.data.MediaList.mediaId,
                 progress: submitData.episodes,
@@ -199,7 +211,8 @@
                 startedAt: convertDateToAniList(startedAtDate),
                 completedAt: convertDateToAniList(completedAtDate),
             };
-      await AniListUpdateEntry(body).then((value: AniListGetSingleAnime) => {
+            await AniListUpdateEntry(body).then(
+                (value: AniListGetSingleAnime) => {
                     /* TODO in future when you inevitably add tags to typescript, until Anilist fixes the api bug
                     where tags break the SaveMediaListEntry return, you'll want to use this delete line
                     delete value.data.MediaList.media.tags */
@@ -223,7 +236,8 @@
                         repeat: currentAniListAnime.data.MediaList.repeat,
                         notes: currentAniListAnime.data.MediaList.notes,
                     });
-      });
+                },
+            );
         }
 
         if (malLoggedIn && currentMalAnime.id !== 0) {
@@ -240,7 +254,8 @@
                 (malAnimeReturn: MalListStatus) => {
                     malAnime.update((value) => {
                         value.my_list_status.status = malAnimeReturn.status;
-            value.my_list_status.is_rewatching = malAnimeReturn.is_rewatching;
+                        value.my_list_status.is_rewatching =
+                            malAnimeReturn.is_rewatching;
                         value.my_list_status.score = malAnimeReturn.score;
                         value.my_list_status.num_episodes_watched =
                             malAnimeReturn.num_episodes_watched;
@@ -267,12 +282,14 @@
                         id: `m-${currentMalAnime.id}`,
                         title: currentMalAnime.title,
                         service: "MyAnimeList",
-            progress: currentMalAnime.my_list_status.num_episodes_watched,
+                        progress:
+                            currentMalAnime.my_list_status.num_episodes_watched,
                         status: currentMalAnime.my_list_status.status,
                         startedAt: startDate,
                         completedAt: finishDate,
                         score: currentMalAnime.my_list_status.score,
-            repeat: currentMalAnime.my_list_status.num_times_rewatched,
+                        repeat: currentMalAnime.my_list_status
+                            .num_times_rewatched,
                         notes: currentMalAnime.my_list_status.comments,
                     });
                 },
@@ -280,9 +297,13 @@
         }
 
         if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
-      if (currentSimklAnime.watched_episodes_count !== submitData.episodes) {
-        await SimklSyncEpisodes(currentSimklAnime, submitData.episodes).then(
-          (value: SimklAnime) => {
+            if (
+                currentSimklAnime.watched_episodes_count !== submitData.episodes
+            ) {
+                await SimklSyncEpisodes(
+                    currentSimklAnime,
+                    submitData.episodes,
+                ).then((value: SimklAnime) => {
                     AddAnimeServiceToTable({
                         id: `s-${value.show.ids.simkl}`,
                         title: value.show.title,
@@ -299,13 +320,14 @@
                         newValue = value;
                         return newValue;
                     });
-          },
-        );
+                });
             }
 
             if (currentSimklAnime.user_rating !== submitData.rating) {
-        await SimklSyncRating(currentSimklAnime, submitData.rating).then(
-          (value) => {
+                await SimklSyncRating(
+                    currentSimklAnime,
+                    submitData.rating,
+                ).then((value) => {
                     AddAnimeServiceToTable({
                         id: `s-${value.show.ids.simkl}`,
                         title: value.show.title,
@@ -322,13 +344,14 @@
                         newValue = value;
                         return newValue;
                     });
-          },
-        );
+                });
             }
 
             if (currentSimklAnime.status !== submitData.status.simkl) {
-        await SimklSyncStatus(currentSimklAnime, submitData.status.simkl).then(
-          (value) => {
+                await SimklSyncStatus(
+                    currentSimklAnime,
+                    submitData.status.simkl,
+                ).then((value) => {
                     AddAnimeServiceToTable({
                         id: `s-${value.show.ids.simkl}`,
                         title: value.show.title,
@@ -345,8 +368,7 @@
                         newValue = value;
                         return newValue;
                     });
-          },
-        );
+                });
             }
         }
 
@@ -357,7 +379,10 @@
 
     const deleteEntries = async () => {
         submitting.set(true);
-    if (isAniListLoggedIn && currentAniListAnime.data.MediaList.mediaId !== 0) {
+        if (
+            isAniListLoggedIn &&
+            currentAniListAnime.data.MediaList.mediaId !== 0
+        ) {
             await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
             AddAnimeServiceToTable({
                 id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
@@ -417,8 +442,10 @@
         currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0
     ) {
         max =
-      currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode - 1;
+            currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
+            1;
     }
+    console.log(currentAniListAnime.data.MediaList.media);
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
@@ -453,11 +480,17 @@
                             on:click={() => {
                                 currentAniListAnime.data.MediaList.progress -= 1;
                                 if (
-                  currentAniListAnime.data.MediaList.progress <
-                  currentAniListAnime.data.MediaList.media.episodes
+                                    currentAniListAnime.data.MediaList
+                                        .progress <
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes
                                 ) {
-                  startingAnilistStatusOption = statusOptions[0];
-                  if (currentAniListAnime.data.MediaList.repeat === 0)
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (
+                                        currentAniListAnime.data.MediaList
+                                            .repeat === 0
+                                    )
                                         completedAtDate = null;
                                 }
                             }}
@@ -487,18 +520,22 @@
                             id="episodes"
                             class="border border-x-0 p-2.5 h-11 text-center text-sm block w-full placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
                             {currentAniListAnime.data.MediaList.progress < 0 ||
-              (currentAniListAnime.data.MediaList.media.episodes > 0 &&
+                            (currentAniListAnime.data.MediaList.media.episodes >
+                                0 &&
                                 currentAniListAnime.data.MediaList.progress >
-                  currentAniListAnime.data.MediaList.media.episodes) ||
-              (currentAniListAnime.data.MediaList.media.nextAiringEpisode
-                .episode > 0 &&
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes) ||
+                            (currentAniListAnime.data.MediaList.media
+                                .nextAiringEpisode.episode > 0 &&
                                 currentAniListAnime.data.MediaList.progress >
-                  currentAniListAnime.data.MediaList.media.nextAiringEpisode
-                    .episode -
+                                    currentAniListAnime.data.MediaList.media
+                                        .nextAiringEpisode.episode -
                                         1)
                                 ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
                                 : 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24"
-              bind:value={currentAniListAnime.data.MediaList.progress}
+                            bind:value={
+                                currentAniListAnime.data.MediaList.progress
+                            }
                             required
                         />
                         <button
@@ -508,15 +545,24 @@
                             on:click={() => {
                                 currentAniListAnime.data.MediaList.progress += 1;
                                 if (
-                  currentAniListAnime.data.MediaList.media.episodes ===
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes ===
                                     currentAniListAnime.data.MediaList.progress
                                 ) {
-                  startingAnilistStatusOption = statusOptions[2];
+                                    startingAnilistStatusOption =
+                                        statusOptions[2];
                                     completedAtDate = new Date();
                                 }
-                if (currentAniListAnime.data.MediaList.progress - 1 === 0) {
-                  startingAnilistStatusOption = statusOptions[0];
-                  if (startedAtDate === null) startedAtDate = new Date();
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress -
+                                        1 ===
+                                    0
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (startedAtDate === null)
+                                        startedAtDate = new Date();
                                 }
                             }}
                             class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
@@ -539,15 +585,16 @@
                         </button>
                     </div>
                     <div>
-            / {currentAniListAnime.data.MediaList.media.nextAiringEpisode
-              .episode !== 0
-              ? currentAniListAnime.data.MediaList.media.nextAiringEpisode
-                  .episode - 1
+                        / {currentAniListAnime.data.MediaList.media
+                            .nextAiringEpisode.episode !== 0
+                            ? currentAniListAnime.data.MediaList.media
+                                  .nextAiringEpisode.episode - 1
                             : currentAniListAnime.data.MediaList.media.episodes}
                     </div>
                     {#if currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode !== 0}
                         <div>
-              of {currentAniListAnime.data.MediaList.media.episodes}
+                            of {currentAniListAnime.data.MediaList.media
+                                .episodes}
                         </div>
                     {/if}
                 </div>
@@ -619,7 +666,8 @@
                         name="repeat"
                         min="0"
                         id="repeat"
-            class="border {currentAniListAnime.data.MediaList.repeat < 0
+                        class="border {currentAniListAnime.data.MediaList
+                            .repeat < 0
                             ? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
                             : 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
                         bind:value={currentAniListAnime.data.MediaList.repeat}
@@ -779,8 +827,25 @@
         </div>
     </div>
 
+    <div class="flex m-5">
         <div>
+            <h3 class="text-2xl">Tags</h3>
+            <div class="mt-2">
+                {#each currentAniListAnime.data.MediaList.media.tags as tag}
+                    <div>
+                        <Badge large border color="blue" class="m-1 w-40"
+                            >{tag.name}</Badge
+                        >
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <div class="ml-5">
             <h3 class="text-2xl">Summary</h3>
-    <p>{@html currentAniListAnime.data.MediaList.media.description}</p>
+            <p class="rounded border border-gray-700 p-2 mt-2">
+                {@html currentAniListAnime.data.MediaList.media.description}
+            </p>
+        </div>
     </div>
 </form>

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "0.1.8"
+    "productVersion": "0.1.9"
   }
 }