286 lines
12 KiB
TypeScript
286 lines
12 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 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';
|
|
import AppRoute from './AppRoute';
|
|
//
|
|
// TODO: resume DemoReactShop
|
|
// import DemoReactShop from './pages/DemoReactShop';
|
|
import DemoWeatherApp from './pages/DemoWeatherApp';
|
|
import DemoClubHouse from './pages/DemoClubHouse';
|
|
import DemoScoreBoard from './pages/DemoScoreBoard';
|
|
import DemoQuoteApp from './pages/DemoQuoteApp';
|
|
import DemoQrScanner from './pages/DemoQrScanner';
|
|
// DemoShopAppUi
|
|
import DemoShopAppUi from './pages/DemoShopAppUi';
|
|
// DemoDictionaryApp
|
|
import DemoDictionaryApp from './pages/DemoDictionaryApp';
|
|
// demo-recipe-app
|
|
import DemoRecipeApp from './pages/DemoRecipeApp';
|
|
|
|
// DemoSlidingProfile
|
|
import DemoSlidingProfile from './pages/DemoSlidingProfile';
|
|
|
|
// DemoQuizApp
|
|
import DemoQuizApp from './pages/DemoQuizApp';
|
|
import DemoBlogPostUi from './pages/DemoBlogPostUi';
|
|
import DemoReactTravelApp from './pages/DemoReactTravelApp';
|
|
import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
|
|
import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
|
|
import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
|
|
import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
|
|
import DemoReactPollApp from './pages/DemoReactPollApp';
|
|
import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
|
|
import Demo2FaExample from './pages/Demo2FaExample';
|
|
import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
|
|
import DemoBankingUi from './pages/DemoBankingUi';
|
|
import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
|
|
import DemoColorTutorial from './pages/DemoColorTutorial';
|
|
|
|
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 />
|
|
|
|
<Route path="/tabs" render={() => <MainTabs />} />
|
|
<Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
|
|
<Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
{/* */}
|
|
|
|
<Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
|
|
<Route
|
|
path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
|
|
render={() => <DemoCapacitorGoogleMapsTutorial />}
|
|
/>
|
|
|
|
<Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />
|
|
|
|
{/*
|
|
<Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
|
|
<Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
|
|
<Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
|
|
<Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
|
|
<Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
|
|
<Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
|
|
<Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
|
|
<Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
|
|
<Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
|
|
<Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
|
|
<Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
|
|
<Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
|
|
<Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
|
|
<Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
|
|
<Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
|
|
<Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
|
|
<Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
|
|
<Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
|
|
<Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
|
|
<Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
|
|
<Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
|
|
<Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
|
|
<Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
|
|
<Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
|
|
<Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
|
|
<Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
|
|
<Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
|
|
<Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
|
|
<Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
|
|
<Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
|
|
<Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
|
|
<Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
|
|
*/}
|
|
|
|
<Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />
|
|
|
|
{/* have problemx` */}
|
|
{/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
|
|
|
|
<Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
|
|
|
|
<Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
|
|
<Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
|
|
<Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
|
|
<Route
|
|
path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
|
|
render={() => <DemoPinterestFloatingTabBar />}
|
|
/>
|
|
<Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
|
|
<Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
|
|
<Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
|
|
<Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
|
|
<Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
|
|
|
|
{/* TODO: resume DemoReactShop */}
|
|
{/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
|
|
|
|
<Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
|
|
<Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
|
|
<Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
|
|
<Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
|
|
<Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
|
|
<Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
|
|
<Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
|
|
|
|
<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="/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,
|
|
});
|