refactor: web api client and cleanup (#128)

refactor: refactored APIClient.ts with a new fetch wrapper and changed it into an explicit-import.

chore: modified package.json not to start browser on "npm run start"

chore: cleaned up code, deleted 2mo+ useless old comments.

fix: fixed parameter collision in screens/filters/details.tsx

fix: override react-select's Select component style to make it consistent. addresses #116

Co-authored-by: anonymous <anonymous>

web/src/screens/settings/Application.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "react-query";
 
-import APIClient from "../../api/APIClient";
+import { APIClient } from "../../api/APIClient";
 import { Checkbox } from "../../components/Checkbox";
 import { SettingsContext } from "../../utils/Context";
 
@@ -8,7 +8,7 @@ import { SettingsContext } from "../../utils/Context";
 function ApplicationSettings() {
     const [settings, setSettings] = SettingsContext.use();
 
-    const { isLoading, data } = useQuery<Config, Error>(
+    const { isLoading, data } = useQuery(
         ['config'],
         () => APIClient.config.get(),
         {

web/src/screens/settings/DownloadClient.tsx

@@ -4,7 +4,7 @@ import { useQuery } from "react-query";
 import { classNames } from "../../utils";
 import { DownloadClientAddForm, DownloadClientUpdateForm } from "../../forms";
 import { EmptySimple } from "../../components/emptystates";
-import APIClient from "../../api/APIClient";
+import { APIClient } from "../../api/APIClient";
 import { DownloadClientTypeNameMap } from "../../domain/constants";
 
 interface DLSettingsItemProps {
@@ -53,10 +53,11 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
 function DownloadClientSettings() {
     const [addClientIsOpen, toggleAddClient] = useToggle(false)
 
-    const { error, data } = useQuery<DownloadClient[], Error>('downloadClients', APIClient.download_clients.getAll,
-        {
-            refetchOnWindowFocus: false
-        })
+    const { error, data } = useQuery(
+        'downloadClients',
+        APIClient.download_clients.getAll,
+        { refetchOnWindowFocus: false }
+    );
 
     if (error)
         return (<p>An error has occurred: </p>);

web/src/screens/settings/Indexer.tsx

@@ -4,7 +4,7 @@ import { IndexerAddForm, IndexerUpdateForm } from "../../forms";
 import { Switch } from "@headlessui/react";
 import { classNames } from "../../utils";
 import { EmptySimple } from "../../components/emptystates";
-import APIClient from "../../api/APIClient";
+import { APIClient } from "../../api/APIClient";
 
 const ListItem = ({ indexer }: any) => {
     const [updateIsOpen, toggleUpdate] = useToggle(false)
@@ -45,11 +45,11 @@ const ListItem = ({ indexer }: any) => {
 function IndexerSettings() {
     const [addIndexerIsOpen, toggleAddIndexer] = useToggle(false)
 
-    const { error, data } = useQuery<any[], Error>('indexer', APIClient.indexers.getAll,
-        {
-            refetchOnWindowFocus: false
-        }
-    )
+    const { error, data } = useQuery(
+        'indexer',
+        APIClient.indexers.getAll,
+        { refetchOnWindowFocus: false }
+    );
 
     if (error)
         return (<p>An error has occurred</p>);
@@ -104,7 +104,7 @@ function IndexerSettings() {
                                             </tr>
                                         </thead>
                                         <tbody className="light:bg-white divide-y divide-gray-200 dark:divide-gray-700">
-                                            {data && data.map((indexer: Indexer, idx: number) => (
+                                            {data && data.map((indexer: IndexerDefinition, idx: number) => (
                                                 <ListItem indexer={indexer} key={idx} />
                                             ))}
                                         </tbody>

web/src/screens/settings/Irc.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "react-query";
 import { formatDistanceToNowStrict, formatISO9075 } from "date-fns";
 
-import APIClient from "../../api/APIClient";
+import { APIClient } from "../../api/APIClient";
 import { useToggle } from "../../hooks/hooks";
 import { EmptySimple } from "../../components/emptystates";
 import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
@@ -27,11 +27,11 @@ function simplifyDate(date: string) {
 function IrcSettings() {
     const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false)
 
-    const { data } = useQuery<IrcNetwork[], Error>('networks', APIClient.irc.getNetworks,
-        {
-            refetchOnWindowFocus: false
-        }
-    )
+    const { data } = useQuery(
+        'networks',
+        APIClient.irc.getNetworks,
+        { refetchOnWindowFocus: false }
+    );
 
     return (
         <div className="divide-y divide-gray-200 lg:col-span-9">
@@ -90,27 +90,8 @@ const LiItem = ({ idx, network }: LiItemProps) => {
 
         <li key={idx} >
             <div className="grid grid-cols-12 gap-4 items-center hover:bg-gray-50 dark:hover:bg-gray-700 py-4">
-
                 <IrcNetworkUpdateForm isOpen={updateIsOpen} toggle={toggleUpdate} network={network} />
-                {/* <div className="col-span-1 flex items-center sm:px-6">
-                    <Switch
-                        checked={network.enabled}
-                        onChange={toggleUpdate}
-                        className={classNames(
-                            network.enabled ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-600',
-                            'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
-                        )}
-                    >
-                        <span className="sr-only">Enable</span>
-                        <span
-                            aria-hidden="true"
-                            className={classNames(
-                                network.enabled ? 'translate-x-5' : 'translate-x-0',
-                                'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
-                            )}
-                        />
-                    </Switch>
-                </div> */}
+ 
                 <div className="col-span-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-white cursor-pointer" onClick={toggleEdit}>
                     <span className="relative inline-flex items-center">
                         {