App: rewrote using hooks (#364)

Also:
- removed Log component: console.log is more than enough
- added new generic useEventListener
- removed lots of hacks in App component
- removed apState.showDownloads tab: there is a single showExplorerTab prop now
- fixed toolbar path to only be disabled when filestate is busy
- removed checks for contenteditable in shouldCatch util

Author: warpdesign

src/components/App.tsx

@@ -22,35 +22,15 @@ const Nav = observer(() => {
     const downloadClass = classNames(Classes.MINIMAL, 'download')
     const isSplitViewActive = appState.winStates[0].splitView
 
-    const showDownloadsTab = (): void => {
-        appState.showDownloadsTab()
-    }
-
-    const showExplorerTab = (): void => {
-        appState.showExplorerTab()
-    }
-
     const navClick = (): void => {
         if (appState.isExplorer) {
-            showDownloadsTab()
+            appState.toggleExplorerTab(false)
         } else {
-            showExplorerTab()
-        }
-    }
-
-    const onToggleSplitView = (): void => {
-        if (appState.isExplorer) {
-            appState.toggleSplitViewMode()
+            appState.toggleExplorerTab(true)
         }
     }
 
-    const onOpenPrefs = (): void => {
-        runInAction(() => (appState.isPrefsOpen = true))
-    }
-
-    const onOpenShortcuts = (): void => {
-        runInAction(() => (appState.isShortcutsOpen = true))
-    }
+    const onToggleSplitView = (): void => appState.isExplorer && appState.toggleSplitViewMode()
 
     return (
         <Navbar>
@@ -85,7 +65,14 @@ const Nav = observer(() => {
                     title={t('NAV.SPLITVIEW')}
                 />
                 <Navbar.Divider />
-                <Popover2 content={<HamburgerMenu onOpenShortcuts={onOpenShortcuts} onOpenPrefs={onOpenPrefs} />}>
+                <Popover2
+                    content={
+                        <HamburgerMenu
+                            onOpenShortcuts={(): void => appState.toggleShortcutsDialog(true)}
+                            onOpenPrefs={(): void => appState.togglePrefsDialog(true)}
+                        />
+                    }
+                >
                     <Button className={`data-cy-toggle-app-menu ${Classes.MINIMAL}`} icon="menu" />
                 </Popover2>
             </Navbar.Group>

src/components/Log.tsx

@@ -69,7 +69,7 @@ export const SideView = observer(({ hide, viewState }: SideViewProps) => {
             <div ref={drop} id={divId} className={activeClass}>
                 {needLogin && <LoginDialog isOpen={needLogin} onValidation={onValidation} onClose={onClose} />}
                 <TabList></TabList>
-                <Toolbar active={active && !busy} />
+                <Toolbar active={!busy} />
                 <FileView hide={hide} />
                 <Statusbar />
                 <Overlay id={`files-loader-${viewState.viewId}`} shouldShow={busy} delay={true}>

src/components/Nav.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import { FileMenu } from '$src/components/FileMenu'
 import { MakedirDialog } from '$src/components/dialogs/MakedirDialog'
 import { AppAlert } from '$src/components/AppAlert'
-import { Logger } from '$src/components/Log'
 import { AppToaster } from '$src/components/AppToaster'
 import { LocalizedError } from '$src/locale/error'
 import Keys from '$src/constants/keys'
@@ -113,7 +112,7 @@ export const Toolbar = observer(({ active }: Props) => {
         }
 
         try {
-            Logger.log("Let's create a directory :)", dirName, navigate)
+            console.log("Let's create a directory :)", dirName, navigate)
             const dir = await cache.makedir(path, dirName)
 
             if (!navigate) {
@@ -148,7 +147,7 @@ export const Toolbar = observer(({ active }: Props) => {
     const onFileAction = (action: string): void => {
         switch (action) {
             case 'makedir':
-                Logger.log('Opening new folder dialog')
+                console.log('Opening new folder dialog')
                 onMakedir()
                 break
 
@@ -161,7 +160,7 @@ export const Toolbar = observer(({ active }: Props) => {
                 break
 
             default:
-                Logger.warn('action unknown', action)
+                console.warn('action unknown', action)
         }
     }
 

src/components/SideView.tsx

@@ -20,8 +20,7 @@ describe('Nav', () => {
         options.providerProps.appState = appState
         await options.providerProps.appState.loadSettingsAndPrepareViews()
 
-        jest.spyOn(appState, 'showDownloadsTab')
-        jest.spyOn(appState, 'showExplorerTab')
+        jest.spyOn(appState, 'toggleExplorerTab')
         jest.spyOn(appState, 'toggleSplitViewMode')
 
         jest.clearAllMocks()
@@ -61,7 +60,7 @@ describe('Nav', () => {
 
             await user.click(screen.getByRole('button', { name: t('NAV.TRANSFERS') }))
 
-            expect(options.providerProps.appState.showDownloadsTab).toHaveBeenCalled()
+            expect(options.providerProps.appState.toggleExplorerTab).toHaveBeenCalledWith(false)
         })
 
         it('should show downloads when clicking on downloads button and show explorer when clicking on explorer button', async () => {
@@ -72,12 +71,12 @@ describe('Nav', () => {
 
             await user.click(transfersButton)
 
-            expect(options.providerProps.appState.showDownloadsTab).toHaveBeenCalled()
+            expect(options.providerProps.appState.toggleExplorerTab).toHaveBeenCalledWith(false)
             expect(isSelected(explorerButton)).toBe(false)
             expect(isSelected(transfersButton)).toBe(true)
 
             await user.click(explorerButton)
-            expect(options.providerProps.appState.showExplorerTab).toHaveBeenCalled()
+            expect(options.providerProps.appState.toggleExplorerTab).toHaveBeenCalledWith(true)
             expect(isSelected(explorerButton)).toBe(true)
             expect(isSelected(transfersButton)).toBe(false)
         })

src/components/Toolbar.tsx

@@ -7,7 +7,6 @@ import { inject } from 'mobx-react'
 import { AppState } from '$src/state/appState'
 import { FileState } from '$src/state/fileState'
 import { SettingsState } from '$src/state/settingsState'
-import { Logger } from '$src/components/Log'
 import { isMac } from '$src/utils/platform'
 
 interface InjectedProps extends WithTranslation {
@@ -45,13 +44,9 @@ class KeyboardHotkeysClass extends React.Component<WithTranslation> {
     /**
      * Event Handlers
      */
-    onShowDownloadsTab = (): void => {
-        this.appState.showDownloadsTab()
-    }
+    onShowDownloadsTab = (): void => this.appState.toggleExplorerTab(false)
 
-    onShowExplorerTab = (): void => {
-        this.appState.showExplorerTab()
-    }
+    onShowExplorerTab = (): void => this.appState.toggleExplorerTab(true)
 
     onNextView = (): void => {
         const winState = this.appState.winStates[0]