technology logo
technology logo

New List

share link

by interstellarcg dot icon Updated: Nov 24, 2022

Guide Kit Guide Kit  

export const FullStateHandler: React.FC<{
  state: {
    loading: boolean;
    error: boolean | null;
    success: boolean;
  };
  refreshTrigger?: any;
  loadingText?: string;
  errorText?: string;
  successText?: string;
  errorButtonText?: string;
  successButtonText?: string;
  onErrorButtonPress?: () => void;
  onSuccessButtonPress?: () => void;
  ShowErrorButton?: boolean;
  ShowSuccessButton?: boolean;
  hideAfterSuccess?: boolean;
  TimeToHideAfterSuccess?: number;
  lottieSize?: number;
  ErrorlottieSource?: any;
  SuccesslottieSource?: any;
  LottieProps?: {
    errorLottie: AnimatedLottieViewProps;
    successLottie: AnimatedLottieViewProps;
    loadingLottie: AnimatedLottieViewProps;
  };
  useLottieForLoader?: boolean;
  LoadingLottieSource?: boolean;
}> = ({
  state,
  loadingText,
  errorText,
  successText,
  errorButtonText,
  successButtonText,
  onErrorButtonPress,
  onSuccessButtonPress,
  ShowErrorButton,
  ShowSuccessButton,
  hideAfterSuccess,
  TimeToHideAfterSuccess,
  refreshTrigger,
  lottieSize,
  ErrorlottieSource,
  SuccesslottieSource,
  LottieProps,
  useLottieForLoader,
  LoadingLottieSource,
}) => {
  const colorScheme = useColorScheme();
  const [visible, setVisible] = React.useState(true);
  React.useEffect(() => {
    if (state.success && hideAfterSuccess) {
      setTimeout(() => {
        setVisible(false);
      }, TimeToHideAfterSuccess);
    }
  }, [state, refreshTrigger]);
  const animation = useRef(null);
  return (
    <>
      visible && (
      <>
        {state.loading ? (
          <>
            {useLottieForLoader ? (
              <LottieView
                autoPlay
                loop={true}
                ref={animation}
                style={{
                  width: POD(lottieSize, windowWidth / 20),
                  height: POD(lottieSize, windowWidth / 20),
                  backgroundColor: "#eee",
                }}
                // Find more Lottie files at https://lottiefiles.com/featured
                source={require(POD(
                  LoadingLottieSource,
                  "../../assets/lottie/main-loader.json"
                ))}
                {...LottieProps?.loadingLottie}
              />
            ) : (
              <ActivityIndicator
                animating
                color={Colors[colorScheme].tint}
                size={sizes.indicator.sm}
              />
            )}
            {loadingText}
          </>
        ) : state.error ? (
          <>
            <StateViewText>{errorText}</StateViewText>
            <LottieView
              autoPlay
              loop={false}
              ref={animation}
              style={{
                width: POD(lottieSize, windowWidth / 20),
                height: POD(lottieSize, windowWidth / 20),
                backgroundColor: "#eee",
              }}
              // Find more Lottie files at https://lottiefiles.com/featured
              source={require(POD(
                ErrorlottieSource,
                "../../assets/lottie/fail.json"
              ))}
              {...LottieProps?.errorLottie}
            />
            {ShowErrorButton && (
              <Button onPress={onErrorButtonPress}>{errorButtonText}</Button>
            )}
          </>
        ) : state.success ? (
          <>
            <LottieView
              autoPlay
              loop={false}
              ref={animation}
              style={{
                width: POD(lottieSize, windowWidth / 20),
                height: POD(lottieSize, windowWidth / 20),
                backgroundColor: "#eee",
              }}
              // Find more Lottie files at https://lottiefiles.com/featured
              source={require(POD(
                SuccesslottieSource,
                "../../assets/lottie/success_1.json"
              ))}
              {...LottieProps?.errorLottie}
            />
            <StateViewText type="success">{successText}</StateViewText>
            {ShowSuccessButton && (
              <Button onPress={onSuccessButtonPress}>
                {successButtonText}
              </Button>
            )}
          </>
        ) : (
          <></>
        )}
      </>
      )
    </>
  );
};