function UploadProgress()

in src/FileUpload.tsx [290:390]


function UploadProgress(props: {
  filename: string;
  fileSize: string;
  uploadStatus: boolean | undefined;
  setUploading: ISetBooleanFunctions;
}) {
  const {colors: themeColors} = useTheme();
  const {uploadStatus, filename, setUploading} = props;
  const {screen} = useScreenDimensions();
  const [showResult, setShowResult] = useState(false);

  const intid = useRef<number>();

  const style = useMemo<StyleDefinition>(
    () => ({
      spinner: {
        flex: 2,
        justifyContent: 'center',
      },
      details: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-between',
      },
      cancel: {
        color: 'red',
      },
      spinnerContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      container: {flex: 1, alignItems: 'center'},
    }),
    [],
  );

  useEffect(() => {
    if (uploadStatus !== undefined) {
      setShowResult(true);
      // wait before go back to standard screen
      setTimeout(() => {
        setUploading.False();
      }, 3000);

      // @ts-ignore
      clearInterval(intid.current);
    }
  }, [uploadStatus, setUploading]);

  if (uploadStatus !== undefined && showResult) {
    return (
      <View style={style.container}>
        <Icon
          size={screen.height / 6}
          color={uploadStatus ? 'green' : 'red'}
          name={
            Platform.select({
              ios: uploadStatus
                ? 'checkmark-circle-outline'
                : 'close-circle-outline',
              android: uploadStatus
                ? 'check-circle-outline'
                : 'close-circle-outline',
            }) as string
          }
          type={Platform.select({
            ios: 'ionicon',
            android: 'material-community',
          })}
        />
        <Text>
          {uploadStatus
            ? `Successfully uploaded ${filename}`
            : `Failed to upload ${filename}`}
        </Text>
      </View>
    );
  }

  return (
    <View style={style.spinnerContainer}>
      <View style={style.spinner}>
        <CircleSnail
          size={Math.floor(screen.width / 3)}
          indeterminate={true}
          thickness={3}
          color={themeColors.text}
          spinDuration={1000}
          duration={1000}
        />
      </View>
      <View style={style.details}>
        <Text style={style.cancel} onPress={setUploading.False}>
          {Strings.Core.Cancel}
        </Text>
        <Text style={{}}>{filename}</Text>
      </View>
    </View>
  );
}