Library updates (#792)

* Upgrade Typescript to 4.0
* Update i18n-iso-countries to 6.0
* Update react-intl to 5.8.0
* Update jimp to 0.16.1
* Update apollo and graphql libraries
* Update various libraries and fix linting/type errors
* Refactor cache invalidation
* Codegen refetch queries

ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx

@@ -1,45 +1,24 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Button } from "react-bootstrap";
 import { mutateReloadPlugins, usePlugins } from "src/core/StashService";
 import { useToast } from "src/hooks";
-import * as GQL from "src/core/generated-graphql";
 import { TextUtils } from "src/utils";
-import { Icon, LoadingIndicator } from "../Shared";
+import { Icon, LoadingIndicator } from "src/components/Shared";
 
 export const SettingsPluginsPanel: React.FC = () => {
   const Toast = useToast();
-
-  const plugins = usePlugins();
-
-  // Network state
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    if (plugins) {
-      setIsLoading(false);
-    }
-  }, [plugins]);
+  const { data, loading } = usePlugins();
 
   async function onReloadPlugins() {
-    setIsLoading(true);
-    try {
-      await mutateReloadPlugins();
-
-      // reload the performer scrapers
-      await plugins.refetch();
-    } catch (e) {
-      Toast.error(e);
-    } finally {
-      setIsLoading(false);
-    }
+    await mutateReloadPlugins().catch((e) => Toast.error(e));
   }
 
-  function renderLink(plugin: GQL.Plugin) {
-    if (plugin.url) {
+  function renderLink(url?: string) {
+    if (url) {
       return (
         <Button className="minimal">
           <a
-            href={TextUtils.sanitiseURL(plugin.url)}
+            href={TextUtils.sanitiseURL(url)}
             className="link"
             target="_blank"
             rel="noopener noreferrer"
@@ -51,30 +30,24 @@ export const SettingsPluginsPanel: React.FC = () => {
     }
   }
 
-  function renderPlugin(plugin: GQL.Plugin) {
-    return (
+  function renderPlugins() {
+    const elements = (data?.plugins ?? []).map((plugin) => (
       <div key={plugin.id}>
         <h5>
           {plugin.name} {plugin.version ? `(${plugin.version})` : undefined}{" "}
-          {renderLink(plugin)}
+          {renderLink(plugin.url ?? undefined)}
         </h5>
         {plugin.description ? (
           <small className="text-muted">{plugin.description}</small>
         ) : undefined}
         <hr />
       </div>
-    );
+    ));
+
+    return <div>{elements}</div>;
   }
 
-  function renderPlugins() {
-    if (!plugins.data || !plugins.data.plugins) {
-      return;
-    }
-
-    return <div>{plugins.data?.plugins.map(renderPlugin)}</div>;
-  }
-
-  if (isLoading) return <LoadingIndicator />;
+  if (loading) return <LoadingIndicator />;
 
   return (
     <>