Fix window white space when toggling map regulatory zones

MTES-MCT · Nov 30, 2023 · 195d2ea · 195d2ea
1 parent 9ec02bb
commit 195d2ea
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 76 deletions.
diff --git a/frontend/src/domain/shared_slices/Regulatory.ts b/frontend/src/domain/shared_slices/Regulatory.ts
@@ -112,16 +112,16 @@ const regulatorySlice = createSlice({
      */
     addRegulatoryZonesToMyLayers(state, action) {
       const myRegulatoryLayers = { ...state.selectedRegulatoryLayers }
+      // TODO Use Redux Persist.
       const myRegulatoryLayerIds = getLocalStorageState([], SELECTED_REG_ZONES_IDS_LOCAL_STORAGE_KEY)
 
+      // TODO Make that functional.
       action.payload.forEach(regulatoryZone => {
         const myTopicRegulatoryLayer = myRegulatoryLayers[regulatoryZone.topic]
 
         if (!myTopicRegulatoryLayer || !myTopicRegulatoryLayer.length) {
-          // TODO Make that functional.
           myRegulatoryLayers[regulatoryZone.topic] = [regulatoryZone]
         } else if (myTopicRegulatoryLayer && !myTopicRegulatoryLayer.some(zone => zone.id === regulatoryZone.id)) {
-          // TODO Make that functional.
           myRegulatoryLayers[regulatoryZone.topic] = myTopicRegulatoryLayer.concat(regulatoryZone)
         }
 

diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/RegulatoryTopic.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { RegulatoryZone } from './RegulatoryZone'
@@ -77,12 +77,6 @@ function UnmemoizedRegulatoryTopic({
   const onMouseEnter = () => !isOver && setIsOver(true)
   const onMouseLeave = () => isOver && setIsOver(false)
 
-  useLayoutEffect(() => {
-    if (ref.current && regulatoryTopicsOpened[regulatoryTopicsOpened.length - 1] === regulatoryTopic) {
-      ref.current.scrollIntoView({ block: 'start', inline: 'nearest' })
-    }
-  }, [regulatoryTopic, regulatoryTopicsOpened])
-
   useEffect(() => {
     if (showedLayers && regulatoryTopic) {
       const topicFoundInShowedLayers = showedLayers.some(layer => layer.topic === regulatoryTopic)
@@ -221,32 +215,32 @@ const Text = styled.span`
 `
 
 const Name = styled.span`
-  line-height: 2.7em;
+  display: inline-block;
   font-size: 13px;
+  line-height: 2.7em;
+  overflow: hidden;
   padding: 2px 10px;
-  width: 79%;
-  display: inline-block;
   text-overflow: ellipsis;
-  overflow: hidden;
+  width: 79%;
 `
 
 const ZonesNumber = styled.span`
-  font-size: 11px;
   color: ${COLORS.slateGray};
+  font-size: 11px;
   margin-right: 10px;
 `
 
 const Zone = styled.span<{
   $isLastItem: boolean
   $isOpen: boolean
 }>`
-  width: 100%;
+  align-items: center;
+  border-bottom: 1px solid ${p => (!p.$isOpen && p.$isLastItem ? p.theme.color.white : p.theme.color.lightGray)};
   display: flex;
+  font-weight: 500;
   justify-content: space-between;
-  align-items: center;
   user-select: none;
-  font-weight: 500;
-  ${p => (!p.$isOpen && p.$isLastItem ? null : `border-bottom: 1px solid ${p.theme.color.lightGray};`)}
+  width: 100%;
 
   :hover {
     background: ${p => p.theme.color.blueGray25};
@@ -263,20 +257,18 @@ const List = styled.div<{
 `
 
 const Row = styled.li`
-  padding: 0px 5px 0px 0px;
-  margin: 0;
+  cursor: pointer;
+  display: block;
   font-size: 13px;
-  text-align: left;
+  line-height: 1.9em;
   list-style-type: none;
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden !important;
-  cursor: pointer;
-
   margin: 0;
-  line-height: 1.9em;
-  display: block;
+  overflow: hidden !important;
+  padding: 0px 5px 0px 0px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
 `
 
 export const RegulatoryTopic = memo(UnmemoizedRegulatoryTopic)
diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/index.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/index.tsx
@@ -30,7 +30,7 @@ export function RegulatoryZones({
   const dispatch = useMainAppDispatch()
   const { setLayersSideBarOpenedLayerType } = layer[namespace].actions
 
-  const { selectedRegulatoryLayers } = useMainAppSelector(state => state.regulatory)
+  const selectedRegulatoryLayers = useMainAppSelector(state => state.regulatory.selectedRegulatoryLayers)
   const advancedSearchIsOpen = useMainAppSelector(state => state.regulatoryLayerSearch.advancedSearchIsOpen)
 
   const { layersSidebarOpenedLayerType } = useMainAppSelector(state => state.layer)
@@ -100,27 +100,23 @@ export function RegulatoryZones({
       >
         Mes zones réglementaires <ChevronIcon $isOpen={showRegulatoryLayers} />
       </RegulatoryLayersTitle>
-      {selectedRegulatoryLayers && (
+      {selectedRegulatoryLayers && isOpen && (
         <RegulatoryLayersList $advancedSearchIsOpen={advancedSearchIsOpen} className="smooth-scroll">
-          {isOpen && (
-            <>
-              {Object.keys(selectedRegulatoryLayers).length > 0 ? (
-                Object.keys(selectedRegulatoryLayers).map((regulatoryTopic, index) => (
-                  <RegulatoryTopic
-                    key={regulatoryTopic}
-                    allowRemoveZone
-                    isEditable={false}
-                    isLastItem={Object.keys(selectedRegulatoryLayers).length === index + 1}
-                    onRemoveById={removeById}
-                    onRemoveByTopic={removeByTopic}
-                    regulatoryTopic={regulatoryTopic}
-                    regulatoryZones={selectedRegulatoryLayers[regulatoryTopic]}
-                  />
-                ))
-              ) : (
-                <NoLayerSelected>Aucune zone sélectionnée</NoLayerSelected>
-              )}
-            </>
+          {Object.keys(selectedRegulatoryLayers).length > 0 ? (
+            Object.keys(selectedRegulatoryLayers).map((regulatoryTopic, index) => (
+              <RegulatoryTopic
+                key={regulatoryTopic}
+                allowRemoveZone
+                isEditable={false}
+                isLastItem={Object.keys(selectedRegulatoryLayers).length === index + 1}
+                onRemoveById={removeById}
+                onRemoveByTopic={removeByTopic}
+                regulatoryTopic={regulatoryTopic}
+                regulatoryZones={selectedRegulatoryLayers[regulatoryTopic]}
+              />
+            ))
+          ) : (
+            <NoLayerSelected>Aucune zone sélectionnée</NoLayerSelected>
           )}
         </RegulatoryLayersList>
       )}
@@ -138,16 +134,21 @@ const RegulatoryLayersTitle = styled.div<{
   $regulatoryLayersAddedToMySelection: boolean
   $showRegulatoryLayers: boolean
 }>`
-  height: 30px;
-  padding-top: 5px;
+  animation: ${p => (p.$regulatoryLayersAddedToMySelection ? 'blink' : '')} 0.3s ease forwards;
+  background: ${p => p.theme.color.charcoal};
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
   border-bottom-left-radius: ${p => (p.$showRegulatoryLayers ? '0' : '2px')};
   border-bottom-right-radius: ${p => (p.$showRegulatoryLayers ? '0' : '2px')};
-  background: ${p => p.theme.color.charcoal};
-
-  animation: ${p => (p.$regulatoryLayersAddedToMySelection ? 'blink' : '')} 0.3s ease forwards;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  color: ${p => p.theme.color.gainsboro};
+  cursor: pointer;
+  font-size: 16px;
+  height: 30px;
+  padding-left: 20px;
+  padding-top: 5px;
+  text-align: left;
+  user-select: none;
 
   @keyframes blink {
     0% {
@@ -170,13 +171,6 @@ const RegulatoryLayersTitle = styled.div<{
     }
   }
 
-  color: ${p => p.theme.color.gainsboro};
-  font-size: 16px;
-  cursor: pointer;
-  text-align: left;
-  padding-left: 20px;
-  user-select: none;
-
   > div {
     float: right;
     margin-top: 4px;

diff --git a/...ures/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx b/...ures/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx
@@ -23,7 +23,7 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
 }: RegulatoryLayerSearchResultTopicProps) {
   const dispatch = useMainAppDispatch()
 
-  const regulatory = useMainAppSelector(state => state.regulatory)
+  const selectedRegulatoryLayers = useMainAppSelector(state => state.regulatory.selectedRegulatoryLayers)
   const regulatoryLayerSearch = useMainAppSelector(state => state.regulatoryLayerSearch)
 
   const { regulatoryZonesChecked, searchResultZones, searchResultZonesLength } = useMemo<{
@@ -63,21 +63,21 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
   }, [regulatoryLayerSearch, regulatoryLayerLawType, regulatoryLayerTopic])
 
   const numberOfTotalZones = useMemo(() => {
-    if (!regulatory.selectedRegulatoryLayers || !regulatoryLayerLawType || !regulatoryLayerTopic) {
+    if (!selectedRegulatoryLayers || !regulatoryLayerLawType || !regulatoryLayerTopic) {
       return 0
     }
 
-    const regulatoryLayer = regulatory.selectedRegulatoryLayers[regulatoryLayerLawType]
+    const regulatoryLayer = selectedRegulatoryLayers[regulatoryLayerLawType]
     if (!regulatoryLayer) {
       return 0
     }
 
     return regulatoryLayer[regulatoryLayerTopic]?.length || 0
-  }, [regulatory, regulatoryLayerLawType, regulatoryLayerTopic])
+  }, [regulatoryLayerLawType, regulatoryLayerTopic, selectedRegulatoryLayers])
 
   const allZonesAreAlreadySelected =
-    regulatory.selectedRegulatoryLayers && regulatoryLayerTopic
-      ? regulatory.selectedRegulatoryLayers[regulatoryLayerTopic]?.length === searchResultZonesLength
+    selectedRegulatoryLayers && regulatoryLayerTopic
+      ? selectedRegulatoryLayers[regulatoryLayerTopic]?.length === searchResultZonesLength
       : false
 
   const [zonesAreOpen, setZonesAreOpen] = useState(false)
@@ -128,9 +128,9 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
             <Checkbox
               key={regulatoryLayerTopic}
               disabled={
-                (regulatory.selectedRegulatoryLayers &&
+                (selectedRegulatoryLayers &&
                   regulatoryLayerTopic &&
-                  regulatory.selectedRegulatoryLayers[regulatoryLayerTopic]?.length === searchResultZonesLength) ||
+                  selectedRegulatoryLayers[regulatoryLayerTopic]?.length === searchResultZonesLength) ||
                 false
               }
               title={allZonesAreAlreadySelected ? 'zones déjà ajoutées à mes zones réglementaires' : ''}

diff --git a/...tures/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx b/...tures/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultZone.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Checkbox, CheckboxGroup } from 'rsuite'
 import styled, { css } from 'styled-components'
 
@@ -24,8 +24,9 @@ export function RegulatoryLayerSearchResultZone({ isOpen, regulatoryZone }: Regu
   const zoneIsChecked = useMainAppSelector(
     state => !!state.regulatoryLayerSearch.regulatoryZonesChecked?.find(zone => zone.id === regulatoryZone.id)
   )
-  const zoneIsAlreadySelected = useMainAppSelector(state => {
-    const { selectedRegulatoryLayers } = state.regulatory
+  const selectedRegulatoryLayers = useMainAppSelector(state => state.regulatory.selectedRegulatoryLayers)
+
+  const zoneIsAlreadySelected = useMemo(() => {
     if (!selectedRegulatoryLayers) {
       return false
     }
@@ -36,7 +37,7 @@ export function RegulatoryLayerSearchResultZone({ isOpen, regulatoryZone }: Regu
     }
 
     return selectedRegulatoryLayersZone.find(zone => zone.id === regulatoryZone.id)
-  })
+  }, [regulatoryZone.id, regulatoryZone.topic, selectedRegulatoryLayers])
 
   const zoneStyle = getRegulatoryLayerStyle(undefined, regulatoryZone)
   const [metadataIsShown, setMetadataIsShown] = useState(false)