From 4309615b878c0e355c63240b85a913b3ca363790 Mon Sep 17 00:00:00 2001
From: MelFonk <melvin.pichenot@ign.fr>
Date: Tue, 26 Nov 2024 17:48:16 +0100
Subject: [PATCH] comment breadcrumb

---
 .../outils/csv/components/holder.styles.tsx   |  80 +++++++++++
 src/app/outils/csv/components/holder.tsx      | 127 ++++-------------
 src/app/outils/csv/page.styles.tsx            |  33 +++--
 src/app/outils/csv/page.tsx                   | 129 +++++++++---------
 4 files changed, 194 insertions(+), 175 deletions(-)
 create mode 100644 src/app/outils/csv/components/holder.styles.tsx

diff --git a/src/app/outils/csv/components/holder.styles.tsx b/src/app/outils/csv/components/holder.styles.tsx
new file mode 100644
index 000000000..55e826bb0
--- /dev/null
+++ b/src/app/outils/csv/components/holder.styles.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import styled from 'styled-components'
+import theme from '@/theme'
+
+export const HolderWrapper = styled.div`
+
+    .dropzone {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      width: 100%;
+      border: 1px dashed #ccc;
+      height: 200px;
+      text-align: center;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+
+    .dropzone:hover {
+      background-color: #ebeff3;
+    }
+
+    .dropzone.file {
+      display: flex;
+      flex-flow: column;
+      height: auto;
+      border: none;
+    }
+
+    .file-container {
+      width: 100%;
+    }
+
+    .file-sumup {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-align: left;
+    }
+
+    .file-details {
+      display: flex;
+      align-items: center;
+    }
+
+    .file-infos {
+      border-left: 3px solid ${theme.colors.primary.border};
+      margin-left: 5px;
+      padding: 0 5px;
+    }
+
+    .name {
+      font-weight: bolder;
+    }
+
+    .size {
+      font-style: italic;
+      font-size: 14px;
+    }
+
+    .active {
+      background-color: #ebeff3;
+    }
+
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-style: italic;
+    }
+    .loading span {
+      margin-left: 1em;
+    }
+
+    span > .fr-icon-refresh-fill {
+    margin-right: 10px;
+    color: var(--blue-france-sun-113-625);
+    }
+  `
diff --git a/src/app/outils/csv/components/holder.tsx b/src/app/outils/csv/components/holder.tsx
index 762e8b35b..a96620311 100644
--- a/src/app/outils/csv/components/holder.tsx
+++ b/src/app/outils/csv/components/holder.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import Dropzone from 'react-dropzone'
 
 import Loader from '@/components/Loader/index'
