A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: update query invalidation logic in SearchPage to use user-specific query keys and improve button loading state handling
+28
-7
+28
-7
apps/web/src/routes/search.tsx
+28
-7
apps/web/src/routes/search.tsx
···
1
1
import {
2
2
authControllerMeOptions,
3
3
moviesControllerGetUserMoviesOptions,
4
+
moviesControllerGetUserMoviesQueryKey,
4
5
moviesControllerMarkWatchedMutation,
5
6
moviesControllerSearchMoviesOptions,
6
7
moviesControllerUnmarkWatchedMutation,
7
8
} from "@opnshelf/api";
8
9
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
9
10
import { createFileRoute, useNavigate } from "@tanstack/react-router";
10
-
import { Check, Plus, Search } from "lucide-react";
11
+
import { Check, Loader2, Plus, Search } from "lucide-react";
11
12
import { useEffect, useMemo, useRef, useState } from "react";
12
13
13
14
export const Route = createFileRoute("/search")({
···
51
52
const markMutation = useMutation({
52
53
...moviesControllerMarkWatchedMutation(),
53
54
onSuccess: () => {
54
-
queryClient.invalidateQueries({ queryKey: ["shelf"] });
55
+
queryClient.invalidateQueries({
56
+
queryKey: moviesControllerGetUserMoviesQueryKey({
57
+
path: { userDid: user?.did || "" },
58
+
}),
59
+
});
55
60
},
56
61
});
57
62
···
59
64
const unmarkMutation = useMutation({
60
65
...moviesControllerUnmarkWatchedMutation(),
61
66
onSuccess: () => {
62
-
queryClient.invalidateQueries({ queryKey: ["shelf"] });
67
+
queryClient.invalidateQueries({
68
+
queryKey: moviesControllerGetUserMoviesQueryKey({
69
+
path: { userDid: user?.did || "" },
70
+
}),
71
+
});
63
72
},
64
73
});
65
74
···
95
104
}),
96
105
enabled: searchQuery.length > 0,
97
106
});
98
-
99
-
const isPending = markMutation.isPending || unmarkMutation.isPending;
100
107
101
108
return (
102
109
<div className="min-h-screen bg-gray-950 text-gray-50">
···
162
169
markMutation.mutate({ body: { movieId } });
163
170
}
164
171
}}
165
-
disabled={isPending}
172
+
disabled={
173
+
(markMutation.isPending &&
174
+
markMutation.variables?.body?.movieId ===
175
+
movieId) ||
176
+
(unmarkMutation.isPending &&
177
+
unmarkMutation.variables?.path?.movieId ===
178
+
movieId)
179
+
}
166
180
className={`absolute top-2 right-2 p-2 rounded-full transition-opacity disabled:opacity-50 ${
167
181
isWatched
168
182
? "bg-green-600 hover:bg-red-600 opacity-100"
···
172
186
isWatched ? "Remove from shelf" : "Mark as watched"
173
187
}
174
188
>
175
-
{isWatched ? (
189
+
{(markMutation.isPending &&
190
+
markMutation.variables?.body?.movieId ===
191
+
movieId) ||
192
+
(unmarkMutation.isPending &&
193
+
unmarkMutation.variables?.path?.movieId ===
194
+
movieId) ? (
195
+
<Loader2 className="w-4 h-4 animate-spin" />
196
+
) : isWatched ? (
176
197
<Check className="w-4 h-4" />
177
198
) : (
178
199
<Plus className="w-4 h-4" />