diff --git a/public/backend-config.json b/public/api/v2.0/config similarity index 100% rename from public/backend-config.json rename to public/api/v2.0/config diff --git a/src/api/config.ts b/src/api/config.ts index ecb78500f..04ac2a4b4 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -3,7 +3,7 @@ import { BackendConfigState } from '../redux/backend-config/types' import { expectResponseCode, getBackendUrl } from '../utils/apiUtils' export const getBackendConfig = async (): Promise => { - const response = await fetch(getBackendUrl() + '/backend-config.json') + const response = await fetch(getBackendUrl() + '/config') expectResponseCode(response) return await response.json() as Promise } diff --git a/src/components/application-loader/application-loader.tsx b/src/components/application-loader/application-loader.tsx index 561c000a9..b2ea55e60 100644 --- a/src/components/application-loader/application-loader.tsx +++ b/src/components/application-loader/application-loader.tsx @@ -1,13 +1,14 @@ import React, { Fragment, useEffect, useState } from 'react' import { useLocation } from 'react-router' -import { setUp } from '../../initializers' +import { setUp, InitTask } from '../../initializers' import './application-loader.scss' + import { LoadingScreen } from './loading-screen' export const ApplicationLoader: React.FC = ({ children }) => { - const [failed, setFailed] = useState(false) + const [failedTitle, setFailedTitle] = useState('') const [doneTasks, setDoneTasks] = useState(0) - const [initTasks, setInitTasks] = useState[]>([]) + const [initTasks, setInitTasks] = useState([]) const { pathname } = useLocation() const runTask = async (task: Promise): Promise => { @@ -25,16 +26,16 @@ export const ApplicationLoader: React.FC = ({ children }) => { useEffect(() => { for (const task of initTasks) { - runTask(task).catch(reason => { - setFailed(true) + runTask(task.task).catch((reason: Error) => { console.error(reason) + setFailedTitle(task.name) }) } }, [initTasks]) return ( doneTasks < initTasks.length || initTasks.length === 0 - ? + ? : {children} ) } diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx index 99689d42e..5b37e3a04 100644 --- a/src/components/application-loader/loading-screen.tsx +++ b/src/components/application-loader/loading-screen.tsx @@ -3,18 +3,25 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { Alert } from 'react-bootstrap' export interface LoadingScreenProps { - failed: boolean + failedTitle: string } -export const LoadingScreen: React.FC = ({ failed }) => { +export const LoadingScreen: React.FC = ({ failedTitle }) => { return (
+ className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
{ - failed ? An error occurred while loading the application! : null + failedTitle !== '' + ? ( + + The task '{failedTitle}' failed.
+ For further information look into the browser console. +
+ ) + : null }
) diff --git a/src/initializers/i18n.ts b/src/initializers/i18n.ts index a08b25811..f98819e95 100644 --- a/src/initializers/i18n.ts +++ b/src/initializers/i18n.ts @@ -31,7 +31,7 @@ import 'moment/locale/vi' import 'moment/locale/zh-cn' import 'moment/locale/zh-tw' -export const setUpI18n: () => Promise = async () => { +export const setUpI18n = async (): Promise => { await i18n .use(Backend) .use(LanguageDetector) diff --git a/src/initializers/index.ts b/src/initializers/index.ts index 56fe8ffac..956fdd475 100644 --- a/src/initializers/index.ts +++ b/src/initializers/index.ts @@ -9,6 +9,20 @@ const customDelay: () => Promise = async () => { } } -export const setUp: (baseUrl: string) => Promise[] = (baseUrl) => { - return [setUpI18n(), loadAllConfig(baseUrl), customDelay()] +export interface InitTask { + name: string + task: Promise +} + +export const setUp = (baseUrl: string): InitTask[] => { + return [{ + name: 'Load Translations', + task: setUpI18n() + }, { + name: 'Load config', + task: loadAllConfig(baseUrl) + }, { + name: 'Add Delay', + task: customDelay() + }] }