Adjusted button design

amosproj · Jul 14, 2024 · 8054235 · 8054235
1 parent 102a8cc
commit 8054235
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 91 deletions.
diff --git a/src/frontend/app/dashboard/change_status.tsx b/src/frontend/app/dashboard/change_status.tsx
@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { PauseCircleIcon, PlayCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
-import { isConnectorRunning } from '@/actions/api';
 
 interface ConnectorStatusProps {
     connectorName: string | undefined;
+    connectorStatus: boolean | null;
+    callbackFunction: () => void;
 }
 
-export default function ChangeStatusButton({ connectorName }: ConnectorStatusProps) {
+export default function ChangeStatusButton({ connectorName, connectorStatus, callbackFunction }: ConnectorStatusProps) {
     const [buttonText, setButtonText] = useState<string>('Checking status...');
     const [iconName, setIconName] = useState<string>('ExclamationCircleIcon');
-    const [buttonColor, setButtonColor] = useState<string>('bg-green-500');
+    const [buttonColor, setButtonColor] = useState<string>('bg-gray-700');
 
     const iconMapping: { [key: string]: React.ElementType } = {
         PauseCircleIcon: PauseCircleIcon,
@@ -18,56 +19,41 @@ export default function ChangeStatusButton({ connectorName }: ConnectorStatusPro
 
     const changeStatus = async () => {
         if (!connectorName) return;
+        if (connectorStatus == null) return;
 
         try {
-            const connectorRunningResponse = await isConnectorRunning(connectorName || "");
-            if (connectorRunningResponse) {
+            if (connectorStatus) {
                 await fetch('/api/pauseConnector');
-                setButtonText("Start the connector");
-                setIconName("PlayCircleIcon");
-                setButtonColor('bg-green-500');
             } else {
                 await fetch('/api/unpauseConnector');
-                setButtonText("Pause the connector");
-                setIconName("PauseCircleIcon");
-                setButtonColor('bg-red-500');
             }
+            await callbackFunction();
         } catch (error) {
-            setButtonText('Error checking status');
-            setIconName("ExclamationCircleIcon");
-            setButtonColor('bg-red-500');
+            console.error("There was an error changing conenctor status");
         }
     };
 
     useEffect(() => {
-        const fetchInitialStatus = async () => {
-            if (!connectorName) return;
-
-            try {
-                const connectorRunningResponse = await isConnectorRunning(connectorName || "");
-                if (connectorRunningResponse) {
-                    setButtonText("Pause the connector");
-                    setIconName("PauseCircleIcon");
-                    setButtonColor('bg-red-500');
-                } else {
-                    setButtonText("Start the connector");
-                    setIconName("PlayCircleIcon");
-                    setButtonColor('bg-green-500');
-                }
-            } catch (error) {
-                setButtonText('Error checking status');
-                setIconName("ExclamationCircleIcon");
-                setButtonColor('bg-red-500');
-            }
-        };
+        if (connectorStatus == null) {
+            setButtonText("Checking status...");
+            setIconName("ExclamationCircleIcon");
+            setButtonColor("bg-gray-700");
+        } else if (connectorStatus) {
+            setButtonText("Pause the connector");
+            setIconName("PauseCircleIcon");
+            setButtonColor('bg-red-500');
+        } else {
+            setButtonText("Start the connector");
+            setIconName("PlayCircleIcon");
+            setButtonColor('bg-green-500');
+        }
+    }, [connectorStatus])
 
-        fetchInitialStatus();
-    }, [connectorName]);
 
     const IconComponent = iconMapping[iconName] || ExclamationCircleIcon;
 
     return (
-        <div className="flex justify-start pb-5">
+        <div className="flex justify-start mt-5">
             <button onClick={changeStatus}
                 className={`mb-4 px-4 py-2 rounded-md hover:bg-neonBlue text-white flex items-center ${buttonColor}`}
                 style={{ height: '50px', width: '240px' }}> 

diff --git a/src/frontend/app/dashboard/connector_status.tsx b/src/frontend/app/dashboard/connector_status.tsx
@@ -1,16 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import { isConnectorRunning, isDatabaseRunning } from '@/actions/api';
+import ChangeStatusButton from './change_status';
 
 interface ConnectorStatusProps {
         connectorName: string | undefined;
 }
 
-function capitalizeFirstLetter(string: string | undefined) {
-    if (string == undefined) return "";
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 export default function ConnectorStatus({ connectorName }: ConnectorStatusProps) {
     const [status, setStatus] = useState<string>('Checking connector status...');
     const [running, setRunning] = useState<boolean | null>(null);
@@ -70,61 +66,64 @@ export default function ConnectorStatus({ connectorName }: ConnectorStatusProps)
     }, [connectorName]);
 
     return (
-        <div className={`flex items-center bg-gray-100 border-2 rounded-lg p-5 text-black ${
+        <div className={`flex bg-gray-100 border-2 rounded-lg p-5 text-black flex-col pr-32 ${
             running === null || dbRunning === null
             ? '' 
             : running && dbRunning
             ? 'border-green-500' 
             : 'border-red-500'
         }`}>
-            <div className="flex items-baseline space-x-4">
-                <button 
-                    onClick={fetchStatus}
-                    className="px-4 py-2 text-black bg-white rounded hover:bg-neonBlue shadow-xl flex"
-                >
-                    <ArrowPathIcon className="w-6 mr-1"/>
-                    Refresh
-                </button>
-                <div className="flex flex-col gap-4">
-                    <div className={`status-field ${
-                                running === null 
-                                ? 'bg-gray-100' 
-                                : running 
-                                ? 'bg-green-100 border-green-500' 
-                                : 'bg-red-100 border-red-500'
-                            }`}>
-                        <span 
-                            className={`h-4 w-4 rounded-full ${
-                                running === null 
-                                ? 'bg-gray-500' 
-                                : running 
-                                ? 'bg-green-500' 
-                                : 'bg-red-500'
-                            }`} 
-                        />
-                        <span className="ml-2">{status}</span>
-                    </div>
+            <div className="flex flex-row">
+                <div className="flex items-baseline space-x-4">
+                    <button 
+                        onClick={fetchStatus}
+                        className="px-4 py-2 text-black bg-white rounded hover:bg-neonBlue shadow-xl flex"
+                    >
+                        <ArrowPathIcon className="w-6 mr-1"/>
+                        Refresh
+                    </button>
+                    <div className="flex flex-col gap-4">
+                        <div className={`status-field ${
+                                    running === null 
+                                    ? 'bg-gray-100' 
+                                    : running 
+                                    ? 'bg-green-100 border-green-500' 
+                                    : 'bg-red-100 border-red-500'
+                                }`}>
+                            <span 
+                                className={`h-4 w-4 rounded-full ${
+                                    running === null 
+                                    ? 'bg-gray-500' 
+                                    : running 
+                                    ? 'bg-green-500' 
+                                    : 'bg-red-500'
+                                }`} 
+                            />
+                            <span className="ml-2">{status}</span>
+                        </div>
 
-                    <div className={`status-field ${
-                                dbRunning === null 
-                                ? 'bg-gray-100' 
-                                : dbRunning 
-                                ? 'bg-green-100 border-green-500' 
-                                : 'bg-red-100 border-red-500'
-                            }`}>
-                        <span 
-                            className={`h-4 w-4 rounded-full ${
-                                dbRunning === null 
-                                ? 'bg-gray-500' 
-                                : dbRunning 
-                                ? 'bg-green-500' 
-                                : 'bg-red-500'
-                            }`} 
-                        />
-                        <span className="ml-2">{dbStatus}</span>
+                        <div className={`status-field ${
+                                    dbRunning === null 
+                                    ? 'bg-gray-100' 
+                                    : dbRunning 
+                                    ? 'bg-green-100 border-green-500' 
+                                    : 'bg-red-100 border-red-500'
+                                }`}>
+                            <span 
+                                className={`h-4 w-4 rounded-full ${
+                                    dbRunning === null 
+                                    ? 'bg-gray-500' 
+                                    : dbRunning 
+                                    ? 'bg-green-500' 
+                                    : 'bg-red-500'
+                                }`} 
+                            />
+                            <span className="ml-2">{dbStatus}</span>
+                        </div>
                     </div>
                 </div>
             </div>
+            <ChangeStatusButton connectorName={connectorName} connectorStatus={running} callbackFunction={fetchStatus}/>
         </div>
     );
 }
diff --git a/src/frontend/app/dashboard/page.tsx b/src/frontend/app/dashboard/page.tsx
@@ -9,13 +9,10 @@ export default function Page() {
 
     return (
         <main className="flex flex-col p-6">
-            <div className="grid grid-cols-2 gap-5">
+            <div className="flex">
                 <ConnectorStatus connectorName={process.env.NEXT_PUBLIC_CONNECTOR_NAME || "bank"}/>
             </div>
             <div className="grid grid-cols-2 gap-5"><br></br></div>
-            <div className="grid grid-cols-2 gap-5">
-                <ChangeStatusButton connectorName={process.env.NEXT_PUBLIC_CONNECTOR_NAME || "bank"}/>
-            </div>
         </main>
     );
 }