From 819c14a59271b712261c418d3e4d28c94746e518 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sat, 26 Feb 2022 15:05:09 +1100
Subject: [PATCH] Modal and connection modal improvements

---
 src/components/Connection.tsx         | 163 +++++++++++++-------------
 src/components/connection/BLE.tsx     |  45 +++----
 src/components/connection/Serial.tsx  |  73 ++++++------
 src/components/generic/Card.tsx       |   1 +
 src/components/generic/Modal.tsx      |  90 ++++++++------
 src/components/menu/BottomNav.tsx     |   2 +-
 src/components/modals/VersionInfo.tsx |  87 +++++++-------
 7 files changed, 237 insertions(+), 224 deletions(-)

diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index 6534e607..66a6294d 100644
--- a/src/components/Connection.tsx
+++ b/src/components/Connection.tsx
@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useEffect } from 'react';
 
-import { AnimatePresence, m } from 'framer-motion';
+import { m } from 'framer-motion';
 
 import { BLE } from '@components/connection/BLE';
 import { HTTP } from '@components/connection/HTTP';
@@ -49,92 +49,87 @@ export const Connection = (): JSX.Element => {
   }, [meshtasticState.ready, dispatch]);
 
   return (
-    <AnimatePresence>
-      {appState.connectionModalOpen && (
-        <Modal
-          title="Connect to a device"
-          onClose={(): void => {
-            dispatch(closeConnectionModal());
-          }}
-        >
-          <div className="flex max-w-3xl flex-col gap-4 md:flex-row">
-            <div className="md:w-1/2">
-              <div className="space-y-2">
-                <Select
-                  label="Connection Method"
-                  optionsEnum={connType}
-                  value={appState.connType}
-                  onChange={(e): void => {
-                    dispatch(setConnType(parseInt(e.target.value)));
-                  }}
-                  disabled={
-                    meshtasticState.deviceStatus ===
-                    Types.DeviceStatusEnum.DEVICE_CONNECTED
-                  }
+    <Modal
+      title="Connect to a device"
+      open={appState.connectionModalOpen}
+      onClose={(): void => {
+        dispatch(closeConnectionModal());
+      }}
+    >
+      <div className="flex max-w-3xl flex-col gap-4 md:flex-row">
+        <div className="flex flex-col md:w-1/2">
+          <div className="flex flex-grow flex-col space-y-2">
+            <Select
+              label="Connection Method"
+              optionsEnum={connType}
+              value={appState.connType}
+              onChange={(e): void => {
+                dispatch(setConnType(parseInt(e.target.value)));
+              }}
+              disabled={
+                meshtasticState.deviceStatus ===
+                Types.DeviceStatusEnum.DEVICE_CONNECTED
+              }
+            />
+            {appState.connType === connType.HTTP && (
+              <HTTP
+                connecting={
+                  meshtasticState.deviceStatus ===
+                  Types.DeviceStatusEnum.DEVICE_CONNECTED
+                }
+              />
+            )}
+            {appState.connType === connType.BLE && (
+              <BLE
+                connecting={
+                  meshtasticState.deviceStatus ===
+                  Types.DeviceStatusEnum.DEVICE_CONNECTED
+                }
+              />
+            )}
+            {appState.connType === connType.SERIAL && (
+              <Serial
+                connecting={
+                  meshtasticState.deviceStatus ===
+                  Types.DeviceStatusEnum.DEVICE_CONNECTED
+                }
+              />
+            )}
+          </div>
+        </div>
+        <div className="md:w-1/2">
+          <div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+            {meshtasticState.logs.length === 0 && (
+              <div className="flex h-full w-full">
+                <m.img
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="m-auto h-40 w-40 text-green-500"
+                  src={`/placeholders/${
+                    appState.darkMode ? 'View Code Dark.svg' : 'View Code.svg'
+                  }`}
                 />
-                {appState.connType === connType.HTTP && (
-                  <HTTP
-                    connecting={
-                      meshtasticState.deviceStatus ===
-                      Types.DeviceStatusEnum.DEVICE_CONNECTED
-                    }
-                  />
-                )}
-                {appState.connType === connType.BLE && (
-                  <BLE
-                    connecting={
-                      meshtasticState.deviceStatus ===
-                      Types.DeviceStatusEnum.DEVICE_CONNECTED
-                    }
-                  />
-                )}
-                {appState.connType === connType.SERIAL && (
-                  <Serial
-                    connecting={
-                      meshtasticState.deviceStatus ===
-                      Types.DeviceStatusEnum.DEVICE_CONNECTED
-                    }
-                  />
-                )}
               </div>
-            </div>
-            <div className="md:w-1/2">
-              <div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
-                {meshtasticState.logs.length === 0 && (
-                  <div className="flex h-full w-full">
-                    <m.img
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="m-auto h-40 w-40 text-green-500"
-                      src={`/placeholders/${
-                        appState.darkMode
-                          ? 'View Code Dark.svg'
-                          : 'View Code.svg'
-                      }`}
-                    />
+            )}
+            {meshtasticState.logs
+              .filter((log) => {
+                return ![
+                  Types.Emitter.handleFromRadio,
+                  Types.Emitter.handleMeshPacket,
+                  Types.Emitter.sendPacket,
+                ].includes(log.emitter);
+              })
+              .map((log, index) => (
+                <div key={index} className="flex">
+                  <div className="truncate font-mono text-sm">
+                    {log.message}
                   </div>
-                )}
-                {meshtasticState.logs
-                  .filter((log) => {
-                    return ![
-                      Types.Emitter.handleFromRadio,
-                      Types.Emitter.handleMeshPacket,
-                      Types.Emitter.sendPacket,
-                    ].includes(log.emitter);
-                  })
-                  .map((log, index) => (
-                    <div key={index} className="flex">
-                      <div className="truncate font-mono text-sm">
-                        {log.message}
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            </div>
+                </div>
+              ))}
           </div>
-        </Modal>
-      )}
-    </AnimatePresence>
+        </div>
+      </div>
+    </Modal>
   );
 };
diff --git a/src/components/connection/BLE.tsx b/src/components/connection/BLE.tsx
index 94f649ae..66c79c3c 100644
--- a/src/components/connection/BLE.tsx
+++ b/src/components/connection/BLE.tsx
@@ -36,26 +36,31 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-2">
-      {bleDevices.map((device, index) => (
-        <div
-          onClick={async (): Promise<void> => {
-            await setConnection(connType.BLE);
-          }}
-          className="flex justify-between rounded-md bg-gray-700 p-2 dark:text-white"
-          key={index}
-        >
-          <div className="my-auto">{device.name}</div>
-          <IconButton
-            nested
-            onClick={async (): Promise<void> => {
-              await setConnection(connType.BLE);
-            }}
-            icon={<FiArrowRightCircle />}
-            disabled={connecting}
-          />
-        </div>
-      ))}
+    <form onSubmit={onSubmit} className="flex flex-grow flex-col">
+      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+        {bleDevices.length > 0 ? (
+          bleDevices.map((device, index) => (
+            <div
+              className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
+              key={index}
+            >
+              <div className="my-auto">{device.name}</div>
+              <IconButton
+                nested
+                onClick={async (): Promise<void> => {
+                  await setConnection(connType.BLE);
+                }}
+                icon={<FiArrowRightCircle />}
+                disabled={connecting}
+              />
+            </div>
+          ))
+        ) : (
+          <div className="m-auto">
+            <p>No previously connected devices found</p>
+          </div>
+        )}
+      </div>
       <Button
         className="mt-2 ml-auto"
         onClick={async (): Promise<void> => {
diff --git a/src/components/connection/Serial.tsx b/src/components/connection/Serial.tsx
index fcbcec63..5019a04c 100644
--- a/src/components/connection/Serial.tsx
+++ b/src/components/connection/Serial.tsx
@@ -38,44 +38,45 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-2">
-      {serialDevices.length > 0 ? (
-        serialDevices.map((device, index) => (
-          <div
-            className="flex justify-between rounded-md bg-secondaryDark p-2 dark:text-white"
-            key={index}
-          >
-            <div className="my-auto flex gap-4">
-              <p>
-                Vendor: <small>{device.getInfo().usbVendorId}</small>
-              </p>
-              <p>
-                Device: <small>{device.getInfo().usbProductId}</small>
-              </p>
+    <form onSubmit={onSubmit} className="flex flex-grow flex-col">
+      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+        {serialDevices.length > 0 ? (
+          serialDevices.map((device, index) => (
+            <div
+              className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
+              key={index}
+            >
+              <div className="my-auto flex gap-4">
+                <p>
+                  Vendor: <small>{device.getInfo().usbVendorId}</small>
+                </p>
+                <p>
+                  Device: <small>{device.getInfo().usbProductId}</small>
+                </p>
+              </div>
+              <IconButton
+                onClick={async (): Promise<void> => {
+                  dispatch(
+                    setConnectionParams({
+                      type: connType.SERIAL,
+                      params: {
+                        port: device,
+                      },
+                    }),
+                  );
+                  await setConnection(connType.SERIAL);
+                }}
+                disabled={connecting}
+                icon={<FiArrowRightCircle />}
+              />
             </div>
-            <IconButton
-              nested
-              onClick={async (): Promise<void> => {
-                dispatch(
-                  setConnectionParams({
-                    type: connType.SERIAL,
-                    params: {
-                      port: device,
-                    },
-                  }),
-                );
-                await setConnection(connType.SERIAL);
-              }}
-              disabled={connecting}
-              icon={<FiArrowRightCircle />}
-            />
+          ))
+        ) : (
+          <div className="m-auto">
+            <p>No previously connected devices found</p>
           </div>
-        ))
-      ) : (
-        <div className="h-40 rounded-md border border-gray-300 dark:border-gray-600">
-          <p>No previously connected devices found</p>
-        </div>
-      )}
+        )}
+      </div>
       <Button
         className="mt-2 ml-auto"
         onClick={async (): Promise<void> => {
diff --git a/src/components/generic/Card.tsx b/src/components/generic/Card.tsx
index bf95e070..c5b01352 100644
--- a/src/components/generic/Card.tsx
+++ b/src/components/generic/Card.tsx
@@ -47,6 +47,7 @@ export const Card = ({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          transition={{ duration: 0.1 }}
         >
           {children}
         </m.div>
diff --git a/src/components/generic/Modal.tsx b/src/components/generic/Modal.tsx
index 4cdf362f..5e5962b6 100644
--- a/src/components/generic/Modal.tsx
+++ b/src/components/generic/Modal.tsx
@@ -1,58 +1,74 @@
 import type React from 'react';
 
-import { m } from 'framer-motion';
+import { AnimatePresence, m } from 'framer-motion';
 import { FiX } from 'react-icons/fi';
 
 import { useAppSelector } from '@hooks/useAppSelector';
 
 import { IconButton } from './button/IconButton';
-import { Card } from './Card';
+import { Card, CardProps } from './Card';
 
-export interface ModalProps {
-  title: string;
+export interface ModalProps extends CardProps {
+  open: boolean;
+  bgDismiss?: boolean;
   onClose: () => void;
-  actions?: React.ReactNode;
-  children: React.ReactNode;
 }
 
 export const Modal = ({
-  title,
+  open,
+  bgDismiss,
   onClose,
   actions,
-  children,
+  ...props
 }: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
 
   return (
-    <m.div className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}>
-      <m.div
-        className="fixed h-full w-full backdrop-blur-sm backdrop-filter"
-        onClick={onClose}
-      />
-      <m.div className="text-center ">
-        <span
-          className="inline-block h-screen align-middle "
-          aria-hidden="true"
+    <AnimatePresence>
+      {open && (
+        <m.div
+          className={`fixed inset-0  ${darkMode ? 'dark' : ''} ${
+            open ? 'z-30' : 'z-0'
+          }`}
         >
-          &#8203;
-        </span>
-        <div className="inline-block w-full max-w-3xl align-middle">
-          <Card
-            border
-            draggable
-            title={title}
-            actions={
-              <>
-                {actions}
-                <IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
-              </>
-            }
-            className="relative flex-col gap-4 "
-          >
-            {children}
-          </Card>
-        </div>
-      </m.div>
-    </m.div>
+          <m.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.1 }}
+            className="fixed h-full w-full backdrop-blur-md backdrop-filter"
+            onClick={(): void => {
+              bgDismiss && onClose();
+            }}
+          />
+          <m.div className="text-center ">
+            <span
+              className="inline-block h-screen align-middle "
+              aria-hidden="true"
+            >
+              &#8203;
+            </span>
+            <div className="inline-block w-full max-w-3xl align-middle">
+              <Card
+                border
+                draggable
+                actions={
+                  <div className="flex gap-2">
+                    {actions}
+                    <IconButton
+                      tooltip="Close"
+                      icon={<FiX />}
+                      onClick={onClose}
+                    />
+                  </div>
+                }
+                className="relative flex-col gap-4"
+                {...props}
+              />
+            </div>
+          </m.div>
+        </m.div>
+      )}
+    </AnimatePresence>
   );
 };
diff --git a/src/components/menu/BottomNav.tsx b/src/components/menu/BottomNav.tsx
index 8c92b543..d2394312 100644
--- a/src/components/menu/BottomNav.tsx
+++ b/src/components/menu/BottomNav.tsx
@@ -146,7 +146,7 @@ export const BottomNav = (): JSX.Element => {
       </BottomNavItem>
 
       <VersionInfo
-        visible={showVersionInfo}
+        modalOpen={showVersionInfo}
         onClose={(): void => {
           setShowVersionInfo(false);
         }}
diff --git a/src/components/modals/VersionInfo.tsx b/src/components/modals/VersionInfo.tsx
index 757c884d..938f4ea0 100644
--- a/src/components/modals/VersionInfo.tsx
+++ b/src/components/modals/VersionInfo.tsx
@@ -1,7 +1,6 @@
 import type React from 'react';
 import { useEffect } from 'react';
 
-import { AnimatePresence } from 'framer-motion';
 import { MdUpgrade } from 'react-icons/md';
 import useSWR from 'swr';
 
@@ -38,12 +37,12 @@ export interface Commit {
 }
 
 export interface VersionInfoProps {
-  visible: boolean;
+  modalOpen: boolean;
   onClose: () => void;
 }
 
 export const VersionInfo = ({
-  visible,
+  modalOpen,
   onClose,
 }: VersionInfoProps): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
@@ -67,50 +66,46 @@ export const VersionInfo = ({
         dispatch(setUpdateAvaliable(true));
       }
     }
-  }, [data]);
+  }, [data, dispatch]);
 
   return (
-    <AnimatePresence>
-      {visible && (
-        <Modal
-          title="Version Info"
-          actions={
-            // TODO: Check if version is hosted, and merge pwa update button here
-            appState.updateAvaliable && (
-              <a href={`http://${connectionUrl}/admin/spiffs`}>
-                <IconButton tooltip="Update now" icon={<MdUpgrade />} />
-              </a>
-            )
-          }
-          onClose={(): void => {
-            onClose();
-          }}
-        >
-          <div className="flex h-96 flex-col gap-1 overflow-y-auto dark:text-white">
-            {data &&
-              data.map((commit) => (
-                <div
-                  key={commit.sha}
-                  className={`flex gap-2 rounded-md border border-transparent py-1 px-2 hover:border-primary ${
-                    commit.sha.substring(0, 7) === process.env.COMMIT_HASH
-                      ? 'bg-primary'
-                      : 'dark:bg-secondaryDark'
-                  }`}
-                >
-                  <div className="my-auto text-xs dark:text-gray-400">
-                    {new Date(
-                      commit.commit.committer.date,
-                    ).toLocaleDateString()}
-                  </div>
-                  <div className="my-auto font-mono text-sm">
-                    {commit.sha.substring(0, 7)}
-                  </div>
-                  <div className="truncate">{commit.commit.message}</div>
-                </div>
-              ))}
-          </div>
-        </Modal>
-      )}
-    </AnimatePresence>
+    <Modal
+      open={modalOpen}
+      title="Version Info"
+      bgDismiss
+      actions={
+        // TODO: Check if version is hosted, and merge pwa update button here
+        appState.updateAvaliable && (
+          <a href={`http://${connectionUrl}/admin/spiffs`}>
+            <IconButton tooltip="Update now" icon={<MdUpgrade />} />
+          </a>
+        )
+      }
+      onClose={(): void => {
+        onClose();
+      }}
+    >
+      <div className="flex h-96 flex-col gap-1 overflow-y-auto dark:text-white">
+        {data &&
+          data.map((commit) => (
+            <div
+              key={commit.sha}
+              className={`flex gap-2 rounded-md border border-transparent py-1 px-2 hover:border-primary ${
+                commit.sha.substring(0, 7) === process.env.COMMIT_HASH
+                  ? 'bg-primary'
+                  : 'dark:bg-secondaryDark'
+              }`}
+            >
+              <div className="my-auto text-xs dark:text-gray-400">
+                {new Date(commit.commit.committer.date).toLocaleDateString()}
+              </div>
+              <div className="my-auto font-mono text-sm">
+                {commit.sha.substring(0, 7)}
+              </div>
+              <div className="truncate">{commit.commit.message}</div>
+            </div>
+          ))}
+      </div>
+    </Modal>
   );
 };