init commit,
This commit is contained in:
louiscklaw
255
03_source/mobile/src/pages/Settings/index.tsx
Normal file
255
03_source/mobile/src/pages/Settings/index.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
// 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,
|
||||
chatbubbleOutline,
|
||||
chevronBackOutline,
|
||||
chevronForward,
|
||||
chevronForwardOutline,
|
||||
createOutline,
|
||||
documentTextOutline,
|
||||
heart,
|
||||
languageOutline,
|
||||
listCircle,
|
||||
menuOutline,
|
||||
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';
|
||||
|
||||
interface OwnProps {}
|
||||
|
||||
interface StateProps {
|
||||
speakers: Speaker[];
|
||||
speakerSessions: { [key: string]: Session[] };
|
||||
}
|
||||
|
||||
interface DispatchProps {}
|
||||
|
||||
interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
|
||||
|
||||
const EventList: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
|
||||
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 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() {
|
||||
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>
|
||||
</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),
|
||||
}),
|
||||
component: React.memo(EventList),
|
||||
});
|
||||
Reference in New Issue
Block a user