-import theme from '@/theme/theme'
+import { HolderWrapper } from './holder.styles'
 
 function formatFileSize(bytes: number) {
   if (bytes === 0) {
@@ -34,106 +34,37 @@ export default function Holder({ file = null, placeholder, isLoading = false, on
         const inputProps = getInputProps()
 
         return (
-          <div
-            {...rootProps}
-            className={`dropzone ${file ? 'file' : ''} ${isDragActive ? 'active' : ''}`}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-          >
-            <input {...inputProps} />
-            <div>{!file && <p>Glisser le fichier</p>}</div>
-            <div className="file-container">{file
-              ? (
-                  <div className="file-sumup">
-                    <div className="file-details">
-                      <div className="file-infos">
-                        <div className="name">{file.name}</div>
-                        <div className="size">{formatFileSize(file.size)}</div>
+          <HolderWrapper>
+            <div
+              {...rootProps}
+              className={`dropzone ${file ? 'file' : ''} ${isDragActive ? 'active' : ''}`}
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              <input {...inputProps} />
+              <div>{!file && <p>Glisser le fichier</p>}</div>
+              <div className="file-container">{file
+                ? (
+                    <div className="file-sumup">
+                      <div className="file-details">
+                        <div className="file-infos">
+                          <div className="name">{file.name}</div>
+                          <div className="size">{formatFileSize(file.size)}</div>
+                        </div>
                       </div>
+                      {isLoading
+                        ? (
+                            <div className="loading">Chargement du fichier… <span><Loader aria-hidden="true" /></span></div>
+                          )
+                        : (
+                            <span className="fr-icon-flood-fill" aria-hidden="true" aria-label="Recharger le fichier" />
+                          )}
                     </div>
-                    {isLoading
-                      ? (
-                          <div className="loading">Chargement du fichier… <span><Loader aria-hidden="true" /></span></div>
-                        )
-                      : (
-                          <p>React-Feather Icon </p>
-                        )}
-                  </div>
-                )
-              : placeholder}
+                  )
+                : placeholder}
+              </div>
             </div>
-
-            <style jsx>{`
-              .dropzone {
-                display: flex;
-                flex-flow: column;
-                justify-content: center;
-                width: 100%;
-                border: 1px dashed #ccc;
-                height: 200px;
-                text-align: center;
-                cursor: pointer;
-                border-radius: 4px;
-              }
-
-              .dropzone:hover {
-                background-color: #ebeff3;
-              }
-
-              .dropzone.file {
-                display: flex;
-                flex-flow: column;
-                height: auto;
-                border: none;
-              }
-
-              .file-container {
-                width: 100%;
-              }
-
-              .file-sumup {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                text-align: left;
-              }
-
-              .file-details {
-                display: flex;
-                align-items: center;
-              }
-
-              .file-infos {
-                border-left: 3px solid ${theme.colors.primary};
-                margin-left: 5px;
-                padding: 0 5px;
-              }
-
-              .name {
-                font-weight: bolder;
-              }
-
-              .size {
-                font-style: italic;
-                font-size: 14px;
-              }
-
-              .active {
-                background-color: #ebeff3;
-              }
-
-              .loading {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                font-style: italic;
-              }
-              .loading span {
-                margin-left: 1em;
-              }
-            `}
-            </style>
-          </div>
+          </HolderWrapper>
         )
       }}
     </Dropzone>
diff --git a/src/app/outils/csv/page.styles.tsx b/src/app/outils/csv/page.styles.tsx
index d2478742b..a40404a6d 100644
--- a/src/app/outils/csv/page.styles.tsx
+++ b/src/app/outils/csv/page.styles.tsx
@@ -1,16 +1,21 @@
-// <style jsx>{`
-//     .filters {
-//       margin: 1em 0;
-//     }
+'use client'
 
-//     .loading {
-//       display: flex;
-//       flex-direction: column;
-//       align-items: center;
-//       margin: 1em 0;
-//     }
+import styled from 'styled-components'
 
-//     .error {
-//       color: red;
-//     }
-//   `}</style>
+export const TextWrapper = styled.div`
+
+    .filters {
+      margin: 1em 0;
+    }
+
+    .loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 1em 0;
+    }
+
+    .error {
+      color: red;
+    }
+  `
diff --git a/src/app/outils/csv/page.tsx b/src/app/outils/csv/page.tsx
index 1256913e6..21d8e8f8d 100644
--- a/src/app/outils/csv/page.tsx
+++ b/src/app/outils/csv/page.tsx
@@ -14,6 +14,7 @@ import Holder from './components/holder'
 import Table from './components/table'
 import Geocoder from './components/geocoder'
 import Loader from '@/components/Loader/index'
+import { TextWrapper } from './page.styles'
 
 const allowedTypes = new Set([
   'text/plain',
@@ -133,7 +134,7 @@ export default function Csv() {
   const columns = csv ? csv.data[0] : []
   return (
     <>
-      <Breadcrumb
+      {/* <Breadcrumb
         currentPageLabel="Géocodeur"
         segments={[
           {
@@ -143,77 +144,79 @@ export default function Csv() {
             },
           },
         ]}
-      />
+      /> */}
       <Section pageTitle="Géocoder un fichier CSV">
-        <div id="main" className="csvtogeocoder">
-          <div>
-            <h2>1. Choisir un fichier</h2>
-
-            <Holder
-              file={file}
-              placeholder={`Glissez un fichier ici (max ${MAX_SIZE / (1024 * 1024)} Mo), ou cliquez pour choisir`}
-              isLoading={loading}
-              onDrop={handleFileDrop}
-            />
-
-            {loading && (
-              <div className="loading">
-                <h4>Analyse du fichier en cours…</h4>
-                <Loader />
-              </div>
-            )}
+        <TextWrapper>
+          <div id="main" className="csvtogeocoder">
+            <div>
+              <h2>1. Choisir un fichier</h2>
+
+              <Holder
+                file={file}
+                placeholder={`Glissez un fichier ici (max ${MAX_SIZE / (1024 * 1024)} Mo), ou cliquez pour choisir`}
+                isLoading={loading}
+                onDrop={handleFileDrop}
+              />
+
+              {loading && (
+                <div className="loading">
+                  <h4>Analyse du fichier en cours…</h4>
+                  <Loader />
+                </div>
+              )}
 
-            {error && <div className="error">{error.message}</div>}
-          </div>
+              {error && <div className="error">{error.message}</div>}
+            </div>
+
+            <div>
+              <div id="preview">
+                <Step title="2. Aperçu du fichier et vérification de l’encodage">
+                  {csv && <Table headers={csv.data[0]} rows={csv.data.slice(1, 10)} />}
+                </Step>
+              </div>
 
-          <div>
-            <div id="preview">
-              <Step title="2. Aperçu du fichier et vérification de l’encodage">
-                {csv && <Table headers={csv.data[0]} rows={csv.data.slice(1, 10)} />}
+              <Step title="3. Choisir les colonnes à utiliser pour construire les adresses">
+                {csv && (
+                  <ColumnsSelect
+                    columns={csv.data[0]}
+                    selectedColumns={selectedColumns}
+                    onAdd={handleAddColumn}
+                    onRemove={handleRemoveColumn}
+                  />
+                )}
               </Step>
-            </div>
 
-            <Step title="3. Choisir les colonnes à utiliser pour construire les adresses">
               {csv && (
-                <ColumnsSelect
-                  columns={csv.data[0]}
-                  selectedColumns={selectedColumns}
-                  onAdd={handleAddColumn}
-                  onRemove={handleRemoveColumn}
-                />
-              )}
-            </Step>
-
-            {csv && (
-              <>
-                <div className="filters">
-                  <Button onClick={toggleAdvancedPanel} style={{ fontSize: '1em', padding: '0.4em 1em' }}>
-                    {advancedPanel ? <p>Minus Icon - </p> : <p>Plus Icon </p>} Paramètres avancés
-                  </Button>
-
-                  {advancedPanel && (
-                    <Filter
-                      selected={filter}
-                      columns={columns}
-                      onSelect={handleFilter}
+                <>
+                  <div className="filters">
+                    <Button onClick={toggleAdvancedPanel} style={{ fontSize: '1em', padding: '0.4em 1em' }}>
+                      {advancedPanel ? <p>Minus Icon - </p> : <p>Plus Icon </p>} Paramètres avancés
+                    </Button>
+
+                    {advancedPanel && (
+                      <Filter
+                        selected={filter}
+                        columns={columns}
+                        onSelect={handleFilter}
+                      />
+                    )}
+                  </div>
+                  {file
+                  && (
+                    <Geocoder
+                      // This key should be somehow unique: this means that we
+                      // will get a new state in Geocoder whenever file changes.
+                      key={`${file.name}-${file.size}`}
+                      file={file}
+                      columns={selectedColumns}
+                      filter={filter === null ? undefined : filter}
                     />
                   )}
-                </div>
-                {file
-                && (
-                  <Geocoder
-                  // This key should be somehow unique: this means that we
-                  // will get a new state in Geocoder whenever file changes.
-                    key={`${file.name}-${file.size}`}
-                    file={file}
-                    columns={selectedColumns}
-                    filter={filter === null ? undefined : filter}
-                  />
-                )}
-              </>
-            )}
+                </>
+              )}
+            </div>
           </div>
-        </div>
+        </TextWrapper>
       </Section>
     </>