Fixed the maps

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",
+    "@tanstack/react-query": "^4.36.1",
-    "@trpc/client": "^10.45.0",
+    "@trpc/client": "^10.43.6",
-    "@trpc/next": "^10.45.0",
+    "@trpc/next": "^10.43.6",
-    "@trpc/react-query": "^10.45.0",
+    "@trpc/react-query": "^10.43.6",
-    "@trpc/server": "^10.45.0",
+    "@trpc/server": "^10.43.6",
-    "axios": "^1.6.3",
     "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",

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;

src/app/(parent)/dashboard/page.tsx

@@ -1,10 +1,21 @@
-import React from "react";
+import React from 'react';
-import DashboardPage from "@/components/pages/dashboard-page";
+import { api } from '@/trpc/server';
-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;

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 = {

src/components/children/children-list.tsx

@@ -1,7 +1,5 @@
-"use client";
+'use client';
-import React from "react";
+import React from 'react';
-import axios from "axios";
-import { useQuery } from "@tanstack/react-query";
 import {
   Table,
   TableBody,
@@ -10,24 +8,16 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from '@/components/ui/table';
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
-import { Icons } from "../icons";
+import { Icons } from '../icons';
-import ConnectDeviceDialog from "./connect-device-dialog";
+import ConnectDeviceDialog from './connect-device-dialog';
-import { env } from "@/env";
+import ChildModel from '@/lib/models/child';
 
-const ChildrenList = () => {
+type ChildrenListProps = {
-  const { data, isLoading, isError } = useQuery({
+  kids: ChildModel[];
-    queryKey: ["user-children"],
+}
-    queryFn: async () => {
+const ChildrenList: React.FC<ChildrenListProps> = ({ kids }) => {
-      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>;
   return (
     <Table>
       <TableCaption>Here are your children.</TableCaption>
@@ -39,13 +29,13 @@ const ChildrenList = () => {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {data?.map((child) => (
+        {kids?.map((kid) => (
-          <TableRow key={child.id}>
+          <TableRow key={kid.id}>
-            <TableCell className="font-medium">{child.name}</TableCell>
+            <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>

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;

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 });
+      const result = await createChild.mutateAsync({ name: data.name });
-      debugger;
       toast({ description: "Added new child" });
       await utils.child.invalidate();
-      //queryClient.invalidateQueries({ queryKey: ['user-children'] });
+      console.log("add-child-form", "onSubmit", createChild.data);
-      setPIN(result.data?.pin);
+      if (result) {
+        setPIN(result.id);
+      } else {
+        toast({ description: "Something went wrong", variant: "destructive" });
+      }
     } catch (err) {
       toast({ description: "Something went wrong", variant: "destructive" });
     }

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;

src/components/ui/navigation-menu.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import * as React from 'react';
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority';
-import { ChevronDown } from "lucide-react"
+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",
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
-      className
+      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",
+      'group flex flex-1 list-none items-center justify-center space-x-1',
-      className
+      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 ",
+      '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
+      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)]",
+        '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
+        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",
+      '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
+      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,
-}
+};

src/config/site.ts

@@ -6,7 +6,7 @@ export const siteConfig = {
   mainNav: [
     {
       title: 'Home',
-      href: '/',
+      href: '/dashboard',
     },
     {
       title: 'Children',

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 }) => {

src/styles/globals.css

@@ -2,74 +2,93 @@
 @tailwind components;
 @tailwind utilities;
 @layer base {
-  :root {
+    :root {
-    --background: 0 0% 100%;
+        --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+        --foreground: 240 10% 3.9%;
 
-    --card: 0 0% 100%;
+        --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+        --card-foreground: 240 10% 3.9%;
 
-    --popover: 0 0% 100%;
+        --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+        --popover-foreground: 240 10% 3.9%;
 
-    --primary: 240 5.9% 10%;
+        --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+        --primary-foreground: 0 0% 98%;
 
-    --secondary: 240 4.8% 95.9%;
+        --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+        --secondary-foreground: 240 5.9% 10%;
 
-    --muted: 240 4.8% 95.9%;
+        --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
+        --muted-foreground: 240 3.8% 46.1%;
 
-    --accent: 240 4.8% 95.9%;
+        --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+        --accent-foreground: 240 5.9% 10%;
 
-    --destructive: 0 84.2% 60.2%;
+        --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+        --destructive-foreground: 0 0% 98%;
 
-    --border: 240 5.9% 90%;
+        --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
+        --ring: 240 10% 3.9%;
 
-    --radius: 0.5rem;
+        --radius: 0.5rem;
-  }
+    }
 
-  .dark {
+    .dark {
-    --background: 240 10% 3.9%;
+        --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+        --foreground: 0 0% 98%;
 
-    --card: 240 10% 3.9%;
+        --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+        --card-foreground: 0 0% 98%;
 
-    --popover: 240 10% 3.9%;
+        --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
+        --popover-foreground: 0 0% 98%;
 
-    --primary: 0 0% 98%;
+        --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
+        --primary-foreground: 240 5.9% 10%;
 
-    --secondary: 240 3.7% 15.9%;
+        --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+        --secondary-foreground: 0 0% 98%;
 
-    --muted: 240 3.7% 15.9%;
+        --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
+        --muted-foreground: 240 5% 64.9%;
 
-    --accent: 240 3.7% 15.9%;
+        --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+        --accent-foreground: 0 0% 98%;
 
-    --destructive: 0 62.8% 30.6%;
+        --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+        --destructive-foreground: 0 0% 98%;
 
-    --border: 240 3.7% 15.9%;
+        --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+        --ring: 240 4.9% 83.9%;
-  }
+    }
 }
 
 @layer base {
-  * {
+    * {
-    @apply border-border;
+        @apply border-border;
-  }
+    }
-  body {
+
-    @apply bg-background text-foreground;
+    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;
 }