feat: Basic features page + accidentally linted it all

naavis-app · Aug 30, 2024 · b17efd7 · b17efd7
1 parent 0801ac1
commit b17efd7
Show file tree

Hide file tree

Showing 17 changed files with 325 additions and 183 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -10,6 +10,13 @@ const config = {
         serverComponentsExternalPackages: ["@node-rs/argon2"],
     },
     transpilePackages: ["geist"],
+    images: {
+        remotePatterns: [
+            {
+                hostname: "upload.wikimedia.org",
+            }
+        ]
+    }
 };
 
 export default config;
diff --git a/src/app/_components/dashboard/devices/AddDeviceDialog.tsx b/src/app/_components/dashboard/devices/AddDeviceDialog.tsx
@@ -1,6 +1,13 @@
 "use client";
 
-import { Button, Flex, Text, Dialog, TextField, Select } from "@radix-ui/themes";
+import {
+    Button,
+    Flex,
+    Text,
+    Dialog,
+    TextField,
+    Select,
+} from "@radix-ui/themes";
 import { useAtom } from "jotai";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -74,50 +81,31 @@ export default function AddDeviceDialog({ refetch }: { refetch: () => void }) {
     return (
         <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
             <Dialog.Trigger onClick={() => setDialogOpen(!dialogOpen)}>
-                <Button
-                    variant="solid"
-                >
-                    New Device
-                </Button>
+                <Button variant="solid">New Device</Button>
             </Dialog.Trigger>
             <Dialog.Content maxWidth={"400px"}>
-                <Dialog.Title>
-                    Add A New Device
-                </Dialog.Title>
+                <Dialog.Title>Add A New Device</Dialog.Title>
 
                 <Flex direction={"column"} gap={"2"}>
-                    <Text size={"3"}>
-                        Device Name
-                    </Text>
+                    <Text size={"3"}>Device Name</Text>
                     <TextField.Root
                         value={deviceName}
                         placeholder="Your device name..."
-                        onChange={(e) => 
-                            setDeviceName(e.target.value)
-                        }
+                        onChange={(e) => setDeviceName(e.target.value)}
                         required
                         className="w-full"
                     />
-                    <Text size={"3"}>
-                        Device Type
-                    </Text>
-                    <Select.Root
-                        onValueChange={(e) => 
-                            setDeviceType(e)
-                        }
-                    >
+                    <Text size={"3"}>Device Type</Text>
+                    <Select.Root onValueChange={(e) => setDeviceType(e)}>
                         <Select.Trigger
                             variant="surface"
                             className="z-10"
                             value={deviceType || "Phone"}
-                        >
-                        </Select.Trigger>
+                        ></Select.Trigger>
                         <Select.Content>
                             <Select.Group>
-
                                 {deviceTypes.map((type, i) => (
-                                    <Select.Item value={type.id} 
-                                        key={i}>
+                                    <Select.Item value={type.id} key={i}>
                                         {type.name}
                                     </Select.Item>
                                 ))}

diff --git a/src/app/_components/dashboard/devices/DeleteDeviceDialog.tsx b/src/app/_components/dashboard/devices/DeleteDeviceDialog.tsx
@@ -18,7 +18,10 @@ interface DeleteDeviceProps {
     deviceId: string;
 }
 
-export default function DeleteDeviceDialog({ refetch, deviceId }: DeleteDeviceProps) {
+export default function DeleteDeviceDialog({
+    refetch,
+    deviceId,
+}: DeleteDeviceProps) {
     const [user] = useAtom(userAtom);
 
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
@@ -52,7 +55,7 @@ export default function DeleteDeviceDialog({ refetch, deviceId }: DeleteDevicePr
 
             setDeletingDevice(false);
             setDialogOpen(false);
-        }
+        },
     });
 
     useEffect(() => {
@@ -96,19 +99,16 @@ export default function DeleteDeviceDialog({ refetch, deviceId }: DeleteDevicePr
                 </Button>
             </Dialog.Trigger>
             <Dialog.Content maxWidth={"400px"}>
-                <Dialog.Title align={"center"}>
-                    Delete Your Device
-                </Dialog.Title>
+                <Dialog.Title align={"center"}>Delete Your Device</Dialog.Title>
 
                 <div className="flex flex-col gap-2">
                     <div className="flex flex-col text-center">
                         <p className="text-red-400">
                             This is a destructive action.
                         </p>{" "}
                         <p>
-                            All device data for this device 
-                            will be deleted. Are you
-                            sure you want to delete this device?
+                            All device data for this device will be deleted. Are
+                            you sure you want to delete this device?
                         </p>
                     </div>
                     <div className="mt-2 flex items-center justify-between">

diff --git a/src/app/_components/dashboard/devices/DeviceButtons.tsx b/src/app/_components/dashboard/devices/DeviceButtons.tsx
@@ -19,8 +19,8 @@ export default function DeviceButtons({ deviceId }: { deviceId: string }) {
                     refetch={() => deviceQuery.refetch()}
                     deviceId={deviceId}
                 />
-                <DeleteDeviceDialog 
-                    refetch={()=> deviceQuery.refetch()}
+                <DeleteDeviceDialog
+                    refetch={() => deviceQuery.refetch()}
                     deviceId={deviceId}
                 />
             </div>

diff --git a/src/app/_components/dashboard/devices/EditDeviceDialog.tsx b/src/app/_components/dashboard/devices/EditDeviceDialog.tsx
@@ -3,7 +3,14 @@
 // edit device dialog
 // TODO: update select so it shows current device type on open
 
-import { Button, Flex, Dialog, Text, TextField, Select } from "@radix-ui/themes";
+import {
+    Button,
+    Flex,
+    Dialog,
+    Text,
+    TextField,
+    Select,
+} from "@radix-ui/themes";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -121,22 +128,18 @@ export default function EditDeviceDialog({
                 </Button>
             </Dialog.Trigger>
             <Dialog.Content maxWidth={"400px"}>
-                <Dialog.Title>
-                    Edit Your Device
-                </Dialog.Title>
+                <Dialog.Title>Edit Your Device</Dialog.Title>
 
                 <Flex direction={"column"} gap={"2"}>
-                    <Text size={"3"}>
-                        Device Name
-                    </Text>
-                    <div className="relative flex w-full 
-                    flex-row items-center justify-end">
+                    <Text size={"3"}>Device Name</Text>
+                    <div
+                        className="relative flex w-full 
+                    flex-row items-center justify-end"
+                    >
                         <TextField.Root
                             value={deviceName}
                             placeholder="Your device name..."
-                            onChange={(e) => 
-                                setDeviceName(e.target.value)
-                            }
+                            onChange={(e) => setDeviceName(e.target.value)}
                             required
                             disabled={!nameToggle}
                             className="w-full"
@@ -148,31 +151,22 @@ export default function EditDeviceDialog({
                                 setNameToggle(!nameToggle);
                             }}
                         >
-                            {!nameToggle && <RxPencil1/>}
-                            {nameToggle && <FaCheck/>}
+                            {!nameToggle && <RxPencil1 />}
+                            {nameToggle && <FaCheck />}
                         </button>
                     </div>
 
-                    <Text size={"3"}>
-                        Device Type
-                    </Text>
-                    <Select.Root
-                        onValueChange={(e) => 
-                            setDeviceType(e)
-                        }
-                    >
+                    <Text size={"3"}>Device Type</Text>
+                    <Select.Root onValueChange={(e) => setDeviceType(e)}>
                         <Select.Trigger
                             variant="surface"
                             className="z-10"
                             value={deviceType || "Phone"}
-                        >
-                        </Select.Trigger>
+                        ></Select.Trigger>
                         <Select.Content>
                             <Select.Group>
-
                                 {deviceTypes.map((type, i) => (
-                                    <Select.Item value={type.id} 
-                                        key={i}>
+                                    <Select.Item value={type.id} key={i}>
                                         {type.name}
                                     </Select.Item>
                                 ))}

diff --git a/src/app/_components/dashboard/groups/CreateGroupDialog.tsx b/src/app/_components/dashboard/groups/CreateGroupDialog.tsx
@@ -59,39 +59,25 @@ export default function CreateGroupDialog({
     return (
         <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
             <Dialog.Trigger onClick={() => setDialogOpen(!dialogOpen)}>
-                <Button
-                    variant="solid"
-                >
-                    New Group
-                </Button>
+                <Button variant="solid">New Group</Button>
             </Dialog.Trigger>
             <Dialog.Content maxWidth={"400px"}>
-                <Dialog.Title>
-                    Add A New Group
-                </Dialog.Title>
+                <Dialog.Title>Add A New Group</Dialog.Title>
 
                 <Flex direction={"column"} gap={"2"}>
-                    <Text size={"3"}>
-                        Group Name
-                    </Text>
+                    <Text size={"3"}>Group Name</Text>
                     <TextField.Root
                         value={groupName}
                         placeholder="Your group name..."
-                        onChange={(e) => 
-                            setGroupName(e.target.value)
-                        }
+                        onChange={(e) => setGroupName(e.target.value)}
                         required
                         className="w-full"
                     />
-                    <Text size={"3"}>
-                        Group Description
-                    </Text>
+                    <Text size={"3"}>Group Description</Text>
                     <TextField.Root
                         value={groupDescription}
                         placeholder="Your group description..."
-                        onChange={(e) => 
-                            setGroupDescription(e.target.value)
-                        }
+                        onChange={(e) => setGroupDescription(e.target.value)}
                         required
                         className="w-full"
                     />

diff --git a/src/app/_components/dashboard/groups/DeleteGroupDialog.tsx b/src/app/_components/dashboard/groups/DeleteGroupDialog.tsx
@@ -15,7 +15,10 @@ interface DeleteGroupProps {
     groupId: string;
 }
 
-export default function DeleteGroupDialog({ refetch, groupId }: DeleteGroupProps) {
+export default function DeleteGroupDialog({
+    refetch,
+    groupId,
+}: DeleteGroupProps) {
     const [user, setUser] = useAtom(userAtom);
 
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -49,7 +52,7 @@ export default function DeleteGroupDialog({ refetch, groupId }: DeleteGroupProps
 
             setDeletingGroup(false);
             setDialogOpen(false);
-        }
+        },
     });
 
     useEffect(() => {
@@ -93,20 +96,17 @@ export default function DeleteGroupDialog({ refetch, groupId }: DeleteGroupProps
                 </Button>
             </Dialog.Trigger>
             <Dialog.Content maxWidth={"400px"}>
-                <Dialog.Title align={"center"}>
-                    Delete Your Group
-                </Dialog.Title>
+                <Dialog.Title align={"center"}>Delete Your Group</Dialog.Title>
 
                 <div className="flex flex-col gap-2">
                     <div className="flex flex-col text-center">
                         <p className="text-red-400">
                             This is a destructive action.
                         </p>{" "}
                         <p>
-                            All group data for this group, including places and 
-                            connected members, &#40;not member data&#41; 
-                            will be deleted. Are you sure you want to delete 
-                            this group?
+                            All group data for this group, including places and
+                            connected members, &#40;not member data&#41; will be
+                            deleted. Are you sure you want to delete this group?
                         </p>
                     </div>
                     <div className="mt-2 flex items-center justify-between">

diff --git a/src/app/_components/dashboard/groups/EditGroupDialog.tsx b/src/app/_components/dashboard/groups/EditGroupDialog.tsx
@@ -116,22 +116,18 @@ export default function EditGroupDialog({ refetch, groupId }: EditGroupProps) {
                 </Button>
             </Dialog.Trigger>
             <Dialog.Content maxWidth={"400px"}>
-                <Dialog.Title>
-                    Edit Your Group
-                </Dialog.Title>
+                <Dialog.Title>Edit Your Group</Dialog.Title>
 
                 <Flex direction={"column"} gap={"2"}>
-                    <Text size={"3"}>
-                        Group Name
-                    </Text>
-                    <div className="relative flex w-full 
-                    flex-row items-center justify-end">
+                    <Text size={"3"}>Group Name</Text>
+                    <div
+                        className="relative flex w-full 
+                    flex-row items-center justify-end"
+                    >
                         <TextField.Root
                             value={groupName}
                             placeholder="Your device name..."
-                            onChange={(e) => 
-                                setGroupName(e.target.value)
-                            }
+                            onChange={(e) => setGroupName(e.target.value)}
                             required
                             disabled={!nameToggle}
                             className="w-full"
@@ -143,20 +139,20 @@ export default function EditGroupDialog({ refetch, groupId }: EditGroupProps) {
                                 setNameToggle(!nameToggle);
                             }}
                         >
-                            {!nameToggle && <RxPencil1/>}
-                            {nameToggle && <FaCheck/>}
+                            {!nameToggle && <RxPencil1 />}
+                            {nameToggle && <FaCheck />}
                         </button>
                     </div>
 
-                    <Text size={"3"}>
-                        Group Description
-                    </Text>
-                    <div className="relative flex w-full 
-                    flex-row items-center justify-end">
+                    <Text size={"3"}>Group Description</Text>
+                    <div
+                        className="relative flex w-full 
+                    flex-row items-center justify-end"
+                    >
                         <TextField.Root
                             value={groupDescription}
                             placeholder="Your device description..."
-                            onChange={(e) => 
+                            onChange={(e) =>
                                 setGroupDescription(e.target.value)
                             }
                             required
@@ -170,8 +166,8 @@ export default function EditGroupDialog({ refetch, groupId }: EditGroupProps) {
                                 setDescToggle(!descToggle);
                             }}
                         >
-                            {!descToggle && <RxPencil1/>}
-                            {descToggle && <FaCheck/>}
+                            {!descToggle && <RxPencil1 />}
+                            {descToggle && <FaCheck />}
                         </button>
                     </div>
                     <div