bazarr/frontend/src/components/async.tsx

import {
  faCheck,
  faCircleNotch,
  faTimes,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { isEmpty } from "lodash";
import React, {
  FunctionComponent,
  PropsWithChildren,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from "react";
import { Button, ButtonProps } from "react-bootstrap";
import { useTimeoutWhen } from "rooks";
import { LoadingIndicator } from ".";
import { Selector, SelectorProps } from "./inputs";

interface Props<T extends Async.Base<any>> {
  ctx: T;
  children: FunctionComponent<T>;
}

export function AsyncOverlay<T extends Async.Base<any>>(props: Props<T>) {
  const { ctx, children } = props;
  if (
    ctx.state === "uninitialized" ||
    (ctx.state === "loading" && isEmpty(ctx.content))
  ) {
    return <LoadingIndicator></LoadingIndicator>;
  } else if (ctx.state === "failed") {
    return <p>{ctx.error}</p>;
  } else {
    return children(ctx);
  }
}

interface PromiseProps<T> {
  promise: () => Promise<T>;
  children: FunctionComponent<T>;
}

export function PromiseOverlay<T>({ promise, children }: PromiseProps<T>) {
  const [item, setItem] = useState<T | null>(null);

  useEffect(() => {
    promise()
      .then(setItem)
      .catch(() => {});
  }, [promise]);

  if (item === null) {
    return <LoadingIndicator></LoadingIndicator>;
  } else {
    return children(item);
  }
}

type AsyncSelectorProps<V, T extends Async.Item<V[]>> = {
  state: T;
  update: () => void;
  label: (item: V) => string;
};

type RemovedSelectorProps<T, M extends boolean> = Omit<
  SelectorProps<T, M>,
  "loading" | "options" | "onFocus"
>;

export function AsyncSelector<
  V,
  T extends Async.Item<V[]>,
  M extends boolean = false
>(props: Override<AsyncSelectorProps<V, T>, RemovedSelectorProps<V, M>>) {
  const { label, state, update, ...selector } = props;

  const options = useMemo<SelectorOption<V>[]>(
    () =>
      state.content?.map((v) => ({
        label: label(v),
        value: v,
      })) ?? [],
    [state, label]
  );

  return (
    <Selector
      loading={state.state === "loading"}
      options={options}
      label={label}
      onFocus={() => {
        if (state.state === "uninitialized") {
          update();
        }
      }}
      {...selector}
    ></Selector>
  );
}

interface AsyncButtonProps<T> {
  as?: ButtonProps["as"];
  variant?: ButtonProps["variant"];
  size?: ButtonProps["size"];

  className?: string;
  disabled?: boolean;
  onChange?: (v: boolean) => void;

  noReset?: boolean;
  animation?: boolean;

  promise: () => Promise<T> | null;
  onSuccess?: (result: T) => void;
  error?: () => void;
}

enum RequestState {
  Success,
  Error,
  Invalid,
}

export function AsyncButton<T>(
  props: PropsWithChildren<AsyncButtonProps<T>>
): JSX.Element {
  const {
    children: propChildren,
    className,
    promise,
    onSuccess,
    noReset,
    animation,
    error,
    onChange,
    disabled,
    ...button
  } = props;

  const [loading, setLoading] = useState(false);

  const [state, setState] = useState(RequestState.Invalid);

  const needFire = state !== RequestState.Invalid && !noReset;

  useTimeoutWhen(
    () => {
      setState(RequestState.Invalid);
    },
    2 * 1000,
    needFire
  );

  const click = useCallback(() => {
    if (state !== RequestState.Invalid) {
      return;
    }

    const result = promise();

    if (result) {
      setLoading(true);
      onChange && onChange(true);
      result
        .then((res) => {
          setState(RequestState.Success);
          onSuccess && onSuccess(res);
        })
        .catch(() => {
          setState(RequestState.Error);
          error && error();
        })
        .finally(() => {
          setLoading(false);
          onChange && onChange(false);
        });
    }
  }, [error, onChange, promise, onSuccess, state]);

  const showAnimation = animation ?? true;

  let children = propChildren;
  if (showAnimation) {
    if (loading) {
      children = <FontAwesomeIcon icon={faCircleNotch} spin></FontAwesomeIcon>;
    }

    if (state === RequestState.Success) {
      children = <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>;
    } else if (state === RequestState.Error) {
      children = <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>;
    }
  }

  return (
    <Button
      className={className}
      disabled={loading || disabled || state !== RequestState.Invalid}
      {...button}
      onClick={click}
    >
      {children}
    </Button>
  );
}