Custom hooks: useAccount, useSettings, useSoapboxConfig

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

@@ -4,11 +4,9 @@ import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { Avatar, Button, Icon } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks';
 
 import { openSidebar } from '../../../actions/sidebar';
 
@@ -18,10 +16,9 @@ const Navbar = () => {
   const dispatch = useDispatch();
   const node = React.useRef(null);
 
-  const me = useAppSelector((state) => state.me);
-  const account = useAppSelector((state) => state.accounts.get(me));
-  const settings = useAppSelector((state) => getSettings(state));
-  const soapboxConfig = useAppSelector((state) => getSoapboxConfig(state));
+  const account = useAccount();
+  const settings = useSettings();
+  const soapboxConfig = useSoapboxConfig();
   const singleUserMode = soapboxConfig.get('singleUserMode');
 
   // In demo mode, use the Soapbox logo

app/soapbox/hooks/index.ts

@@ -1,2 +1,5 @@
+export { useAccount } from './useAccount';
 export { useAppSelector } from './useAppSelector';
 export { useOnScreen } from './useOnScreen';
+export { useSettings } from './useSettings';
+export { useSoapboxConfig } from './useSoapboxConfig';

app/soapbox/hooks/useAccount.ts

@@ -0,0 +1,13 @@
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+import type Account from 'soapbox/types/entities/account';
+
+// FIXME: There is no reason this selector shouldn't be global accross the whole app
+// FIXME: getAccount() has the wrong type??
+const getAccount: (state: any, accountId: any) => any = makeGetAccount();
+
+/** Get an account from the store (by default, your own account) */
+export const useAccount = (accountId?: string): Account => {
+  return useAppSelector((state) =>  getAccount(state, accountId || state.me));
+};

app/soapbox/hooks/useSettings.ts

@@ -0,0 +1,9 @@
+import { getSettings } from 'soapbox/actions/settings';
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+/** Get the user settings from the store */
+export const useSettings = (): ImmutableMap<string, any> => {
+  return useAppSelector((state) => getSettings(state));
+};

app/soapbox/hooks/useSoapboxConfig.ts

@@ -0,0 +1,9 @@
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+/** Get the Soapbox config from the store */
+export const useSoapboxConfig = (): ImmutableMap<string, any> => {
+  return useAppSelector((state) => getSoapboxConfig(state));
+};