From 2da31341c4fc6dca4871317cd6dc341448c3d5b8 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 23 Mar 2022 20:29:35 -0500 Subject: [PATCH 1/2] 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 => { + 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 => { + return useAppSelector((state) => getSoapboxConfig(state)); +}; From be690255cb2e8d2866f7a07b651e6235054f0c3f Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 23 Mar 2022 21:05:55 -0500 Subject: [PATCH 2/2] Hooks: get rid of useAccount, create useOwnAccount --- app/soapbox/features/ui/components/navbar.tsx | 4 ++-- app/soapbox/hooks/index.ts | 2 +- app/soapbox/hooks/{useAccount.ts => useOwnAccount.ts} | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) rename app/soapbox/hooks/{useAccount.ts => useOwnAccount.ts} (63%) diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index 69b2d528c..dfe76a541 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/app/soapbox/features/ui/components/navbar.tsx @@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'; import { Avatar, Button, Icon } from 'soapbox/components/ui'; import Search from 'soapbox/features/compose/components/search'; -import { useAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; +import { useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; import { openSidebar } from '../../../actions/sidebar'; @@ -16,7 +16,7 @@ const Navbar = () => { const dispatch = useDispatch(); const node = React.useRef(null); - const account = useAccount(); + const account = useOwnAccount(); const settings = useSettings(); const soapboxConfig = useSoapboxConfig(); const singleUserMode = soapboxConfig.get('singleUserMode'); diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts index c5ea01d3d..1bce19299 100644 --- a/app/soapbox/hooks/index.ts +++ b/app/soapbox/hooks/index.ts @@ -1,5 +1,5 @@ -export { useAccount } from './useAccount'; export { useAppSelector } from './useAppSelector'; export { useOnScreen } from './useOnScreen'; +export { useOwnAccount } from './useOwnAccount'; export { useSettings } from './useSettings'; export { useSoapboxConfig } from './useSoapboxConfig'; diff --git a/app/soapbox/hooks/useAccount.ts b/app/soapbox/hooks/useOwnAccount.ts similarity index 63% rename from app/soapbox/hooks/useAccount.ts rename to app/soapbox/hooks/useOwnAccount.ts index f6be45060..6a5937f0b 100644 --- a/app/soapbox/hooks/useAccount.ts +++ b/app/soapbox/hooks/useOwnAccount.ts @@ -7,7 +7,7 @@ import type Account from 'soapbox/types/entities/account'; // 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)); +/** Get the logged-in account from the store, if any */ +export const useOwnAccount = (): Account | null => { + return useAppSelector((state) => getAccount(state, state.me)); };