Make useOwnAccount return an object

app/soapbox/api/hooks/groups/useCancelMembershipRequest.ts

@@ -6,7 +6,7 @@ import type { Group } from 'soapbox/schemas';
 
 function useCancelMembershipRequest(group: Group) {
   const api = useApi();
-  const me = useOwnAccount();
+  const { account: me } = useOwnAccount();
 
   const { createEntity, isSubmitting } = useCreateEntity(
     [Entities.GROUP_RELATIONSHIPS],

app/soapbox/components/sidebar-navigation.tsx

@@ -24,7 +24,7 @@ const SidebarNavigation = () => {
 
   const features = useFeatures();
   const settings = useSettings();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const groupsPath = useGroupsPath();
 
   const notificationCount = useAppSelector((state) => state.notifications.unread);

app/soapbox/components/status-action-bar.tsx

@@ -123,7 +123,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
   const { allowedEmoji } = soapboxConfig;
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const isStaff = account ? account.staff : false;
   const isAdmin = account ? account.admin : false;
 

app/soapbox/components/status-reaction-wrapper.tsx

@@ -15,7 +15,7 @@ interface IStatusReactionWrapper {
 /** Provides emoji reaction functionality to the underlying button component */
 const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, children }): JSX.Element | null => {
   const dispatch = useAppDispatch();
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
   const status = useAppSelector(state => state.statuses.get(statusId));
   const soapboxConfig = useSoapboxConfig();
 

app/soapbox/components/statuses/sensitive-content-overlay.tsx

@@ -35,7 +35,7 @@ interface ISensitiveContentOverlay {
 const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
   const { onToggleVisibility, status } = props;
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const settings = useSettings();

app/soapbox/components/thumb-navigation.tsx

@@ -6,7 +6,7 @@ import { useStatContext } from 'soapbox/contexts/stat-context';
 import { useAppSelector, useFeatures, useGroupsPath, useOwnAccount } from 'soapbox/hooks';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const features = useFeatures();
   const groupsPath = useGroupsPath();
 

app/soapbox/containers/soapbox.tsx

@@ -91,7 +91,7 @@ const SoapboxMount = () => {
 
   const me = useAppSelector(state => state.me);
   const instance = useInstance();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const soapboxConfig = useSoapboxConfig();
   const features = useFeatures();
   const { pepeEnabled } = useRegistrationStatus();
@@ -217,7 +217,7 @@ const SoapboxLoad: React.FC<ISoapboxLoad> = ({ children }) => {
   const dispatch = useAppDispatch();
 
   const me = useAppSelector(state => state.me);
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const swUpdating = useAppSelector(state => state.meta.swUpdating);
   const { locale } = useLocale();
 

app/soapbox/contexts/chat-context.tsx

@@ -27,7 +27,7 @@ const ChatProvider: React.FC<IChatProvider> = ({ children }) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
   const settings = useSettings();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const path = history.location.pathname;
   const isUsingMainChatPage = Boolean(path.match(/^\/chats/));

app/soapbox/features/account/components/header.tsx

@@ -87,7 +87,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const dispatch = useAppDispatch();
 
   const features = useFeatures();
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
   const { follow } = useFollow();
 
   const { software } = useAppSelector((state) => parseVersion(state.instance.version));

app/soapbox/features/admin/index.tsx

@@ -16,7 +16,7 @@ const messages = defineMessages({
 
 const Admin: React.FC = () => {
   const intl = useIntl();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   if (!account) return null;
 

app/soapbox/features/admin/tabs/dashboard.tsx

@@ -18,7 +18,7 @@ const Dashboard: React.FC = () => {
   const history = useHistory();
   const instance = useInstance();
   const features = useFeatures();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const handleSubscribersClick: React.MouseEventHandler = e => {
     dispatch(getSubscribersCsv()).then(({ data }) => {

app/soapbox/features/aliases/index.tsx

@@ -23,7 +23,7 @@ const Aliases = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const features = useFeatures();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const aliases = useAppSelector((state) => {
     if (features.accountMoving) {

app/soapbox/features/auth-layout/index.tsx

@@ -26,7 +26,7 @@ const AuthLayout = () => {
   const history = useHistory();
   const { search } = useLocation();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const instance = useInstance();
   const { isOpen } = useRegistrationStatus();
   const isLoginPage = history.location.pathname === '/login';

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -69,7 +69,7 @@ interface IChatMessageList {
 /** Scrollable list of chat messages. */
 const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   const intl = useIntl();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const myLastReadMessageDateString = chat.latest_read_message_by_account?.find((latest) => latest.id === account?.id)?.date;
   const myLastReadMessageTimestamp = myLastReadMessageDateString ? new Date(myLastReadMessageDateString) : null;

app/soapbox/features/chats/components/chat-page/chat-page.tsx

@@ -16,7 +16,7 @@ interface IChatPage {
 }
 
 const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const history = useHistory();
 
   const isOnboarded = account?.source?.chats_onboarded ?? true;

app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx

@@ -24,7 +24,7 @@ const messages = defineMessages({
 });
 
 const ChatPageSettings = () => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const intl = useIntl();
   const history = useHistory();
   const dispatch = useAppDispatch();

app/soapbox/features/chats/components/chat-page/components/welcome.tsx

@@ -20,7 +20,7 @@ const messages = defineMessages({
 });
 
 const Welcome = () => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const intl = useIntl();
   const updateCredentials = useUpdateCredentials();
 

app/soapbox/features/chats/components/chat-widget/chat-widget.tsx

@@ -7,7 +7,7 @@ import { useOwnAccount } from 'soapbox/hooks';
 import ChatPane from '../chat-pane/chat-pane';
 
 const ChatWidget = () => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const history = useHistory();
 
   const path = history.location.pathname;

app/soapbox/features/developers/apps/create.tsx

@@ -25,7 +25,7 @@ type Params = typeof BLANK_PARAMS;
 const CreateApp: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const [app, setApp] = useState<Record<string, any> | null>(null);
   const [token, setToken] = useState<string | null>(null);

app/soapbox/features/edit-profile/index.tsx

@@ -177,7 +177,7 @@ const EditProfile: React.FC = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const features = useFeatures();
   const maxFields = instance.pleroma.getIn(['metadata', 'fields_limits', 'max_fields'], 4) as number;
 

app/soapbox/features/event/components/event-header.tsx

@@ -73,7 +73,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const features = useFeatures();
   const settings = useSettings();
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
   const isStaff = ownAccount ? ownAccount.staff : false;
   const isAdmin = ownAccount ? ownAccount.admin : false;
 

app/soapbox/features/favourited-statuses/index.tsx

@@ -26,7 +26,7 @@ const Favourites: React.FC<IFavourites> = ({ params }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const features = useFeatures();
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
   const { account } = useAccount(params?.username, { withRelationship: true });
 
   const username = params?.username || '';

app/soapbox/features/followers/index.tsx

@@ -31,7 +31,7 @@ const Followers: React.FC<IFollowers> = (props) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const features = useFeatures();
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
 
   const [loading, setLoading] = useState(true);
 

app/soapbox/features/following/index.tsx

@@ -31,7 +31,7 @@ const Following: React.FC<IFollowing> = (props) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const features = useFeatures();
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
 
   const [loading, setLoading] = useState(true);
 

app/soapbox/features/group/components/group-action-button.tsx

@@ -31,7 +31,7 @@ const messages = defineMessages({
 const GroupActionButton = ({ group }: IGroupActionButton) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const joinGroup = useJoinGroup(group);
   const leaveGroup = useLeaveGroup(group);

app/soapbox/features/group/components/group-options-button.tsx

@@ -27,7 +27,7 @@ interface IGroupActionButton {
 }
 
 const GroupOptionsButton = ({ group }: IGroupActionButton) => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const leaveGroup = useLeaveGroup(group);

app/soapbox/features/group/group-timeline.tsx

@@ -24,7 +24,7 @@ const getStatusIds = makeGetStatusIds();
 
 const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
   const intl = useIntl();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const dispatch = useAppDispatch();
   const composer = useRef<HTMLDivElement>(null);
 

app/soapbox/features/groups/components/discover/search/recent-searches.tsx

@@ -14,7 +14,7 @@ interface Props {
 export default (props: Props) => {
   const { onSelect } = props;
 
-  const me = useOwnAccount();
+  const { account: me } = useOwnAccount();
 
   const [recentSearches, setRecentSearches] = useState<string[]>(groupSearchHistory.get(me?.id as string) || []);
 

app/soapbox/features/groups/components/discover/search/search.tsx

@@ -19,7 +19,7 @@ interface Props {
 export default (props: Props) => {
   const { onSelect, searchValue } = props;
 
-  const me = useOwnAccount();
+  const { account: me } = useOwnAccount();
   const debounce = useDebounce;
 
   const debouncedValue = debounce(searchValue as string, 300);

app/soapbox/features/onboarding/steps/avatar-selection-step.tsx

@@ -17,7 +17,7 @@ const messages = defineMessages({
 
 const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
   const dispatch = useAppDispatch();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const fileInput = React.useRef<HTMLInputElement>(null);
   const [selectedFile, setSelectedFile] = React.useState<string | null>();

app/soapbox/features/onboarding/steps/bio-step.tsx

@@ -17,7 +17,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const [value, setValue] = React.useState<string>(account?.source?.note ?? '');
   const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
   const [errors, setErrors] = React.useState<string[]>([]);

app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx

@@ -20,7 +20,7 @@ const messages = defineMessages({
 const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const fileInput = React.useRef<HTMLInputElement>(null);
   const [selectedFile, setSelectedFile] = React.useState<string | null>();

app/soapbox/features/onboarding/steps/display-name-step.tsx

@@ -17,7 +17,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const [value, setValue] = React.useState<string>(account?.display_name || '');
   const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
   const [errors, setErrors] = React.useState<string[]>([]);

app/soapbox/features/onboarding/steps/fediverse-step.tsx

@@ -5,10 +5,8 @@ import Account from 'soapbox/components/account';
 import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
 import { useInstance, useOwnAccount } from 'soapbox/hooks';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
-
 const FediverseStep = ({ onNext }: { onNext: () => void }) => {
-  const account = useOwnAccount() as AccountEntity;
+  const { account } = useOwnAccount();
   const instance = useInstance();
 
   return (
@@ -49,9 +47,11 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
               </Stack>
             </div>
 
-            <div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
-              <Account account={account} />
-            </div>
+            {account && (
+              <div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
+                <Account account={account} />
+              </div>
+            )}
 
             <Text theme='muted'>
               <FormattedMessage

app/soapbox/features/public-layout/components/header.tsx

@@ -29,7 +29,7 @@ const Header = () => {
   const intl = useIntl();
   const features = useFeatures();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const soapboxConfig = useSoapboxConfig();
   const { isOpen } = useRegistrationStatus();
   const { links } = soapboxConfig;

app/soapbox/features/settings/components/messages-settings.tsx

@@ -11,7 +11,7 @@ const messages = defineMessages({
 });
 
 const MessagesSettings = () => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const intl = useIntl();
   const updateCredentials = useUpdateCredentials();
 

app/soapbox/features/settings/index.tsx

@@ -40,7 +40,7 @@ const Settings = () => {
 
   const mfa = useAppSelector((state) => state.security.get('mfa'));
   const features = useFeatures();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
 
   const navigateToChangeEmail = () => history.push('/settings/email');
   const navigateToChangePassword = () => history.push('/settings/password');

app/soapbox/features/status/components/thread.tsx

@@ -97,7 +97,7 @@ const Thread = (props: IThread) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
   const intl = useIntl();
-  const me = useOwnAccount();
+  const { account: me } = useOwnAccount();
   const settings = useSettings();
 
   const displayMedia = settings.get('displayMedia') as DisplayMedia;

app/soapbox/features/ui/components/instance-moderation-panel.tsx

@@ -26,7 +26,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
 
   const handleEditFederation = () => {

app/soapbox/features/ui/components/link-footer.tsx

@@ -25,7 +25,7 @@ const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JS
 };
 
 const LinkFooter: React.FC = (): JSX.Element => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();
 

app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx

@@ -45,7 +45,7 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const ownAccount = useOwnAccount();
+  const { account: ownAccount } = useOwnAccount();
   const features = useFeatures();
   const { account } = useAccount(accountId);
 

app/soapbox/features/ui/components/navbar.tsx

@@ -28,7 +28,7 @@ const Navbar = () => {
   const intl = useIntl();
   const features = useFeatures();
   const { isOpen } = useRegistrationStatus();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const node = useRef(null);
 
   const [isLoading, setLoading] = useState<boolean>(false);

app/soapbox/features/ui/index.tsx

@@ -399,7 +399,7 @@ const UI: React.FC<IUI> = ({ children }) => {
   const hotkeys = useRef<HTMLDivElement | null>(null);
 
   const me = useAppSelector(state => state.me);
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const features = useFeatures();
   const vapidKey = useAppSelector(state => getVapidKey(state));
 

app/soapbox/features/ui/util/react-router-helpers.tsx

@@ -42,7 +42,7 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
 }) => {
   const history = useHistory();
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const settings = useSettings();
 
   const renderComponent = ({ match }: RouteComponentProps) => {

app/soapbox/features/verification/waitlist-page.tsx

@@ -13,7 +13,7 @@ const WaitlistPage = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();
 
-  const me = useOwnAccount();
+  const { account: me } = useOwnAccount();
   const isSmsVerified = me?.source?.sms_verified ?? true;
 
   const onClickLogOut: React.MouseEventHandler = (event) => {

app/soapbox/hooks/useOwnAccount.ts

@@ -3,19 +3,17 @@ import { useCallback } from 'react';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
-import type { Account } from 'soapbox/types/entities';
-
 /** Get the logged-in account from the store, if any. */
-export const useOwnAccount = (): Account | null => {
+export const useOwnAccount = () => {
   const getAccount = useCallback(makeGetAccount(), []);
 
-  return useAppSelector((state) =>  {
+  const account = useAppSelector((state) =>  {
     const { me } = state;
 
     if (typeof me === 'string') {
       return getAccount(state, me);
-    } else {
-      return null;
     }
   });
+
+  return { account: account || undefined };
 };

app/soapbox/pages/group-page.tsx

@@ -96,7 +96,7 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
   const intl = useIntl();
   const features = useFeatures();
   const match = useRouteMatch();
-  const me = useOwnAccount();
+  const { account: me } = useOwnAccount();
 
   const id = params?.groupId || '';
 

app/soapbox/pages/home-page.tsx

@@ -32,7 +32,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
   const dispatch = useAppDispatch();
 
   const me = useAppSelector(state => state.me);
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();
 

app/soapbox/pages/remote-instance-page.tsx

@@ -23,7 +23,7 @@ interface IRemoteInstancePage {
 const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params }) => {
   const host = params?.instance;
 
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const disclosed = useAppSelector(federationRestrictionsDisclosed);
 
   return (

app/soapbox/queries/accounts.ts

@@ -35,7 +35,7 @@ type UpdateCredentialsData = {
 }
 
 const useUpdateCredentials = () => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const api = useApi();
   const dispatch = useAppDispatch();
 

app/soapbox/queries/chats.ts

@@ -200,7 +200,7 @@ const useChat = (chatId?: string) => {
 };
 
 const useChatActions = (chatId: string) => {
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const api = useApi();
   // const dispatch = useAppDispatch();
 

app/soapbox/queries/groups.ts

@@ -48,7 +48,7 @@ const useGroupsApi = () => {
 
 const usePendingGroups = () => {
   const features = useFeatures();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const { fetchGroups } = useGroupsApi();
 
   const getGroups = async (pageParam?: any): Promise<PaginatedResult<Group>> => {

app/soapbox/queries/policies.ts

@@ -14,7 +14,7 @@ const PolicyKeys = {
 
 function usePendingPolicy() {
   const api = useApi();
-  const account = useOwnAccount();
+  const { account } = useOwnAccount();
   const features = useFeatures();
 
   const getPolicy = async() => {