PromucFlow_constructor/app/client/src/index.tsx
2021-06-04 13:18:17 +05:30

89 lines
2.5 KiB
TypeScript
Executable File

import React from "react";
import "./wdyr";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import { ThemeProvider } from "constants/DefaultTheme";
import { appInitializer } from "utils/AppsmithUtils";
import { Slide } from "react-toastify";
import store from "./store";
import { LayersContext, Layers } from "constants/Layers";
import AppRouter from "./AppRouter";
import * as Sentry from "@sentry/react";
import { getCurrentThemeDetails, ThemeMode } from "selectors/themeSelectors";
import { connect } from "react-redux";
import { AppState } from "reducers";
import { setThemeMode } from "actions/themeActions";
import { StyledToastContainer } from "components/ads/Toast";
import localStorage from "utils/localStorage";
import "./polyfills/corejs-add-on";
// enable autofreeze only in development
import { setAutoFreeze } from "immer";
const shouldAutoFreeze = process.env.NODE_ENV === "development";
setAutoFreeze(shouldAutoFreeze);
import AppErrorBoundary from "./AppErrorBoundry";
import GlobalStyles from "globalStyles";
appInitializer();
function App() {
return (
<Sentry.ErrorBoundary fallback={"An error has occured"}>
<Provider store={store}>
<LayersContext.Provider value={Layers}>
<ThemedAppWithProps />
</LayersContext.Provider>
</Provider>
</Sentry.ErrorBoundary>
);
}
class ThemedApp extends React.Component<{
currentTheme: any;
setTheme: (themeMode: ThemeMode) => void;
}> {
componentDidMount() {
if (localStorage.getItem("THEME") === "LIGHT") {
this.props.setTheme(ThemeMode.LIGHT);
}
}
render() {
return (
<ThemeProvider theme={this.props.currentTheme}>
<StyledToastContainer
autoClose={5000}
closeButton={false}
draggable={false}
hideProgressBar
pauseOnHover={false}
transition={Slide}
/>
<GlobalStyles />
<AppErrorBoundary>
<AppRouter />
</AppErrorBoundary>
</ThemeProvider>
);
}
}
const mapStateToProps = (state: AppState) => ({
currentTheme: getCurrentThemeDetails(state),
});
const mapDispatchToProps = (dispatch: any) => ({
setTheme: (mode: ThemeMode) => {
dispatch(setThemeMode(mode));
},
});
const ThemedAppWithProps = connect(
mapStateToProps,
mapDispatchToProps,
)(ThemedApp);
ReactDOM.render(<App />, document.getElementById("root"));
// expose store when run in Cypress
if ((window as any).Cypress) {
(window as any).store = store;
}