react-icons/fi#FiLoader JavaScript Examples

export function LoadingRightBlock({ipfsError, message, loading}) {
  if (!message) {
    message = 'Loading...';
  }

  const loader = (
    <FiLoader
      color={primary4}
      size={16}
      style={styles.icon}
      className={'rotating'}
    />
  );

  const networkFail = <>
    Sailplane failed to start network. Try refreshing. <br/>
    If the problem persists you can try <a target="blank" href="https://intercom.help/scoutpad/en/articles/3478364-how-to-clear-local-storage-of-web-browser">clearing browser cache</a>.
  </>

  const failMessage = isWebRTCSupported()
    ?  networkFail
    : 'This browser does not support WebRTC, iOS users please try Safari.'

  return (
    <div style={styles.container}>
      {isWebRTCSupported() && !ipfsError ? (
        <div>
          {loading && loader}
          {message}
        </div>
      ) : (
        <div>
          {failMessage}
        </div>
      )}
    </div>
  );
}

export function StatusBar() {
  const status = useSelector((state) => state.tempData.status);
  const {message, isError, isInfo} = status;

  const styles = {
    container: {
      position: 'fixed',
      bottom: 10,
      backgroundColor: isError ? errorColor : primary3,
      padding: 8,
      borderRadius: 4,
      fontFamily: 'Open Sans',
      color: '#FFF',
      fontSize: 14,
      lineHeight: 14,
      display: 'flex',
      alignItems: 'center',
      height: 18,
      opacity: message ? 1 : 0,
    },
    icon: {
      marginRight: 4,
    },
  };

  let iconComponent = FiLoader;

  if (isError) {
    iconComponent = FiAlertTriangle;
  }

  const IconComponent = iconComponent;

  return (
    <div style={styles.container}>
      {!isInfo ? (
        <IconComponent
          color={'#FFF'}
          size={16}
          style={styles.icon}
          className={!isError ? 'rotating' : ''}
        />
      ) : null}

      <span style={styles.message}>{message}</span>
    </div>
  );
}

export default function ImportDriveDialog({
  onClose,
  isVisible,
  instances,
  sailplane,
}) {
  const dispatch = useDispatch();
  const [isAddressSet, setIsAddressSet] = useState(false);
  const [error, setError] = useState(null);
  const [nickname, setNickname] = useState('');
  const [driveData, setDriveData] = useState(null);

  const styles = {
    addressInput: {
      display: 'flex',
      alignItems: 'center',
    },
    title: {
      fontSize: 16,
      color: primary45,
      marginBottom: 8,
    },
    loading: {
      display: 'flex',
      alignItems: 'center',
      color: primary45,
    },
    icon: {
      marginLeft: 4,
    },
    confirmBlock: {
      marginTop: 14,
      display: 'flex',
      justifyContent: 'flex-end',
    },
    cancel: {
      marginRight: 8,
    },
    labelTitle: {
      marginTop: 12,
      marginBottom: 4,
    },
    optional: {
      position: 'relative',
      top: -8,
      left: 4,
      fontSize: 13,
    },
    input: {
      border: `1px solid ${primary3}`,
      borderRadius: 4,
      color: primary,
      fontSize: 14,
      fontWeight: 200,
      padding: 4,
      marginRight: 4,
      display: 'inline-flex',
      width: '100%',
      boxSizing: 'border-box',
    },
  };

  const ImportInstanceInput = useTextInput(
    !isAddressSet,
    (instanceAddress) => getManifest(instanceAddress),
    null,
    '',
    {
      placeholder: 'drive address',
      confirmTitle: 'Import drive',
    },
  );

  if (!isVisible) {
    return null;
  }

  const importInstance = async () => {
    const {address, manifest} = driveData;
    const driveName = sailplaneUtil.driveName(address);

    dispatch(
      addInstance(
        driveName,
        address,
        true,
        manifest.meta.enc === true,
        nickname,
      ),
    );

    onClose();
  };

  const getManifest = async (address) => {
    const handleInvalidAddress = () => {
      setError('Invalid address!');
    };

    if (OrbitDBAddress.isValid(address)) {
      setIsAddressSet(true);

      if (instances.map((s) => s.address).includes(address)) {
        const driveName = sailplaneUtil.driveName(address);

        setError(`Drive '${driveName}' already exists!`);
        setIsAddressSet(false);
        return;
      }

      const manifest = await addressManifest(sailplane, address);

      setDriveData({address, manifest});
    } else {
      handleInvalidAddress();
    }
  };

  return (
    <Dialog
      backgroundColor={primary15}
      isVisible={true}
      title={`Import drive`}
      body={
        <div style={styles.body}>
          {!isAddressSet ? (
            <div>
              <div style={styles.title}>
                Paste a drive address below to import it into your drives
              </div>

              {error ? <Well isError={true}>{error}</Well> : null}

              <div style={styles.addressInput}>
                {!isAddressSet ? ImportInstanceInput : null}
              </div>
            </div>
          ) : !driveData ? (
            <div style={styles.loading}>
              Looking for drive
              <FiLoader
                color={primary45}
                size={16}
                style={styles.icon}
                className={'rotating'}
              />
            </div>
          ) : (
            <div>
              <div style={styles.title}>Drive has been located!</div>
              <div style={styles.loadedDrive}>
                <Instance
                  displayOnly={true}
                  selected={true}
                  data={{
                    address: driveData.address,
                    isEncrypted: driveData.manifest.meta?.enc,
                  }}
                />
              </div>

              <div style={{...styles.title, ...styles.labelTitle}}>
                Nickname
                <span style={styles.optional}>(optional)</span>
              </div>

              <input
                type={'text'}
                onChange={(event) => setNickname(event.target.value)}
                autoCorrect={'off'}
                style={styles.input}
                placeholder={`(ex: Work sketches)`}
                className={'textInput'}
              />

              <div style={styles.confirmBlock}>
                <BigButton
                  title={'Cancel'}
                  inverted={false}
                  noHover={true}
                  customWhiteColor={primary15}
                  style={styles.cancel}
                  onClick={onClose}
                />
                <BigButton
                  title={'Confirm'}
                  onClick={importInstance}
                  inverted={true}
                  customWhiteColor={primary15}
                />
              </div>
            </div>
          )}
        </div>
      }
      onClose={onClose}
    />
  );
}

