john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

feat: implement smart watchlist refresh on navigation

Browse Source 
Added intelligent watchlist refresh mechanism that only refetches data when changes are actually made, preventing unnecessary API calls and improving performance.

Changes:
- Added watchlistNeedsRefresh store to track when watchlist data has changed
- Implemented reactive watcher in App.svelte that uses svelte-spa-router's loc store to detect navigation to home
- Set dirty flag in Anime.svelte after successful status updates and entry deletions
- Added conditional refresh logic that checks user's primary service (AniList, MAL, or Simkl)
- Parallel refresh support for multiple services when logged in

This resolves the issue where clicking the logo would cause full page reloads and unnecessary re-authentication checks, while also ensuring watchlist data stays current when users make changes.

Technical details:
- Uses $loc.location to detect route changes
- IIFE pattern for async operations in reactive statements
- Only refreshes for logged-in primary services
- Flag resets after successful refresh

Related to: Header.svelte client-side routing fix
This commit is contained in:
John O'Keefe
2026-03-21 13:25:43 -04:00
parent ca8c8beaf3
commit 8a8baf7f8f
3 changed files with 238 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/src/App.svelte
View File

@@ -1,42 +1,69 @@
<script lang="ts"> <script lang="ts">
import { import {
aniListLoggedIn, aniListLoggedIn,
malLoggedIn, malLoggedIn,
simklLoggedIn, simklLoggedIn,
} from "./helperModules/GlobalVariablesAndHelperFunctions.svelte"; watchlistNeedsRefresh,
import {onMount} from "svelte"; aniListPrimary,
import Router from "svelte-spa-router" malPrimary,
import Home from "./routes/Home.svelte"; simklPrimary,
import {wrap} from "svelte-spa-router/wrap"; malWatchList,
import Spinner from "./helperComponents/Spinner.svelte"; simklWatchList,
import Header from "./helperComponents/Header.svelte"; } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
import {CheckIfAniListLoggedInAndLoadWatchList} from "./helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"; import { onMount } from "svelte";
import { CheckIfMALLoggedInAndSetUser } from "./helperModules/CheckIfMyAnimeListLoggedIn.svelte"; import Router from "svelte-spa-router";
import {CheckIfSimklLoggedInAndSetUser} from "./helperModules/CheckIsSimklLoggedIn.svelte" import Home from "./routes/Home.svelte";
import {CheckIfAniListLoggedIn} from "../wailsjs/go/main/App"; import { wrap } from "svelte-spa-router/wrap";
import Spinner from "./helperComponents/Spinner.svelte";
import Header from "./helperComponents/Header.svelte";
import { CheckIfAniListLoggedInAndLoadWatchList } from "./helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
import { CheckIfMALLoggedInAndSetUser } from "./helperModules/CheckIfMyAnimeListLoggedIn.svelte";
import { CheckIfSimklLoggedInAndSetUser } from "./helperModules/CheckIsSimklLoggedIn.svelte";
import {
CheckIfAniListLoggedIn,
GetMyAnimeList,
SimklGetUserWatchlist,
} from "../wailsjs/go/main/App";
import { loc } from "svelte-spa-router"; onMount(async () => {
onMount(async () => {
let isAniListLoggedIn: boolean;
let isMALLoggedIn: boolean;
let isSimklLoggedIn: boolean;
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
onMount(async () => { !isAniListLoggedIn && (await CheckIfAniListLoggedInAndLoadWatchList());
let isAniListLoggedIn: boolean !isMALLoggedIn && (await CheckIfMALLoggedInAndSetUser());
let isMALLoggedIn: boolean !isSimklLoggedIn && (await CheckIfSimklLoggedInAndSetUser());
let isSimklLoggedIn: boolean });
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
malLoggedIn.subscribe((value) => isMALLoggedIn = value)
simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
console.log(isAniListLoggedIn) $: if ($loc?.location === "/" && $watchlistNeedsRefresh) {
!isAniListLoggedIn && await CheckIfAniListLoggedInAndLoadWatchList() (async () => {
!isMALLoggedIn && await CheckIfMALLoggedInAndSetUser() if ($aniListLoggedIn && $aniListPrimary) {
!isSimklLoggedIn && await CheckIfSimklLoggedInAndSetUser() await CheckIfAniListLoggedInAndLoadWatchList();
}) }
if ($malLoggedIn && $malPrimary) {
await GetMyAnimeList(1000).then((w) => malWatchList.set(w));
}
if ($simklLoggedIn && $simklPrimary) {
await SimklGetUserWatchlist().then((w) => simklWatchList.set(w));
}
watchlistNeedsRefresh.set(false);
})();
}
</script> </script>
<Header /> <Header />
<Router routes={{ <Router
'/': Home, routes={{
'/anime/:id': wrap({ "/": Home,
asyncComponent: () => import('./routes/AnimeRoutePage.svelte'), "/anime/:id": wrap({
conditions: [async () => await CheckIfAniListLoggedIn()], asyncComponent: () => import("./routes/AnimeRoutePage.svelte"),
loadingComponent: Spinner conditions: [async () => await CheckIfAniListLoggedIn()],
loadingComponent: Spinner,
}), }),
// '*': "Not Found" // '*': "Not Found"
}} /> }}
/>

4
frontend/src/helperComponents/Anime.svelte
View File

@@ -6,6 +6,7 @@
malLoggedIn, malLoggedIn,
simklAnime, simklAnime,
simklLoggedIn, simklLoggedIn,
watchlistNeedsRefresh,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import { push } from "svelte-spa-router"; import { push } from "svelte-spa-router";
import WebsiteLink from "./WebsiteLink.svelte"; import WebsiteLink from "./WebsiteLink.svelte";
@@ -362,6 +363,7 @@
} finally { } finally {
submitting.set(false); submitting.set(false);
submitSuccess.set(true); submitSuccess.set(true);
watchlistNeedsRefresh.set(true);
setTimeout(() => submitSuccess.set(false), 2000); setTimeout(() => submitSuccess.set(false), 2000);
} }
}; };
@@ -422,6 +424,7 @@
} finally { } finally {
submitting.set(false); submitting.set(false);
submitSuccess.set(true); submitSuccess.set(true);
watchlistNeedsRefresh.set(true);
setTimeout(() => submitSuccess.set(false), 2000); setTimeout(() => submitSuccess.set(false), 2000);
} }
}; };
@@ -702,6 +705,7 @@
Sync Changes Sync Changes
</button> </button>
<button <button
type="button"
class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
hover:border-gray-600" hover:border-gray-600"

