From 2da31341c4fc6dca4871317cd6dc341448c3d5b8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 20:29:35 -0500
Subject: [PATCH] Custom hooks: useAccount, useSettings, useSoapboxConfig

---
 app/soapbox/features/ui/components/navbar.tsx | 11 ++++-------
 app/soapbox/hooks/index.ts                    |  3 +++
 app/soapbox/hooks/useAccount.ts               | 13 +++++++++++++
 app/soapbox/hooks/useSettings.ts              |  9 +++++++++
 app/soapbox/hooks/useSoapboxConfig.ts         |  9 +++++++++
 5 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 app/soapbox/hooks/useAccount.ts
 create mode 100644 app/soapbox/hooks/useSettings.ts
 create mode 100644 app/soapbox/hooks/useSoapboxConfig.ts

diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index d9198ecc4..69b2d528c 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/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
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index 9fe270dd4..c5ea01d3d 100644
--- a/app/soapbox/hooks/index.ts
+++ b/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';
diff --git a/app/soapbox/hooks/useAccount.ts b/app/soapbox/hooks/useAccount.ts
new file mode 100644
index 000000000..f6be45060
--- /dev/null
+++ b/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));
+};
diff --git a/app/soapbox/hooks/useSettings.ts b/app/soapbox/hooks/useSettings.ts
new file mode 100644
index 000000000..8ad86af71
--- /dev/null
+++ b/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));
+};
diff --git a/app/soapbox/hooks/useSoapboxConfig.ts b/app/soapbox/hooks/useSoapboxConfig.ts
new file mode 100644
index 000000000..2e51e5923
--- /dev/null
+++ b/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));
+};