Intégration du géocodage

.env.sample

@@ -1 +1 @@
-NEXT_PUBLIC_API_URL='https://api-url.com'
+NEXT_PUBLIC_API_URL=https://gpf-geocodeur-back.osc-fr1.scalingo.io

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'}
 ]
 

components/button-link.js

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+
+import theme from '@/styles/theme'
+
+const ButtonLink = ({label, color, isExternal, href, children, icon, ...props}) => (
+  <div>
+    {isExternal ? (
+      <a href={href} className={color} aria-label={label} {...props} target='_blank' rel='noreferrer'>
+        {icon && <FontAwesomeIcon icon={icon} color='#fff' size={25} />}
+        {children}
+      </a>
+    ) : (
+      <Link href={href}>
+        <button type='button' className={color} {...props}>
+          {icon && <FontAwesomeIcon icon={icon} color='#fff' size={25} />}
+          {children}
+        </button>
+      </Link>
+    )}
+
+    <style jsx>{`
+      a, button {
+        text-decoration: none;
+        color: #fff;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
+        width: fit-content;
+        display: flex;
+        gap: 5px;
+        align-items: baseline;
+      }
+
+      .primary {
+        background: ${theme.bkgPrimary};
+      }
+
+      .secondary {
+        background: ${theme.bkgSecondary};
+      }
+
+      .secondary:hover {
+        cursor: pointer;
+        background: ${theme.secondaryHover};
+      }
+
+      .primary:hover {
+        cursor: pointer;
+        background: ${theme.primaryHover};
+      }
+
+      .secondary:disabled, .primary:disabled {
+        background: ${theme.bkgDisable};
+        color: ${theme.txtDisable};
+        cursor: not-allowed;
+      }
+    `}</style>
+  </div>
+)
+
+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

components/error-message.js

@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types'
 
