function SaveMapModalFactory()

in src/components/modals/save-map-modal.js [122:243]
119 lines of code
8 McCabe index (conditional complexity)

function SaveMapModalFactory() {
  /**
   * @type {React.FunctionComponent<SaveMapModalProps>}
   */
  const SaveMapModal = ({
    mapInfo,
    exportImage,
    characterLimits = {},
    cloudProviders,
    isProviderLoading,
    currentProvider,
    providerError,
    onSetCloudProvider,
    onUpdateImageSetting,
    cleanupExportImage,
    onSetMapInfo
  }) => {
    const onChangeInput = (key, {target: {value}}) => {
      onSetMapInfo({[key]: value});
    };
    const provider = currentProvider ? cloudProviders.find(p => p.name === currentProvider) : null;

    return (
      <ProviderModalContainer
        onSetCloudProvider={onSetCloudProvider}
        cloudProviders={cloudProviders}
        currentProvider={currentProvider}
      >
        <ImageModalContainer
          currentProvider={currentProvider}
          cloudProviders={cloudProviders}
          onUpdateImageSetting={onUpdateImageSetting}
          cleanupExportImage={cleanupExportImage}
        >
          <StyledSaveMapModal>
            <StyledModalContent className="save-map-modal-content">
              <StyledExportSection disabled={isProviderLoading}>
                <div className="description">
                  <div className="title">
                    <FormattedMessage id={'modal.saveMap.title'} />
                  </div>
                  <div className="subtitle">
                    <FormattedMessage id={'modal.saveMap.subtitle'} />
                  </div>
                </div>
                <div className="selection">
                  {cloudProviders.map(cloudProvider => (
                    <CloudTile
                      key={cloudProvider.name}
                      onSelect={() => onSetCloudProvider(cloudProvider.name)}
                      onSetCloudProvider={onSetCloudProvider}
                      cloudProvider={cloudProvider}
                      isSelected={cloudProvider.name === currentProvider}
                      isConnected={Boolean(
                        cloudProvider.getAccessToken && cloudProvider.getAccessToken()
                      )}
                    />
                  ))}
                </div>
              </StyledExportSection>
              {provider && provider.getManagementUrl && (
                <StyledExportSection style={{margin: '2px 0'}}>
                  <div className="description" />
                  <div className="selection">
                    <a
                      key={1}
                      href={provider.getManagementUrl()}
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{textDecoration: 'underline'}}
                    >
                      Go to your Kepler.gl {provider.displayName} page
                    </a>
                  </div>
                </StyledExportSection>
              )}
              <StyledExportSection>
                <div className="description image-preview-panel">
                  <ImagePreview
                    exportImage={exportImage}
                    width={MAP_THUMBNAIL_DIMENSION.width}
                    showDimension={false}
                  />
                </div>
                {isProviderLoading ? (
                  <div className="selection map-saving-animation">
                    <UploadAnimation icon={provider && provider.icon} />
                  </div>
                ) : (
                  <MapInfoPanel
                    mapInfo={mapInfo}
                    characterLimits={characterLimits}
                    onChangeInput={onChangeInput}
                  />
                )}
              </StyledExportSection>
              {providerError ? (
                <StatusPanel
                  isLoading={false}
                  error={providerError}
                  providerIcon={provider && provider.icon}
                />
              ) : null}
            </StyledModalContent>
          </StyledSaveMapModal>
        </ImageModalContainer>
      </ProviderModalContainer>
    );
  };

  SaveMapModal.defaultProps = {
    characterLimits: MAP_INFO_CHARACTER,
    cloudProviders: [],
    currentProvider: null,
    providerError: null,
    isProviderLoading: false,
    onSetCloudProvider: nop,
    onUpdateImageSetting: nop
  };

  return SaveMapModal;
}