bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'settings-tsx' into 'develop'

Browse source 
Settings: convert to TSX

See merge request soapbox-pub/soapbox-fe!1292
This commit is contained in:
Alex Gleason 2022-05-01 21:44:31 +00:00
commit 360800be40
1 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/soapbox/features/settings/index.js → app/soapbox/features/settings/index.tsx
View file

@ -1,9 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { fetchMfa } from 'soapbox/actions/mfa'; import { fetchMfa } from 'soapbox/actions/mfa';
import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
import List, { ListItem } from '../../components/list'; import List, { ListItem } from '../../components/list';
import { Button, Card, CardBody, CardHeader, CardTitle, Column } from '../../components/ui'; import { Button, Card, CardBody, CardHeader, CardTitle, Column } from '../../components/ui';
@ -21,15 +22,14 @@ const messages = defineMessages({
deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' }, deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
}); });
/** User settings page. */
const Settings = () => { const Settings = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const history = useHistory(); const history = useHistory();
const intl = useIntl(); const intl = useIntl();
const mfa = useSelector((state) => state.getIn(['security', 'mfa'])); const mfa = useAppSelector((state) => state.security.get('mfa'));
const me = useSelector((state) => state.get('me')); const account = useOwnAccount();
const account = useSelector((state) => state.getIn(['accounts', me]));
const displayName = account.get('display_name') || account.get('username');
const navigateToChangeEmail = React.useCallback(() => history.push('/settings/email'), [history]); const navigateToChangeEmail = React.useCallback(() => history.push('/settings/email'), [history]);
const navigateToChangePassword = React.useCallback(() => history.push('/settings/password'), [history]); const navigateToChangePassword = React.useCallback(() => history.push('/settings/password'), [history]);
@ -42,6 +42,10 @@ const Settings = () => {
dispatch(fetchMfa()); dispatch(fetchMfa());
}, [dispatch]); }, [dispatch]);
if (!account) return null;
const displayName = account.display_name || account.username;
return ( return (
<Column label={intl.formatMessage(messages.settings)} transparent withHeader={false}> <Column label={intl.formatMessage(messages.settings)} transparent withHeader={false}>
<Card variant='rounded'> <Card variant='rounded'>
@ -73,7 +77,7 @@ const Settings = () => {
</List> </List>
</CardBody> </CardBody>
<CardHeader className='mt-4'> <CardHeader>
<CardTitle title={intl.formatMessage(messages.preferences)} /> <CardTitle title={intl.formatMessage(messages.preferences)} />
</CardHeader> </CardHeader>