From 3e388de26f72bded2f217d3cbb771be8fb13867f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 1 May 2022 16:21:43 -0500
Subject: [PATCH] Settings: convert to TSX

---
 .../features/settings/{index.js => index.tsx}    | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)
 rename app/soapbox/features/settings/{index.js => index.tsx} (90%)

diff --git a/app/soapbox/features/settings/index.js b/app/soapbox/features/settings/index.tsx
similarity index 90%
rename from app/soapbox/features/settings/index.js
rename to app/soapbox/features/settings/index.tsx
index 92a10f90a..e019aee83 100644
--- a/app/soapbox/features/settings/index.js
+++ b/app/soapbox/features/settings/index.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 
 import List, { ListItem } from '../../components/list';
 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' },
 });
 
+/** User settings page. */
 const Settings = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const intl = useIntl();
 
-  const mfa = useSelector((state) => state.getIn(['security', 'mfa']));
-  const me = useSelector((state) => state.get('me'));
-  const account = useSelector((state) => state.getIn(['accounts', me]));
-  const displayName = account.get('display_name') || account.get('username');
+  const mfa = useAppSelector((state) => state.security.get('mfa'));
+  const account = useOwnAccount();
 
   const navigateToChangeEmail = React.useCallback(() => history.push('/settings/email'), [history]);
   const navigateToChangePassword = React.useCallback(() => history.push('/settings/password'), [history]);
@@ -42,6 +42,10 @@ const Settings = () => {
     dispatch(fetchMfa());
   }, [dispatch]);
 
+  if (!account) return null;
+
+  const displayName = account.display_name || account.username;
+
   return (
     <Column label={intl.formatMessage(messages.settings)} transparent withHeader={false}>
       <Card variant='rounded'>
@@ -73,7 +77,7 @@ const Settings = () => {
           </List>
         </CardBody>
 
-        <CardHeader className='mt-4'>
+        <CardHeader>
           <CardTitle title={intl.formatMessage(messages.preferences)} />
         </CardHeader>