From 778297ba58b8ea663840cbb9895f6b9b9baf3de4 Mon Sep 17 00:00:00 2001 From: Marine Le Pennec Date: Tue, 25 Oct 2022 20:12:08 +0200 Subject: [PATCH 01/12] Create a loader --- components/loader.js | 57 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 components/loader.js diff --git a/components/loader.js b/components/loader.js new file mode 100644 index 0000000..06f64a6 --- /dev/null +++ b/components/loader.js @@ -0,0 +1,57 @@ +import PropTypes from 'prop-types' + +import theme from '@/styles/theme' + +const Loader = ({label}) => ( + <> +

{label} ...

+ + + +) + +Loader.propTypes = { + label: PropTypes.string +} + +Loader.defaultProps = { + label: null +} + +export default Loader From 4ac589d625da2dde272b586f4713f1fa0ef1a614 Mon Sep 17 00:00:00 2001 From: Marine Le Pennec Date: Tue, 25 Oct 2022 20:24:32 +0200 Subject: [PATCH 02/12] Prepare geocoding integration --- components/geocoding/index.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/components/geocoding/index.js b/components/geocoding/index.js index df641fd..b9aeb50 100644 --- a/components/geocoding/index.js +++ b/components/geocoding/index.js @@ -11,21 +11,20 @@ import Button from '@/components/button' import theme from '@/styles/theme' const Geocoding = ({file, outputFormat, outputParams, outputSelectedColumns, handleStep}) => { - const [validation, setValidation] = useState() + const [validationProcess, setValidationProcess] = useState() const [error, setError] = useState() const [isValidationComplete, setIsValidationComplete] = useState(false) const handleValidationComplete = useCallback(() => { - // Lancer le géocodage setIsValidationComplete(true) }, []) const validate = useCallback(() => { - const validation = validateCsvFromBlob(file, {outputFormat, outputParams, outputSelectedColumns}) + const validationProgress = validateCsvFromBlob(file, {outputFormat, outputParams, outputSelectedColumns}) - validation.addListener('progress', setValidation) - validation.addListener('complete', handleValidationComplete) - validation.addListener('error', setError) + validationProgress.addListener('progress', setValidationProcess) + validationProgress.addListener('complete', handleValidationComplete) + validationProgress.addListener('error', setError) }, [file, outputFormat, outputParams, outputSelectedColumns, handleValidationComplete]) return ( @@ -34,20 +33,20 @@ const Geocoding = ({file, outputFormat, outputParams, outputSelectedColumns, han - + - {validation && } + {validationProcess && } {isValidationComplete && (
fichier CSV valide
-
{validation.readRows} lignes traitées
+
{validationProcess.readRows} lignes traitées
)} - {error && ( - Le géocodage du fichier a échoué - )} + {/* geocoding processing => */} + {/* geocoding complete => */} + {error && Le géocodage du fichier a échoué} + +) + +ButtonLink.defaultProps = { + label: null, + icon: null, + color: 'primary', + isExternal: false, + children: null +} + +ButtonLink.propTypes = { + label: PropTypes.string, + icon: PropTypes.object, + color: PropTypes.oneOf([ + 'primary', + 'secondary' + ]), + href: PropTypes.string.isRequired, + isExternal: PropTypes.bool, + children: PropTypes.node +} + +export default ButtonLink diff --git a/components/error-message.js b/components/error-message.js index cdd3181..074a67c 100644 --- a/components/error-message.js +++ b/components/error-message.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' -import colors from '@/styles/colors' +import theme from '@/styles/theme' const ErrorMessage = ({children}) => (
@@ -8,9 +8,10 @@ const ErrorMessage = ({children}) => ( diff --git a/components/geocoding/index.js b/components/geocoding/index.js index a665942..992d81e 100644 --- a/components/geocoding/index.js +++ b/components/geocoding/index.js @@ -1,5 +1,6 @@ import {useState, useCallback} from 'react' import PropTypes from 'prop-types' +import prettyBytes from 'pretty-bytes' import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' import {faDownload, faSquareCheck, faCircleChevronLeft} from '@fortawesome/free-solid-svg-icons' @@ -8,6 +9,8 @@ import {geocodeFile} from '@/lib/api.js' import ProgressBar from '@/components/progress-bar' import ErrorMessage from '@/components/error-message' import Button from '@/components/button' +import ButtonLink from '@/components/button-link' +import Loader from '@/components/loader' import theme from '@/styles/theme' @@ -63,9 +66,11 @@ const Geocoding = ({file, format, formatOptions, addressCompositors, advancedPar return (
{!geocodeProcess &&
- +
+ +
} @@ -88,13 +93,26 @@ const Geocoding = ({file, format, formatOptions, addressCompositors, advancedPar max={uploadProgress.total} />} - {downloadStarted && !downloadCompleted &&
Géocodage en cours…
} - {downloadProgress && !downloadCompleted &&
{downloadProgress.loaded} déjà téléchargés
} - {downloadCompleted &&
Géocodage terminé !
} - - {resultFileUrl && } - - {error && Le géocodage du fichier a échoué : {error}} +
+ {downloadStarted && !downloadCompleted &&
} + {downloadProgress && !downloadCompleted &&
{prettyBytes(downloadProgress.loaded, {locale: 'fr'}).replace('B', 'o')} déjà téléchargés
} + {downloadCompleted &&
Géocodage terminé !
} + + {resultFileUrl && ( +
+
+ +
+ + Télécharger le fichier + +
+ )} + + {error && Le géocodage du fichier a échoué : {error}} +
) @@ -145,4 +198,8 @@ Geocoding.propTypes = { handleStep: PropTypes.func.isRequired } +function computeGeocodedFileName(file, outputFormat) { + return `geocode-result.${outputFormat}` +} + export default Geocoding diff --git a/components/loader.js b/components/loader.js index 06f64a6..9778c97 100644 --- a/components/loader.js +++ b/components/loader.js @@ -20,7 +20,7 @@ const Loader = ({label}) => ( } .loader { - font-size: 20px; + font-size: 16px; color: ${theme.txtColor}; font-weight: bold; } @@ -28,7 +28,7 @@ const Loader = ({label}) => ( .loader span { font-style: normal; color: ${theme.txtColor}; - font-size: 50px; + font-size: 20px; animation-name: blink; animation-duration: 1.2s; animation-iteration-count: infinite; diff --git a/package.json b/package.json index ac015ca..060cd42 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "events": "^3.3.0", "lodash": "^4.17.21", "next": "12.2.5", + "pretty-bytes": "^6.0.0", "prop-types": "^15.8.1", "re-resizable": "^6.9.9", "react": "18.2.0", diff --git a/pages/index.js b/pages/index.js index dc24faa..e3a14ca 100644 --- a/pages/index.js +++ b/pages/index.js @@ -76,8 +76,12 @@ const Home = () => { } }, [file]) - const changeStep = step => { - setStep(step) + const changeStep = selectedStep => { + if (selectedStep === 1) { + setFile() + } + + setStep(selectedStep) setError(null) scrollToTop() } diff --git a/yarn.lock b/yarn.lock index 741464c..de4bca7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2596,6 +2596,11 @@ prettier@^2.6.2: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== +pretty-bytes@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140" + integrity sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg== + process@^0.11.10: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" From 5bc8e25cc1243b1c4b1da4b88ef94e670c9441f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Desboeufs?= Date: Tue, 25 Oct 2022 23:35:58 +0200 Subject: [PATCH 11/12] Remove gpkg --- components/build-output-address/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/build-output-address/index.js b/components/build-output-address/index.js index d55cfa7..b406fee 100644 --- a/components/build-output-address/index.js +++ b/components/build-output-address/index.js @@ -11,7 +11,6 @@ import Button from '@/components/button' const formatOptions = [ {value: 'csv', label: 'CSV'}, - {value: 'gpkg', label: 'GPKG'}, {value: 'geojson', label: 'GeoJSON'} ] From 85fe3e049e20d5215b3c9637b11215526e9b9251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Desboeufs?= Date: Wed, 26 Oct 2022 07:34:20 +0200 Subject: [PATCH 12/12] Remove validation-progress --- components/validation-progress.js | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 components/validation-progress.js diff --git a/components/validation-progress.js b/components/validation-progress.js deleted file mode 100644 index fdb22bd..0000000 --- a/components/validation-progress.js +++ /dev/null @@ -1,30 +0,0 @@ -import PropTypes from 'prop-types' - -import ProgressBar from '@/components/progress-bar' - -const ValidationProgress = ({readBytes, totalBytes, isValidationComplete}) => ( -
- - - -
- -) - -ValidationProgress.propTypes = { - readBytes: PropTypes.number.isRequired, - totalBytes: PropTypes.number.isRequired, - isValidationComplete: PropTypes.bool.isRequired -} - -export default ValidationProgress