From 8652b454bba98e9e6ba8ea59f35ec887612ebd66 Mon Sep 17 00:00:00 2001
From: ElMoribond <ElMoribond@users.noreply.github.com>
Date: Mon, 12 Jul 2021 14:46:59 +0200
Subject: [PATCH] improved user experience

---
 web/src/AppBar.jsx | 35 +++--------------------------------
 1 file changed, 3 insertions(+), 32 deletions(-)

diff --git a/web/src/AppBar.jsx b/web/src/AppBar.jsx
index 8a8183e00..8a6aa3743 100644
--- a/web/src/AppBar.jsx
+++ b/web/src/AppBar.jsx
@@ -6,17 +6,14 @@ import AutoAwesomeIcon from './icons/AutoAwesome';
 import LightModeIcon from './icons/LightMode';
 import DarkModeIcon from './icons/DarkMode';
 import FrigateRestartIcon from './icons/FrigateRestart';
-import Dialog from './components/Dialog';
+import DialogRestart from './components/DialogRestart';
 import { useDarkMode } from './context';
 import { useCallback, useRef, useState } from 'preact/hooks';
-import { useRestart } from './api/mqtt';
 
 export default function AppBar() {
   const [showMoreMenu, setShowMoreMenu] = useState(false);
-  const [showDialog, setShowDialog] = useState(false);
-  const [showDialogWait, setShowDialogWait] = useState(false);
+  const [showDialogRestart, setShowDialogRestart] = useState(false);
   const { setDarkMode } = useDarkMode();
-  const { send: sendRestart } = useRestart();
 
   const handleSelectDarkMode = useCallback(
     (value, label) => {
@@ -36,16 +33,6 @@ export default function AppBar() {
     setShowMoreMenu(false);
   }, [setShowMoreMenu]);
 
-  const handleClickRestartDialog = useCallback(() => {
-    setShowDialog(false);
-    setShowDialogWait(true);
-    sendRestart();
-  }, [setShowDialog]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleDismissRestartDialog = useCallback(() => {
-    setShowDialog(false);
-  }, [setShowDialog]);
-
   const handleRestart = useCallback(() => {
     setShowMoreMenu(false);
     setShowDialog(true);
@@ -63,24 +50,8 @@ export default function AppBar() {
           <MenuSeparator />
           <MenuItem icon={FrigateRestartIcon} label="Restart Frigate" onSelect={handleRestart} />
         </Menu>
-      ) : null},
-      {showDialog ? (
-        <Dialog
-          onDismiss={handleDismissRestartDialog}
-          title="Restart Frigate"
-          text="Are you sure?"
-          actions={[
-            { text: 'Yes', color: 'red', onClick: handleClickRestartDialog },
-            { text: 'Cancel', onClick: handleDismissRestartDialog },
-          ]}
-        />
-      ) : null},
-      {showDialogWait ? (
-        <Dialog
-          title="Restart in progress"
-          text="Please wait a few seconds for the restart to complete before reloading the page."
-        />
       ) : null}
+      <DialogRestart showDialog={showDialogRestart} setShowDialog={setShowDialogRestart} />
     </Fragment>
   );
 }