JSFiddle - React, Tailwind, and code Playground

by brandondurham

JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import Dropzone from 'react-dropzone'
// import parse from 'csv-parse'
// import CSVFileValidator from 'csv-file-validator'
// import csv from 'csvtojson'
import Papa from 'papaparse'
import { Circle } from 'rc-progress'
import { debounce, get } from 'lodash'

// Notifications
import { store } from 'react-notifications-component'
import notifications from 'config/notifications'

// Config
// import { csvConfig } from 'config'
import { assets as assetUploads } from 'config/uploads'

// SVGs
import { ReactComponent as Target } from 'assets/images/target.svg'

// Styles
import style from './index.module.css'

export class DropZone extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			progress: 0,
		}

		this.updateProgress = debounce(this.updateProgress, 1000, true)
	}

	updateProgress = progress => {
		this.setState({ progress })
	}

	/**
	 * Validate a single CSV field
	 *
	 * @function validateField
	 * @param {string} type Type of field to validate
	 * @param {string} value Field value
	 * @param {number} rowNumber Current CSV row number we’re on
	 * @returns {boolean} Is the supplied data valid?
	 */
	validateField = async (type, value, rowNumber) => {
		try {
			return await assetUploads
				.validateSync({ [type]: value })
		} catch (error) {
			// Display error notification
			store.addNotification({
				...notifications,
				dismiss: {
					...notifications.dismiss,
					duration: 0,
				},
				title: 'Invalid Value',
				message: `
					Row “${rowNumber}”,
					column “${get(error, 'path')}”,
					value “${get(error, 'params.value')}”
				`,
				type: 'danger',
			})

			return false
		}
	}

	/**
	 * Validate the CSV fields from the row currently being parsed by Papa Parse.
	 * This is called from within the `step` function in Papa Parse, which allows us
	 * to pause and resume parsing while we loop over the fields. This can
	 * technically slow the process down, but...