From 5375565e94da89b1fd75dcbe0c0842c0a82e0ed4 Mon Sep 17 00:00:00 2001
From: Nate Ferrell <nate@scrthq.com>
Date: Mon, 30 Sep 2024 04:03:32 -0500
Subject: [PATCH] feat: #comment cleaned up extra components

---
 src/App.tsx                                   |   4 +-
 ...ustomizationForm.tsx => AddDeviceForm.tsx} |   8 +-
 src/components/DeviceForm.tsx                 | 124 ------------------
 3 files changed, 5 insertions(+), 131 deletions(-)
 rename src/components/{DeviceCustomizationForm.tsx => AddDeviceForm.tsx} (96%)
 delete mode 100644 src/components/DeviceForm.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fa01596..2bc23c8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import { useAudioDeviceStore } from "./hooks/useAudioDeviceStore";
 import DeviceNode from "./components/DeviceNode";
 import ConnectionLine from "./components/ConnectionLine";
 import DarkModeToggle from "./components/DarkModeToggle";
-import DeviceCustomizationForm from "./components/DeviceCustomizationForm";
+import AddDeviceForm from "./components/AddDeviceForm";
 import { Device, Connection } from "./types/devices";
 import { DOT_SIZE, GRID_SIZE } from "./constants/grid";
 import EditDeviceForm from "./components/EditDeviceForm";
@@ -157,7 +157,7 @@ function AudioDeviceArrangerApp() {
           <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
             Add Device
           </h2>
-          <DeviceCustomizationForm onAddDevice={handleAddCustomDevice} />
+          <AddDeviceForm onAddDevice={handleAddCustomDevice} />
         </div>
 
         <Dialog.Portal>
diff --git a/src/components/DeviceCustomizationForm.tsx b/src/components/AddDeviceForm.tsx
similarity index 96%
rename from src/components/DeviceCustomizationForm.tsx
rename to src/components/AddDeviceForm.tsx
index 30c16d2..3ed9caa 100644
--- a/src/components/DeviceCustomizationForm.tsx
+++ b/src/components/AddDeviceForm.tsx
@@ -2,13 +2,11 @@ import React, { useState } from "react";
 import { Device, Port } from "../types/devices";
 import * as Form from "@radix-ui/react-form";
 
-interface DeviceCustomizationFormProps {
+interface AddDeviceFormProps {
   onAddDevice: (device: Omit<Device, "id">) => void;
 }
 
-const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = ({
-  onAddDevice,
-}) => {
+const AddDeviceForm: React.FC<AddDeviceFormProps> = ({ onAddDevice }) => {
   const [name, setName] = useState("");
   const [type, setType] = useState("synthesizer");
   const [gridSize, setGridSize] = useState(100);
@@ -150,4 +148,4 @@ const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = ({
   );
 };
 
-export default DeviceCustomizationForm;
+export default AddDeviceForm;
diff --git a/src/components/DeviceForm.tsx b/src/components/DeviceForm.tsx
deleted file mode 100644
index 7c1286f..0000000
--- a/src/components/DeviceForm.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from "react";
-import * as Form from "@radix-ui/react-form";
-import * as ToggleGroup from "@radix-ui/react-toggle-group";
-import { Device } from "../types/devices";
-
-interface DeviceFormProps {
-  device: Device | null;
-  onSubmit: (device: Device) => void;
-}
-
-const DeviceForm: React.FC<DeviceFormProps> = ({ device, onSubmit }) => {
-  const [inputs, setInputs] = React.useState(device?.inputs || []);
-  const [outputs, setOutputs] = React.useState(device?.outputs || []);
-  const [gridSize, setGridSize] = React.useState(device?.gridSize || 100); // Default to 20 if not provided
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    onSubmit({
-      id: device?.id || "",
-      name: formData.get("name") as string,
-      type: formData.get("type") as string,
-      inputs,
-      outputs,
-      position: device?.position || { x: 0, y: 0 },
-      gridSize: gridSize,
-    });
-  };
-
-  return (
-    <Form.Root onSubmit={handleSubmit}>
-      <Form.Field name="name">
-        <Form.Label>Name</Form.Label>
-        <Form.Control asChild>
-          <input
-            className="border p-2 w-full"
-            defaultValue={device?.name}
-            required
-          />
-        </Form.Control>
-      </Form.Field>
-
-      <Form.Field name="type">
-        <Form.Label>Type</Form.Label>
-        <Form.Control asChild>
-          <input
-            className="border p-2 w-full"
-            defaultValue={device?.type}
-            required
-          />
-        </Form.Control>
-      </Form.Field>
-
-      <Form.Field name="gridSize">
-        <Form.Label>Grid Size</Form.Label>
-        <Form.Control asChild>
-          <input
-            type="number"
-            className="border p-2 w-full"
-            value={gridSize}
-            onChange={(e) => setGridSize(Number(e.target.value))}
-            required
-          />
-        </Form.Control>
-      </Form.Field>
-
-      {/* ... rest of your component ... */}
-
-      <div className="mt-4">
-        <label>Inputs</label>
-        <ToggleGroup.Root
-          type="multiple"
-          value={inputs.map((i) => i.id)}
-          onValueChange={(value) =>
-            setInputs(
-              value.map((id) => ({ id, name: `Input ${id}`, type: "input" }))
-            )
-          }
-        >
-          {[1, 2, 3, 4].map((num) => (
-            <ToggleGroup.Item
-              key={num}
-              value={`input-${num}`}
-              className="border p-2 m-1 data-[state=on]:bg-blue-500 data-[state=on]:text-white"
-            >
-              {num}
-            </ToggleGroup.Item>
-          ))}
-        </ToggleGroup.Root>
-      </div>
-
-      <div className="mt-4">
-        <label>Outputs</label>
-        <ToggleGroup.Root
-          type="multiple"
-          value={outputs.map((o) => o.id)}
-          onValueChange={(value) =>
-            setOutputs(
-              value.map((id) => ({ id, name: `Output ${id}`, type: "output" }))
-            )
-          }
-        >
-          {[1, 2, 3, 4].map((num) => (
-            <ToggleGroup.Item
-              key={num}
-              value={`output-${num}`}
-              className="border p-2 m-1 data-[state=on]:bg-green-500 data-[state=on]:text-white"
-            >
-              {num}
-            </ToggleGroup.Item>
-          ))}
-        </ToggleGroup.Root>
-      </div>
-
-      <Form.Submit asChild>
-        <button className="mt-4 bg-blue-500 text-white p-2 rounded">
-          {device ? "Update Device" : "Add Device"}
-        </button>
-      </Form.Submit>
-    </Form.Root>
-  );
-};
-
-export default DeviceForm;