Gui/Bootstrap: cleaned-up process (#363)

Also removed hardcoded call to outdated test scripts ;)

src/components/Main.tsx → src/components/App.tsx

@@ -35,7 +35,7 @@ interface InjectedProps extends WithTranslation {
     appState: AppState
 }
 
-const App = inject('appState')(
+const AppClass = inject('appState')(
     observer(
         class App extends React.Component<WithTranslation> {
             private appState: AppState
@@ -189,6 +189,7 @@ const App = inject('appState')(
 
             componentDidMount(): void {
                 // listen for events from main electron process as well as webview
+                document.body.classList.add('loaded')
                 this.addListeners()
                 this.setDarkThemeClass()
                 this.setPlatformClass()
@@ -328,6 +329,6 @@ const App = inject('appState')(
     ),
 )
 
-const Main = withTranslation()(App)
+const App = withTranslation()(AppClass)
 
-export { Main }
+export { App }

src/gui/index.tsx

@@ -7,9 +7,8 @@ import { Provider } from 'mobx-react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import process from 'process'
-import child_process from 'child_process'
 
-import { Main } from '$src/components/Main'
+import { App } from '$src/components/App'
 import { i18n } from '$src/locale/i18n'
 import { AppState } from '$src/state/appState'
 import initFS from '$src/utils/initFS'
@@ -22,60 +21,27 @@ configure({
     safeDescriptors: window.ENV.CY ? false : true,
 })
 
-class App {
-    appState: AppState
+const bootstrap = async () => {
+    const appState = new AppState()
 
-    constructor() {
-        this.appState = new AppState()
-    }
+    initFS()
 
-    // debug stuff
-    createTestFolder(): Promise<void> {
-        return new Promise((resolve) => {
-            // Development stuff: create fake directory for testing
-            // const exec = require('child_process').exec;
-            const exec = child_process.exec
-            exec('/Users/leo/tmp_ftp.sh', (err: Error) => {
-                if (err) {
-                    console.log('error preparing fake folders', err)
-                }
+    await appState.loadSettingsAndPrepareViews()
 
-                resolve()
-            })
-        })
-    }
+    await i18n.promise
 
-    init = async (): Promise<void> => {
-        if (window.ENV.NODE_ENV !== 'production') {
-            await this.createTestFolder()
-        }
-
-        initFS()
-
-        await this.appState.loadSettingsAndPrepareViews()
-        // we need for translations to be ready too
-        await i18n.promise
-
-        this.renderApp()
-    }
-
-    renderApp = async (): Promise<void> => {
-        document.body.classList.add('loaded')
-
-        ReactDOM.render(
-            <DndProvider backend={HTML5Backend}>
-                <I18nextProvider i18n={i18n.i18next}>
-                    <Provider appState={this.appState}>
-                        <HotkeysProvider>
-                            <Main />
-                        </HotkeysProvider>
-                    </Provider>
-                </I18nextProvider>
-            </DndProvider>,
-            document.getElementById('root'),
-        )
-    }
+    ReactDOM.render(
+        <DndProvider backend={HTML5Backend}>
+            <I18nextProvider i18n={i18n.i18next}>
+                <Provider appState={appState}>
+                    <HotkeysProvider>
+                        <App />
+                    </HotkeysProvider>
+                </Provider>
+            </I18nextProvider>
+        </DndProvider>,
+        document.getElementById('root'),
+    )
 }
 
-const app = new App()
-app.init()
+bootstrap()