[UI/UX] Replace native dialogs

src/backend/api/library.ts

@@ -9,8 +9,6 @@ export const openDialog = async (args: Electron.OpenDialogOptions) =>
 
 export const install = async (args: InstallParams) =>
   ipcRenderer.invoke('install', args)
-export const openMessageBox = async (args: Electron.MessageBoxOptions) =>
-  ipcRenderer.invoke('openMessageBox', args)
 export const uninstall = async (
   args: [appName: string, shouldRemovePrefix: boolean, runner: Runner]
 ) => ipcRenderer.invoke('uninstall', args)

src/backend/api/misc.ts

@@ -83,12 +83,18 @@ export const clipboardReadText = async () =>
 export const clipboardWriteText = async (text: string) =>
   ipcRenderer.send('clipboardWriteText', text)
 
-export const handleShowErrorDialog = (
-  onError: (e: Electron.IpcRendererEvent, title: string, error: string) => void
+export const handleShowDialog = (
+  onMessage: (
+    e: Electron.IpcRendererEvent,
+    title: string,
+    message: string,
+    isError: boolean,
+    buttons: Array<string>
+  ) => void
 ) => {
-  ipcRenderer.on('showErrorDialog', onError)
+  ipcRenderer.on('showDialog', onMessage)
   return () => {
-    ipcRenderer.removeListener('showErrorDialog', onError)
+    ipcRenderer.removeListener('showDialog', onMessage)
   }
 }
 

src/backend/api/settings.ts

@@ -20,8 +20,6 @@ export const showUpdateSetting = async () =>
   ipcRenderer.invoke('showUpdateSetting')
 export const egsSync = async (args: string) =>
   ipcRenderer.invoke('egsSync', args)
-export const showErrorBox = async (args: [title: string, message: string]) =>
-  ipcRenderer.invoke('showErrorBox', args)
 
 export const showLogFileInFolder = (args: {
   appName: string

src/backend/dialog/dialog.ts

@@ -9,15 +9,15 @@ function showErrorBoxModalAuto(props: {
   error: string
 }) {
   if (props.event) {
-    props.event.sender.send('showErrorDialog', props.title, props.error)
+    props.event.sender.send('showDialog', props.title, props.error, true)
   } else {
     let window: BrowserWindow | null
     try {
       window = BrowserWindow.getFocusedWindow()
       if (!window) {
         window = BrowserWindow.getAllWindows()[0]
       }
-      window.webContents.send('showErrorDialog', props.title, props.error)
+      window.webContents.send('showDialog', props.title, props.error, true)
     } catch (error) {
       logWarning(['showErrorBoxModalAuto:', error], {
         prefix: LogPrefix.Backend

src/backend/main.ts

@@ -124,7 +124,7 @@ import {
 } from './online_monitor'
 import { showErrorBoxModalAuto } from './dialog/dialog'
 
-const { showMessageBox, showOpenDialog } = dialog
+const { showOpenDialog } = dialog
 const isWindows = platform() === 'win32'
 
 let mainWindow: BrowserWindow
@@ -700,31 +700,19 @@ ipcMain.handle('getLatestReleases', async () => {
   }
 })
 
-ipcMain.on('clearCache', () => {
+ipcMain.on('clearCache', (event) => {
   clearCache()
-  dialog.showMessageBox(mainWindow, {
-    title: i18next.t('box.cache-cleared.title', 'Cache Cleared'),
-    message: i18next.t(
-      'box.cache-cleared.message',
-      'Heroic Cache Was Cleared!'
-    ),
-    buttons: [i18next.t('box.ok', 'Ok')]
-  })
+  event.sender.send(
+    'showDialog',
+    i18next.t('box.cache-cleared.title', 'Cache Cleared'),
+    i18next.t('box.cache-cleared.message', 'Heroic Cache Was Cleared!'),
+    false,
+    [i18next.t('box.ok', 'Ok')]
+  )
 })
 
 ipcMain.on('resetHeroic', async () => {
-  const { response } = await dialog.showMessageBox(mainWindow, {
-    title: i18next.t('box.reset-heroic.question.title', 'Reset Heroic'),
-    message: i18next.t(
-      'box.reset-heroic.question.message',
-      "Are you sure you want to reset Heroic? This will remove all Settings and Caching but won't remove your Installed games or your Epic credentials. Portable versions (AppImage, WinPortable, ...) of heroic needs to be restarted manually afterwards."
-    ),
-    buttons: [i18next.t('box.no'), i18next.t('box.yes')]
-  })
-
-  if (response === 1) {
-    resetHeroic()
-  }
+  resetHeroic()
 })
 
 ipcMain.on('createNewWindow', async (e, url) =>
@@ -1069,20 +1057,6 @@ ipcMain.on('showItemInFolder', async (e, item) => {
   showItemInFolder(item)
 })
 
-const openMessageBox = async (args: Electron.MessageBoxOptions) => {
-  const { response, checkboxChecked } = await showMessageBox(mainWindow, {
-    ...args
-  })
-  return { response, checkboxChecked }
-}
-
-ipcMain.handle(
-  'openMessageBox',
-  async (_, args: Electron.MessageBoxOptions) => {
-    return openMessageBox(args)
-  }
-)
-
 ipcMain.handle('install', async (event, params) => {
   const {
     appName,
@@ -1585,7 +1559,6 @@ import './shortcuts/ipc_handler'
 import './anticheat/ipc_handler'
 import './legendary/eos_overlay/ipc_handler'
 import './wine/runtimes/ipc_handler'
-import './dialog/ipc_handler'
 
 // import Store from 'electron-store'
 // interface StoreMap {

src/frontend/components/UI/Dialog/MessageBoxModal/index.tsx

@@ -0,0 +1,50 @@
+import './index.css'
+import React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader
+} from 'frontend/components/UI/Dialog'
+
+interface MessageBoxModalProps {
+  title: string
+  message: string
+  onClose: () => void
+  buttons: Array<string>
+  buttonsOnClick: Array<() => void>
+}
+
+const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
+  const getButtons = function () {
+    const allButtons = []
+    for (
+      let i = 0;
+      i < props.buttons.length && i < props.buttonsOnClick.length;
+      ++i
+    ) {
+      allButtons.push(
+        <button
+          onClick={props.buttonsOnClick[i]}
+          className={`button is-secondary outline`}
+          key={'messageBoxModalButton_' + i.toString()}
+        >
+          {props.buttons[i]}
+        </button>
+      )
+    }
+    return allButtons
+  }
+
+  return (
+    <Dialog onClose={props.onClose}>
+      <DialogHeader onClose={props.onClose} showCloseButton={true}>
+        {props.title}
+      </DialogHeader>
+      <DialogContent>{props.message}</DialogContent>
+      <DialogFooter>{getButtons()}</DialogFooter>
+    </Dialog>
+  )
+}
+
+export default MessageBoxModal

src/frontend/components/UI/Dialog/index.ts

@@ -4,3 +4,4 @@ export * from './components/Dialog'
 export * from './components/DialogContent'
 export * from './components/DialogFooter'
 export * from './components/DialogHeader'
+export * from './MessageBoxModal'

src/frontend/components/UI/DialogHandler/index.tsx

@@ -1,44 +1,70 @@
-import React, { useEffect, useState } from 'react'
+import ContextProvider from 'frontend/state/ContextProvider'
+import React, { useEffect, useContext } from 'react'
+import MessageBoxModal from '../Dialog/MessageBoxModal'
 import { ErrorDialog } from './components/ErrorDialog'
 
 export default function DialogHandler() {
-  const [showErrorDialog, setShowErrorDialog] = useState(false)
-  const [errorTitle, setErrorTitle] = useState('')
-  const [errorMessage, setErrorMessage] = useState('')
+  const { dialogModalOptions, showDialogModal } = useContext(ContextProvider)
 
   useEffect(() => {
-    const onError = (
+    const onMessage = (
       e: Electron.IpcRendererEvent,
       title: string,
-      error: string
+      message: string,
+      isError: boolean,
+      buttons: Array<string>
     ) => {
-      setErrorTitle(title)
-      setErrorMessage(error)
-      setShowErrorDialog(true)
+      showDialogModal({ title, message, isError, buttons })
     }
 
-    const removeHandleShowErrorDialogListener =
-      window.api.handleShowErrorDialog(onError)
+    const removeHandleShowDialogListener =
+      window.api.handleShowDialog(onMessage)
 
     //useEffect unmount
     return () => {
-      removeHandleShowErrorDialogListener()
+      removeHandleShowDialogListener()
     }
   }, [])
 
-  function onCloseErrorDialog() {
-    setShowErrorDialog(false)
+  const buttonsOnClick: Array<() => void> = []
+  if (dialogModalOptions.buttons) {
+    for (let i = 0; i < dialogModalOptions.buttons.length; ++i) {
+      /* eslint-disable @typescript-eslint/no-empty-function */
+      const val =
+        dialogModalOptions.buttonsOnClick &&
+        i < dialogModalOptions.buttonsOnClick.length
+          ? dialogModalOptions.buttonsOnClick[i]
+          : () => {}
+      /* eslint-enable @typescript-eslint/no-empty-function */
+      buttonsOnClick.push(() => {
+        val()
+        showDialogModal({ showDialog: false })
+      })
+    }
   }
 
   return (
     <>
-      {showErrorDialog && (
-        <ErrorDialog
-          title={errorTitle}
-          error={errorMessage}
-          onClose={onCloseErrorDialog}
-        />
-      )}
+      {dialogModalOptions.showDialog &&
+        (dialogModalOptions.isError ? (
+          <ErrorDialog
+            title={dialogModalOptions.title ? dialogModalOptions.title : ''}
+            error={dialogModalOptions.message ? dialogModalOptions.message : ''}
+            onClose={() => showDialogModal({ showDialog: false })}
+          />
+        ) : (
+          <MessageBoxModal
+            title={dialogModalOptions.title ? dialogModalOptions.title : ''}
+            message={
+              dialogModalOptions.message ? dialogModalOptions.message : ''
+            }
+            buttons={
+              dialogModalOptions.buttons ? dialogModalOptions.buttons : []
+            }
+            buttonsOnClick={buttonsOnClick}
+            onClose={() => showDialogModal({ showDialog: false })}
+          />
+        ))}
     </>
   )
 }

src/frontend/components/UI/ErrorComponent/index.tsx

@@ -9,7 +9,7 @@ import ContextProvider from 'frontend/state/ContextProvider'
 
 export default function ErrorComponent({ message }: { message: string }) {
   const { t } = useTranslation()
-  const { refreshLibrary } = useContext(ContextProvider)
+  const { refreshLibrary, showResetDialog } = useContext(ContextProvider)
 
   return (
     <div className="errorComponent">
@@ -52,7 +52,7 @@ export default function ErrorComponent({ message }: { message: string }) {
 
         <button
           className="button is-footer is-danger"
-          onClick={window.api.resetHeroic}
+          onClick={showResetDialog}
         >
           <div className="button-icontext-flex">
             <div className="button-icon-flex">

src/frontend/components/UI/ToggleSwitch/index.css

@@ -6,6 +6,7 @@
   justify-items: flex-start;
   text-align: start;
   cursor: pointer;
+  white-space: pre-line;
 }
 
 .hiddenCheckbox {

src/frontend/components/UI/UninstallModal/index.css

@@ -0,0 +1,3 @@
+.uninstallModalMessage {
+  margin-bottom: var(--space-md);
+}