fix(indexers): test API button (#844)

fix(indexers): api test button

web/src/screens/Base.tsx

@@ -21,16 +21,16 @@ function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
 }
 
+const nav: Array<NavItem> = [
+  { name: "Dashboard", path: "/" },
+  { name: "Filters", path: "/filters" },
+  { name: "Releases", path: "/releases" },
+  { name: "Settings", path: "/settings" },
+  { name: "Logs", path: "/logs" }
+];
+
 export default function Base() {
   const authContext = AuthContext.useValue();
-  const nav: Array<NavItem> = [
-    { name: "Dashboard", path: "/" },
-    { name: "Filters", path: "/filters" },
-    { name: "Releases", path: "/releases" },
-    { name: "Settings", path: "/settings" },
-    { name: "Logs", path: "/logs" }
-  ];
-
 
   const { data } = useQuery(
     ["updates"],

web/src/screens/auth/login.tsx

@@ -2,7 +2,6 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { useMutation } from "react-query";
-
 import logo from "../../logo.png";
 import { APIClient } from "../../api/APIClient";
 import { AuthContext } from "../../utils/Context";
@@ -86,10 +85,10 @@ export const Login = () => {
                 Sign in
               </button>
               <div>
-                <p className="flex float-right items-center mt-3 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide cursor-pointer" id="forgot">
+                <span className="flex float-right items-center mt-3 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide cursor-pointer" id="forgot">
                   Forgot?<svg className="ml-1 w-3 h-3 text-gray-500 dark:text-gray-400 fill-current" viewBox="0 0 72 72"><path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10"/></svg>
                   <Tooltip style={{ maxWidth: "350px", fontSize: "12px", textTransform: "none", fontWeight: "normal", borderRadius: "0.375rem", backgroundColor: "#34343A", color: "#fff", opacity: "1" }} place="bottom" delayShow={100} delayHide={150} anchorId="forgot" html="<p style='padding-top: 2px'>If you forget your password you can reset it via the terminal: <code>autobrrctl --config /home/username/.config/autobrr change-password <USERNAME></code></p>" clickable={true}/>
-                </p>
+                </span>
               </div>
             </div>
           </form>

web/src/screens/filters/details.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { useMutation, useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { NavLink, Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import { Form, Formik, FormikValues, useFormikContext } from "formik";
@@ -21,7 +21,6 @@ import {
   SOURCES_OPTIONS,
   tagsMatchLogicOptions
 } from "../../domain/constants";
-import { queryClient } from "../../App";
 import { APIClient } from "../../api/APIClient";
 import { useToggle } from "../../hooks/hooks";
 import { classNames } from "../../utils";
@@ -141,6 +140,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset }: FormButtonsGroupProps
 };
 
 export default function FilterDetails() {
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { filterId } = useParams<{ filterId: string }>();
 

web/src/screens/filters/list.tsx

@@ -5,12 +5,8 @@ import { Listbox, Menu, Switch, Transition } from "@headlessui/react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { FormikValues } from "formik";
 import { useCallback } from "react";
-
 import { Tooltip } from "react-tooltip";
-
-
 import { FilterListContext, FilterListState } from "../../utils/Context";
-
 import {
   ArrowsRightLeftIcon,
   CheckIcon,
@@ -22,8 +18,6 @@ import {
   ChatBubbleBottomCenterTextIcon,
   TrashIcon
 } from "@heroicons/react/24/outline";
-
-import { queryClient } from "../../App";
 import { classNames } from "../../utils";
 import { FilterAddForm } from "../../forms";
 import { useToggle } from "../../hooks/hooks";
@@ -74,7 +68,6 @@ interface FilterProps {
 }
 
 export default function Filters({}: FilterProps){
-
   const queryClient = useQueryClient();
 
   const [createFilterIsOpen, setCreateFilterIsOpen] = useState(false);
@@ -642,6 +635,7 @@ interface FilterListItemProps {
 
 function FilterListItem({ filter, values, idx }: FilterListItemProps) {
   const [enabled, setEnabled] = useState(filter.enabled);
+  const queryClient = useQueryClient();
 
   const updateMutation = useMutation(
     (status: boolean) => APIClient.filters.toggleEnable(filter.id, status),

web/src/screens/settings/Api.tsx

@@ -1,6 +1,5 @@
-import { queryClient } from "../../App";
 import { useRef } from "react";
-import { useMutation, useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { KeyField } from "../../components/fields/text";
 import { DeleteModal } from "../../components/modals";
 import APIKeyAddForm from "../../forms/settings/APIKeyAddForm";
@@ -82,6 +81,8 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
   const cancelModalButtonRef = useRef(null);
   const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
 
+  const queryClient = useQueryClient();
+
   const deleteMutation = useMutation(
     (key: string) => APIClient.apikeys.delete(key),
     {

web/src/screens/settings/Application.tsx

@@ -1,11 +1,10 @@
-import { useMutation, useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { APIClient } from "../../api/APIClient";
 import { Checkbox } from "../../components/Checkbox";
 import { SettingsContext } from "../../utils/Context";
 import { GithubRelease } from "../../types/Update";
 import { toast } from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
-import { queryClient } from "../../App";
 
 interface RowItemProps {
   label: string;
@@ -89,6 +88,8 @@ function ApplicationSettings() {
     }
   );
 
+  const queryClient = useQueryClient();
+
   const checkUpdateMutation = useMutation(
     () => APIClient.updates.check(),
     {

web/src/screens/settings/DownloadClient.tsx

@@ -27,8 +27,6 @@ interface SortConfig {
 function useSort(items: ListItemProps["clients"][], config?: SortConfig) {
   const [sortConfig, setSortConfig] = useState(config);
 
-
-  
   const sortedItems = useMemo(() => {
     if (!sortConfig) {
       return items;
@@ -80,6 +78,7 @@ function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
   const [updateClientIsOpen, toggleUpdateClient] = useToggle(false);
 
   const queryClient = useQueryClient();
+
   const mutation = useMutation(
     (client: DownloadClient) => APIClient.download_clients.update(client),
     {

web/src/screens/settings/Feed.tsx

@@ -7,7 +7,6 @@ import { baseUrl, classNames, IsEmptyDate, simplifyDate } from "../../utils";
 import { Fragment, useRef, useState, useMemo } from "react";
 import { toast } from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
-import { queryClient } from "../../App";
 import { DeleteModal } from "../../components/modals";
 import {
   ArrowsRightLeftIcon,
@@ -141,6 +140,7 @@ function ListItem({ feed }: ListItemProps) {
   const [updateFormIsOpen, toggleUpdateForm] = useToggle(false);
 
   const [enabled, setEnabled] = useState(feed.enabled);
+  const queryClient = useQueryClient();
 
   const updateMutation = useMutation(
     (status: boolean) => APIClient.feeds.toggleEnable(feed.id, status),

web/src/screens/settings/Irc.tsx

@@ -1,5 +1,4 @@
 import { useMutation, useQuery, useQueryClient } from "react-query";
-
 import { classNames, IsEmptyDate, simplifyDate } from "../../utils";
 import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
 import { useToggle } from "../../hooks/hooks";
@@ -10,7 +9,6 @@ import { Menu, Switch, Transition } from "@headlessui/react";
 import { Fragment, useRef } from "react";
 import { DeleteModal } from "../../components/modals";
 import { useState, useMemo } from "react";
-
 import { toast } from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
 import {
@@ -30,8 +28,6 @@ interface SortConfig {
 function useSort(items: ListItemProps["network"][], config?: SortConfig) {
   const [sortConfig, setSortConfig] = useState(config);
 
-
-  
   const sortedItems = useMemo(() => {
     if (!sortConfig) {
       return items;
@@ -79,7 +75,6 @@ function useSort(items: ListItemProps["network"][], config?: SortConfig) {
   return { items: sortedItems, requestSort, sortConfig, getSortIndicator };
 }
 
-
 const IrcSettings = () => {
   const [expandNetworks, toggleExpand] = useToggle(false);
   const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false);
@@ -92,7 +87,6 @@ const IrcSettings = () => {
 
   const sortedNetworks = useSort(data || []);
 
-
   return (
     <div className="lg:col-span-9">
       <IrcNetworkAddForm isOpen={addNetworkIsOpen} toggle={toggleAddNetwork} />
@@ -209,6 +203,7 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
   const [edit, toggleEdit] = useToggle(false);
 
   const queryClient = useQueryClient();
+
   const mutation = useMutation(
     (network: IrcNetwork) => APIClient.irc.updateNetwork(network),
     {

web/src/screens/settings/Logs.tsx

@@ -1,9 +1,8 @@
-import { useMutation, useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { APIClient } from "../../api/APIClient";
 import { GithubRelease } from "../../types/Update";
 import { toast } from "react-hot-toast";
 import Toast from "../../components/notifications/Toast";
-import { queryClient } from "../../App";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
 import { LogLevelOptions, SelectOption } from "../../domain/constants";
 import { LogFiles } from "../Logs";
@@ -132,6 +131,8 @@ function LogSettings() {
     }
   );
 
+  const queryClient = useQueryClient();
+
   const setLogLevelUpdateMutation = useMutation(
     (value: string) => APIClient.config.update({ log_level: value }),
     {

web/src/screens/settings/Releases.tsx

@@ -1,15 +1,15 @@
 import { useRef } from "react";
-import { useMutation } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 import { toast } from "react-hot-toast";
-
 import { APIClient } from "../../api/APIClient";
 import Toast from "../../components/notifications/Toast";
-import { queryClient } from "../../App";
 import { useToggle } from "../../hooks/hooks";
 import { DeleteModal } from "../../components/modals";
 
 function ReleaseSettings() {
   const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
+  const queryClient = useQueryClient();
+
   const deleteMutation = useMutation(() => APIClient.release.delete(), {
     onSuccess: () => {
       toast.custom((t) => (