update adding demo app,

03_source/mobile/src/pages/DemoList/index.tsx

@@ -0,0 +1,271 @@
+// 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,
+  cart,
+  chatbubbleOutline,
+  chevronBackOutline,
+  chevronForward,
+  chevronForwardOutline,
+  createOutline,
+  documentTextOutline,
+  gift,
+  giftOutline,
+  heart,
+  languageOutline,
+  listCircle,
+  menuOutline,
+  settingsOutline,
+  shareSocialOutline,
+  sunny,
+  trashOutline,
+} 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 SettingsPage: 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 handleDemoWeatherApp() {
+    router.push(paths.DEMO_WEATHER_APP);
+  }
+
+  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={() => handleDemoWeatherApp()}>
+            <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={() => handleDemoReactShopClick()}>
+            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
+            <IonLabel>Demo React Shop</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(SettingsPage),
+});