export function ShareDialog({sharedFs}) {
  const dispatch = useDispatch();
  const shareData = useSelector((state) => state.tempData.shareData);
  const inputRef = useRef(null);
  const {CID, path, name, pathType} = shareData;
  const [shareTypeIndex, setShareTypeIndex] = useState(0);
  const [loadedCID, setLoadedCID] = useState(CID);
  const [keys, setKeys] = useState(null);

  useEffect(() => {
    if (!name) {
      setLoadedCID(null);
      setShareTypeIndex(0);
    } else {
      setLoadedCID(CID);
    }
  }, [name, CID]);

  useEffect(() => {
    const getCID = async () => {
      const cid = await sharedFs.current.read(path);

      if (sharedFs.current.encrypted && pathType !== 'dir') {
        const {key, iv} = sharedFs.current.fs.read(path);

        setKeys({key, iv});
      }
      setLoadedCID(cid);

      if (pathType === 'dir') {
        const dirContents = sharedFs.current.fs.ls(path).map((tmpPath) => {
          const type = sharedFs.current.fs.content(tmpPath);
          const pathSplit = path.split('/');
          const tmpName = pathSplit[pathSplit.length - 1];

          return {path: tmpPath, name: tmpName, type};
        });

        const shareType = getShareTypeFromFolderFiles(dirContents);
        const shareTypeIndexToSwitchTo = shareTypes.findIndex(
          (curShareType) => curShareType.name === shareType,
        );

        setShareTypeIndex(shareTypeIndexToSwitchTo);
      }
    };

    if (!loadedCID && path) {
      getCID();
    } else {
      if (inputRef.current) {
        inputRef.current.select();
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loadedCID, path]);

  if (!path) {
    return null;
  }

  let url = `${
    window.location.origin + window.location.pathname
  }#/download/${encodeURIComponent(loadedCID)}/${encodeURIComponent(path)}/${
    shareTypes[shareTypeIndex].name
  }`;

  if (keys?.key) {
    url = `${
      window.location.origin + window.location.pathname
    }#/download/${encodeURIComponent(loadedCID)}/${encodeURIComponent(
      keys.iv,
    )}/${encodeURIComponent(keys.key)}/${encodeURIComponent(path)}/${
      shareTypes[shareTypeIndex].name
    }`;
  }

  const handleCopy = async () => {
    await copyToClipboard(url);
    notify('Share link copied to clipboard', dispatch);
  };

  return (
    <Dialog
      title={'Share options'}
      onClose={() => dispatch(setShareData({}))}
      isVisible={path}
      body={
        <>
          <div style={styles.nameHolder}>
            <div style={styles.filename}>{name}</div>
            <div>
              {/*{pathType === 'dir' ? (*/}
              {/*  <SegmentedControl*/}
              {/*    currentIndex={shareTypeIndex}*/}
              {/*    items={shareTypes}*/}
              {/*    onSelect={(index) => setShareTypeIndex(index)}*/}
              {/*  />*/}
              {/*) : null}*/}
            </div>
          </div>
          {loadedCID ? (
            <div>
              <div style={styles.flex}>
                <input
                  ref={inputRef}
                  style={styles.input}
                  type={'text'}
                  value={url}
                  readOnly={true}
                />
              </div>
              <div style={styles.link}>
                <a href={'#'} className={'link'} onClick={handleCopy}>
                  Copy link
                </a>
              </div>
            </div>
          ) : (
            <div style={styles.loading}>
              <FiLoader
                color={primary45}
                size={16}
                style={styles.icon}
                className={'rotating'}
              />
              Loading share link...
            </div>
          )}
        </>
      }
    />
  );
}