graceful shutdown

- confirmation dialog
- shutdown node service

client/src/features/menu/buttons/QuitIconBtn.jsx

@@ -1,21 +1,68 @@
-import { IconButton } from '@chakra-ui/button';
+import { Button, IconButton } from '@chakra-ui/button';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/modal';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { useRef, useState } from 'react';
 import { FiPower } from 'react-icons/fi';
 
 export default function QuitIconBtn(props) {
   const { clickhandler, ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef();
+
+  const handleShutdown = () => {
+    onClose();
+    clickhandler();
+  };
+
   return (
-    <Tooltip label='Quit Application'>
-      <IconButton
-        size={props.size || 'xs'}
-        icon={<FiPower />}
-        colorScheme='red'
-        variant='outline'
-        isRound
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          size={props.size || 'xs'}
+          icon={<FiPower />}
+          colorScheme='red'
+          variant='outline'
+          isRound
+          onClick={() => setIsOpen(true)}
+          _focus={{ boxShadow: 'none' }}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Server Shutdown
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              This will shutdown the program and all running servers. Are you
+              sure?
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
   );
 }

server/main.js

@@ -195,6 +195,16 @@ ipcMain.on('test-message', (event, arg) => {
 // Terminate
 ipcMain.on('shutdown', (event, arg) => {
   console.log('Got IPC shutdown');
+
+  // terminate node service
+  (async () => {
+    const { shutdown } = await import(
+      path.join('file:///', __dirname, env == 'prod' ? '../' : '', 'src/app.js')
+    );
+    // Start express server
+    await shutdown();
+  })();
+
   win.destroy();
   app.quit();
 });

server/src/app.js

@@ -106,7 +106,7 @@ export const startServer = (overrideConfig = null) => {
 };
 
 // Start OSC server
-import { initiateOSC } from './controllers/OscController.js';
+import { initiateOSC, shutdownOSCServer } from './controllers/OscController.js';
 
 export const startOSCServer = (overrideConfig = null) => {
   // Setup default port
@@ -119,3 +119,13 @@ export const startOSCClient = (overrideConfig = null) => {
   const oscOutPort = overrideConfig?.port || config.osc.portOut;
   console.log('initialise OSC Client at port: ', oscOutPort);
 };
+
+export const shutdown = () => {
+  console.log('Node service shutdown');
+
+  // shutdown express server
+  server.close();
+  // shutdown OSC Server
+  shutdownOSCServer();
+  // shutdown OSC Client
+};

server/src/controllers/OscController.js

@@ -1,7 +1,13 @@
 import { Server } from 'node-osc';
 
+let oscServer = null;
+
+export const shutdownOSCServer = () => {
+  if (oscServer != null) oscServer.close();
+};
+
 export const initiateOSC = (config) => {
-  const oscServer = new Server(config.port, '0.0.0.0', () => {
+  oscServer = new Server(config.port, '0.0.0.0', () => {
     console.log(`OSC Server is listening on port ${config.port}`);
   });