export function ExportComponent()

in modules/editor/src/export-component.tsx [51:146]
81 lines of code
14 McCabe index (conditional complexity)

export function ExportComponent({
  geoJson,
  onClose,
  filename,
  additionalInputs,
}: ExportComponentProps) {
  const [format, setFormat] = React.useState('geoJson');

  let filenameValue = filename;
  if (!filenameValue) {
    if (geoJson.type === 'FeatureCollection') {
      filenameValue = 'features';
    } else {
      // single feature
      filenameValue = geoJson.properties.name || geoJson.id || 'feature';
    }
  }

  const exportParams = React.useMemo(() => {
    switch (format) {
      case 'geoJson':
        return toGeoJson(geoJson, filenameValue);
      case 'kml':
        return toKml(geoJson, filenameValue);
      case 'wkt':
        return toWkt(geoJson, filenameValue);
      default:
        throw Error(`Unsupported format ${format}`);
    }
  }, [geoJson, format, filenameValue]);
  const tooMuch = exportParams.data.length > 500000;

  function copyData() {
    copy(exportParams.data).then(() => onClose());
    // TODO Design and add in a notifications banner for errors in the modal.
    //   .catch(err => {alert(`Error copying to clipboard: `, err)})
  }

  function downloadData() {
    downloadjs(new Blob([exportParams.data]), exportParams.filename, exportParams.mimetype);
    onClose();
  }

  return (
    <>
      <FormatSelect>
        <strong style={{ padding: '0.5rem 0.25rem' }}>Format:</strong>
        <Button
          style={{
            backgroundColor: format === 'geoJson' ? 'rgb(0, 105, 217)' : 'rgb(90, 98, 94)',
          }}
          onClick={() => setFormat('geoJson')}
        >
          GeoJSON
        </Button>
        <Button
          style={{
            backgroundColor: format === 'kml' ? 'rgb(0, 105, 217)' : 'rgb(90, 98, 94)',
          }}
          onClick={() => setFormat('kml')}
        >
          KML
        </Button>
        <Button
          style={{
            backgroundColor: format === 'wkt' ? 'rgb(0, 105, 217)' : 'rgb(90, 98, 94)',
          }}
          onClick={() => setFormat('wkt')}
        >
          WKT
        </Button>
      </FormatSelect>
      <ExportArea>
        <ExportData
          readOnly={true}
          style={tooMuch ? { fontStyle: 'italic', padding: '0.75rem 0rem' } : {}}
          value={
            tooMuch
              ? 'Too much data to display. Download or Copy to clipboard instead.'
              : exportParams.data
          }
        />
      </ExportArea>
      {additionalInputs || null}
      <FooterRow>
        <Button style={{ backgroundColor: 'rgb(0, 105, 217)' }} onClick={downloadData}>
          Download
        </Button>
        <Button style={{ backgroundColor: 'rgb(0, 105, 217)' }} onClick={copyData}>
          Copy
        </Button>
        <Button onClick={onClose}>Cancel</Button>
      </FooterRow>
    </>
  );
}