react-icons/fi#FiDownload TypeScript Examples

iconKeyMap = {
  star: (props) => <FiStar {...props} />,
  zap: (props) => <FiZap {...props} />,
  repeat: (props) => <FiRepeat {...props} />,
  users: (props) => <FiUsers {...props} />,
  server: (props) => <FiServer {...props} />,
  edit: (props) => <FiEdit {...props} />,
  gitMerge: (props) => <FiGitMerge {...props} />,
  download: (props) => <FiDownload {...props} />,
}

CachePage = observer(() => {
  // Set html title to cache to differentiate from dxvote dapp
  document.title = 'Cache';

  const {
    context: { cacheService, configStore, notificationStore, ipfsService },
  } = useContext();

  const [updateProposalTitles, setUpdateProposalTitles] = React.useState(false);
  const [buildingCacheState, setBuildingCacheState] = React.useState(0);
  const [updatedCacheHash, setUpdatedCacheHash] = React.useState({
    proposalTitles: {},
    configHashes: {},
    configs: {},
    caches: {},
  });
  const [resetCache, setResetCache] = React.useState({
    mainnet: false,
    rinkeby: false,
    xdai: false,
    arbitrum: false,
    arbitrumTestnet: false,
  });
  const [localConfig, setLocalConfig] = React.useState(
    configStore.getLocalConfig()
  );
  const [, forceUpdate] = React.useReducer(x => x + 1, 0);

  async function resetCacheOptions() {
    configStore.resetLocalConfig();
    setLocalConfig(configStore.getLocalConfig());
    setBuildingCacheState(0);
    setResetCache({
      mainnet: false,
      rinkeby: false,
      xdai: false,
      arbitrum: false,
      arbitrumTestnet: false,
    });
    setUpdatedCacheHash({
      proposalTitles: {},
      configHashes: {},
      configs: {},
      caches: {},
    });
    setUpdateProposalTitles(false);
  }

  async function uploadToIPFS(content) {
    ipfsService.upload(content);
  }

  async function runCacheScript() {
    setBuildingCacheState(1);
    const updatedCache = await cacheService.getUpdatedCacheConfig(
      {
        1: {
          rpcUrl: localConfig.mainnet_rpcURL,
          toBlock: localConfig.mainnet_toBlock,
          reset: resetCache.mainnet,
        },
        4: {
          rpcUrl: localConfig.rinkeby_rpcURL,
          toBlock: localConfig.rinkeby_toBlock,
          reset: resetCache.rinkeby,
        },
        100: {
          rpcUrl: localConfig.xdai_rpcURL,
          toBlock: localConfig.xdai_toBlock,
          reset: resetCache.xdai,
        },
        42161: {
          rpcUrl: localConfig.arbitrum_rpcURL,
          toBlock: localConfig.arbitrum_toBlock,
          reset: resetCache.arbitrum,
        },
        421611: {
          rpcUrl: localConfig.arbitrumTestnet_rpcURL,
          toBlock: localConfig.arbitrumTestnet_toBlock,
          reset: resetCache.arbitrumTestnet,
        },
      },
      updateProposalTitles
    );
    console.log('[Updated Cache]', updatedCache);
    setUpdatedCacheHash(updatedCache);
    setBuildingCacheState(2);
    forceUpdate();
  }

  function onApiKeyValueChange(value, key) {
    localConfig[key] = value;
    setLocalConfig(localConfig);
    configStore.setLocalConfig(localConfig);
    forceUpdate();
  }

  function downloadAll() {
    var zip = new JSZip();

    var cache = zip.folder('cache');

    var configs = zip.folder('configs');
    zip.file(
      'default.json',
      JSON.stringify(
        {
          mainnet: updatedCacheHash.configHashes['mainnet'],
          xdai: updatedCacheHash.configHashes['xdai'],
          arbitrum: updatedCacheHash.configHashes['arbitrum'],
          rinkeby: updatedCacheHash.configHashes['rinkeby'],
          arbitrumTestnet: updatedCacheHash.configHashes['arbitrumTestnet'],
        },
        null,
        2
      )
    );
    zip.file(
      'proposalTitles.json',
      JSON.stringify(updatedCacheHash.proposalTitles, null, 2)
    );

    NETWORKS.map((network, i) => {
      cache.file(
        network.name + '.json',
        JSON.stringify(updatedCacheHash.caches[network.name], null, 2)
      );
      const configFolder = configs.folder(network.name);
      configFolder.file(
        'config.json',
        JSON.stringify(updatedCacheHash.configs[network.name], null, 2)
      );
    });

    zip.generateAsync({ type: 'blob' }).then(function (content) {
      saveAs(content, 'dxvote-cache.zip');
    });
  }

  if (window.location.hash.length > 7) {
    const searchParams = new URLSearchParams(window.location.hash.substring(7));
    setUpdateProposalTitles(searchParams.get('proposalTitles') ? true : false);
    NETWORKS.map((network, i) => {
      const networkName = network.name;
      if (searchParams.get(networkName + '_toBlock'))
        localConfig[networkName + '_toBlock'] = searchParams.get(
          networkName + '_toBlock'
        );
      if (searchParams.get(networkName + '_targetHash'))
        localConfig[networkName + '_targetHash'] = searchParams.get(
          networkName + '_targetHash'
        );
      if (searchParams.get(networkName + '_reset')) {
        resetCache[networkName] = true;
      }
    });
    setLocalConfig(localConfig);
    setResetCache(resetCache);
    configStore.setLocalConfig(localConfig);
    window.location.assign(window.location.origin + '/#cache');
    forceUpdate();
  }

  function getOptionsLink(): string {
    let optionsLinkUrl =
      window.location.origin + '/' + window.location.hash + '?';
    if (updateProposalTitles)
      optionsLinkUrl = optionsLinkUrl = 'proposalTitles=1&';
    NETWORKS.map((network, i) => {
      const networkName = network.name;
      if (localConfig[networkName + '_toBlock'])
        optionsLinkUrl =
          optionsLinkUrl +
          networkName +
          '_toBlock=' +
          localConfig[networkName + '_toBlock'] +
          '&';
      if (localConfig[networkName + '_targetHash'])
        optionsLinkUrl =
          optionsLinkUrl +
          networkName +
          '_targetHash=' +
          localConfig[networkName + '_targetHash'] +
          '&';
      if (resetCache[networkName])
        optionsLinkUrl = optionsLinkUrl + networkName + '_reset=1&';
    });
    optionsLinkUrl = optionsLinkUrl.slice(0, -1);
    return optionsLinkUrl;
  }

  return buildingCacheState === 1 ? (
    <LoadingBox>
      <div className="loader">
        {' '}
        <PulsingIcon size={80} inactive={false} />
        <LoadingProgressText>
          {notificationStore.globalMessage}
        </LoadingProgressText>
      </div>
    </LoadingBox>
  ) : (
    <Box>
      <FormContainer>
        {NETWORKS.map((network, i) => {
          const networkName = network.name;
          return (
            networkName !== 'localhost' && (
              <div key={`networkOptions${i}`}>
                <RowAlignedLeft>
                  {' '}
                  <strong>{toCamelCaseString(networkName)}</strong>{' '}
                </RowAlignedLeft>
                <RowAlignedLeft>
                  <FormLabel>Block:</FormLabel>
                  <InputBox
                    type="text"
                    onChange={event =>
                      onApiKeyValueChange(
                        event.target.value,
                        networkName + '_toBlock'
                      )
                    }
                    value={localConfig[networkName + '_toBlock']}
                    style={{ width: '100px' }}
                  ></InputBox>
                  <FormLabel>RPC:</FormLabel>
                  <InputBox
                    type="text"
                    onChange={event =>
                      onApiKeyValueChange(
                        event.target.value,
                        networkName + '_rpcURL'
                      )
                    }
                    value={localConfig[networkName + '_rpcURL']}
                    style={{ width: '100%' }}
                  ></InputBox>
                  <FormLabel>Reset</FormLabel>
                  <InputBox
                    type="checkbox"
                    checked={resetCache[networkName]}
                    onChange={() => {
                      resetCache[networkName] = !resetCache[networkName];
                      setResetCache(resetCache);
                      forceUpdate();
                    }}
                  ></InputBox>
                </RowAlignedLeft>
                <RowAlignedLeft>
                  <FormLabel>Target Config Hash:</FormLabel>
                  <InputBox
                    type="text"
                    onChange={event =>
                      onApiKeyValueChange(
                        event.target.value,
                        networkName + '_targetHash'
                      )
                    }
                    value={localConfig[networkName + '_targetHash']}
                    style={{ width: '400px' }}
                  ></InputBox>
                  {updatedCacheHash.configs[networkName] && (
                    <div>
                      <Button
                        onClick={() =>
                          uploadToIPFS(
                            JSON.stringify(
                              updatedCacheHash.configs[networkName],
                              null,
                              2
                            )
                          )
                        }
                      >
                        <FiUpload></FiUpload> Config
                      </Button>
                      <Button
                        onClick={() =>
                          uploadToIPFS(
                            JSON.stringify(
                              updatedCacheHash.caches[networkName],
                              null,
                              2
                            )
                          )
                        }
                      >
                        <FiUpload></FiUpload> Cache
                      </Button>
                    </div>
                  )}
                </RowAlignedLeft>
                {updatedCacheHash.configs[networkName] && (
                  <RowAlignedLeft>
                    Received Config Hash:{' '}
                    {updatedCacheHash.configHashes[networkName]}
                    {'  '}
                    <FormLabel>
                      {updatedCacheHash.configHashes[networkName] ==
                      localConfig[networkName + '_targetHash'] ? (
                        <FiCheckCircle />
                      ) : (
                        <FiX />
                      )}
                    </FormLabel>
                  </RowAlignedLeft>
                )}
              </div>
            )
          );
        })}
      </FormContainer>
      <Row style={{ justifyContent: 'left' }}>
        <FormLabel>Update Proposal Titles</FormLabel>
        <InputBox
          type="checkbox"
          checked={updateProposalTitles}
          onChange={() => setUpdateProposalTitles(!updateProposalTitles)}
        ></InputBox>
      </Row>
      {buildingCacheState === 2 && (
        <Row>
          <Button onClick={downloadAll}>
            {' '}
            <FiDownload></FiDownload> Download All
          </Button>
        </Row>
      )}
      <Row>
        <Button onClick={runCacheScript}>Build Cache</Button>
        <Button onClick={resetCacheOptions}>Reset Options</Button>
        <CopyButton>
          <Copy toCopy={getOptionsLink()}>Build Link</Copy>
        </CopyButton>
      </Row>
    </Box>
  );
})

