chore: formatting, renaming

frontend/src/components/ConnectionToast.tsx

@@ -1,69 +1,71 @@
 import React, { useEffect, useState } from 'react';
 import { Toast, Button, ToastContainer } from 'react-bootstrap';
 
-type SnackbarToast = {
+type ConnectionToastProps = {
   connectionStatus: string;
 };
 
-export const ConnectionToast = React.memo(({ connectionStatus }: SnackbarToast) => {
+export const ConnectionToast = React.memo(
-  const [show, setShow] = useState(true);
+  ({ connectionStatus }: ConnectionToastProps) => {
+    const [show, setShow] = useState(true);
 
-  useEffect(() => {
+    useEffect(() => {
-    setShow(true);
+      setShow(true);
-  }, [connectionStatus]);
+    }, [connectionStatus]);
 
-  const handleClose = () => setShow(false);
+    const handleClose = () => setShow(false);
 
-  const getToastContent = (): {
+    const getToastContent = (): {
-    message: string;
+      message: string;
-    bg: string; // bootstrap uses `bg` prop for background color
+      bg: string; // bootstrap uses `bg` prop for background color
-    delay: number | undefined;
+      delay: number | undefined;
-  } => {
+    } => {
-    switch (connectionStatus) {
+      switch (connectionStatus) {
-      case 'connecting':
+        case 'connecting':
-        return {
+          return {
-          message: 'Connecting...',
+            message: 'Connecting...',
-          bg: 'info',
+            bg: 'info',
-          delay: undefined
+            delay: undefined
-        };
+          };
-      case 'connected':
+        case 'connected':
-        return { message: 'Connected', bg: 'success', delay: 1000 };
+          return { message: 'Connected', bg: 'success', delay: 1000 };
-      case 'disconnected':
+        case 'disconnected':
-        return {
+          return {
-          message: 'Disconnected',
+            message: 'Disconnected',
-          bg: 'danger',
+            bg: 'danger',
-          delay: undefined
+            delay: undefined
-        };
+          };
-      case 'reconnecting':
+        case 'reconnecting':
-        return {
+          return {
-          message: 'Reconnecting...',
+            message: 'Reconnecting...',
-          bg: 'info',
+            bg: 'info',
-          delay: undefined
+            delay: undefined
-        };
+          };
-      default:
+        default:
-        return {
+          return {
-          message: '',
+            message: '',
-          bg: 'info',
+            bg: 'info',
-          delay: undefined
+            delay: undefined
-        };
+          };
-    }
+      }
-  };
+    };
 
-  const { message, bg, delay } = getToastContent();
+    const { message, bg, delay } = getToastContent();
 
-  return (
+    return (
-    <ToastContainer position="bottom-center">
+      <ToastContainer position="bottom-center">
-      <Toast
+        <Toast
-        show={show}
+          show={show}
-        onClose={handleClose}
+          onClose={handleClose}
-        delay={delay}
+          delay={delay}
-        autohide={delay !== undefined}
+          autohide={delay !== undefined}
-        bg={bg}>
+          bg={bg}>
-        <Toast.Body className="d-flex justify-content-between">
+          <Toast.Body className="d-flex justify-content-between">
-          {message}
+            {message}
-          <Button variant="close" size="sm" onClick={handleClose} />
+            <Button variant="close" size="sm" onClick={handleClose} />
-        </Toast.Body>
+          </Toast.Body>
-      </Toast>
+        </Toast>
-    </ToastContainer>
+      </ToastContainer>
-  );
+    );
-});
+  }
+);