Update to React 19.0.0, fix hook refactoring bugs

ConorEB · ConorEB · commit fdefc3ccb4c4 · 2024-12-16T19:57:18.000-06:00
diff --git a/app/find/page.tsx b/app/find/page.tsx
@@ -8,17 +8,16 @@ import { Suspense, useEffect, useState } from 'react';
 import { useSatellite } from '@/hooks/useSatellite';
 import { usePermissions } from '@/hooks/usePermissions';
 import { useMotion } from '@/hooks/useMotion';
+import { useTracking } from '@/hooks/useTracking';
 
 import LocationError from '@/components/manualLocation';
 import Error from '@/components/error';
-
 import ManualLocation from '@/components/manualLocation';
 import DirectionGuide from '@/components/directionGuide';
 import Input from '@/components/ui/input';
 import Loader from '@/components/ui/loader';
 import PermissionRequest from '@/components/permissionRequest';
 import { formatDate } from '@/lib/utils';
-import { useTracking } from '@/hooks/useTracking';
 
 function FindSatellite() {
   // Query params for satellite ID
@@ -33,8 +32,7 @@ function FindSatellite() {
   const { satData, error: satDataError } = useSatellite(satelliteId);
   const { permissionGranted, requestPermission, error: permissionError } = usePermissions();
 
-  const { motionData, error: locationError, setManualLocation } = useMotion(permissionGranted);
-  if (locationError) { setShowManualLocation(true); } // if error with location fetch, show page to manually input location
+  const { motionData, error: locationError, setError: setLocationError, setManualLocation } = useMotion(permissionGranted);
 
   const { trackingStatus, satPosition } = useTracking(motionData, satData);
 
@@ -48,8 +46,8 @@ function FindSatellite() {
     return (
       <ManualLocation
         error={locationError}
+        setError={setLocationError}
         setManualLocation={setManualLocation}
-        setShowManualLocation={setShowManualLocation}
       />
     );
   }
@@ -111,7 +109,7 @@ function FindSatellite() {
         </div>
 
         <div className="mt-12 flex items-center justify-center gap-10">
-          <DirectionGuide satData={satData} />
+          <DirectionGuide trackingStatus={trackingStatus} />
         </div>
       </div>
     </div>
diff --git a/components/directionGuide.tsx b/components/directionGuide.tsx
@@ -1,11 +1,14 @@
-const DirectionGuide = ({ satData }: { satData: SatelliteData }) => {
+import { translateElevation } from "@/lib/utils";
+import { TrackingStatus } from "@/types/oritentation";
+
+const DirectionGuide = ({ trackingStatus }: { trackingStatus: TrackingStatus }) => {
   return (
     <>
       <div className="flex items-center justify-center">
         <div
           className='absolute w-28 h-28 z-20 transform -translate-x-1/2'
           style={{
-            transform: `rotate(${(satData.azimuthDifference - 55).toFixed(1)}deg) translateX(100%)`,
+            transform: `rotate(${(trackingStatus.azimuthDifference - 55).toFixed(1)}deg) translateX(100%)`,
           }}
         >
           <div className='flex items-center'>
@@ -35,9 +38,9 @@ const DirectionGuide = ({ satData }: { satData: SatelliteData }) => {
         <div className="border-2 border-dashed border-white/50 w-0 h-44 bg-transparent"></div>
         <div className='w-4 rounded-sm bg-gray-400 absolute h-[2px]'></div>
         <div
-          className={`w-7 rounded-sm ${Math.abs(satData.elevationDifference) < 15 ? 'bg-[#00ff73]' : 'bg-red-500'} absolute h-1`}
+          className={`w-7 rounded-sm ${Math.abs(trackingStatus.elevationDifference) < 15 ? 'bg-[#00ff73]' : 'bg-red-500'} absolute h-1`}
           style={{
-            translate: `0px ${calcEleveationTranslate(satData.elevationDifference).toFixed(0)}px`,
+            translate: `0px ${translateElevation(trackingStatus.elevationDifference).toFixed(0)}px`,
           }}
         ></div>
       </div>
@@ -46,10 +49,4 @@ const DirectionGuide = ({ satData }: { satData: SatelliteData }) => {
   );
 };
 
-const calcEleveationTranslate = (elevation: number) => {
-  if (elevation < 0) return (elevation / 1.4);
-  if (elevation > 0) return (elevation / 1.4);
-  return 0;
-}
-
 export default DirectionGuide;
diff --git a/components/manualLocation.tsx b/components/manualLocation.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function ManualLocation({ error, setShowManualLocation, setManualLocation }) {
+export default function ManualLocation({ error, setError }) {
       const [longitude, setLongitude] = useState<string | undefined>();
       const [latitude, setLatitude] = useState<string | undefined>();
     
@@ -18,7 +18,7 @@ export default function ManualLocation({ error, setShowManualLocation, setManual
                     className="mt-4 flex w-40 cursor-pointer items-center justify-center rounded-md border-2 border-white/50 bg-[#1fa95d] py-2 font-medium"
                     onClick={() => {
                         setManualLocation(parseFloat(latitude || '0'), parseFloat(longitude || '0'));
-                        setShowManualLocation(false);
+                        setError(null);
                     }}
                 >
                     Submit location
diff --git a/hooks/useMotion.ts b/hooks/useMotion.ts
@@ -1,7 +1,7 @@
 import { MotionData } from '@/types/oritentation';
 import { useState, useEffect } from 'react';
 
-export function useMotion(permissionGranted: boolean) {
+export function useMotion(motionPermissionGranted: boolean) {
     const [motionData, setMotionData] = useState<MotionData>({
         location: { latitude: 0, longitude: 0, altitude: 0 },
         gyroscope: { alpha: null, beta: null, gamma: null },
@@ -17,8 +17,10 @@ export function useMotion(permissionGranted: boolean) {
     };
 
     useEffect(() => {
-        if (!permissionGranted) return;
+        // Check if motion permission has been granted before continuing
+        if (!motionPermissionGranted) return;
 
+        // Receive device orientation event and update resulting motion data
         const handleDeviceOrientation = (event: DeviceOrientationEvent) => {
             const { alpha, beta, gamma, webkitCompassHeading } = event;
 
@@ -36,6 +38,9 @@ export function useMotion(permissionGranted: boolean) {
             }));
         };
 
+        // Fetch geolocation data with web API
+        // NOTE: Has built in permission request API
+        // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
         const fetchLocation = () => {
             navigator.geolocation.getCurrentPosition(
                 (position) => {
@@ -48,17 +53,16 @@ export function useMotion(permissionGranted: boolean) {
                 (error) => {
                     setLocationError(error.message);
                 },
-                { timeout: 10000, enableHighAccuracy: true, maximumAge: 0 }
+                { timeout: 7000, enableHighAccuracy: true, maximumAge: 0 }
             );
         };
 
-        window.addEventListener('deviceorientation', handleDeviceOrientation);
         fetchLocation();
-
+        window.addEventListener('deviceorientation', handleDeviceOrientation);
         return () => {
             window.removeEventListener('deviceorientation', handleDeviceOrientation);
         };
-    }, [permissionGranted]);
+    }, [motionPermissionGranted]);
 
-    return { motionData, error, setMotionData };
+    return { motionData, error, setError, setManualLocation };
 }
diff --git a/hooks/useSatellite.ts b/hooks/useSatellite.ts
@@ -13,31 +13,31 @@ export function useSatellite(satelliteId: string) {
     const [error, setError] = useState<string | null>(null);
 
     // Fetch TLE data from the API
-    const fetchSatelliteData = useCallback(async () => {
-        if (!satelliteId) return;
-
-        try {
-            const response = await fetch(`/api/satellite/${satelliteId}`);
-            if (!response.ok) setError('Failed to fetch satellite data.');
-
-            const data = await response.json();
-            const tleLines = data.tle.split('\r\n');
-            if (tleLines.length !== 2 || !data.info.satname) {
-                setError('Invalid TLE data.');
+    useEffect(() => {
+        const fetchSatelliteData = useCallback(async () => {
+            if (!satelliteId) return;
+
+            try {
+                const response = await fetch(`/api/satellite/${satelliteId}`);
+                if (!response.ok) setError('Failed to fetch satellite data.');
+
+                const data = await response.json();
+                const tleLines = data.tle.split('\r\n');
+                if (tleLines.length !== 2 || !data.info.satname) {
+                    setError('Invalid TLE data.');
+                }
+
+                setSatData({
+                    name: data.info.satname,
+                    tle: { line1: tleLines[0], line2: tleLines[1] }
+                });
+            } catch (err: any) {
+                setError(err.message);
             }
+        }, [satelliteId]);
 
-            setSatData({
-                name: data.info.satname,
-                tle: { line1: tleLines[0], line2: tleLines[1] }
-            });
-        } catch (err: any) {
-            setError(err.message);
-        }
-    }, [satelliteId]);
-
-    useEffect(() => {
         fetchSatelliteData();
-    }, [fetchSatelliteData]);
+    }, []);
 
     return { satData, error };
 }
diff --git a/lib/utils.ts b/lib/utils.ts
@@ -1,3 +1,10 @@
+/**
+ * Formats a given date into a string with the format 'MM/DD/YY, HH:MM'.
+ * If the date is null, it returns null.
+ *
+ * @param date - The date to format.
+ * @returns The formatted date string or null if the date is null.
+ */
 export function formatDate(date: Date | null): string | null {
     if (!date) return null;
 
@@ -10,6 +17,24 @@ export function formatDate(date: Date | null): string | null {
     });
 }
 
+/**
+ * Converts an angle from radians to degrees.
+ *
+ * @param radians - The angle in radians.
+ * @returns The angle in degrees.
+ */
 export const radiansToDegrees = (radians: number) => {
     return radians * (180 / Math.PI);
-};
+};
+
+/**
+ * Translates an elevation value to a valid pixel value to display on screen in the direction guide component.
+ *
+ * @param elevation - The elevation value to translate.
+ * @returns The translated elevation value (in correct pixel unit range)
+ */
+export const translateElevation = (elevation: number) => {
+    if (elevation < 0) return (elevation / 1.4);
+    if (elevation > 0) return (elevation / 1.4);
+    return 0;
+}
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@vercel/analytics": "^1.3.1",
     "next": "^15.1.0",
-    "react": "^18",
+    "react": "^19.0.0",
     "react-dom": "^18",
     "react-loader-spinner": "^6.1.6",
     "react-starfield-animation": "^1.0.1",
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