InstallationModal = (props: Props) => {
  const history = useHistory();
  const [openStatus, setOpenStatus] = useState<boolean>(false);
  const [installMethods, setInstallMethods] = useState<InstallMethodOutput | null>(null); // undefined ???
  const isDisabled = !isNull(installMethods) && !isUndefined(installMethods.errorMessage);

  const onOpenModal = () => {
    if (!isNull(installMethods) && installMethods.methods.length > 0) {
      setOpenStatus(true);
      history.replace({
        search: '?modal=install',
        state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
      });
    } else {
      onCloseModal();
    }
  };

  const onCloseModal = () => {
    setOpenStatus(false);
    history.replace({
      search: '',
      state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
    });
  };

  useEffect(() => {
    if (openStatus) {
      setOpenStatus(false);
    } else {
      setInstallMethods(
        getInstallMethods({
          pkg: props.package,
        })
      );
    }
  }, [props.package]); /* eslint-disable-line react-hooks/exhaustive-deps */

  useEffect(() => {
    if (props.visibleInstallationModal && !openStatus && installMethods && installMethods.methods.length > 0) {
      onOpenModal();
    }
    if (props.visibleInstallationModal && installMethods && installMethods.methods.length === 0) {
      onCloseModal();
    }
  }, [installMethods]); /* eslint-disable-line react-hooks/exhaustive-deps */

  if (isNull(installMethods) || (installMethods.methods.length === 0 && isUndefined(installMethods.errorMessage)))
    return null;

  return (
    <>
      <ElementWithTooltip
        element={
          <button
            type="button"
            className={classnames(
              'btn fw-bold text-uppercase position-relative btn-outline-secondary btn-sm text-nowrap w-100',
              { disabled: isDisabled }
            )}
            onClick={onOpenModal}
            aria-label="Open installation modal"
            aria-disabled={isDisabled}
          >
            <div className="d-flex align-items-center justify-content-center">
              <FiDownload className="me-2" />
              <span>Install</span>
            </div>
          </button>
        }
        visibleTooltip={isDisabled}
        tooltipMessage={installMethods.errorMessage || ''}
        active
      />

      <Modal
        header={
          <ModalHeader
            displayName={props.package!.displayName}
            name={props.package!.name}
            logoImageId={props.package!.logoImageId}
            repoKind={props.package!.repository.kind}
          />
        }
        onClose={onCloseModal}
        open={openStatus}
      >
        <>
          {installMethods.methods.length > 0 && (
            <>
              {props.package && props.package.prerelease && (
                <div className="alert alert-warning mt-1 mb-4" role="alert">
                  This package version is a <span className="fw-bold">pre-release</span> and it is not ready for
                  production use.
                </div>
              )}

              <Tabs
                tabs={installMethods.methods.map((method: InstallMethod) => ({
                  name: method.label,
                  title: method.title,
                  shortTitle: method.shortTitle,
                  content: (
                    <>
                      {(() => {
                        switch (method.kind) {
                          case InstallMethodKind.PublisherInstructions:
                            return <PublisherInstructionsInstall install={method.props.install!} />;
                          case InstallMethodKind.Helm:
                            return (
                              <HelmInstall
                                name={method.props.name!}
                                version={method.props.version}
                                repository={method.props.repository!}
                                contentUrl={method.props.contentUrl}
                                label={method.label}
                              />
                            );
                          case InstallMethodKind.HelmOCI:
                            return (
                              <HelmOCIInstall
                                name={method.props.name!}
                                version={method.props.version}
                                repository={method.props.repository!}
                              />
                            );
                          case InstallMethodKind.OLM:
                            return (
                              <OLMInstall
                                name={method.props.name!}
                                defaultChannel={method.props.defaultChannel}
                                channels={method.props.channels}
                                isGlobalOperator={method.props.isGlobalOperator}
                                isPrivate={method.props.isPrivate}
                              />
                            );
                          case InstallMethodKind.OLMOCI:
                            return (
                              <OLMOCIInstall
                                name={method.props.name!}
                                repository={method.props.repository!}
                                defaultChannel={method.props.defaultChannel}
                                channels={method.props.channels}
                              />
                            );
                          case InstallMethodKind.Falco:
                            return (
                              <FalcoInstall
                                normalizedName={method.props.normalizedName!}
                                isPrivate={method.props.isPrivate}
                              />
                            );
                          case InstallMethodKind.Krew:
                            return <KrewInstall name={method.props.name!} repository={method.props.repository!} />;
                          case InstallMethodKind.HelmPlugin:
                            return <HelmPluginInstall repository={method.props.repository!} />;
                          case InstallMethodKind.Tekton:
                            return (
                              <TektonInstall
                                contentUrl={method.props.contentUrl!}
                                isPrivate={method.props.isPrivate}
                                repository={method.props.repository!}
                              />
                            );
                          default:
                            return null;
                        }
                      })()}
                    </>
                  ),
                }))}
                active={installMethods.methods[0].label}
                noDataContent="Sorry, the information for installation is missing."
              />
            </>
          )}
        </>
      </Modal>
    </>
  );
}