more type safety

Author: dominikschroeder

.vscode/tasks.json

@@ -0,0 +1,19 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "eslint",
+      "problemMatcher": ["$eslint-stylish"],
+      "label": "eslint: lint whole folder"
+    },
+    {
+      "label": "ESLint",
+      "type": "shell",
+      "problemMatcher": "$eslint-stylish",
+      "command": "pnpm lint",
+      "windows": {
+        "command": "pnpm lint"
+      }
+    }
+  ]
+}

src/app/layout.tsx

@@ -12,8 +12,6 @@ import { getUser, getAccount } from '~/server/db/actions';
 import type { InitialAuth } from '~/store/auth';
 import { Toaster } from '~/components/ui/toaster';
 import { ToastManager } from '~/components/providers/toast';
-import { cn } from '~/lib/utils';
-import { headers } from 'next/headers';
 
 export const metadata = {
   title: 'ActivityMap',

src/app/stats/[name]/layout.tsx

@@ -35,18 +35,16 @@ const TabsLinkTrigger: React.FC<{
   children: React.ReactNode;
   className?: string;
 }> = ({ href, children, className }) => (
-  <TabsTrigger value={href} asChild className={className ? className : ''}>
+  <TabsTrigger value={href} asChild className={className ?? ''}>
     <Link href={href}>{children}</Link>
   </TabsTrigger>
 );
 
 export default function Stats({ children }: { children: React.ReactNode }) {
-  const { settingsOpen, setSettingsOpen, activeTab, setActiveTab } = useStore(
+  const { settingsOpen, setSettingsOpen } = useStore(
     useShallow((state) => ({
       settingsOpen: state.settingsOpen,
       setSettingsOpen: state.setSettingsOpen,
-      setActiveTab: state.setActiveTab,
-      activeTab: state.activeTab,
     })),
   );
 

src/components/map/DownloadControl.tsx

@@ -39,7 +39,7 @@ export function Download() {
       container: container,
       center: map.current.getCenter(),
       zoom: map.current.getZoom(),
-      style: map.current.getStyle(),
+      style: map.current.getStyle() ?? undefined,
       bearing: map.current.getBearing(),
       pitch: map.current.getPitch(),
       interactive: false,

src/components/map/Overlay.tsx

@@ -5,7 +5,7 @@ import {
   type IControl,
   useControl,
 } from 'react-map-gl/mapbox';
-
+import { type Map as MapboxMap } from 'mapbox-gl';
 type Config = {
   position: ControlPosition;
   redraw?: () => void;
@@ -69,7 +69,7 @@ const Overlay = ({ position, children }: OverlayProps) => {
   const elem = ctrl.getElement();
   if (map === null || elem === null) return;
 
-  return createPortal(cloneElement(children, { map }), elem);
+  return createPortal(cloneElement(children), elem);
 };
 
 export default memo(Overlay);

src/components/map/Photo.tsx

@@ -25,9 +25,8 @@ export default function PhotoLayer() {
             longitude={photo.location![1]}
             latitude={photo.location![0]}
             key={photo.unique_id}
-            zoom={position.zoom}
-            urls={photo.urls}
-            sizes={photo.sizes}
+            urls={photo.urls ?? {}}
+            sizes={photo.sizes ?? {}}
             activity_name={photo.activity_name!}
             activity_id={photo.activity_id}
             caption={photo.caption ?? undefined}
@@ -45,16 +44,14 @@ function PhotoMarker({
   activity_name,
   activity_id,
   caption,
-  zoom,
 }: {
   urls: Record<number, string>;
   sizes: Record<number, [number, number]>;
-  longitude: number;
-  latitude: number;
+  longitude?: number;
+  latitude?: number;
   activity_name: string;
   activity_id: number;
   caption?: string;
-  zoom: number;
 }) {
   const photoUrl = Object.values(urls)[0];
   const [hover, setHover] = useState(false);
@@ -64,27 +61,30 @@ function PhotoMarker({
   }));
 
   return (
-    <Marker
-      longitude={longitude}
-      latitude={latitude}
-      anchor="center"
-      style={{ zIndex: hover ? 3 : 2, cursor: 'pointer' }}
-      onClick={(e) => {
-        e.originalEvent.stopPropagation();
-        setSelected([activity_id]);
-      }}
-    >
-      <Avatar
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-        className="size-8 border-2 border-white transition-all hover:size-32 overflow-auto"
+    longitude &&
+    latitude && (
+      <Marker
+        longitude={longitude}
+        latitude={latitude}
+        anchor="center"
+        style={{ zIndex: hover ? 3 : 2, cursor: 'pointer' }}
+        onClick={(e) => {
+          e.originalEvent.stopPropagation();
+          setSelected([activity_id]);
+        }}
       >
-        <AvatarImage
-          src={photoUrl}
-          alt={caption ?? activity_name}
-          className="w-full h-full object-cover"
-        />
-      </Avatar>
-    </Marker>
+        <Avatar
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+          className="size-8 border-2 border-white transition-all hover:size-32 overflow-auto"
+        >
+          <AvatarImage
+            src={photoUrl}
+            alt={caption ?? activity_name}
+            className="w-full h-full object-cover"
+          />
+        </Avatar>
+      </Marker>
+    )
   );
 }

src/components/providers/auth.tsx

@@ -3,8 +3,6 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useShallowStore } from '~/store';
-import type { Session } from 'next-auth';
-import type { User, Account } from '~/server/db/schema';
 import type { InitialAuth } from '~/store/auth';
 
 export function AuthProvider({

src/components/sidebar/Sidebar.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { type ComponentType } from 'react';
 import { useEffect } from 'react';
 
-import { type LucideProps, MoreHorizontal } from 'lucide-react';
+import { MoreHorizontal } from 'lucide-react';
 
 import { useShallowStore } from '~/store';
 
@@ -43,17 +42,6 @@ import { cn } from '~/lib/utils';
 import { binaryFilters, inequalityFilters } from '~/settings/filter';
 import { Checkbox } from '../ui/checkbox';
 import { type SportType } from '~/server/db/schema';
-import { type CheckedState } from '@radix-ui/react-checkbox';
-
-type DropdownProps = {
-  title: string;
-  values: Record<SportType, CheckedState>;
-  Icon: ComponentType<LucideProps>;
-  color: string;
-  onToggle: () => void;
-  onChange: (value: SportType) => void;
-  active: boolean;
-};
 
 export function CategoryFilter() {
   const { sportType, sportGroup, setSportGroup, setSportType } =
@@ -69,6 +57,19 @@ export function CategoryFilter() {
   );
 
   useEffect(() => {
+    const doSingleClickThing = () => {
+      if (key) setSportGroup((group) => ({ ...group, [key]: !group[key] }));
+    };
+
+    const doDoubleClickThing = () => {
+      if (key)
+        setSportGroup(
+          (group) =>
+            Object.fromEntries(
+              Object.keys(group).map((k) => [k, k === key]),
+            ) as Record<keyof typeof categorySettings, boolean>,
+        );
+    };
     let singleClickTimer: NodeJS.Timeout;
     if (clicks === 1) {
       singleClickTimer = setTimeout(function () {
@@ -80,21 +81,7 @@ export function CategoryFilter() {
       setClicks(0);
     }
     return () => clearTimeout(singleClickTimer);
-  }, [clicks]);
-
-  const doSingleClickThing = () => {
-    if (key) setSportGroup((group) => ({ ...group, [key]: !group[key] }));
-  };
-
-  const doDoubleClickThing = () => {
-    if (key)
-      setSportGroup(
-        (group) =>
-          Object.fromEntries(
-            Object.keys(group).map((k) => [k, k === key]),
-          ) as Record<keyof typeof categorySettings, boolean>,
-      );
-  };
+  }, [clicks, key, setSportGroup]);
 
   return (
     <SidebarMenu>
@@ -184,7 +171,7 @@ export function InequalityFilter({
       ...prev,
       [name]: input === '' ? undefined : { value: transformed, operator },
     }));
-  }, [operator, value, input, name]);
+  }, [operator, value, input, name, setValues]);
 
   return (
     <SidebarMenuItem>
@@ -279,7 +266,7 @@ export function BinaryFilter({ name }: { name: keyof typeof binaryFilters }) {
         {binaryFilters[name].label}
       </label>
       <Checkbox
-        checked={binary === undefined ? 'indeterminate' : binary}
+        checked={binary ?? 'indeterminate'}
         onCheckedChange={handleChange}
       />
     </SidebarMenuItem>

src/components/sidebar/filters.tsx

@@ -8,7 +8,6 @@ import {
   Info,
 } from 'lucide-react';
 
-import Link from 'next/link';
 import { signIn, signOut } from 'next-auth/react';
 
 import { useShallowStore } from '~/store';
@@ -28,19 +27,18 @@ import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
 import * as React from 'react';
 import Image from 'next/image';
 import { cn } from '~/lib/utils';
-import { User2 } from 'lucide-react';
 import { checkWebhookStatus } from '~/server/strava/actions';
 import { env } from '~/env';
 
 export function UserSettings() {
-  const { user, loading, account, loadFromStrava, isInitialized } =
-    useShallowStore((state) => ({
+  const { user, loading, loadFromStrava, isInitialized } = useShallowStore(
+    (state) => ({
       user: state.user,
       loading: state.loading,
-      account: state.account,
       loadFromStrava: state.loadFromStrava,
       isInitialized: state.isInitialized,
-    }));
+    }),
+  );
 
   const isDevelopment = env.NEXT_PUBLIC_ENV === 'development';