102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
IonHeader,
|
|
IonToolbar,
|
|
IonTitle,
|
|
IonContent,
|
|
IonPage,
|
|
IonButtons,
|
|
IonMenuButton,
|
|
IonList,
|
|
IonItem,
|
|
IonAlert,
|
|
} from '@ionic/react';
|
|
import './Account.scss';
|
|
import { setUsername } from '../data/user/user.actions';
|
|
import { connect } from '../data/connect';
|
|
import { RouteComponentProps } from 'react-router';
|
|
|
|
interface OwnProps extends RouteComponentProps {}
|
|
|
|
interface StateProps {
|
|
username?: string;
|
|
}
|
|
|
|
interface DispatchProps {
|
|
setUsername: typeof setUsername;
|
|
}
|
|
|
|
interface AccountProps extends OwnProps, StateProps, DispatchProps {}
|
|
|
|
const Account: React.FC<AccountProps> = ({ setUsername, username }) => {
|
|
const [showAlert, setShowAlert] = useState(false);
|
|
|
|
const clicked = (text: string) => {
|
|
console.log(`Clicked ${text}`);
|
|
};
|
|
|
|
return (
|
|
<IonPage id="account-page">
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonButtons slot="start">
|
|
<IonMenuButton></IonMenuButton>
|
|
</IonButtons>
|
|
<IonTitle>Account</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent>
|
|
{username && (
|
|
<div className="ion-padding-top ion-text-center">
|
|
<img src="https://www.gravatar.com/avatar?d=mm&s=140" alt="avatar" />
|
|
<h2>{username}</h2>
|
|
<IonList inset>
|
|
<IonItem onClick={() => clicked('Update Picture')}>Update Picture</IonItem>
|
|
<IonItem onClick={() => setShowAlert(true)}>Change Username</IonItem>
|
|
<IonItem onClick={() => clicked('Change Password')}>Change Password</IonItem>
|
|
<IonItem routerLink="/support" routerDirection="none">
|
|
Support
|
|
</IonItem>
|
|
<IonItem routerLink="/logout" routerDirection="none">
|
|
Logout
|
|
</IonItem>
|
|
</IonList>
|
|
</div>
|
|
)}
|
|
</IonContent>
|
|
<IonAlert
|
|
isOpen={showAlert}
|
|
header="Change Username"
|
|
buttons={[
|
|
'Cancel',
|
|
{
|
|
text: 'Ok',
|
|
handler: (data) => {
|
|
setUsername(data.username);
|
|
},
|
|
},
|
|
]}
|
|
inputs={[
|
|
{
|
|
type: 'text',
|
|
name: 'username',
|
|
value: username,
|
|
placeholder: 'username',
|
|
},
|
|
]}
|
|
onDidDismiss={() => setShowAlert(false)}
|
|
/>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default connect<OwnProps, StateProps, DispatchProps>({
|
|
mapStateToProps: (state) => ({
|
|
username: state.user.username,
|
|
}),
|
|
mapDispatchToProps: {
|
|
setUsername,
|
|
},
|
|
component: Account,
|
|
});
|