export function ImportComponent()

in modules/editor/src/import-component.tsx [87:178]
70 lines of code
14 McCabe index (conditional complexity)

export function ImportComponent(props: ImportComponentProps) {
  const [isImportText, setIsImportText] = React.useState(true);
  const [text, setText] = React.useState('');
  const [importFile, setImportFile] = React.useState<File | null>(null);

  const [parseResult, setParseResult] = React.useState<ImportData>({
    valid: false,
    validationErrors: [],
  });

  React.useEffect(() => {
    async function parseData() {
      if (isImportText) {
        setParseResult(await parseImport(text));
      } else if (importFile !== null) {
        setParseResult(await parseImport(importFile));
      }
    }
    parseData();
  }, [isImportText, text, importFile]);

  function flush() {
    setImportFile(null);
    setText('');
    props.onCancel();
  }

  function isDataSet() {
    return (isImportText && text) || (!isImportText && importFile);
  }

  // Check validity (and call custom validation callback if present)
  const valid =
    isDataSet() &&
    parseResult.valid &&
    (!props.onValidate || props.onValidate(parseResult.features));

  return (
    <ImportComponentContent>
      <ImportContent>
        <ImportSelect>
          <Button
            style={{
              backgroundColor: isImportText ? 'rgb(0, 105, 217)' : 'rgb(90, 98, 94)',
            }}
            onClick={() => {
              setIsImportText(true);
            }}
          >
            Import From Text
          </Button>
          <Button
            style={{
              backgroundColor: isImportText ? 'rgb(90, 98, 94)' : 'rgb(0, 105, 217)',
            }}
            onClick={() => {
              setIsImportText(false);
            }}
          >
            Import From File
          </Button>
        </ImportSelect>
        <ImportArea>
          {isImportText && (
            <ImportTextArea
              style={isDataSet() && !parseResult.valid ? { borderColor: 'rgb(220, 53, 69)' } : {}}
              onChange={(event) => setText(event.target.value)}
              value={text}
            />
          )}
          {!isImportText && (
            <Dropzone onDrop={(importFiles) => setImportFile(importFiles[0])}>
              {({ getRootProps, getInputProps }) => (
                <ImportDropArea
                  style={
                    isDataSet() && !parseResult.valid ? { borderColor: 'rgb(220, 53, 69)' } : {}
                  }
                  {...getRootProps()}
                >
                  <input {...getInputProps()} />
                  {importFile ? (
                    <p>
                      {!parseResult.valid ? 'Invalid' : ''} Selected File: {importFile.name}.<br />
                      Drag 'n' drop or click again to change the file.
                    </p>
                  ) : (
                    <p>Drag 'n' drop your file here, or click to select a file.</p>
                  )}
                </ImportDropArea>
              )}
            </Dropzone>
          )}