init commit,

03_source/mobile/src/App.tsx

@@ -0,0 +1,159 @@
+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 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 EventDetail from './pages/EventDetail';
+import EventList from './pages/EventList';
+import MemberProfile from './pages/MemberProfile';
+import Settings from './pages/Settings';
+import NotImplemented from './pages/NotImplemented';
+import ChangeLanguage from './pages/ChangeLanguage';
+import ServiceAgreement from './pages/ServiceAgreement';
+import paths from './paths';
+import PrivacyAgreement from './pages/PrivacyAgreement';
+
+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
+            */}
+
+            {/*  */}
+            <Route path="/not_implemented" component={NotImplemented} />
+
+            {/*  */}
+            <Route path="/tabs" render={() => <MainTabs />} />
+            <Route path="/account" component={Account} />
+            <Route path="/login" component={Login} />
+            <Route path="/signup" component={Signup} />
+            <Route path="/support" component={Support} />
+            <Route path="/tutorial" component={Tutorial} />
+            {/*  */}
+            <Route path="/event_detail/:id" component={EventDetail} />
+            <Route path="/profile/:id" component={MemberProfile} />
+
+            {/*  */}
+            <Route path={paths.SETTINGS} component={Settings} />
+            <Route path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
+            <Route path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
+            <Route path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
+
+            {/*  */}
+            <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,
+});