HKSingleParty/03_source/mobile/src/pages/Settings/index.tsx

// 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,
  useIonRouter,
  IonButton,
  IonIcon,
  IonItem,
  IonLabel,
  IonList,
  IonModal,
} from '@ionic/react';
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 { Event } from './types';
import {
  alertCircleOutline,
  chatbubbleOutline,
  chevronBackOutline,
  chevronForwardOutline,
  documentTextOutline,
  gift,
  languageOutline,
  settingsOutline,
  shareSocialOutline,
  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 }: { data: any }) => {
      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);
  }

  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={() => handleNotImplementedClick()}>
            <IonIcon slot="start" icon={chatbubbleOutline} size="large"></IonIcon>
            <IonLabel>Contact us</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
          <IonItem button={true} onClick={handleLanguageClick}>
            <IonIcon slot="start" icon={languageOutline} size="large"></IonIcon>
            <IonLabel>Language</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>
          <IonItem button={true} onClick={handlePrivacyAgreementClick}>
            <IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
            <IonLabel>Privacy</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>
          <IonItem button={true} onClick={handleServiceAgreementClick}>
            <IonIcon slot="start" icon={documentTextOutline} size="large"></IonIcon>
            <IonLabel>Service agreement</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>

          <IonItem button={true} onClick={handleNotImplementedClick}>
            <IonIcon slot="start" icon={shareSocialOutline} size="large"></IonIcon>
            <IonLabel>Share</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>

          <IonItem button={true} onClick={handleNotImplementedClick}>
            <IonIcon color="danger" slot="start" icon={trashOutline} size="large"></IonIcon>
            <IonLabel>Delete Account</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>

          <IonItem button={true} onClick={handleDemoPageClick}>
            <IonIcon color="success" slot="start" icon={gift} size="large"></IonIcon>
            <IonLabel>Demo pages</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>
        </IonList>

        <div style={{ margin: '3rem 0.5rem' }}>
          <IonButton expand="full" size="large" shape="round" onClick={handleConfirmLogoutClick}>
            Logout
          </IonButton>
        </div>
      </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),
});