Toast improvements (#4584)

* Change default toast placement
* Position at bottom on mobile
* Show single toast message at a time
* Optionally show dialog for error messages
* Fix circular dependency
* Animate toast

ui/v2.5/src/pluginApi.tsx

@@ -4,9 +4,6 @@ import * as ReactRouterDOM from "react-router-dom";
 import Mousetrap from "mousetrap";
 import MousetrapPause from "mousetrap-pause";
 import NavUtils from "./utils/navigation";
-import { HoverPopover } from "./components/Shared/HoverPopover";
-import { TagLink } from "./components/Shared/TagLink";
-import { LoadingIndicator } from "./components/Shared/LoadingIndicator";
 import * as GQL from "src/core/generated-graphql";
 import * as StashService from "src/core/StashService";
 import * as Apollo from "@apollo/client";
@@ -16,6 +13,7 @@ import * as FontAwesomeSolid from "@fortawesome/free-solid-svg-icons";
 import * as FontAwesomeRegular from "@fortawesome/free-regular-svg-icons";
 import { useSpriteInfo } from "./hooks/sprite";
 import { useToast } from "./hooks/Toast";
+import { before, instead, after, components, RegisterComponent } from "./patch";
 
 // due to code splitting, some components may not have been loaded when a plugin
 // page is loaded. This function will load all components passed to it.
@@ -27,9 +25,9 @@ async function loadComponents(c: (() => Promise<unknown>)[]) {
 
 // useLoadComponents is a hook that loads all components passed to it.
 // It returns a boolean indicating whether the components are still loading.
-function useLoadComponents(components: (() => Promise<unknown>)[]) {
+function useLoadComponents(toLoad: (() => Promise<unknown>)[]) {
   const [loading, setLoading] = React.useState(true);
-  const [componentList] = React.useState(components);
+  const [componentList] = React.useState(toLoad);
 
   async function load(c: (() => Promise<unknown>)[]) {
     await loadComponents(c);
@@ -44,40 +42,6 @@ function useLoadComponents(components: (() => Promise<unknown>)[]) {
   return loading;
 }
 
-const components: Record<string, Function> = {
-  HoverPopover,
-  TagLink,
-  LoadingIndicator,
-};
-
-const beforeFns: Record<string, Function[]> = {};
-const insteadFns: Record<string, Function> = {};
-const afterFns: Record<string, Function[]> = {};
-
-// patch functions
-// registers a patch to a function. Before functions are expected to return the
-// new arguments to be passed to the function.
-function before(component: string, fn: Function) {
-  if (!beforeFns[component]) {
-    beforeFns[component] = [];
-  }
-  beforeFns[component].push(fn);
-}
-
-function instead(component: string, fn: Function) {
-  if (insteadFns[component]) {
-    throw new Error("instead has already been called for " + component);
-  }
-  insteadFns[component] = fn;
-}
-
-function after(component: string, fn: Function) {
-  if (!afterFns[component]) {
-    afterFns[component] = [];
-  }
-  afterFns[component].push(fn);
-}
-
 function registerRoute(path: string, component: React.FC) {
   before("PluginRoutes", function (props: React.PropsWithChildren<{}>) {
     return [
@@ -93,17 +57,6 @@ function registerRoute(path: string, component: React.FC) {
   });
 }
 
-export function RegisterComponent(component: string, fn: Function) {
-  // register with the plugin api
-  if (components[component]) {
-    throw new Error("Component " + component + " has already been registered");
-  }
-
-  components[component] = fn;
-
-  return fn;
-}
-
 export const PluginApi = {
   React,
   ReactDOM,
@@ -155,51 +108,6 @@ export const PluginApi = {
   },
 };
 
-// patches a function to implement the before/instead/after functionality
-export function PatchFunction(name: string, fn: Function) {
-  return new Proxy(fn, {
-    apply(target, ctx, args) {
-      let result;
-
-      for (const beforeFn of beforeFns[name] || []) {
-        args = beforeFn.apply(ctx, args);
-      }
-      if (insteadFns[name]) {
-        result = insteadFns[name].apply(ctx, args.concat(target));
-      } else {
-        result = target.apply(ctx, args);
-      }
-      for (const afterFn of afterFns[name] || []) {
-        result = afterFn.apply(ctx, args.concat(result));
-      }
-      return result;
-    },
-  });
-}
-
-// patches a component and registers it in the pluginapi components object
-export function PatchComponent<T>(
-  component: string,
-  fn: React.FC<T>
-): React.FC<T> {
-  const ret = PatchFunction(component, fn);
-
-  // register with the plugin api
-  RegisterComponent(component, ret);
-  return ret as React.FC<T>;
-}
-
-// patches a component and registers it in the pluginapi components object
-export function PatchContainerComponent(
-  component: string
-): React.FC<React.PropsWithChildren<{}>> {
-  const fn = (props: React.PropsWithChildren<{}>) => {
-    return <>{props.children}</>;
-  };
-
-  return PatchComponent(component, fn);
-}
-
 export default PluginApi;
 
 interface IWindow {