862 lines
29 KiB
TypeScript
862 lines
29 KiB
TypeScript
// REQ0054/user-setting
|
|
//
|
|
// PURPOSE:
|
|
// - Provides functionality view user profile
|
|
//
|
|
// RULES:
|
|
// - T.B.A.
|
|
//
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import {
|
|
IonHeader,
|
|
IonToolbar,
|
|
IonTitle,
|
|
IonContent,
|
|
IonPage,
|
|
IonButtons,
|
|
IonMenuButton,
|
|
IonGrid,
|
|
IonRow,
|
|
IonCol,
|
|
useIonRouter,
|
|
IonButton,
|
|
IonIcon,
|
|
IonPopover,
|
|
IonAvatar,
|
|
IonImg,
|
|
IonItem,
|
|
IonLabel,
|
|
IonList,
|
|
IonModal,
|
|
IonSearchbar,
|
|
useIonModal,
|
|
IonInput,
|
|
IonNote,
|
|
IonText,
|
|
} from '@ionic/react';
|
|
import SpeakerItem from '../../components/SpeakerItem';
|
|
import { Speaker } from '../../models/Speaker';
|
|
import { Session } from '../../models/Schedule';
|
|
import { connect } from '../../data/connect';
|
|
import * as selectors from '../../data/selectors';
|
|
import '../SpeakerList.scss';
|
|
import { getEvents } from '../../api/getEvents';
|
|
import { format } from 'date-fns';
|
|
import { Event } from './types';
|
|
import {
|
|
alertCircleOutline,
|
|
alertOutline,
|
|
apps,
|
|
appsOutline,
|
|
book,
|
|
bookOutline,
|
|
brushOutline,
|
|
calculatorOutline,
|
|
car,
|
|
cart,
|
|
cartOutline,
|
|
cashOutline,
|
|
chatbubbleEllipses,
|
|
chatbubbleEllipsesOutline,
|
|
chatbubbleOutline,
|
|
chevronBackOutline,
|
|
chevronForward,
|
|
chevronForwardOutline,
|
|
cloudOutline,
|
|
codeSlashOutline,
|
|
codeWorkingOutline,
|
|
colorPaletteOutline,
|
|
createOutline,
|
|
document,
|
|
documentTextOutline,
|
|
filmOutline,
|
|
flashOutline,
|
|
gift,
|
|
giftOutline,
|
|
globeSharp,
|
|
gridOutline,
|
|
heart,
|
|
imageOutline,
|
|
imagesOutline,
|
|
keyOutline,
|
|
languageOutline,
|
|
layers,
|
|
layersOutline,
|
|
list,
|
|
listCircle,
|
|
listOutline,
|
|
logInOutline,
|
|
logoFacebook,
|
|
mapOutline,
|
|
menuOutline,
|
|
paperPlaneOutline,
|
|
people,
|
|
person,
|
|
personCircleOutline,
|
|
personOutline,
|
|
pizzaOutline,
|
|
qrCodeOutline,
|
|
refreshOutline,
|
|
restaurant,
|
|
restaurantOutline,
|
|
settingsOutline,
|
|
shareSocialOutline,
|
|
statsChart,
|
|
sunny,
|
|
swapHorizontal,
|
|
trashOutline,
|
|
walkOutline,
|
|
} from 'ionicons/icons';
|
|
import AboutPopover from '../../components/AboutPopover';
|
|
import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
|
|
import PATHS from '../../PATHS';
|
|
import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions';
|
|
|
|
interface OwnProps {}
|
|
|
|
interface StateProps {
|
|
speakers: Speaker[];
|
|
speakerSessions: { [key: string]: Session[] };
|
|
}
|
|
|
|
interface DispatchProps {
|
|
logoutUser: typeof logoutUser;
|
|
setAccessToken: typeof setAccessToken;
|
|
setIsLoggedIn: typeof setIsLoggedIn;
|
|
}
|
|
|
|
interface SettingsProps extends OwnProps, StateProps, DispatchProps {}
|
|
|
|
const DemoList: React.FC<SettingsProps> = ({
|
|
speakers,
|
|
speakerSessions,
|
|
logoutUser,
|
|
setAccessToken,
|
|
setIsLoggedIn,
|
|
}) => {
|
|
const [events, setEvents] = useState<Event[] | []>([]);
|
|
const [showPopover, setShowPopover] = useState(false);
|
|
const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
|
|
const modal = useRef<HTMLIonModalElement>(null);
|
|
|
|
const router = useIonRouter();
|
|
|
|
useEffect(() => {
|
|
getEvents().then(({ data }) => {
|
|
console.log({ data });
|
|
setEvents(data);
|
|
});
|
|
}, []);
|
|
|
|
function handleBackButtonClick() {
|
|
router.goBack();
|
|
}
|
|
|
|
function handleLanguageClick() {
|
|
router.push(PATHS.CHANGE_LANGUAGE);
|
|
}
|
|
|
|
function handleNotImplementedClick() {
|
|
router.push(PATHS.NOT_IMPLEMENTED);
|
|
}
|
|
|
|
function handleDemoPageClick() {
|
|
router.push(PATHS.DEMO_PAGE);
|
|
}
|
|
|
|
function handleServiceAgreementClick() {
|
|
router.push(PATHS.SERVICE_AGREEMENT);
|
|
}
|
|
|
|
function handlePrivacyAgreementClick() {
|
|
router.push(PATHS.PRIVACY_AGREEMENT);
|
|
}
|
|
|
|
const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState<boolean>(false);
|
|
function handleConfirmLogoutClick() {
|
|
setShowLogoutConfirmModal(true);
|
|
}
|
|
|
|
function handleLogoutClick() {
|
|
setAccessToken();
|
|
setIsLoggedIn(false);
|
|
|
|
router.push('/tabs', 'forward', 'replace');
|
|
|
|
setShowLogoutConfirmModal(false);
|
|
}
|
|
function handleLogoutCancel() {
|
|
setShowLogoutConfirmModal(false);
|
|
}
|
|
|
|
function handleDemoReactShopClick() {
|
|
router.push(PATHS.DEMO_REACT_SHOP);
|
|
}
|
|
|
|
return (
|
|
<IonPage id="speaker-list">
|
|
<IonHeader translucent={true} className="ion-no-border">
|
|
<IonToolbar>
|
|
<IonButtons slot="start">
|
|
{/* <IonMenuButton /> */}
|
|
<IonButton shape="round" onClick={() => handleBackButtonClick()}>
|
|
<IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
|
|
</IonButton>
|
|
</IonButtons>
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
|
|
<IonIcon icon={settingsOutline} size="large"></IonIcon>
|
|
<IonTitle>Setting</IonTitle>
|
|
</div>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonContent fullscreen={true}>
|
|
<IonHeader collapse="condense">
|
|
<IonToolbar>
|
|
<IonTitle size="large">Setting</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_WEATHER_APP_UI)}>
|
|
<IonIcon slot="start" icon={sunny} size="large"></IonIcon>
|
|
<IonLabel>Weather App</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_2FA_EXAMPLE, 'forward')}>
|
|
<IonIcon slot="start" icon={keyOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo 2FA Example{' '}
|
|
<span style={{ fontWeight: 'bold' }}>layout only, not functioning</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_THEME_SWITCHER, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Theme Switcher</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SKELETON_TEXT, 'forward')}>
|
|
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Skeleton Text</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={paperPlaneOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Sticky Bottom Sheet Example</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_STORAGE_EXAMPLE, 'forward')}>
|
|
<IonIcon slot="start" icon={cloudOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Storage Example{' '}
|
|
<span style={{ fontWeight: 'bold' }}>(need fix, message cannot display)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_SWIPERJS_TUTORIAL, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={imagesOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo SwiperJS Tutorial</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_DRAWING_CANVAS, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={brushOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Drawing Canvas</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_HOOK_FORM_EXAMPLE, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={codeSlashOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Hook Form Example</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_ITEM_LIST, 'forward')}>
|
|
<IonIcon slot="start" icon={listOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Item List</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_LIFECYCLES, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={refreshOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Lifecycles</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_LOGIN, 'forward')}>
|
|
<IonIcon slot="start" icon={logInOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Login <span style={{ fontWeight: 'bold' }}>(missing back button)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_MARVEL_APP, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={flashOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Marvel App</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={filmOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Movie App with Algolia</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_NOTES, 'forward')}>
|
|
<IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Notes{' '}
|
|
<span style={{ fontWeight: 'bold' }}>TODO: need update IonSlide</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FACEBOOK_CLONE, 'forward')}>
|
|
<IonIcon slot="start" icon={logoFacebook} size="large"></IonIcon>
|
|
<IonLabel>Demo Facebook Clone</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FAST_FOOD_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={restaurantOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Fast Food App <span style={{ fontWeight: 'bold' }}>ion-slide outstanding</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_FLOATING_TABS, 'forward')}>
|
|
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Floating Tabs</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_INSTAGRAM_CLONE, 'forward')}>
|
|
<IonIcon slot="start" icon={imageOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Instagram Clone</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_KANBAN_BOARD, 'forward')}>
|
|
<IonIcon slot="start" icon={gridOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Kanban Board{' '}
|
|
<span style={{ fontWeight: 'bold' }}>// TODO: fix missing ionslide in new ionic</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_ORDERING_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={pizzaOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Ordering App <span style={{ fontWeight: 'bold' }}>outstanding css</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_PROFILE_EXAMPLE, 'forward')}>
|
|
<IonIcon slot="start" icon={personOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Profile Example</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_PULLSTATE_TUTORIAL, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={codeWorkingOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Pullstate Tutorial</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_ADD_TO_CART, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Add to Cart</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_CALCULATOR, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={calculatorOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Calculator <span style={{ fontWeight: 'bold' }}>css need fix</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_ACCORDION_TUTORIAL, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={list} size="large"></IonIcon>
|
|
<IonLabel>Demo Accordion Tutorial</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_BANKING_UI, 'forward')}>
|
|
<IonIcon slot="start" icon={cashOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Banking UI{' '}
|
|
<span style={{ fontWeight: 'bold' }}>(in the middle, style outstanding)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={mapOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Capacitor Google Maps Tutorial{' '}
|
|
<span style={{ fontWeight: 'bold' }}>need a google map api key</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_COLOR_TUTORIAL, 'forward')}>
|
|
<IonIcon slot="start" icon={colorPaletteOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo Color Tutorial</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_ECOMMERCE_EXAMPLE, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Ecommerce Example{' '}
|
|
<span style={{ fontWeight: 'bold' }}>(fetch data not available at remote site)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
{/*
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(paths.DEMO_REACT_WHATSAPP_CLONE, 'forward')}>
|
|
<IonIcon slot="start" icon={chatbubbleEllipses} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React WhatsApp Clone <span style={{ fontWeight: 'bold' }}>(need to resolve path problem)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
*/}
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_POLL_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={statsChart} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Poll App{' '}
|
|
<span style={{ fontWeight: 'bold' }}>(css temporary broken, ignored)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_SWITCH_TABS, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={swapHorizontal} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Switch Tabs{' '}
|
|
<span style={{ fontWeight: 'bold' }}>(hardcoded back button)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_OVERLAY_HOOKS, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={layers} size="large"></IonIcon>
|
|
<IonLabel>Demo React Overlay Hooks</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_PINTEREST_FLOATING_TAB_BAR, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={people} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Pinterest Floating Tab Bar{' '}
|
|
<span style={{ fontWeight: 'bold' }}>(css not work well)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_RESTAURANT_FINDER, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={restaurant} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Restaurant Finder{' '}
|
|
<span style={{ fontWeight: 'bold' }}>need server for map showing</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => handleDemoReactShopClick()}>
|
|
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
|
<IonLabel>Demo React Shop</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => {
|
|
router.push(PATHS.DEMO_CLUB_HOUSE, 'forward');
|
|
}}
|
|
>
|
|
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
|
<IonLabel>Demo Club house</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => {
|
|
router.push(PATHS.DEMO_SCORE_BOARD, 'forward');
|
|
}}
|
|
>
|
|
<IonIcon slot="start" icon={car} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo Score Board <br />
|
|
(IonCard problem)
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QUOTE_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={car} size="large"></IonIcon>
|
|
<IonLabel>Demo Quote App</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QR_SCANNER, 'forward')}>
|
|
<IonIcon slot="start" icon={car} size="large"></IonIcon>
|
|
<IonLabel>Demo Qr scanner</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SHOP_APP_UI, 'forward')}>
|
|
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
|
<IonLabel>Demo Shop App UI</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_DICTIONARY_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
|
<IonLabel>Demo Dictionary App</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_RECIPE_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={cart} size="large"></IonIcon>
|
|
<IonLabel>Demo Recipe App</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_SLIDING_PROFILE, 'forward')}>
|
|
<IonIcon slot="start" icon={person} size="large"></IonIcon>
|
|
<IonLabel>Demo Sliding Profile</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_QUIZ_APP, 'forward')}>
|
|
<IonIcon slot="start" icon={book} size="large"></IonIcon>
|
|
<IonLabel>Demo Quiz App</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_BLOG_POST_UI, 'forward')}>
|
|
<IonIcon slot="start" icon={document} size="large"></IonIcon>
|
|
<IonLabel>Demo Blog Post UI</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_TRAVEL_APP, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={globeSharp} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Travel App <span style={{ fontWeight: 'bold' }}>(on hold)</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_PROFILE_DASHBOARD_UI, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={personCircleOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Profile Dashboard UI</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
{/* TODO: */}
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_QR_CODE, 'forward')}>
|
|
<IonIcon slot="start" icon={qrCodeOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React QR Code <span style={{ fontWeight: 'bold' }}>need update</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_QUOTES, 'forward')}>
|
|
<IonIcon slot="start" icon={bookOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Quotes</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem button={true} onClick={() => router.push(PATHS.DEMO_REACT_SHOP_UI, 'forward')}>
|
|
<IonIcon slot="start" icon={cartOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Shop UI <span style={{ fontWeight: 'bold' }}>lower priority</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_TABS_MENUS_CUSTOM, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={layersOutline} size="large"></IonIcon>
|
|
<IonLabel>Demo React Tabs Menus Custom</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
|
|
<IonList inset={false}>
|
|
<IonItem
|
|
button={true}
|
|
onClick={() => router.push(PATHS.DEMO_REACT_ONBOARDING_UI, 'forward')}
|
|
>
|
|
<IonIcon slot="start" icon={walkOutline} size="large"></IonIcon>
|
|
<IonLabel>
|
|
Demo React Onboarding UI{' '}
|
|
<span style={{ fontWeight: 'bold' }}>TODO: update IonSlide</span>
|
|
</IonLabel>
|
|
<IonIcon icon={chevronForwardOutline}></IonIcon>
|
|
</IonItem>
|
|
</IonList>
|
|
</IonContent>
|
|
|
|
{/* REQ0058/logout */}
|
|
<IonModal
|
|
isOpen={showLogoutConfirmModal}
|
|
initialBreakpoint={0.5}
|
|
breakpoints={[0, 0.25, 0.5, 0.75]}
|
|
>
|
|
<IonContent
|
|
className="ion-padding"
|
|
style={{
|
|
'--background': 'pink',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: '1rem',
|
|
}}
|
|
>
|
|
<div style={{ marginTop: '1rem', width: '50px', height: '50px' }}>
|
|
<IonIcon icon={alertCircleOutline} />
|
|
</div>
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
fontWeight: '1rem',
|
|
fontSize: '1.5rem',
|
|
marginTop: '0.5rem',
|
|
marginBottom: '0.5rem',
|
|
}}
|
|
>
|
|
Logout
|
|
</div>
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
fontWeight: '1rem',
|
|
marginTop: '0.5rem',
|
|
marginBottom: '0.5rem',
|
|
}}
|
|
>
|
|
Unable to receive notifications after logging out
|
|
</div>
|
|
|
|
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
|
|
<IonButton size="large" fill="outline" shape="round" onClick={handleLogoutCancel}>
|
|
Cancel
|
|
</IonButton>
|
|
<IonButton size="large" shape="round" onClick={handleLogoutClick}>
|
|
Logout
|
|
</IonButton>
|
|
</div>
|
|
</div>
|
|
</IonContent>
|
|
</IonModal>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default connect<OwnProps, StateProps, DispatchProps>({
|
|
mapStateToProps: (state) => ({
|
|
speakers: selectors.getSpeakers(state),
|
|
speakerSessions: selectors.getSpeakerSessions(state),
|
|
}),
|
|
mapDispatchToProps: {
|
|
logoutUser,
|
|
setAccessToken,
|
|
setIsLoggedIn,
|
|
},
|
|
component: React.memo(DemoList),
|
|
});
|