Draw voie line on voie context

BaseAdresseNationale · Sep 8, 2020 · 2d6d88e · 2d6d88e
1 parent 4ee47d4
commit 2d6d88e
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 25 deletions.
diff --git a/components/bal/voie-editor.js b/components/bal/voie-editor.js
@@ -26,7 +26,7 @@ function VoieEditor({initialValue, onSubmit, onCancel, isEnabledComplement}) {
   const [error, setError] = useState()
   const setRef = useFocus()
 
-  const {data, setModeId, setData} = useContext(DrawContext)
+  const {data, enableDraw, disableDraw, setModeId, setData} = useContext(DrawContext)
   const {
     enabled,
     marker,
@@ -36,9 +36,8 @@ function VoieEditor({initialValue, onSubmit, onCancel, isEnabledComplement}) {
 
   const onUnmount = useCallback(() => {
     disableMarker()
-    setData(null)
-    setModeId(null)
-  }, [disableMarker, setData, setModeId])
+    disableDraw()
+  }, [disableDraw, disableMarker])
 
   const onFormSubmit = useCallback(async e => {
     e.preventDefault()
@@ -71,7 +70,7 @@ function VoieEditor({initialValue, onSubmit, onCancel, isEnabledComplement}) {
       setIsLoading(false)
       setError(error.message)
     }
-  }, [nom, isMetric, complement, data, marker, positionType, onSubmit, onUnmount])
+  }, [nom, isMetric, complement, data, initialValue.lineVoie, marker, positionType, onSubmit, onUnmount])
 
   const onFormCancel = useCallback(e => {
     e.preventDefault()
@@ -106,8 +105,13 @@ function VoieEditor({initialValue, onSubmit, onCancel, isEnabledComplement}) {
   useEffect(() => {
     if (isMetric) {
       onIsToponymeChange({target: {checked: false}})
+
+      setModeId(data ? 'editing' : 'drawLineString')
+      enableDraw()
+    } else {
+      disableDraw()
     }
-  }, [isMetric, onIsToponymeChange])
+  }, [data, disableDraw, enableDraw, isMetric, onIsToponymeChange, setData, setModeId])
 
   useEffect(() => {
     if (isToponyme) {
@@ -117,9 +121,9 @@ function VoieEditor({initialValue, onSubmit, onCancel, isEnabledComplement}) {
 
   useEffect(() => {
     return () => {
-      console.log('UNMOUNT')
+      disableDraw()
     }
-  }, [])
+  }, [disableDraw])
 
   return (
     <Pane is='form' onSubmit={onFormSubmit}>

diff --git a/components/map/draw.js b/components/map/draw.js
@@ -12,7 +12,7 @@ const MODES = {
 }
 
 const Draw = ({hoverPos}) => {
-  const {modeId, data, hint, setHint, setData} = useContext(DrawContext)
+  const {drawEnabled, modeId, data, hint, setHint, setData} = useContext(DrawContext)
 
   const _onUpdate = useCallback(({data, editType}) => {
     if (editType === 'addTentativePosition') {
@@ -30,7 +30,7 @@ const Draw = ({hoverPos}) => {
     return Mode ? new Mode() : null
   }, [modeId])
 
-  if (!mode) {
+  if (!drawEnabled || !mode) {
     return null
   }
 

diff --git a/contexts/bal-data.js b/contexts/bal-data.js
@@ -79,9 +79,8 @@ export const BalDataContextProvider = React.memo(({balId, codeCommune, idVoie, .
 
   const editingItem = useMemo(() => {
     if (editingId) {
-      return numeros ?
-        numeros.find(numero => numero._id === editingId) :
-        voies.find(voie => voie._id === editingId)
+      const voie = voies.find(voie => voie._id === editingId)
+      return voie || numeros.find(numero => numero._id === editingId)
     }
   }, [editingId, numeros, voies])
 

diff --git a/contexts/draw.js b/contexts/draw.js
@@ -5,6 +5,7 @@ import BalDataContext from './bal-data'
 const DrawContext = React.createContext()
 
 export function DrawContextProvider(props) {
+  const [drawEnabled, setDrawEnabled] = useState(false)
   const [modeId, setModeId] = useState(null)
   const [hint, setHint] = useState(null)
   const [data, setData] = useState(null)
@@ -25,7 +26,7 @@ export function DrawContextProvider(props) {
   }, [data, setModeId])
 
   useEffect(() => {
-    if (editingItem) {
+    if (editingItem && editingItem.typeNumerotation === 'metric') {
       if (editingItem.lineVoie) {
         setData(editingItem.lineVoie)
         setModeId('editing')
@@ -35,9 +36,19 @@ export function DrawContextProvider(props) {
     }
   }, [editingItem])
 
+  useEffect(() => {
+    if (!drawEnabled) {
+      setData(null)
+      setModeId(null)
+    }
+  }, [drawEnabled])
+
   return (
     <DrawContext.Provider
       value={{
+        drawEnabled,
+        enableDraw: () => setDrawEnabled(true),
+        disableDraw: () => setDrawEnabled(false),
         modeId,
         setModeId,
         hint,

diff --git a/pages/bal/commune.js b/pages/bal/commune.js
@@ -24,9 +24,9 @@ const Commune = React.memo(({commune, defaultVoies}) => {
   const [toRemove, setToRemove] = useState(null)
 
   const {token} = useContext(TokenContext)
-  const {baseLocale} = useContext(BalDataContext)
 
   const {
+    baseLocale,
     voies,
     reloadVoies,
     editingId,

diff --git a/pages/bal/voie.js b/pages/bal/voie.js
@@ -17,7 +17,7 @@ import VoieEditor from '../../components/bal/voie-editor'
 import NumeroEditor from '../../components/bal/numero-editor'
 
 const Voie = React.memo(({voie, defaultNumeros}) => {
-  const [editedVoie, setEditedVoie] = useState(null)
+  const [editedVoie, setEditedVoie] = useState(voie)
   const [isEdited, setEdited] = useState(false)
   const [hovered, setHovered] = useState(false)
   const [isAdding, setIsAdding] = useState(false)
@@ -69,8 +69,6 @@ const Voie = React.memo(({voie, defaultNumeros}) => {
     await reloadVoies()
 
     setEditedVoie(editedVoie)
-
-    setEdited(false)
   }, [reloadVoies, token, voie])
 
   const onEnableAdding = useCallback(() => {
@@ -82,6 +80,11 @@ const Voie = React.memo(({voie, defaultNumeros}) => {
     setEditingId(idNumero)
   }, [setEditingId])
 
+  const onEnableVoieEditing = useCallback(() => {
+    setEditingId(voie._id)
+    setHovered(false)
+  }, [setEditingId, voie._id])
+
   const onEdit = useCallback(async ({numero, voie, suffixe, comment, positions}) => {
     await editNumero(editingId, {
       numero,
@@ -132,20 +135,17 @@ const Voie = React.memo(({voie, defaultNumeros}) => {
         background='tint1'
         padding={16}
       >
-        {isEdited ? (
+        {editingId === voie._id ? (
           <VoieEditor
             initialValue={{...currentVoie}}
             isEnabledComplement={Boolean(baseLocale.enableComplement)}
             onSubmit={onEditVoie}
-            onCancel={() => setEdited(false)}
+            onCancel={() => setEditingId(null)}
           />
         ) : (
           <Heading
             style={{cursor: hovered ? 'text' : 'default'}}
-            onClick={() => {
-              setEdited(true)
-              setHovered(false)
-            }}
+            onClick={onEnableVoieEditing}
             onMouseEnter={() => setHovered(true)}
             onMouseLeave={() => setHovered(false)}
           >
@@ -216,7 +216,7 @@ const Voie = React.memo(({voie, defaultNumeros}) => {
                 </Table.TextCell>
               </Table.Row>
             )}
-            {editingId ? (
+            {editingId && editingId !== voie._id ? (
               <Table.Row height='auto'>
                 <Table.Cell display='block' paddingY={12} background='tint1'>
                   <NumeroEditor