From a988acd992e31aaabc12793989007484ab998e48 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sun, 9 Jul 2023 17:18:33 +1000
Subject: [PATCH] Update toast hook & cleanup

---
 src/components/DeviceSelectorButton.tsx |  6 +++++-
 src/components/PageLayout.tsx           |  2 +-
 src/components/UI/DropdownMenu.tsx      |  2 +-
 src/components/UI/Switch.tsx            |  4 ++--
 src/components/UI/Tabs.tsx              |  2 +-
 src/components/UI/Toast.tsx             |  4 ++--
 src/components/UI/Tooltip.tsx           |  2 +-
 src/components/UI/Typography/Code.tsx   |  2 +-
 src/core/hooks/useToast.ts              | 11 +++++------
 src/pages/Config/ModuleConfig.tsx       |  6 +-----
 src/pages/Peers.tsx                     |  2 +-
 11 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/DeviceSelectorButton.tsx b/src/components/DeviceSelectorButton.tsx
index 8974c133..243c3e80 100644
--- a/src/components/DeviceSelectorButton.tsx
+++ b/src/components/DeviceSelectorButton.tsx
@@ -11,7 +11,11 @@ export const DeviceSelectorButton = ({
   onClick,
   children,
 }: DeviceSelectorButtonProps): JSX.Element => (
-  <li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}>
+  <li
+    className="aspect-w-1 aspect-h-1 relative w-full"
+    onClick={onClick}
+    onKeyDown={onClick}
+  >
     {active && (
       <div className="absolute -left-2 h-10 w-1.5 rounded-full bg-accent" />
     )}
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 72e6f12e..41029a01 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -32,7 +32,7 @@ export const PageLayout = ({
             <div className="flex justify-end space-x-4">
               {actions?.map((action, index) => (
                 <button
-                  key={index}
+                  key={action.icon.name}
                   type="button"
                   className="transition-all hover:text-accent"
                   onClick={action.onClick}
diff --git a/src/components/UI/DropdownMenu.tsx b/src/components/UI/DropdownMenu.tsx
index d333dfbb..02f3eb45 100644
--- a/src/components/UI/DropdownMenu.tsx
+++ b/src/components/UI/DropdownMenu.tsx
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
         className,
       )}
       {...props}
diff --git a/src/components/UI/Switch.tsx b/src/components/UI/Switch.tsx
index 35d59e05..c3e97fdc 100644
--- a/src/components/UI/Switch.tsx
+++ b/src/components/UI/Switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-400 dark:data-[state=unchecked]:bg-slate-700",
       className,
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/components/UI/Tabs.tsx b/src/components/UI/Tabs.tsx
index c96a4f38..2d9b3e69 100644
--- a/src/components/UI/Tabs.tsx
+++ b/src/components/UI/Tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
       className,
     )}
     {...props}
diff --git a/src/components/UI/Toast.tsx b/src/components/UI/Toast.tsx
index b00da0da..234728da 100644
--- a/src/components/UI/Toast.tsx
+++ b/src/components/UI/Toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute top-2 right-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50",
+      "absolute right-2 top-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50",
       className,
     )}
     toast-close=""
diff --git a/src/components/UI/Tooltip.tsx b/src/components/UI/Tooltip.tsx
index cc4b0d87..9cdc8f83 100644
--- a/src/components/UI/Tooltip.tsx
+++ b/src/components/UI/Tooltip.tsx
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
       className,
     )}
     {...props}
diff --git a/src/components/UI/Typography/Code.tsx b/src/components/UI/Typography/Code.tsx
index 2925dfdc..9cbd4e13 100644
--- a/src/components/UI/Typography/Code.tsx
+++ b/src/components/UI/Typography/Code.tsx
@@ -3,7 +3,7 @@ export interface CodeProps {
 }
 
 export const Code = ({ children }: CodeProps): JSX.Element => (
-  <code className="relative rounded bg-slate-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400">
+  <code className="relative rounded bg-slate-100 px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400">
     {children}
   </code>
 );
diff --git a/src/core/hooks/useToast.ts b/src/core/hooks/useToast.ts
index 6c4363b4..9b76723b 100644
--- a/src/core/hooks/useToast.ts
+++ b/src/core/hooks/useToast.ts
@@ -1,10 +1,9 @@
 import * as React from "react";
 
 import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
-import { DialogProps } from "@radix-ui/react-dialog";
 
 const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
   id: string;
@@ -110,8 +109,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
     }
-
-    case "REMOVE_TOAST": {
+    case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -122,7 +120,6 @@ export const reducer = (state: State, action: Action): State => {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
       };
-    }
   }
 };
 
@@ -137,7 +134,9 @@ function dispatch(action: Action) {
   });
 }
 
-function toast({ ...props }: DialogProps) {
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
   const id = genId();
 
   const update = (props: ToasterToast) =>
diff --git a/src/pages/Config/ModuleConfig.tsx b/src/pages/Config/ModuleConfig.tsx
index 58f13528..f10e34a9 100644
--- a/src/pages/Config/ModuleConfig.tsx
+++ b/src/pages/Config/ModuleConfig.tsx
@@ -1,6 +1,5 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
 import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
-import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
+import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.js";
 import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
 import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
 import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
@@ -13,11 +12,8 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.js";
-import { Fragment } from "react";
 
 export const ModuleConfig = (): JSX.Element => {
-  const { workingModuleConfig, connection } = useDevice();
-
   const tabs = [
     {
       label: "MQTT",
diff --git a/src/pages/Peers.tsx b/src/pages/Peers.tsx
index 604544bf..46b852b3 100644
--- a/src/pages/Peers.tsx
+++ b/src/pages/Peers.tsx
@@ -1,6 +1,6 @@
 import { Sidebar } from "@components/Sidebar.js";
 import { Mono } from "@components/generic/Mono.js";
-import { Table } from "@components/generic/Table";
+import { Table } from "@components/generic/Table/index.js";
 import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";