fix: handle MAL API returning numbers instead of strings for zero-value statistics

The MyAnimeList API inconsistently returns statistics status fields (watching,
completed, on_hold, dropped, plan_to_watch) as quoted strings for non-zero
values (e.g. "8217") but as bare numbers for zero values (e.g. 0). This caused
JSON unmarshal errors for anime with zero counts in any status field.

Introduce a FlexString custom type that implements json.Unmarshaler to accept
both JSON strings and JSON numbers, always storing the result as a string. The
type definition lives in MALTypes.go and the unmarshal logic in MALFunctions.go
to keep static types and behavior separate.

MALFunctions.go

@@ -11,6 +11,21 @@ import (
 	"strings"
 )
 
+// Unmarshalling accidental numbers received from MAL to strings
+func (f *FlexString) UnmarshalJSON(data []byte) error {
+	var s string
+	if err := json.Unmarshal(data, &s); err == nil {
+		*f = FlexString(s)
+		return nil
+	}
+	var n json.Number
+	if err := json.Unmarshal(data, &n); err == nil {
+		*f = FlexString(string(n))
+		return nil
+	}
+	return fmt.Errorf("FlexString: invalid value")
+}
+
 func MALHelper(method string, malUrl string, body url.Values) (json.RawMessage, string, error) {
 	client := &http.Client{}
 

MALTypes.go

@@ -1,6 +1,10 @@
 package main
 
-import "time"
+import (
+	"time"
+)
+
+type FlexString string
 
 type MyAnimeListJWT struct {
 	TokenType    string `json:"token_type"`
@@ -129,11 +133,11 @@ type MALAnime struct {
 	Statistics struct {
 		NumListUsers int `json:"num_list_users" ts_type:"numListUsers"`
 		Status       struct {
-			Watching    string `json:"watching" ts_type:"watching"`
-			Completed   string `json:"completed" ts_type:"completed"`
-			OnHold      string `json:"on_hold" ts_type:"onHold"`
-			Dropped     string `json:"dropped" ts_type:"dropped"`
-			PlanToWatch string `json:"plan_to_watch" ts_type:"planToWatch"`
+			Watching    FlexString `json:"watching" ts_type:"string"`
+			Completed   FlexString `json:"completed" ts_type:"string"`
+			OnHold      FlexString `json:"on_hold" ts_type:"string"`
+			Dropped     FlexString `json:"dropped" ts_type:"string"`
+			PlanToWatch FlexString `json:"plan_to_watch" ts_type:"string"`
 		}
 	}
 }

frontend/src/helperComponents/Pagination.svelte

@@ -118,7 +118,7 @@
       </ul>
     </nav>
   {/if}
-  <div class="flex mt-5">
+  <div class="flex">
     <div class="w-20 mx-auto">
       <select
         bind:value={perPage}

frontend/src/helperComponents/RefreshWatchListButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+  import { loading } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+</script>
+
+<div class="flex justify-end">
+  <button
+    type="button"
+    class="py-2 px-4 mt-4 mr-4 bg-gray-700 rounded-lg"
+    on:click={async () => {
+      loading.set(true);
+      await CheckIfAniListLoggedInAndLoadWatchList();
+      loading.set(false);
+    }}
+  >
+    Refresh WatchList
+  </button>
+</div>

frontend/src/helperComponents/Sort.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import {
+    aniListSort,
+    watchListPage,
+    animePerPage,
+    aniListWatchlist,
+  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+  import { MediaListSort } from "../anilist/types/AniListTypes";
+  import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
+
+  const sortTypes = [
+    { value: MediaListSort.MediaId, name: "Media Id Asc" },
+    { value: MediaListSort.MediaIdDesc, name: "Media Id Desc" },
+    { value: MediaListSort.Score, name: "Score Asc" },
+    { value: MediaListSort.ScoreDesc, name: "Score Desc" },
+    { value: MediaListSort.Status, name: "Status Asc" },
+    { value: MediaListSort.StatusDesc, name: "Status Desc" },
+    { value: MediaListSort.Progress, name: "Progress Asc" },
+    { value: MediaListSort.ProgressDesc, name: "Progress Desc" },
+    { value: MediaListSort.ProgressVolumes, name: "Progress Valumes Asc" },
+    { value: MediaListSort.ProgressVolumesDesc, name: "Progress Valumes Desc" },
+    { value: MediaListSort.Repeat, name: "Repeat Asc" },
+    { value: MediaListSort.RepeatDesc, name: "Repeat Desc" },
+    { value: MediaListSort.Priority, name: "Priority Asc" },
+    { value: MediaListSort.PriorityDesc, name: "Priority Desc" },
+    { value: MediaListSort.StartedOn, name: "Started On Asc" },
+    { value: MediaListSort.StartedOnDesc, name: "Started On Desc" },
+    { value: MediaListSort.FinishedOn, name: "Finished On Asc" },
+    { value: MediaListSort.FinishedOnDesc, name: "Finished On Desc" },
+    { value: MediaListSort.AddedTime, name: "Added Time Asc" },
+    { value: MediaListSort.AddedTimeDesc, name: "Added Time Desc" },
+    { value: MediaListSort.UpdatedTime, name: "Updated Time Asc" },
+    { value: MediaListSort.UpdatedTimeDesc, name: "Updated Time Desc" },
+    { value: MediaListSort.MediaTitleRomaji, name: "Media Title Romaji Asc" },
+    {
+      value: MediaListSort.MediaTitleRomajiDesc,
+      name: "Media Title Romaji Desc",
+    },
+    { value: MediaListSort.MediaTitleEnglish, name: "Media Title English Asc" },
+    {
+      value: MediaListSort.MediaTitleEnglishDesc,
+      name: "Media Title English Desc",
+    },
+    { value: MediaListSort.MediaTitleNative, name: "Media Title Native Asc" },
+    {
+      value: MediaListSort.MediaTitleNativeDesc,
+      name: "Media Title Native Desc",
+    },
+    { value: MediaListSort.MediaPopularity, name: "Media Popularity Asc" },
+    { value: MediaListSort.MediaPopularityDesc, name: "Media Popularity Desc" },
+  ];
+
+  let sort: string;
+  aniListSort.subscribe((value) => (sort = value));
+  console.log(sort);
+
+  async function changeWatchListSort() {
+    const result = await GetAniListUserWatchingList(
+      $watchListPage,
+      $animePerPage,
+      $aniListSort,
+    );
+    aniListWatchlist.set(result);
+  }
+</script>
+
+<select
+  id="sort"
+  class="border rounded-lg block p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+  bind:value={$aniListSort}
+  on:change={() => changeWatchListSort()}
+>
+  <option value="" disabled>Sort WatchList</option>
+  {#each sortTypes as sort}
+    <option value={sort.value}>{sort.name}</option>
+  {/each}
+</select>

frontend/src/helperComponents/WatchList.svelte

@@ -10,6 +10,7 @@
   import { Rating } from "flowbite-svelte";
   import loader from "../helperFunctions/loader";
   import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+  import Sort from "../helperComponents/Sort.svelte";
 
   let isAniListLoggedIn: boolean;
   let aniListWatchListLoaded: AniListCurrentUserWatchList;
@@ -25,17 +26,7 @@
     >
       <div class="flex justify-between items-center mb-4">
         <h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
-        <button
-          type="button"
-          class="py-2 px-4 bg-gray-700 rounded-lg"
-          on:click={async () => {
-            loading.set(true);
-            await CheckIfAniListLoggedInAndLoadWatchList();
-            loading.set(false);
-          }}
-        >
-          Refresh WatchList
-        </button>
+        <Sort />
       </div>
 
       <div

frontend/src/routes/Home.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Pagination from "../helperComponents/Pagination.svelte";
   import WatchList from "../helperComponents/WatchList.svelte";
+  import RefreshWatchListButton from "../helperComponents/RefreshWatchListButton.svelte";
   import {
     aniListLoggedIn,
     aniListPrimary,
@@ -45,6 +46,7 @@
     </div>
   </div>
 {:else if isAniListLoggedIn && isAniListPrimary}
+  <RefreshWatchListButton />
   <div class="container py-10">
     <Pagination />
     <WatchList />

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "1.0.0"
+    "productVersion": "1.5.0"
   }
 }