Fix typescript any casts (#99)

* Fix ts any casts

* Fix mlmap anys

Author: jackpf

ui/Makefile

@@ -37,7 +37,7 @@ build-protos:
 	mkdir -p ./src/gen
 	protoc \
 		--plugin=protoc-gen-ts_proto=$(CURDIR)/node_modules/.bin/protoc-gen-ts_proto \
-		--ts_proto_out=esModuleInterop=true,outputServices=generic-definitions,outputClientImpl=false:./src/gen \
+		--ts_proto_out=esModuleInterop=true,outputServices=generic-definitions,outputClientImpl=false,useExactTypes=false:./src/gen \
 		--proto_path=../shared/src/main/protobuf \
 		../shared/src/main/protobuf/*.proto
 

ui/src/components/MLMap.tsx

@@ -3,8 +3,8 @@ import Map, {Layer, NavigationControl, Popup, Source} from "react-map-gl/maplibr
 import "maplibre-gl/dist/maplibre-gl.css";
 import {format, formatDistanceToNow} from "date-fns";
 import type {StoredLocation} from "../gen/common.ts";
-import {type MapGeoJSONFeature} from "maplibre-gl";
-import type {Point} from "geojson";
+import type {MapGeoJSONFeature, StyleSpecification} from "maplibre-gl";
+import type {FeatureCollection, Feature, Point, LineString} from "geojson";
 import {Segmented} from "antd";
 import {useLocalStorage} from "../hooks/use-local-storage.ts";
 import styles from "./MLMap.module.css";
@@ -41,14 +41,14 @@ export const MLMap: React.FC<MLMapProps> = ({history, selectedDeviceId, forceRec
         return () => clearInterval(interval);
     }, []);
 
-    const pointData = useMemo(() => {
+    const pointData: FeatureCollection<Point> = useMemo(() => {
         return {
             type: "FeatureCollection",
             features: history
                 .filter(h => !!h.location)
                 .slice(-POINT_LIMIT)
                 .map((h, index, locations) => ({
-                    type: "Feature",
+                    type: "Feature" as const,
                     properties: {
                         lat: h.location!.lat,
                         lon: h.location!.lon,
@@ -58,19 +58,19 @@ export const MLMap: React.FC<MLMapProps> = ({history, selectedDeviceId, forceRec
                         isLatest: index === locations.length - 1
                     },
                     geometry: {
-                        type: "Point",
+                        type: "Point" as const,
                         coordinates: [h.location!.lon, h.location!.lat]
                     }
                 }))
         };
     }, [history]);
 
-    const lineData = useMemo(() => {
+    const lineData: Feature<LineString> = useMemo(() => {
         return {
-            type: "Feature",
+            type: "Feature" as const,
             properties: {},
             geometry: {
-                type: "LineString",
+                type: "LineString" as const,
                 coordinates: history
                     .filter(h => !!h.location)
                     .map(h => [h.location!.lon, h.location!.lat])
@@ -130,7 +130,7 @@ export const MLMap: React.FC<MLMapProps> = ({history, selectedDeviceId, forceRec
                     zoom: DEFAULT_ZOOM
                 }}
                 style={{width: "100%", height: "100%"}}
-                mapStyle={mapUrl as any}
+                mapStyle={mapUrl as StyleSpecification | string}
                 interactiveLayerIds={["history-points"]}
                 cursor={cursor}
                 onMouseEnter={() => setCursor("pointer")}
@@ -154,18 +154,18 @@ export const MLMap: React.FC<MLMapProps> = ({history, selectedDeviceId, forceRec
                 <NavigationControl position="bottom-right"/>
 
                 {/* Line */}
-                <Source type="geojson" data={lineData as any} lineMetrics={true}>
-                    <Layer {...lineStyle(cutoffRatio) as any} />
+                <Source type="geojson" data={lineData} lineMetrics={true}>
+                    <Layer {...lineStyle(cutoffRatio)} />
                 </Source>
 
                 {/* Points */}
