VisibilitySensor was causing unwanted destroy

src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx

@@ -1,11 +1,12 @@
 import { MapsManagerService } from "renderer/services/maps-manager.service"
 import { BSVersion } from "shared/bs-version.interface"
 import VisibilitySensor from "react-visibility-sensor"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface"
 import { Subscription } from "rxjs"
 import { MapItem, MapItemProps, ParsedMapDiff } from "./map-item.component"
 import { BsvMapCharacteristic, BsvMapDifficultyType } from "shared/models/maps/beat-saver.model"
+import { useInView } from "framer-motion"
 
 type Props = {
     version: BSVersion,
@@ -16,29 +17,45 @@ export function LocalMapsListPanel({version, className} : Props) {
 
     const mapsManager = MapsManagerService.getInstance();
 
-    const [isVisible, setIsVisible] = useState(false);
+    const ref = useRef()
+    const isVisible = useInView(ref, {once: true});
     const [maps, setMaps] = useState([] as BsmLocalMap[]);
 
     useEffect(() => {
 
         const subs: Subscription[] = [];
 
-        if(isVisible && !maps?.length){
+        if(isVisible){
             subs.push(mapsManager.getMaps(version).subscribe(localMaps => setMaps(() => [...localMaps])));
         }
     
-        return () => { subs.forEach(s => s.unsubscribe()); }
-    }, [isVisible])
+        return () => {
+            setMaps(() => []);
+            console.log("DESTORYED");
+            subs.forEach(s => s.unsubscribe());
+        }
+    }, [isVisible, version])
 
     const extractMapDiffs = (map: BsmLocalMap): Map<BsvMapCharacteristic, ParsedMapDiff[]> => {
         const res = new Map<BsvMapCharacteristic, ParsedMapDiff[]>();
+        if(map.bsaverInfo?.versions[0]?.diffs){
+            map.bsaverInfo.versions[0].diffs.forEach(diff => {
+                const arr = res.get(diff.characteristic) || [];
+                const diffName = map.rawInfo._difficultyBeatmapSets.find(set => set._beatmapCharacteristicName === diff.characteristic)._difficultyBeatmaps.find(rawDiff => rawDiff._difficulty === diff.difficulty)?._customData?._difficultyLabel || diff.difficulty
+                arr.push({name: diffName, type: diff.difficulty, stars: diff.stars});
+                res.set(diff.characteristic, arr);
+            });
+            return res;
+        }
+
         map.rawInfo._difficultyBeatmapSets.forEach(set => {
             set._difficultyBeatmaps.forEach(diff => {
                 const arr = res.get(set._beatmapCharacteristicName) || [];
                 arr.push({name: diff._customData?._difficultyLabel || diff._difficulty, type: diff._difficulty, stars: null});
                 res.set(set._beatmapCharacteristicName, arr);
-            })
-        })
+            });
+        });
+
         return res;
     }
 
@@ -54,16 +71,14 @@ export function LocalMapsListPanel({version, className} : Props) {
             songAutor={map.rawInfo._songAuthorName}
             bpm={map.rawInfo._beatsPerMinute}
             duration={map.bsaverInfo?.metadata?.duration} 
-            diffs={extractMapDiffs(map)} mapId={map.bsaverInfo?.id} qualified={null} ranked={null} autorId={map.bsaverInfo?.uploader?.id} likes={map.bsaverInfo?.stats?.upvotes} createdAt={map.bsaverInfo?.createdAt}
+            diffs={extractMapDiffs(map)} mapId={map.bsaverInfo?.id} qualified={null} ranked={map.bsaverInfo?.ranked} autorId={map.bsaverInfo?.uploader?.id} likes={map.bsaverInfo?.stats?.upvotes} createdAt={map.bsaverInfo?.createdAt}
             onDelete={() => {}}
         />;
     }
 
     return (
-        <VisibilitySensor onChange={setIsVisible}>
-            <ul className={className}>
-                {maps.map(map => renderMapItem(map))}
-            </ul>
-        </VisibilitySensor>
+        <ul ref={ref} className={className}>
+            {maps.map(map => renderMapItem(map))}
+        </ul>
     )
 }