-import colors from '@/styles/colors'
+import theme from '@/styles/theme'
 
 const ErrorMessage = ({children}) => (
   <div className='error'>
     {children}
 
     <style jsx>{`
       .error {
+        color: ${theme.error};
+        font-weight: bold;
         width: 100%;
         text-align: center;
-        color: ${colors.error};
         margin: 10px 0;
       }
     `}</style>

components/geocoding/index.js

@@ -1,53 +1,118 @@
 import {useState, useCallback} from 'react'
 import PropTypes from 'prop-types'
+import prettyBytes from 'pretty-bytes'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {faSquareCheck, faCircleChevronLeft} from '@fortawesome/free-solid-svg-icons'
+import {faDownload, faSquareCheck, faCircleChevronLeft} from '@fortawesome/free-solid-svg-icons'
 
-import {validateCsvFromBlob} from '@livingdata/tabular-data-helpers'
+import {geocodeFile} from '@/lib/api.js'
 
-import ValidationProgress from '@/components/validation-progress'
+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'
 
-const Geocoding = ({file, outputFormat, outputParams, outputSelectedColumns, handleStep}) => {
-  const [validation, setValidation] = useState()
+const Geocoding = ({file, format, formatOptions, addressCompositors, advancedParams, outputFormat, outputParams, outputSelectedColumns, handleStep}) => {
+  const [geocodeProcess, setGeocodeProcess] = 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})
-
-    validation.addListener('progress', setValidation)
-    validation.addListener('complete', handleValidationComplete)
-    validation.addListener('error', setError)
-  }, [file, outputFormat, outputParams, outputSelectedColumns, handleValidationComplete])
+  const [resultFileUrl, setResultFileUrl] = useState()
+  const [validationProgress, setValidationProgress] = useState()
+  const [validationCompleted, setValidationCompleted] = useState(false)
+  const [uploadProgress, setUploadProgress] = useState()
+  const [uploadCompleted, setUploadCompleted] = useState(false)
+  const [downloadStarted, setDownloadStarted] = useState(false)
+  const [downloadProgress, setDownloadProgress] = useState()
+  const [downloadCompleted, setDownloadCompleted] = useState(false)
+
+  const startGeocode = useCallback(() => {
+    const {codeINSEE, lat, long} = advancedParams
+
+    const options = {
+      format,
+      formatOptions,
+      geocodeOptions: {
+        q: addressCompositors,
+        citycode: codeINSEE,
+        longitude: lat,
+        latitude: long
+      },
+      outputFormat,
+      outputFormatOptions: outputParams,
+      ouputOptions: {
+        columnsToInclude: outputSelectedColumns
+      }
+    }
+
+    const geocodeProcess = geocodeFile(file, options)
+
+    geocodeProcess.on('error', error => setError(error.message))
+    geocodeProcess.on('complete', ({file}) => setResultFileUrl(URL.createObjectURL(file)))
+
+    geocodeProcess.on('validate:progress', p => setValidationProgress(p))
+    geocodeProcess.on('validate:complete', () => setValidationCompleted(true))
+
+    geocodeProcess.on('upload:progress', p => setUploadProgress(p))
+    geocodeProcess.on('upload:complete', () => setUploadCompleted(true))
+
+    geocodeProcess.on('download:start', () => setDownloadStarted(true))
+    geocodeProcess.on('download:progress', p => setDownloadProgress(p))
+    geocodeProcess.on('download:complete', () => setDownloadCompleted(true))
+
+    setGeocodeProcess(geocodeProcess)
+  }, [file, addressCompositors, advancedParams, format, formatOptions, outputFormat, outputSelectedColumns, outputParams])
 
   return (
     <div className='geocoding-container'>
-      <div className='action-buttons'>
-        <Button onClick={() => handleStep(4)} label='Aller à l’étape précédente' icon={faCircleChevronLeft} color='secondary'>
-          Étape précédente
-        </Button>
-        <Button onClick={validate} disabled={Boolean(validation)}>Lancer le géocodage</Button>
-      </div>
+      {!geocodeProcess && <div className='action-buttons'>
+        <div className='restart-button'>
+          <Button onClick={() => handleStep(4)} label='Aller à l’étape précédente' icon={faCircleChevronLeft} color='secondary'>
+            Étape précédente
+          </Button>
+        </div>
+        <Button onClick={startGeocode}>Lancer le géocodage</Button>
+      </div>}
+
+      {validationProgress && <ProgressBar
+        label={`${validationCompleted ? 'Vérification du fichier terminée' : 'Vérification en cours…'}`}
+        min={validationProgress.readBytes}
+        max={validationProgress.totalBytes}
+      />}
 
-      {validation && <ValidationProgress {...validation} isValidationComplete={isValidationComplete} />}
-      {isValidationComplete && (
+      {validationCompleted && (
         <div className='valide'>
           <div className='valide-message'><FontAwesomeIcon icon={faSquareCheck} color={`${theme.success}`} /> fichier CSV valide</div>
-          <div className='rows'>{validation.readRows} lignes traitées</div>
+          <div className='rows'>{validationProgress.readRows} lignes traitées</div>
         </div>
       )}
 
-      {error && (
-        <ErrorMessage>Le géocodage du fichier a échoué</ErrorMessage>
-      )}
+      {uploadProgress && <ProgressBar
+        label={`${uploadCompleted ? 'Envoi du fichier terminé' : 'Envoi en cours…'}`}
+        min={uploadProgress.loaded}
+        max={uploadProgress.total}
+      />}
+
+      <div className='geocodage-progress'>
+        {downloadStarted && !downloadCompleted && <div><Loader label='Géocodage en cours' /></div>}
+        {downloadProgress && !downloadCompleted && <div>{prettyBytes(downloadProgress.loaded, {locale: 'fr'}).replace('B', 'o')} déjà téléchargés</div>}
+        {downloadCompleted && <div>Géocodage terminé !</div>}
+
+        {resultFileUrl && (
+          <div className='action-buttons'>
+            <div className='restart-button'>
+              <Button onClick={() => handleStep(1)} label='Géocoder un nouveau fichier' icon={faCircleChevronLeft} color='secondary'>
+                Géocoder un nouveau fichier
+              </Button>
+            </div>
+            <ButtonLink href={resultFileUrl} download={computeGeocodedFileName(file, outputFormat)} isExternal label='Télécharger le fichier' icon={faDownload}>
+              Télécharger le fichier
+            </ButtonLink>
+          </div>
+        )}
+
+        {error && <ErrorMessage>Le géocodage du fichier a échoué : {error}</ErrorMessage>}
+      </div>
 
       <style jsx>{`
         .geocoding-container {
@@ -56,13 +121,8 @@ const Geocoding = ({file, outputFormat, outputParams, outputSelectedColumns, han
           align-items: center;
         }
 
-        .action-buttons {
+        .action-download {
           width: 100%;
-          margin-top: 1.5em;
-          display: grid;
-          grid-template-columns: auto 1fr;
-          justify-items: center;
-          gap: 1;
         }
 
         .valide {
@@ -81,17 +141,65 @@ const Geocoding = ({file, outputFormat, outputParams, outputSelectedColumns, han
         .rows {
           font-style: italic;
         }
+
+        .geocodage-progress {
+          width: 100%;
+          margin-top: 1.5em;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 1em;
+        }
+
+        a {
+          text-decoration: none;
+          display: flex;
+        }
+
+        .action-buttons {
+          width: 100%;
+          position: relative;
+          display: flex;
+          justify-content: center;
+        }
+
+        .restart-button {
+          position: absolute;
+          left: 0;
+        }
+
+        @media only screen and (max-width: 770px) {
+          .action-buttons {
+            position: initial;
+            flex-direction: column;
+            gap: 1em;
+          }
+
+          .restart-button {
+            position: initial;
+          }
+        }
+
       `}</style>
     </div>
   )
 }
 
 Geocoding.propTypes = {
   file: PropTypes.object.isRequired,
+  format: PropTypes.string.isRequired,
+  formatOptions: PropTypes.object.isRequired,
+  addressCompositors: PropTypes.array.isRequired,
+  advancedParams: PropTypes.object.isRequired,
   outputFormat: PropTypes.string.isRequired,
   outputParams: PropTypes.object.isRequired,
   outputSelectedColumns: PropTypes.array.isRequired,
   handleStep: PropTypes.func.isRequired
 }
 
+function computeGeocodedFileName(file, outputFormat) {
+  return `geocode-result.${outputFormat}`
+}
+
 export default Geocoding