-                <Source type="geojson" data={pointData as any}>
-                    <Layer {...pointStyle as any} />
+                <Source type="geojson" data={pointData}>
+                    <Layer {...pointStyle} />
                 </Source>
 
                 {accuracyCircle && (
                     <Source id="accuracy-zone" type="geojson" data={accuracyCircle}>
-                        <Layer {...accuracyCircleStyle as any} />
+                        <Layer {...accuracyCircleStyle} />
                     </Source>
                 )}
 

ui/src/components/MLMapStyles.tsx

@@ -1,4 +1,5 @@
 import circle from "@turf/circle";
+import type {CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification} from "maplibre-gl";
 
 export const circlePoint = (lat: number, lon: number, accuracy: number) => {
     if (!accuracy || accuracy < 1) return null;
@@ -9,7 +10,7 @@ export const circlePoint = (lat: number, lon: number, accuracy: number) => {
     });
 };
 
-export const pointStyle = {
+export const pointStyle: Omit<CircleLayerSpecification, "source"> = {
     id: "history-points",
     type: "circle",
     paint: {
@@ -26,7 +27,7 @@ export const pointStyle = {
     }
 };
 
-export const accuracyCircleStyle = {
+export const accuracyCircleStyle: Omit<FillLayerSpecification, "source"> = {
     id: "accuracy-fill",
     type: "fill",
     paint: {
@@ -36,13 +37,13 @@ export const accuracyCircleStyle = {
     }
 };
 
-export const lineStyle = (cutoffRatio: number) => {
+export const lineStyle = (cutoffRatio: number): Omit<LineLayerSpecification, "source"> => {
     const COLOR_FADED = "rgba(0, 0, 255, 0.05)";
     const COLOR_TRANSITION = "rgba(0, 0, 255, 0.2)";
     const COLOR_SOLID = "rgba(0, 0, 255, 0.3)";
     const FADE_LENGTH = 0.1;
 
-    let gradientStops;
+    let gradientStops: (number | string)[];
 
     if (cutoffRatio <= 0) {
         // Full solid
@@ -84,5 +85,5 @@ export const lineStyle = (cutoffRatio: number) => {
                 ...gradientStops
             ]
         }
-    }
+    };
 };

ui/src/hooks/use-admin-client.ts

@@ -28,9 +28,10 @@ export function useAdminClient(refreshInterval: number) {
 
     const fetchLocations = useCallback(async () => {
         try {
+            if (selectedDeviceId == null) return;
             const response: ListLocationsResponse = await adminClient.listLocations({
                 deviceId: selectedDeviceId
-            } as any);
+            });
             console.log("ListLocationsResponse", response);
             setHistory(response.locations);
         } catch (e) {
@@ -42,7 +43,7 @@ export function useAdminClient(refreshInterval: number) {
     const approveDevice = async (deviceId: string) => {
         try {
             await adminClient.approveDevice(
-                {deviceId: deviceId} as any,
+                {deviceId: deviceId},
             );
             // Refresh list immediately to show the checkmark/status change
             await fetchDevices();
@@ -55,7 +56,7 @@ export function useAdminClient(refreshInterval: number) {
     const deleteDevice = async (deviceId: string) => {
         try {
             await adminClient.deleteDevice(
-                {deviceId: deviceId} as any,
+                {deviceId: deviceId},
             );
             // Refresh list immediately to show the checkmark/status change
             await fetchDevices();
@@ -68,7 +69,7 @@ export function useAdminClient(refreshInterval: number) {
     const sendNotification = useCallback(async (deviceId: string, notificationType: NotificationType) => {
         try {
             return await adminClient.sendNotification(
-                {deviceId: deviceId, notificationType: notificationType} as any,
+                {deviceId: deviceId, notificationType: notificationType},
             );
         } catch (e) {
             console.error(e);

ui/src/hooks/use-login.ts

@@ -38,7 +38,7 @@ export function useLogin() {
         try {
             const response: LoginResponse = await adminClient.login({
                 password: password
-            } as any);
+            });
 
             updateAndStoreToken(response.token, null);
         } catch (e) {