idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 09:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): replace pkg react-query with tanstack/react-query (#868)

Browse source 
* refactor: move to tanstack/react-query and fix cache

* refactor(releases): move to tanstack/react-query

* refactor(logs): move to tanstack/react-query

* refactor(base): move to tanstack/react-query

* refactor(base): move to tanstack/react-query

* refactor(dashboard): move to tanstack/react-query

* refactor(auth): move to tanstack/react-query

* refactor(filters): move to tanstack/react-query

* refactor(settings): move to tanstack/react-query

* chore(pkg): add tanstack/react-query

* refactor(filters): move to tanstack/react-query

* refactor: move to tanstack/react-query

* refactor: invalidate queries

* chore(pkg): remove old react-query

* chore: change imports to root prefixes

* build: remove needs web from test

* set enableReinitialize to true to fix formik caching issues

* fix all property for apiKeys const

* fix toast when enabling/disabling feed

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
ze0s 2023-04-27 21:26:27 +02:00 • committed by GitHub
parent 0be92bef65
commit 6e5385a490
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 1101 additions and 1117 deletions
Download patch file Download diff file Expand all files Collapse all files

61
web/src/screens/settings/Api.tsx
View file

@ -1,20 +1,31 @@
import { useRef } from "react";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { KeyField } from "../../components/fields/text";
import { DeleteModal } from "../../components/modals";
import APIKeyAddForm from "../../forms/settings/APIKeyAddForm";
import Toast from "../../components/notifications/Toast";
import { APIClient } from "../../api/APIClient";
import { useToggle } from "../../hooks/hooks";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-hot-toast";
import { classNames } from "../../utils";
import { TrashIcon } from "@heroicons/react/24/outline";
import { EmptySimple } from "../../components/emptystates";
import { KeyField } from "@components/fields/text";
import { DeleteModal } from "@components/modals";
import APIKeyAddForm from "@forms/settings/APIKeyAddForm";
import Toast from "@components/notifications/Toast";
import { APIClient } from "@api/APIClient";
import { useToggle } from "@hooks/hooks";
import { classNames } from "@utils";
import { EmptySimple } from "@components/emptystates";
export const apiKeys = {
all: ["api_keys"] as const,
lists: () => [...apiKeys.all, "list"] as const,
details: () => [...apiKeys.all, "detail"] as const,
// detail: (id: number) => [...apiKeys.details(), id] as const
detail: (id: string) => [...apiKeys.details(), id] as const
};
function APISettings() {
const [addFormIsOpen, toggleAddForm] = useToggle(false);
const { data } = useQuery(["apikeys"], () => APIClient.apikeys.getAll(), {
const { data } = useQuery({
queryKey: apiKeys.lists(),
queryFn: APIClient.apikeys.getAll,
retry: false,
refetchOnWindowFocus: false,
onError: (err) => console.log(err)
@ -57,7 +68,7 @@ function APISettings() {
</div>
</li>
{data && data.map((k) => <APIListItem key={k.key} apikey={k} />)}
{data && data.map((k, idx) => <APIListItem key={idx} apikey={k} />)}
</ol>
</section>
) : (
@ -83,23 +94,21 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
const queryClient = useQueryClient();
const deleteMutation = useMutation(
(key: string) => APIClient.apikeys.delete(key),
{
onSuccess: () => {
queryClient.invalidateQueries(["apikeys"]);
queryClient.invalidateQueries(["apikeys", apikey.key]);
const deleteMutation = useMutation({
mutationFn: (key: string) => APIClient.apikeys.delete(key),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: apiKeys.lists() });
queryClient.invalidateQueries({ queryKey: apiKeys.detail(apikey.key) });
toast.custom((t) => (
<Toast
type="success"
body={`API key ${apikey?.name} was deleted`}
t={t}
/>
));
}
toast.custom((t) => (
<Toast
type="success"
body={`API key ${apikey?.name} was deleted`}
t={t}
/>
));
}
);
});
return (
<li className="text-gray-500 dark:text-gray-400">