+
diff --git a/src/components/debug/HeadersPrinter.tsx b/src/components/debug/HeadersPrinter.tsx
deleted file mode 100644
index 3fdc952..0000000
--- a/src/components/debug/HeadersPrinter.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-import React from "react";
-import { headers } from "next/headers";
-import { getRequestHeaders } from "@/lib/helpers/headers";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-
-const HeadersPrinter = () => {
- const header = headers();
-
- const request = getRequestHeaders(header);
- return (
-
- Request Headers
- {request}
-
- );
-};
-export default HeadersPrinter;
diff --git a/src/components/debug/SecureDebugDetails.tsx b/src/components/debug/SecureDebugDetails.tsx
deleted file mode 100644
index 4687cd0..0000000
--- a/src/components/debug/SecureDebugDetails.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import PrintEnv from "@/components/widgets/print-env";
-import { authOptions } from "@/server/auth";
-import { getServerSession } from "next-auth";
-import { headers } from "next/headers";
-
-export const SecureDebugDetails = async () => {
- const session = await getServerSession(authOptions);
- const request = headers();
- return
;
-};
diff --git a/src/components/devices/DeviceForm.tsx b/src/components/devices/DeviceForm.tsx
new file mode 100644
index 0000000..4c24825
--- /dev/null
+++ b/src/components/devices/DeviceForm.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { Device, NewDeviceParams, insertDeviceParams } from "@/server/db/schema/devices";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api as trpc } from "@/trpc/react";
+import { Button } from "@/components/ui/button";
+import { z } from "zod";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/components/ui/use-toast";
+
+const DeviceForm = ({
+ device,
+ closeModal,
+}: {
+ device?: Device;
+ closeModal?: () => void;
+}) => {
+ const { toast } = useToast();
+ const { data: children } = trpc.children.getChildren.useQuery();
+ const editing = !!device?.id;
+
+ const router = useRouter();
+ const utils = trpc.useContext();
+
+ const form = useForm
>({
+ // latest Zod release has introduced a TS error with zodResolver
+ // open issue: https://github.com/colinhacks/zod/issues/2663
+ // errors locally but not in production
+ resolver: zodResolver(insertDeviceParams),
+ defaultValues: device ?? {
+ name: "",
+ deviceId: "",
+ childId: ""
+ },
+ });
+
+ const onSuccess = async (action: "create" | "update" | "delete",
+ data?: { error?: string },
+ ) => {
+ if (data?.error) {
+ toast({
+ title: `${action
+ .slice(0, 1)
+ .toUpperCase()
+ .concat(action.slice(1))} Failed`,
+ description: data.error,
+ variant: "destructive",
+ });
+ return;
+ }
+
+ await utils.devices.getDevices.invalidate();
+ router.refresh();
+ if (closeModal) closeModal();
+ toast({
+ title: 'Success',
+ description: `Device ${action}d!`,
+ variant: "default",
+ });
+ };
+
+ const { mutate: createDevice, isLoading: isCreating } =
+ trpc.devices.createDevice.useMutation({
+ onSuccess: (res) => onSuccess("create"),
+ });
+
+ const { mutate: updateDevice, isLoading: isUpdating } =
+ trpc.devices.updateDevice.useMutation({
+ onSuccess: (res) => onSuccess("update"),
+ });
+
+ const { mutate: deleteDevice, isLoading: isDeleting } =
+ trpc.devices.deleteDevice.useMutation({
+ onSuccess: (res) => onSuccess("delete"),
+ });
+
+ const handleSubmit = (values: NewDeviceParams) => {
+ if (editing) {
+ updateDevice({ ...values, id: device.id });
+ } else {
+ createDevice(values);
+ }
+ };
+ return (
+
+
+ );
+};
+
+export default DeviceForm;
diff --git a/src/components/devices/DeviceList.tsx b/src/components/devices/DeviceList.tsx
new file mode 100644
index 0000000..04cdd86
--- /dev/null
+++ b/src/components/devices/DeviceList.tsx
@@ -0,0 +1,52 @@
+"use client";
+import { CompleteDevice } from "@/server/db/schema/devices";
+import { api as trpc } from "@/trpc/react";
+import DeviceModal from "./DeviceModal";
+
+
+export default function DeviceList({ devices }: { devices: CompleteDevice[] }) {
+ const { data: d } = trpc.devices.getDevices.useQuery(undefined, {
+ initialData: { devices },
+ refetchOnMount: false,
+ });
+
+ if (d.devices.length === 0) {
+ return ;
+ }
+
+ return (
+
+ {d.devices.map((device) => (
+
+ ))}
+
+ );
+}
+
+const Device = ({ device }: { device: CompleteDevice }) => {
+ return (
+
+
+
+
+ );
+};
+
+const EmptyState = () => {
+ return (
+
+
+ No devices
+
+
+ Get started by creating a new device.
+
+
+
+
+
- {`Your child's PIN is ${PIN}`}
-
-
-
- );
- }
- return (
-
-
- Add Child
-
- {
- "Enter your child's details below and press save, then use the displayed PIN to register their device."
- }
-
-
-
-
-
-
-
diff --git a/src/components/main-nav.tsx b/src/components/main-nav.tsx
index 6c6cf92..6f68149 100644
--- a/src/components/main-nav.tsx
+++ b/src/components/main-nav.tsx
@@ -20,19 +20,17 @@ export function MainNav({ items }: MainNavProps) {
{items?.length ? (
) : null}
diff --git a/src/components/maps/main-map.tsx b/src/components/maps/main-map.tsx
index 8303d09..680594e 100644
--- a/src/components/maps/main-map.tsx
+++ b/src/components/maps/main-map.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
"use client";
import "leaflet/dist/leaflet.css";
import React, { useEffect, useState } from "react";
@@ -10,119 +11,41 @@ import {
Polyline,
} from "react-leaflet";
import { usePingSocket } from "@/lib/hooks/use-ping-socket";
-import type ChildModel from "@/lib/models/child";
import MapMarker from "@/components/maps/map-marker";
import { getLatestPing } from "@/lib/helpers/location/ping";
+import { type CompleteChild } from "@/server/db/schema/children";
type MainMapProps = {
- kids: ChildModel[];
+ kids: CompleteChild[];
};
const MainMap: React.FC
= ({ kids }) => {
- const [isMounted, setIsMounted] = useState(false);
- useEffect(() => {
- setIsMounted(true);
- console.log("MainMap", "kids", kids);
- }, [kids]);
- // Draw lines between each ping showing the direction of travel
- const renderLines = (kids: ChildModel[]) => {
- return kids?.map((kid) =>
- kid.devices?.map((device) =>
- device.pings?.map((ping, index) => {
- const nextPing = device.pings[index + 1];
- if (nextPing) {
- return (
- <>
-
-
-
- );
- }
- return null;
- }),
- ),
- );
- };
return (
- isMounted && (
-
-
-
- <>
- {renderLines(kids)}
- {kids?.map((kid) =>
- kid.devices?.map((device) => {
- const latestPing = getLatestPing(device.pings);
-
- return (
- latestPing && (
-
- )
- );
-
- // Draw coordinates of each ping on the map
- const renderPings = () => {
- return kids?.map((kid) =>
- kid.devices?.map((device) =>
- device.pings?.map((ping) => (
-
- )),
- ),
- );
- };
-
- return (
- latestPing && (
-
- )
- );
- }),
- )}
-
-
-
- )
+
+
+
+ {kids?.map((kid) =>
+ kid.devices?.map((device) =>
+ device.pings.map((ping) => (
+
+ )),
+ ),
+ )}
+
+
);
};
export default MainMap;
diff --git a/src/components/maps/map-viewtype-selector.tsx b/src/components/maps/map-viewtype-selector.tsx
index fff1aa6..6ad6bb6 100644
--- a/src/components/maps/map-viewtype-selector.tsx
+++ b/src/components/maps/map-viewtype-selector.tsx
@@ -1,21 +1,24 @@
-'use client';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { Icons } from '@/components/icons';
-import React from 'react';
-
+"use client";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Icons } from "@/components/icons";
+import React from "react";
export const MapViewTypeSelector = () => {
- const [currentView, setCurrentView] = React.useState('location');
+ const [currentView, setCurrentView] = React.useState("location");
return (
- setCurrentView(value)}>
+ setCurrentView(value)}
+ >
-
+
Location
-
+
Route
- );
+
+ );
};
diff --git a/src/components/pages/dashboard-page.tsx b/src/components/pages/dashboard-page.tsx
new file mode 100644
index 0000000..d93a900
--- /dev/null
+++ b/src/components/pages/dashboard-page.tsx
@@ -0,0 +1,23 @@
+import dynamic from "next/dynamic";
+import { api } from "@/trpc/server";
+import ChildrenFilter from "../children/children-filter";
+import { MapViewTypeSelector } from "../maps/map-viewtype-selector";
+
+const DashboardPage = async () => {
+ const { children } = await api.children.getChildren.query();
+ const Map = dynamic(() => import("@/components/maps/main-map"), {
+ ssr: false,
+ });
+ return (
+
+ );
+};
+export default DashboardPage;
diff --git a/src/components/pages/home-page.tsx b/src/components/pages/home-page.tsx
index 785a9aa..1c71444 100644
--- a/src/components/pages/home-page.tsx
+++ b/src/components/pages/home-page.tsx
@@ -6,95 +6,94 @@ import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
import Link from "next/link";
function HomePage() {
- return (
- <>
-
-
-
Track Your Children with Ease
-
- Kidarr helps you keep an eye on your loved ones and ensure their
- safety.
-
-
-
Let's go
-
-
+
Track Your Children with Ease
+
+ Kidarr helps you keep an eye on your loved ones and ensure their
+ safety.
+
+
+
{`Let's go`}
+
-
-
- Real-Time Location Tracking
-
-
-
- Instantly know where your children are at all times with
- accurate GPS tracking.
-
-
-
-
-
- Geofencing Alerts
-
-
-
- Receive notifications when your child enters or leaves
- designated safe zones.
-
-
-
-
-
- Activity Monitoring
-
-
-
- {
- "View your child's activity history, including visited places and routes taken."
- }
-
-
-
-
-
- Keep Your Children Safe Today!
-
-
- Download Kidarr now and stay connected with your loved ones.
-
+
+
+
+
+ Real-Time Location Tracking
+
+
+
+ Instantly know where your children are at all times with
+ accurate GPS tracking.
+
+
+
+
+
+ Geofencing Alerts
+
+
+
+ Receive notifications when your child enters or leaves
+ designated safe zones.
+
+
+
+
+
+ Activity Monitoring
+
+
+
+ {
+ "View your child's activity history, including visited places and routes taken."
+ }
+
+
+
+
+
+
+
+ Keep Your Children Safe Today!
+
+
+ Download Kidarr now and stay connected with your loved ones.
+
-
-
Download Now
-
-
-
-
- );
+
+
Download Now
+
+