319
frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte
View File

@@ -1,162 +1,187 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
import { import {
GetAniListItem, GetAniListItem,
GetAniListLoggedInUser, GetAniListLoggedInUser,
GetAniListUserWatchingList, GetAniListUserWatchingList,
GetMyAnimeListAnime, GetMyAnimeListAnime,
GetMyAnimeListLoggedInUser, GetMyAnimeListLoggedInUser,
GetSimklLoggedInUser, GetSimklLoggedInUser,
LogoutAniList, LogoutAniList,
LogoutMyAnimeList, LogoutMyAnimeList,
LogoutSimkl, LogoutSimkl,
SimklGetUserWatchlist, SimklGetUserWatchlist,
SimklSearch SimklSearch,
} from "../../wailsjs/go/main/App"; } from "../../wailsjs/go/main/App";
import type { import type {
AniListCurrentUserWatchList, AniListCurrentUserWatchList,
AniListGetSingleAnime AniListGetSingleAnime,
} from "../anilist/types/AniListCurrentUserWatchListType.js"; } from "../anilist/types/AniListCurrentUserWatchListType.js";
import {writable} from 'svelte/store' import { writable } from "svelte/store";
import type {SimklAnime, SimklUser, SimklWatchList} from "../simkl/types/simklTypes"; import type {
import {type AniListUser, MediaListSort} from "../anilist/types/AniListTypes"; SimklAnime,
import type {MALAnime, MALWatchlist, MyAnimeListUser} from "../mal/types/MALTypes"; SimklUser,
import type {TableItems} from "../helperTypes/TableTypes"; SimklWatchList,
import {AniListGetSingleAnimeDefaultData} from "../helperDefaults/AniListGetSingleAnime"; } from "../simkl/types/simklTypes";
import {
type AniListUser,
MediaListSort,
} from "../anilist/types/AniListTypes";
import type {
MALAnime,
MALWatchlist,
MyAnimeListUser,
} from "../mal/types/MALTypes";
import type { TableItems } from "../helperTypes/TableTypes";
import { AniListGetSingleAnimeDefaultData } from "../helperDefaults/AniListGetSingleAnime";
export let aniListAnime = writable(AniListGetSingleAnimeDefaultData) export let aniListAnime = writable(AniListGetSingleAnimeDefaultData);
export let title = writable("") export let title = writable("");
export let aniListLoggedIn = writable(false) export let aniListLoggedIn = writable(false);
export let simklLoggedIn = writable(false) export let simklLoggedIn = writable(false);
export let malLoggedIn = writable(false) export let malLoggedIn = writable(false);
export let simklWatchList = writable({} as SimklWatchList) export let simklWatchList = writable({} as SimklWatchList);
export let aniListPrimary = writable(true) export let aniListPrimary = writable(true);
export let simklPrimary = writable(false) export let simklPrimary = writable(false);
export let malPrimary = writable(false) export let malPrimary = writable(false);
export let simklUser = writable({} as SimklUser) export let simklUser = writable({} as SimklUser);
export let aniListUser = writable({} as AniListUser) export let aniListUser = writable({} as AniListUser);
export let malUser = writable({} as MyAnimeListUser) export let malUser = writable({} as MyAnimeListUser);
export let aniListWatchlist = writable({} as AniListCurrentUserWatchList) export let aniListWatchlist = writable({} as AniListCurrentUserWatchList);
export let malWatchList = writable({} as MALWatchlist) export let malWatchList = writable({} as MALWatchlist);
export let malAnime = writable({} as MALAnime) export let malAnime = writable({} as MALAnime);
export let simklAnime = writable({} as SimklAnime) export let simklAnime = writable({} as SimklAnime);
export let loading = writable(false) export let loading = writable(false);
export let tableItems = writable([] as TableItems) export let tableItems = writable([] as TableItems);
export let watchlistNeedsRefresh = writable(false);
export let watchListPage = writable(1) export let watchListPage = writable(1);
export let animePerPage = writable(20) export let animePerPage = writable(20);
let isAniListPrimary: boolean let isAniListPrimary: boolean;
let page: number let page: number;
let perPage: number let perPage: number;
let aniWatchlist: AniListCurrentUserWatchList let aniWatchlist: AniListCurrentUserWatchList;
let currentAniListAnime: AniListGetSingleAnime let currentAniListAnime: AniListGetSingleAnime;
let isMalLoggedIn: boolean let isMalLoggedIn: boolean;
let isSimklLoggedIn: boolean let isSimklLoggedIn: boolean;
aniListPrimary.subscribe(value => isAniListPrimary = value) aniListPrimary.subscribe((value) => (isAniListPrimary = value));
watchListPage.subscribe(value => page = value) watchListPage.subscribe((value) => (page = value));
animePerPage.subscribe(value => perPage = value) animePerPage.subscribe((value) => (perPage = value));
aniListWatchlist.subscribe(value => aniWatchlist = value) aniListWatchlist.subscribe((value) => (aniWatchlist = value));
malLoggedIn.subscribe(value => isMalLoggedIn = value) malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
simklLoggedIn.subscribe(value => isSimklLoggedIn = value) simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
aniListAnime.subscribe(value => currentAniListAnime = value) aniListAnime.subscribe((value) => (currentAniListAnime = value));
export async function GetAnimeSingleItem(
export async function GetAnimeSingleItem(aniId: number, login: boolean): Promise<""> { aniId: number,
await GetAniListItem(aniId, login).then(aniListResult => { login: boolean,
let finalResult: AniListGetSingleAnime ): Promise<""> {
finalResult = aniListResult await GetAniListItem(aniId, login).then((aniListResult) => {
if (login === false) { let finalResult: AniListGetSingleAnime;
finalResult.data.MediaList.status = "" finalResult = aniListResult;
finalResult.data.MediaList.score = 0 if (login === false) {
finalResult.data.MediaList.progress = 0 finalResult.data.MediaList.status = "";
finalResult.data.MediaList.notes = "" finalResult.data.MediaList.score = 0;
finalResult.data.MediaList.repeat = 0 finalResult.data.MediaList.progress = 0;
finalResult.data.MediaList.startedAt.day = 0 finalResult.data.MediaList.notes = "";
finalResult.data.MediaList.startedAt.month = 0 finalResult.data.MediaList.repeat = 0;
finalResult.data.MediaList.startedAt.year = 0 finalResult.data.MediaList.startedAt.day = 0;
finalResult.data.MediaList.completedAt.day = 0 finalResult.data.MediaList.startedAt.month = 0;
finalResult.data.MediaList.completedAt.month = 0 finalResult.data.MediaList.startedAt.year = 0;
finalResult.data.MediaList.completedAt.year = 0 finalResult.data.MediaList.completedAt.day = 0;
} finalResult.data.MediaList.completedAt.month = 0;
aniListAnime.set(finalResult) finalResult.data.MediaList.completedAt.year = 0;
title.set(currentAniListAnime.data.MediaList.media.title.english === "" ? }
currentAniListAnime.data.MediaList.media.title.romaji : aniListAnime.set(finalResult);
currentAniListAnime.data.MediaList.media.title.english) title.set(
}) currentAniListAnime.data.MediaList.media.title.english === ""
if (isMalLoggedIn) { ? currentAniListAnime.data.MediaList.media.title.romaji
await GetMyAnimeListAnime(currentAniListAnime.data.MediaList.media.idMal).then(malResult => { : currentAniListAnime.data.MediaList.media.title.english,
malAnime.set(malResult) );
}) });
} if (isMalLoggedIn) {
if (isSimklLoggedIn) { await GetMyAnimeListAnime(
await SimklSearch(currentAniListAnime.data.MediaList).then((value: SimklAnime) => { currentAniListAnime.data.MediaList.media.idMal,
simklAnime.set(value) ).then((malResult) => {
}) malAnime.set(malResult);
} });
return ""
} }
if (isSimklLoggedIn) {
export function loginToSimkl(): void { await SimklSearch(currentAniListAnime.data.MediaList).then(
GetSimklLoggedInUser().then(user => { (value: SimklAnime) => {
if (Object.keys(user).length === 0) { simklAnime.set(value);
simklLoggedIn.set(false) },
} else { );
simklUser.set(user)
SimklGetUserWatchlist().then(result => {
simklWatchList.set(result)
simklLoggedIn.set(true)
})
}
})
} }
return "";
}
export function loginToAniList(): void { export function loginToSimkl(): void {
GetAniListLoggedInUser().then(result => { GetSimklLoggedInUser().then((user) => {
aniListUser.set(result) if (Object.keys(user).length === 0) {
if (isAniListPrimary) { simklLoggedIn.set(false);
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => { } else {
aniListWatchlist.set(result) simklUser.set(user);
aniListLoggedIn.set(true) SimklGetUserWatchlist().then((result) => {
}) simklWatchList.set(result);
} else { simklLoggedIn.set(true);
aniListLoggedIn.set(true) });
} }
}) });
} }
export function loginToMAL(): void { export function loginToAniList(): void {
GetMyAnimeListLoggedInUser().then(result => { GetAniListLoggedInUser().then((result) => {
malUser.set(result) aniListUser.set(result);
malLoggedIn.set(true) if (isAniListPrimary) {
}) GetAniListUserWatchingList(
} page,
perPage,
MediaListSort.UpdatedTimeDesc,
).then((result) => {
aniListWatchlist.set(result);
aniListLoggedIn.set(true);
});
} else {
aniListLoggedIn.set(true);
}
});
}
export function logoutOfAniList(): void { export function loginToMAL(): void {
LogoutAniList().then(result => { GetMyAnimeListLoggedInUser().then((result) => {
console.log(result) malUser.set(result);
if (Object.keys(aniWatchlist).length !== 0) { malLoggedIn.set(true);
aniListWatchlist.set({} as AniListCurrentUserWatchList) });
} }
aniListUser.set({} as AniListUser)
aniListLoggedIn.set(false)
})
}
export function logoutOfMAL(): void { export function logoutOfAniList(): void {
LogoutMyAnimeList().then(result => { LogoutAniList().then((result) => {
console.log(result) console.log(result);
malUser.set({} as MyAnimeListUser) if (Object.keys(aniWatchlist).length !== 0) {
malLoggedIn.set(false) aniListWatchlist.set({} as AniListCurrentUserWatchList);
}) }
} aniListUser.set({} as AniListUser);
aniListLoggedIn.set(false);
});
}
export function logoutOfSimkl(): void { export function logoutOfMAL(): void {
LogoutSimkl().then(result => { LogoutMyAnimeList().then((result) => {
console.log(result) console.log(result);
simklUser.set({} as SimklUser) malUser.set({} as MyAnimeListUser);
simklLoggedIn.set(false) malLoggedIn.set(false);
}) });
} }
export function logoutOfSimkl(): void {
LogoutSimkl().then((result) => {
console.log(result);
simklUser.set({} as SimklUser);
simklLoggedIn.set(false);
});
}
</script> </script>