fix(#1290383): correction of returns

Elastic-Suite · Oct 28, 2024 · 06e3fa7 · 06e3fa7
1 parent 73d8313
commit 06e3fa7
Showing 1 changed file with 44 additions and 41 deletions.
diff --git a/front/example-app/src/components/Settings/Settings.tsx b/front/example-app/src/components/Settings/Settings.tsx
@@ -10,21 +10,23 @@ import {
 import SettingsIcon from '@mui/icons-material/Settings'
 import React, {
   FormEvent,
+  MouseEvent,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
+
 import { settingsContext } from 'src/contexts'
 
 function Settings(): JSX.Element {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const formRef = useRef<HTMLFormElement>(null)
-  const [open, setOpen] = useState<boolean>(false)
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl])
   const popperRef = useRef<HTMLDivElement>(null)
-  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
+  const handleClick = (event: MouseEvent<HTMLElement>): void => {
     setAnchorEl(anchorEl ? null : event.currentTarget)
-    setOpen((curr) => !curr)
   }
 
   const { longitude, latitude, setLatitude, setLongitude } =
@@ -37,34 +39,27 @@ function Settings(): JSX.Element {
     const { latitude, longitude } = Object.fromEntries(
       new FormData(formRef.current).entries()
     )
+    setLatitude(latitude.toString())
+    setLongitude(longitude.toString())
     if (latitude && longitude) {
-      setLatitude(latitude.toString())
-      setLongitude(longitude.toString())
-      setOpen(false)
       setAnchorEl(null)
     }
   }
 
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent): void {
+    function handleClickOutside(event: globalThis.MouseEvent): void {
       if (
         popperRef.current &&
         !popperRef.current.contains(event.target as Node) &&
         !anchorEl?.contains(event.target as Node)
       ) {
-        setOpen(false)
         setAnchorEl(null)
       }
     }
 
     if (open) {
       document.addEventListener('mousedown', handleClickOutside)
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
     }
   }, [open, anchorEl])
 
@@ -75,6 +70,12 @@ function Settings(): JSX.Element {
     gap: theme.spacing(2),
   }))
 
+  const Row = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+  }))
+
   return (
     <>
       <IconButton onClick={handleClick} sx={{ marginLeft: '20px' }}>
@@ -94,32 +95,34 @@ function Settings(): JSX.Element {
           <Fade {...TransitionProps} timeout={350}>
             <Paper>
               <CutomForm ref={formRef} onSubmit={handleSubmit}>
-                <TextField
-                  id="outlined-basic"
-                  label="Latitude"
-                  variant="outlined"
-                  name="latitude"
-                  type="number"
-                  defaultValue={latitude}
-                  inputProps={{
-                    step: '0.000001',
-                    min: -90,
-                    max: 90,
-                  }}
-                />
-                <TextField
-                  id="outlined-basic"
-                  label="Longitude"
-                  variant="outlined"
-                  type="number"
-                  name="longitude"
-                  defaultValue={longitude}
-                  inputProps={{
-                    step: '0.000001',
-                    min: -180,
-                    max: 180,
-                  }}
-                />
+                <Row>
+                  <TextField
+                    id="outlined-basic"
+                    label="Latitude"
+                    variant="outlined"
+                    name="latitude"
+                    type="number"
+                    defaultValue={latitude}
+                    inputProps={{
+                      step: '0.000001',
+                      min: -90,
+                      max: 90,
+                    }}
+                  />
+                  <TextField
+                    id="outlined-basic"
+                    label="Longitude"
+                    variant="outlined"
+                    type="number"
+                    name="longitude"
+                    defaultValue={longitude}
+                    inputProps={{
+                      step: '0.000001',
+                      min: -180,
+                      max: 180,
+                    }}
+                  />
+                </Row>
 
                 <Button type="submit" variant="outlined">
                   Appliquer