Fixed the maps

2025-12-22 09:17:51 +00:00 · 2024-01-01 02:41:14 +00:00
parent 0c459c05f6
commit d0d19a5586
13 changed files with 158 additions and 176 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -12,9 +12,9 @@
    "start": "next start"
  },
  "dependencies": {
-    "@auth/drizzle-adapter": "^0.3.12",
+    "@auth/drizzle-adapter": "^0.3.6",
    "@hookform/resolvers": "^3.3.3",
-    "@planetscale/database": "^1.13.0",
+    "@planetscale/database": "^1.11.0",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -43,24 +43,23 @@
    "@radix-ui/react-toggle-group": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@t3-oss/env-nextjs": "^0.7.1",
-    "@tanstack/react-query": "^4.35.3",
-    "@trpc/client": "^10.45.0",
-    "@trpc/next": "^10.45.0",
-    "@trpc/react-query": "^10.45.0",
-    "@trpc/server": "^10.45.0",
-    "axios": "^1.6.3",
+    "@tanstack/react-query": "^4.36.1",
+    "@trpc/client": "^10.43.6",
+    "@trpc/next": "^10.43.6",
+    "@trpc/react-query": "^10.43.6",
+    "@trpc/server": "^10.43.6",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^0.2.0",
    "date-fns": "^3.0.6",
-    "drizzle-orm": "^0.29.2",
+    "drizzle-orm": "^0.28.5",
    "embla-carousel-react": "^8.0.0-rc17",
    "generate-api-key": "^1.0.2",
    "http-status-codes": "^2.3.0",
    "leaflet": "^1.9.4",
    "local-ssl-proxy": "^2.0.5",
    "lucide-react": "^0.303.0",
-    "next": "^14.0.4",
+    "next": "^14.0.3",
    "next-auth": "^4.24.5",
    "next-themes": "^0.2.1",
    "pg": "^8.11.3",
@@ -70,6 +69,7 @@
    "react-dom": "18.2.0",
    "react-hook-form": "^7.49.2",
    "react-leaflet": "^4.2.1",
+    "react-qr-code": "^2.0.12",
    "react-resizable-panels": "^1.0.7",
    "server-only": "^0.0.1",
    "socket.io": "^4.7.2",
@@ -82,6 +82,7 @@
    "zod": "^3.22.4"
  },
  "devDependencies": {
+    "@types/leaflet": "^1.9.8",
    "@next/eslint-plugin-next": "^14.0.4",
    "@types/eslint": "^8.56.0",
    "@types/node": "^20.10.6",
--- a/src/app/(parent)/children/page.tsx
+++ b/src/app/(parent)/children/page.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import axios from 'axios';
 import ChildrenList from '@/components/children/children-list';
+import { api } from '@/trpc/server';

 const ChildrenPage = async () => {
-  return <ChildrenList />;
+  const kids = await api.child.mine.query();
+  return <ChildrenList kids={kids} />;
 };

 export default ChildrenPage;
--- a/src/app/(parent)/dashboard/page.tsx
+++ b/src/app/(parent)/dashboard/page.tsx
@@ -1,10 +1,21 @@
-import React from "react";
-import DashboardPage from "@/components/pages/dashboard-page";
-import { api } from "@/trpc/server";
+import React from 'react';
+import { api } from '@/trpc/server';
+import ChildrenFilter from '@/components/children/children-filter';
+import dynamic from 'next/dynamic';

 const Dashboard = async () => {
  const kids = await api.child.mine.query();
-  return <DashboardPage kids={kids} />;
+  const Map = dynamic(() => import('@/components/maps/main-map'), {
+    ssr: false,
+  });
+  return <div>
+    <div className="z-10">
+      <ChildrenFilter kids={kids} />
+    </div>
+    <div className="z-0 mt-4">
+      <Map />
+    </div>
+  </div>;
 };

 export default Dashboard;
--- a/src/components/children/child-select-list.tsx
+++ b/src/components/children/child-select-list.tsx
@@ -8,9 +8,6 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
-import axios from 'axios';
-import { useQuery } from '@tanstack/react-query';
-import { env } from '@/env';
 import ChildModel from '@/lib/models/child';

 type ChildSelectListProps = {
--- a/src/components/children/children-list.tsx
+++ b/src/components/children/children-list.tsx
@@ -1,7 +1,5 @@
-"use client";
-import React from "react";
-import axios from "axios";
-import { useQuery } from "@tanstack/react-query";
+'use client';
+import React from 'react';
 import {
  Table,
  TableBody,
@@ -10,24 +8,16 @@ import {
  TableHead,
  TableHeader,
  TableRow,
-} from "@/components/ui/table";
-import { Button } from "@/components/ui/button";
-import { Icons } from "../icons";
-import ConnectDeviceDialog from "./connect-device-dialog";
-import { env } from "@/env";
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Icons } from '../icons';
+import ConnectDeviceDialog from './connect-device-dialog';
+import ChildModel from '@/lib/models/child';

-const ChildrenList = () => {
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ["user-children"],
-    queryFn: async () => {
-      const { data } = await axios.get(`${env.NEXT_PUBLIC_BASE_URL}/child`, {
-        withCredentials: true,
-      });
-      return data as ChildModel[];
-    },
-  });
-  if (isLoading) return <div>Loading....</div>;
-  if (isError) return <div>Error loading</div>;
+type ChildrenListProps = {
+  kids: ChildModel[];
+}
+const ChildrenList: React.FC<ChildrenListProps> = ({ kids }) => {
  return (
    <Table>
      <TableCaption>Here are your children.</TableCaption>
@@ -39,13 +29,13 @@ const ChildrenList = () => {
        </TableRow>
      </TableHeader>
      <TableBody>
-        {data?.map((child) => (
-          <TableRow key={child.id}>
-            <TableCell className="font-medium">{child.name}</TableCell>
+        {kids?.map((kid) => (
+          <TableRow key={kid.id}>
+            <TableCell className="font-medium">{kid.name}</TableCell>
            <TableCell>Douglas</TableCell>
            <TableCell className="text-right">
              <div className="space-x-1">
-                <ConnectDeviceDialog child={child} />
+                <ConnectDeviceDialog child={kid} />
                <Button>
                  <Icons.edit className="w-4 h-4 mr-2" />
                </Button>
--- a/src/components/children/connect-device-dialog.tsx
+++ b/src/components/children/connect-device-dialog.tsx
@@ -12,6 +12,7 @@ import {

 import { Icons } from '@/components/icons';
 import QRCode from 'react-qr-code';
+import ChildModel from '@/lib/models/child';

 type ConnectDeviceDialogProps = {
  child: ChildModel;
--- a/src/components/forms/add-child-form.tsx
+++ b/src/components/forms/add-child-form.tsx
@@ -30,20 +30,6 @@ const AddChildForm: React.FC<AddChildFormProps> = ({ className, ...props }) => {
  const utils = api.useUtils();
  const createChild = api.child.create.useMutation();

-  // const queryClient = useQueryClient();
-  // const { mutate: submitNewChild, isPending } = useMutation({
-  //   mutationFn: async (name: string) =>
-  //     await axios.post('/api/child/create', { name }),
-  //   onSuccess: (e) => {
-  //     console.log('add-child-form', 'onSuccess', e);
-  //     toast({ description: 'Added new child' });
-  //     queryClient.invalidateQueries({ queryKey: ['user-children'] });
-  //     setPIN(e.data.pin);
-  //   },
-  //   onError: () => {
-  //     toast({ description: 'Something went wrong', variant: 'destructive' });
-  //   },
-  // });
  const {
    register,
    handleSubmit,
@@ -54,12 +40,15 @@ const AddChildForm: React.FC<AddChildFormProps> = ({ className, ...props }) => {

  const onSubmit = async (data: FormData) => {
    try {
-      const result = createChild.mutate({ name: data.name });
-      debugger;
+      const result = await createChild.mutateAsync({ name: data.name });
      toast({ description: "Added new child" });
      await utils.child.invalidate();
-      //queryClient.invalidateQueries({ queryKey: ['user-children'] });
-      setPIN(result.data?.pin);
+      console.log("add-child-form", "onSubmit", createChild.data);
+      if (result) {
+        setPIN(result.id);
+      } else {
+        toast({ description: "Something went wrong", variant: "destructive" });
+      }
    } catch (err) {
      toast({ description: "Something went wrong", variant: "destructive" });
    }
--- a/src/components/pages/dashboard-page.tsx
+++ b/src/components/pages/dashboard-page.tsx
@@ -1,28 +0,0 @@
-import React from 'react';
-import ChildrenFilter from '@/components/children/children-filter';
-import dynamic from 'next/dynamic';
-import ChildModel from '@/lib/models/child';
-
-type DashboardPageProps = {
-  kids: ChildModel[];
-}
-const DashboardPage: React.FC<DashboardPageProps> = ({ kids }) => {
-  //this needs to be a dynamic import
-  //otherwise it causes window not found errors
-  const Map = dynamic(() => import('@/components/maps/main-map'), {
-    ssr: false,
-  });
-
-  return (
-    <div>
-      <div className="z-10">
-        <ChildrenFilter kids={kids} />
-      </div>
-      <div className="z-0 mt-4">
-        <Map />
-      </div>
-    </div>
-  );
-};
-
-export default DashboardPage;
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';

 const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -12,16 +12,16 @@ const NavigationMenu = React.forwardRef<
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className,
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

 const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -30,19 +30,19 @@ const NavigationMenuList = React.forwardRef<
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
+      'group flex flex-1 list-none items-center justify-center space-x-1',
+      className,
    )}
    {...props}
  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;

-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;

 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+);

 const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@ -50,17 +50,17 @@ const NavigationMenuTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
    {...props}
  >
-    {children}{" "}
+    {children}{' '}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;

 const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -69,33 +69,33 @@ const NavigationMenuContent = React.forwardRef<
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
+      className,
    )}
    {...props}
  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;

-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;

 const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
+  <div className={cn('absolute left-0 top-full flex justify-center')}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className,
      )}
      ref={ref}
      {...props}
    />
  </div>
-))
+));
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+  NavigationMenuPrimitive.Viewport.displayName;

 const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -104,16 +104,16 @@ const NavigationMenuIndicator = React.forwardRef<
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
+      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      className,
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
-))
+));
 NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+  NavigationMenuPrimitive.Indicator.displayName;

 export {
  navigationMenuTriggerStyle,
@@ -125,4 +125,4 @@ export {
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
-}
+};
--- a/src/config/site.ts
+++ b/src/config/site.ts
@@ -6,7 +6,7 @@ export const siteConfig = {
  mainNav: [
    {
      title: 'Home',
-      href: '/',
+      href: '/dashboard',
    },
    {
      title: 'Children',
--- a/src/server/api/routers/child.ts
+++ b/src/server/api/routers/child.ts
@@ -13,7 +13,8 @@ export const childRouter = createTRPCRouter({
        parentId: ctx.session.user.id,
        name: input.name,
      };
-      await ctx.db.insert(child).values(c);
+      const result = await ctx.db.insert(child).values(c).returning();
+      return result[0];
    }),

  mine: protectedProcedure.query(async ({ ctx }) => {
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,74 +2,93 @@
@tailwind components;
@tailwind utilities;
@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;

-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;

-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;

-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;

-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;

-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;

-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;

-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;

-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 240 10% 3.9%;

-    --radius: 0.5rem;
-  }
+        --radius: 0.5rem;
+    }

-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;

-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;

-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;

-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;

-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;

-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;

-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;

-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;

-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-  }
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --ring: 240 4.9% 83.9%;
+    }
 }

@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.map {
+    width: 100%;
+    height: 40rem;
+}
+
+.leaflet-control {
+    z-index: 0 !important;
+}
+
+.leaflet-pane {
+    z-index: 0 !important;
+}
+
+.leaflet-top,
+.leaflet-bottom {
+    z-index: 0 !important;
 }