push 10 year fixes

Author: corwintines

app/[locale]/10years/_components/TenYearGlobe.tsx

@@ -5,6 +5,7 @@ import { useTheme } from "next-themes"
 import Globe from "react-globe.gl"
 import { type GlobeMethods } from "react-globe.gl"
 import * as THREE from "three"
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
 
 import Link from "@/components/ui/Link"
 
@@ -29,6 +30,14 @@ type CountryFeature = {
   }
 }
 
+// Extend OrbitControls type to include _sphericalDelta
+interface ExtendedOrbitControls extends OrbitControls {
+  _sphericalDelta?: {
+    theta: number
+    phi: number
+  }
+}
+
 const TenYearGlobe = ({ events }: { events: EventData[] }) => {
   const globeRef = useRef<GlobeMethods>()
   const globeContainerRef = useRef<HTMLDivElement>(null)
@@ -71,10 +80,11 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
 
   useEffect(() => {
     if (globeRef.current) {
-      globeRef.current.controls().autoRotate = true
-      globeRef.current.controls().enablePan = false
-      globeRef.current.controls().enableZoom = false
-      globeRef.current.controls().autoRotateSpeed = 2.0
+      const controls = globeRef.current.controls() as ExtendedOrbitControls
+      controls.autoRotate = true
+      controls.enablePan = false
+      controls.enableZoom = false
+      controls.autoRotateSpeed = 2.0
       globeRef.current.pointOfView({ lat: 0, lng: 0, altitude: 1.8 })
 
       const ambientLight = new THREE.AmbientLight(0xffffff, 1)
@@ -165,10 +175,10 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
             setTooltipPos(coords)
           }
           // Stop rotation immediately
-          const controls = globeRef.current.controls()
+          const controls = globeRef.current.controls() as ExtendedOrbitControls
           controls.autoRotate = false
           if ("autoRotateSpeed" in controls) controls.autoRotateSpeed = 0
-          if ("_sphericalDelta" in controls && controls._sphericalDelta) {
+          if (controls._sphericalDelta) {
             controls._sphericalDelta.theta = 0
             controls._sphericalDelta.phi = 0
           }
@@ -181,18 +191,19 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
             }
           }, 100)
           if (globeRef.current) {
-            const controls = globeRef.current.controls()
+            const controls =
+              globeRef.current.controls() as ExtendedOrbitControls
             controls.autoRotate = true
             if ("autoRotateSpeed" in controls) controls.autoRotateSpeed = 2.0
           }
         }
       }}
       onPointClick={() => {
         if (globeRef.current) {
-          const controls = globeRef.current.controls()
+          const controls = globeRef.current.controls() as ExtendedOrbitControls
           controls.autoRotate = false
           if ("autoRotateSpeed" in controls) controls.autoRotateSpeed = 0
-          if ("_sphericalDelta" in controls && controls._sphericalDelta) {
+          if (controls._sphericalDelta) {
             controls._sphericalDelta.theta = 0
             controls._sphericalDelta.phi = 0
           }

app/[locale]/10years/page.tsx

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

package.json

@@ -51,6 +51,7 @@
     "@socialgouv/matomo-next": "^1.8.0",
     "@tanstack/react-query": "^5.66.7",
     "@tanstack/react-table": "^8.19.3",
+    "@types/three": "^0.177.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.0",
@@ -87,6 +88,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.177.0",
     "usehooks-ts": "^3.1.0",
     "vaul": "^1.0.0",
     "viem": "^2.23.3",