import React from "react" ; import ReactDOM from "react-dom" ; import { connectRoutes , LocationState } from "redux-first-router" ; import { combineReducers , applyMiddleware , compose as reduxCompose , createStore , Store , Middleware , } from "redux" ; import ReduxThunk from "redux-thunk" ; import { Provider } from "react-redux" ; import debug from "debug" ; import DbManager from "./db/manager" ; import { restoreLocation , startPersistingLocation } from "./util/standalone" ; import appReducer from "./redux/reducer" ; import { reducer as routeTransitionReducer } from "./redux/routetransition" ; import { middleware as routeTransitionMiddleware } from "./redux/routetransition" ; import App from "./app" ; import routes from "./routes" ; import * as serviceWorkerRegistration from "./serviceWorkerRegistration" ; import "./index.css" ; const debugSetting = new URL ( window . location . toString ( ) ) . searchParams . get ( "debug" ) || "" ; debug . enable ( debugSetting ) ; if ( window . location . hash . startsWith ( "#/tabs/" ) ) { window . history . replaceState ( null , "" , window . location . hash . substring ( 2 ) ) ; } restoreLocation ( ) ; const router = connectRoutes ( routes ) ; startPersistingLocation ( router . history ) ; const rootReducer = combineReducers ( { location : router . reducer , routeTransition : routeTransitionReducer , app : appReducer , } ) ; export type AllState = ReturnType < typeof rootReducer > & { location : LocationState ; } ; export interface Services { dbManager : DbManager ; } const dbManager = new DbManager ( ) ; const thunkMiddleware = ReduxThunk . withExtraArgument ( { dbManager , } ) ; const log = debug ( "redux:dispatch" ) ; const logger = ( ) => ( next ) => ( action ) => { if ( action . type ) { log ( action . type , action ) ; } return next ( action ) ; } ; const middlewares = applyMiddleware ( logger , thunkMiddleware , router . middleware , routeTransitionMiddleware ) ; const compose = window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || reduxCompose ; const store = createStore ( rootReducer , compose ( router . enhancer , middlewares ) ) ; const components = ( < Provider store = { store } > < App /> < /Provider>); ReactDOM . render ( components , document . getElementById ( "root" ) ) ; const unsubscribe = store . subscribe ( ( ) => { if ( store . getState ( ) . app . initialLoadingDone ) { hideAppLoader ( ) ; unsubscribe ( ) ; } } ) ; function hideAppLoader ( ) { const loader = document . getElementById ( "loader" ) ; if ( ! loader ) { throw new Error ( "Loader element missing in DOM" ) ; } loader . classList . add ( "hidden" ) ; setTimeout ( ( ) => { loader . style . display = "none" ; } , 500 ) ; } serviceWorkerRegistration . register ( ) ;