Reset selected state of a ship when sidebar is closed

Author: lenaghub

src/components/MlIconLayer/MlIconLayer.js

@@ -35,6 +35,8 @@ const MlIconLayer = ({
   setSidebarInfo,
   showMovingVessels,
   showNotMovingVessels,
+  selectedVessel,
+  setSelectedVessel,
   ...props
 }) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
@@ -53,7 +55,6 @@ const MlIconLayer = ({
   const rawDataRef = useRef([]);
   const [data, setData] = useState([]);
 
-  const [selectedVessel, setSelectedVessel] = useState(null);
   const [hoverInfo, setHoverInfo] = useState({});
   const [vesselInfo, setVesselInfo] = useState();
 

src/components/MlIconLayer/MlIconLayer.stories.js

@@ -123,6 +123,7 @@ const CatalogueSidebar = ({ openSidebar, setOpenSidebar }) => {
 
   const [showMovingVessels, setShowMovingvessels] = useState(true);
   const [showNotMovingVessels, setShowNotMovingVessels] = useState(true);
+  const [selectedVessel, setSelectedVessel] = useState(null);
 
   const dataUrl = useMemo(
     () =>
@@ -157,6 +158,7 @@ const CatalogueSidebar = ({ openSidebar, setOpenSidebar }) => {
   useEffect(() => {
     if (!openSidebar) {
       resetSidebarInfo();
+      setSelectedVessel(null);
     }
   }, [openSidebar]);
 
@@ -207,6 +209,8 @@ const CatalogueSidebar = ({ openSidebar, setOpenSidebar }) => {
           setSidebarInfo={setSidebarInfo}
           showMovingVessels={showMovingVessels}
           showNotMovingVessels={showNotMovingVessels}
+          selectedVessel={selectedVessel}
+          setSelectedVessel={setSelectedVessel}
         />
       </SimpleDataProvider>