150 lines
4.4 KiB
TypeScript
150 lines
4.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Route } from 'react-router-dom';
|
|
import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
|
|
import { IonReactRouter } from '@ionic/react-router';
|
|
|
|
import Menu from './components/Menu';
|
|
|
|
/* Core CSS required for Ionic components to work properly */
|
|
import '@ionic/react/css/core.css';
|
|
|
|
/* Basic CSS for apps built with Ionic */
|
|
import '@ionic/react/css/normalize.css';
|
|
import '@ionic/react/css/structure.css';
|
|
import '@ionic/react/css/typography.css';
|
|
|
|
/* Optional CSS utils that can be commented out */
|
|
import '@ionic/react/css/padding.css';
|
|
import '@ionic/react/css/float-elements.css';
|
|
import '@ionic/react/css/text-alignment.css';
|
|
import '@ionic/react/css/text-transformation.css';
|
|
import '@ionic/react/css/flex-utils.css';
|
|
import '@ionic/react/css/display.css';
|
|
|
|
/**
|
|
* Ionic Dark Mode
|
|
* -----------------------------------------------------
|
|
* For more info, please see:
|
|
* https://ionicframework.com/docs/theming/dark-mode
|
|
*/
|
|
|
|
// import "@ionic/react/css/palettes/dark.always.css";
|
|
// import "@ionic/react/css/palettes/dark.system.css";
|
|
import '@ionic/react/css/palettes/dark.class.css';
|
|
|
|
/* Theme variables */
|
|
import './theme/variables.css';
|
|
|
|
/* Leaflet CSS */
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
|
/* Global styles */
|
|
import './App.scss';
|
|
import MainTabs from './pages/MainTabs';
|
|
import { connect } from './data/connect';
|
|
import { AppContextProvider } from './data/AppContext';
|
|
import { loadConfData } from './data/sessions/sessions.actions';
|
|
import { setIsLoggedIn, setUsername, loadUserData } from './data/user/user.actions';
|
|
import Account from './pages/Account';
|
|
import Login from './pages/Login';
|
|
import MyLogin from './pages/MyLogin';
|
|
import Signup from './pages/Signup';
|
|
import Support from './pages/Support';
|
|
import Tutorial from './pages/Tutorial';
|
|
import HomeOrTutorial from './components/HomeOrTutorial';
|
|
import { Schedule } from './models/Schedule';
|
|
import RedirectToLogin from './components/RedirectToLogin';
|
|
import AppRoute from './AppRoute';
|
|
|
|
import AppDemoRoute from './routes/DemoRoute';
|
|
import Settings from './pages/Settings';
|
|
|
|
setupIonicReact();
|
|
|
|
const App: React.FC = () => {
|
|
return (
|
|
<AppContextProvider>
|
|
<IonicAppConnected />
|
|
</AppContextProvider>
|
|
);
|
|
};
|
|
|
|
interface StateProps {
|
|
darkMode: boolean;
|
|
schedule: Schedule;
|
|
}
|
|
|
|
interface DispatchProps {
|
|
loadConfData: typeof loadConfData;
|
|
loadUserData: typeof loadUserData;
|
|
setIsLoggedIn: typeof setIsLoggedIn;
|
|
setUsername: typeof setUsername;
|
|
}
|
|
|
|
interface IonicAppProps extends StateProps, DispatchProps {}
|
|
|
|
const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
|
|
useEffect(() => {
|
|
loadUserData();
|
|
loadConfData();
|
|
|
|
// eslint-disable-next-line
|
|
}, []);
|
|
|
|
return schedule.groups.length === 0 ? (
|
|
<div></div>
|
|
) : (
|
|
<IonApp className={`${darkMode ? 'ion-palette-dark' : ''} noto-sans-hk-body`}>
|
|
<IonReactRouter>
|
|
<IonSplitPane contentId="main">
|
|
<Menu />
|
|
<IonRouterOutlet id="main">
|
|
{/*
|
|
We use IonRoute here to keep the tabs state intact,
|
|
which makes transitions between tabs and non tab pages smooth
|
|
*/}
|
|
|
|
<AppRoute />
|
|
<AppDemoRoute />
|
|
|
|
<Route path="/tabs" render={() => <MainTabs />} />
|
|
|
|
<Route path="/account" component={Account} />
|
|
<Route path="/login" component={Login} />
|
|
<Route path="/mylogin" component={MyLogin} />
|
|
|
|
<Route path="/signup" component={Signup} />
|
|
<Route path="/support" component={Support} />
|
|
<Route path="/tutorial" component={Tutorial} />
|
|
<Route path="/settings" component={Settings} />
|
|
|
|
<Route
|
|
path="/logout"
|
|
render={() => {
|
|
return <RedirectToLogin setIsLoggedIn={setIsLoggedIn} setUsername={setUsername} />;
|
|
}}
|
|
/>
|
|
<Route path="/" component={HomeOrTutorial} exact />
|
|
</IonRouterOutlet>
|
|
</IonSplitPane>
|
|
</IonReactRouter>
|
|
</IonApp>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|
|
const IonicAppConnected = connect<{}, StateProps, DispatchProps>({
|
|
mapStateToProps: (state) => ({
|
|
darkMode: state.user.darkMode,
|
|
schedule: state.data.schedule,
|
|
}),
|
|
mapDispatchToProps: {
|
|
loadConfData,
|
|
loadUserData,
|
|
setIsLoggedIn,
|
|
setUsername,
|
|
},
|
|
component: IonicApp,
|
|
});
|