Connection method work

src/components/connection/Serial.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import { FiCheck } from 'react-icons/fi';
-import JSONPretty from 'react-json-pretty';
 
-import { Button } from '@components/generic/Button';
+import { useAppDispatch } from '@app/hooks/redux';
 import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
 import { connType } from '@core/slices/appSlice';
 
 export const Serial = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
 
   const updateSerialDeviceList = React.useCallback(async (): Promise<void> => {
@@ -21,45 +22,29 @@ export const Serial = (): JSX.Element => {
   }, [updateSerialDeviceList]);
 
   return (
-    <div>
-      <div className="flex space-x-2">
-        <Button type="button" border onClick={updateSerialDeviceList}>
-          Refresh List
-        </Button>
-        <Button
-          type="button"
-          border
-          onClick={async (): Promise<void> => {
-            console.log(await serial.getPort());
-          }}
+    <div className="space-y-2">
+      {serialDevices.map((device, index) => (
+        <div
+          className="flex justify-between p-2 bg-gray-700 rounded-md"
+          key={index}
         >
-          New Device
-        </Button>
-      </div>
-      <div className="space-y-2">
-        <div>Previously connected devices</div>
-        {serialDevices.map((device, index) => (
-          <div
-            className="flex justify-between p-2 bg-gray-700 rounded-md"
-            key={index}
-          >
-            <div className="my-auto">
-              {device.getInfo().usbProductId}
-              {device.getInfo().usbVendorId}
-            </div>
-            <IconButton
-              onClick={async (): Promise<void> => {
-                await setConnection(connType.SERIAL, {
-                  // @ts-ignore tmp
-                  device: device,
-                });
-              }}
-              icon={<FiCheck />}
-            />
-            <JSONPretty data={device.getInfo()} />
+          <div className="flex gap-4 my-auto">
+            <p>
+              Vendor: <small>{device.getInfo().usbVendorId}</small>
+            </p>
+            <p>
+              Device: <small>{device.getInfo().usbProductId}</small>
+            </p>
           </div>
-        ))}
-      </div>
+          <IconButton
+            onClick={async (): Promise<void> => {
+              dispatch(setConnType(parseInt(e.target.value)));
+              await setConnection(connType.SERIAL);
+            }}
+            icon={<FiCheck />}
+          />
+        </div>
+      ))}
     </div>
   );
 };