Sort components (#163)

* Move common components to the `common` directory
* rename style directory
* Move ForkAwesome to common
* Move initializers and restructure application-loader.tsx

src/components/application-loader/application-loader.tsx

@@ -1,33 +1,29 @@
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router'
-import { InitTask, setUp } from '../../initializers'
 import './application-loader.scss'
+import { createSetUpTaskList, InitTask } from './initializers'
 
 import { LoadingScreen } from './loading-screen'
 
 export const ApplicationLoader: React.FC = ({ children }) => {
+  const { pathname } = useLocation()
+
+  const setUpTasks = useCallback(() => {
+    const baseUrl: string = window.location.pathname.replace(pathname, '') + '/'
+    console.debug('Base URL is', baseUrl)
+    return createSetUpTaskList(baseUrl)
+  }, [pathname])
+
   const [failedTitle, setFailedTitle] = useState<string>('')
   const [doneTasks, setDoneTasks] = useState<number>(0)
-  const [initTasks, setInitTasks] = useState<InitTask[]>([])
-  const { pathname } = useLocation()
-  const [tasksAlreadyTriggered, setTasksAlreadyTriggered] = useState<boolean>(false)
+  const [initTasks] = useState<InitTask[]>(setUpTasks)
 
-  const runTask = async (task: Promise<void>): Promise<void> => {
+  const runTask = useCallback(async (task: Promise<void>): Promise<void> => {
     await task
     setDoneTasks(prevDoneTasks => {
       return prevDoneTasks + 1
     })
-  }
-
-  useEffect(() => {
-    if (tasksAlreadyTriggered) {
-      return
-    }
-    setTasksAlreadyTriggered(true)
-    const baseUrl: string = window.location.pathname.replace(pathname, '') + '/'
-    console.debug('Base URL is', baseUrl)
-    setInitTasks(setUp(baseUrl))
-  }, [tasksAlreadyTriggered, pathname])
+  }, [])
 
   useEffect(() => {
     for (const task of initTasks) {
@@ -36,7 +32,7 @@ export const ApplicationLoader: React.FC = ({ children }) => {
         setFailedTitle(task.name)
       })
     }
-  }, [initTasks])
+  }, [initTasks, runTask])
 
   return (
     doneTasks < initTasks.length || initTasks.length === 0

src/components/application-loader/initializers/configLoader.ts

@@ -0,0 +1,21 @@
+import { getBackendConfig } from '../../../api/backend-config'
+import { getFrontendConfig } from '../../../api/frontend-config'
+import { setBackendConfig } from '../../../redux/backend-config/methods'
+import { setFrontendConfig } from '../../../redux/frontend-config/methods'
+import { getAndSetUser } from '../../../utils/apiUtils'
+
+export const loadAllConfig: (baseUrl: string) => Promise<void> = async (baseUrl) => {
+  const frontendConfig = await getFrontendConfig(baseUrl)
+  if (!frontendConfig) {
+    return Promise.reject(new Error('Frontend config empty!'))
+  }
+  setFrontendConfig(frontendConfig)
+
+  const backendConfig = await getBackendConfig()
+  if (!backendConfig) {
+    return Promise.reject(new Error('Backend config empty!'))
+  }
+  setBackendConfig(backendConfig)
+
+  await getAndSetUser()
+}

src/components/application-loader/initializers/i18n.ts

@@ -0,0 +1,52 @@
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import Backend from 'i18next-http-backend'
+import moment from 'moment'
+import 'moment/locale/ar'
+import 'moment/locale/ca'
+import 'moment/locale/cs'
+import 'moment/locale/da'
+import 'moment/locale/de'
+import 'moment/locale/el'
+import 'moment/locale/eo'
+import 'moment/locale/es'
+import 'moment/locale/fr'
+import 'moment/locale/hi'
+import 'moment/locale/hr'
+import 'moment/locale/id'
+import 'moment/locale/it'
+import 'moment/locale/ja'
+import 'moment/locale/ko'
+import 'moment/locale/nl'
+import 'moment/locale/pl'
+import 'moment/locale/pt'
+import 'moment/locale/ru'
+import 'moment/locale/sk'
+import 'moment/locale/sr'
+import 'moment/locale/sv'
+import 'moment/locale/tr'
+import 'moment/locale/uk'
+import 'moment/locale/vi'
+import 'moment/locale/zh-cn'
+import 'moment/locale/zh-tw'
+import { initReactI18next } from 'react-i18next'
+
+export const setUpI18n = async (): Promise<void> => {
+  await i18n
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      fallbackLng: 'en',
+      debug: true,
+      backend: {
+        loadPath: '/locales/{{lng}}.json'
+      },
+
+      interpolation: {
+        escapeValue: false // not needed for react as it escapes by default
+      }
+    })
+
+  moment.locale(i18n.language)
+}

src/components/application-loader/initializers/index.ts

@@ -0,0 +1,28 @@
+import { loadAllConfig } from './configLoader'
+import { setUpI18n } from './i18n'
+
+const customDelay: () => Promise<void> = async () => {
+  if (window.localStorage.getItem('customDelay')) {
+    return new Promise(resolve => setTimeout(resolve, 5000))
+  } else {
+    return Promise.resolve()
+  }
+}
+
+export interface InitTask {
+  name: string
+  task: Promise<void>
+}
+
+export const createSetUpTaskList = (baseUrl: string): InitTask[] => {
+  return [{
+    name: 'Load Translations',
+    task: setUpI18n()
+  }, {
+    name: 'Load config',
+    task: loadAllConfig(baseUrl)
+  }, {
+    name: 'Add Delay',
+    task: customDelay()
+  }]
+}

src/components/application-loader/loading-screen.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Alert } from 'react-bootstrap'
-import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
-import { ShowIf } from '../common/show-if'
+import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
+import { ShowIf } from '../common/show-if/show-if'
 
 export interface LoadingScreenProps {
   failedTitle: string