import React from "react" ; import { BrowserRouter as Router , Route , Redirect } from "react-router-dom" ; import { BondeSessionProvider as Session } from "bonde-core-tools" ; import { Loading , ChakraProvider , chakraTheme , FontsLoader , CSSReset } from 'bonde-components' ; import { useTranslation } from "react-i18next" ; import BaseLayout from './components/BaseLayout' ; import SessionRedirect from './components/SessionRedirect' ; import TextLoading from './components/TextLoading' ; import LoginPage from './scenes/LoginPage' ; import RegisterPage from './scenes/RegisterPage' ; import ForgetPasswordPage from './scenes/ForgetPasswordPage' ; import ResetPasswordPage from './scenes/ResetPasswordPage' ; type AppLoadingProps = { fetching : "session" | "user" | "communities" | "redirect" | "module" ; } ; const AppLoading = ( { fetching } ) => { const { t } = useTranslation ( "loading" ) ; const messages = { session : t ( "session" ) , user : t ( "user" ) , communities : t ( "communities" ) , redirect : t ( "redirect" ) , module : t ( "module" ) , } ; return < Loading fullsize message = { messages [ fetching ] } / > ; } ; type Environment = "development" | "staging" | "production" ; function App ( ) { const envConfig = ( process . env . REACT_APP_ENVIRONMENT || "development" ) as Environment ; console . info ( 'Build environment:' , envConfig ) ; const appUrl = process . env . REACT_APP_DOMAIN_ADMIN_CANARY || 'http://bonde.devel:5001' ; const config = { accounts : "" , crossStorage : process . env . REACT_APP_DOMAIN_CROSS_STORAGE || 'http://bonde.devel:5003' , apiGraphql : process . env . REACT_APP_DOMAIN_API_GRAPHQL || 'http://api-graphql.bonde.devel/v1/graphql' } ; return ( < React . Suspense fallback = { Loading } > < > < FontsLoader /> < ChakraProvider theme = { chakraTheme } > < CSSReset /> < Session environment = { envConfig } loading = { AppLoading } extraConfig = { config } > < Router > < SessionRedirect loading = { TextLoading } paths = { [ '/auth/login' ] } to = { appUrl } > < BaseLayout > < Route exact path = '/' > < Redirect to = '/login' / > < /Route> < Route exact path = '/login' > < LoginPage to = { appUrl } /> < /Route> < Route exact path = '/register' > < RegisterPage to = { appUrl } /> < /Route> < Route exact path = '/forget-password' > < ForgetPasswordPage /> < /Route> < Route exact path = '/reset-password' > < ResetPasswordPage /> < /Route> < /BaseLayout> < /SessionRedirect> < /Router> < /Session> < /ChakraProvider> < /> < /React.Suspense>); } export default App ;