From bed3eadd2c70bf4b04ef7aeabc825b26ce979dad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Wed, 2 Oct 2024 12:17:49 +0200 Subject: [PATCH] wip hooks migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../pl-fe/src/api/hooks/groups/useGroup.ts | 7 ++++--- .../pl-fe/src/api/hooks/statuses/useStatus.ts | 14 -------------- .../src/components/quoted-status-indicator.tsx | 9 +++------ .../components/reply-group-indicator.tsx | 8 ++++---- packages/pl-fe/src/features/status/index.tsx | 18 ++++++++++-------- .../pl-hooks/lib/hooks/statuses/useStatus.ts | 15 +++++++++++---- packages/pl-hooks/lib/importer.ts | 10 ++++++++++ 7 files changed, 42 insertions(+), 39 deletions(-) delete mode 100644 packages/pl-fe/src/api/hooks/statuses/useStatus.ts diff --git a/packages/pl-fe/src/api/hooks/groups/useGroup.ts b/packages/pl-fe/src/api/hooks/groups/useGroup.ts index 62b4bd71f..b93b504dd 100644 --- a/packages/pl-fe/src/api/hooks/groups/useGroup.ts +++ b/packages/pl-fe/src/api/hooks/groups/useGroup.ts @@ -10,19 +10,20 @@ import { useGroupRelationship } from './useGroupRelationship'; import type { Group as BaseGroup } from 'pl-api'; -const useGroup = (groupId: string, refetch = true) => { +const useGroup = (groupId?: string, refetch = true) => { const client = useClient(); const history = useHistory(); const { entity: group, isUnauthorized, ...result } = useEntity( - [Entities.GROUPS, groupId], - () => client.experimental.groups.getGroup(groupId), + [Entities.GROUPS, groupId!], + () => client.experimental.groups.getGroup(groupId!), { transform: normalizeGroup, refetch, enabled: !!groupId, }, ); + const { groupRelationship: relationship } = useGroupRelationship(groupId); useEffect(() => { diff --git a/packages/pl-fe/src/api/hooks/statuses/useStatus.ts b/packages/pl-fe/src/api/hooks/statuses/useStatus.ts deleted file mode 100644 index 061add38a..000000000 --- a/packages/pl-fe/src/api/hooks/statuses/useStatus.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; - -import { useClient } from 'pl-fe/hooks'; - -const useStatus = (statusId: string) => { - const client = useClient(); - - return useQuery({ - queryKey: ['statuses', statusId], - queryFn: () => client.statuses.getStatus(statusId), - }); -}; - -export { useStatus }; diff --git a/packages/pl-fe/src/components/quoted-status-indicator.tsx b/packages/pl-fe/src/components/quoted-status-indicator.tsx index 15b25afdc..4386892db 100644 --- a/packages/pl-fe/src/components/quoted-status-indicator.tsx +++ b/packages/pl-fe/src/components/quoted-status-indicator.tsx @@ -1,8 +1,7 @@ -import React, { useCallback } from 'react'; +import { useStatus } from 'pl-fe/pl-hooks/hooks/statuses/useStatus'; +import React from 'react'; import { HStack, Icon, Text } from 'pl-fe/components/ui'; -import { useAppSelector } from 'pl-fe/hooks'; -import { makeGetStatus } from 'pl-fe/selectors'; interface IQuotedStatusIndicator { /** The quoted status id. */ @@ -10,9 +9,7 @@ interface IQuotedStatusIndicator { } const QuotedStatusIndicator: React.FC = ({ statusId }) => { - const getStatus = useCallback(makeGetStatus(), []); - - const status = useAppSelector(state => getStatus(state, { id: statusId })); + const { data: status } = useStatus(statusId); if (!status) return null; diff --git a/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx b/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx index b5f5b6f57..8dada68eb 100644 --- a/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx +++ b/packages/pl-fe/src/features/compose/components/reply-group-indicator.tsx @@ -1,10 +1,10 @@ +import { useStatus } from 'pl-fe/pl-hooks/hooks/statuses/useStatus'; import React, { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; import Link from 'pl-fe/components/link'; import { Text } from 'pl-fe/components/ui'; -import { useAppSelector } from 'pl-fe/hooks'; -import { makeGetStatus } from 'pl-fe/selectors'; +import { useCompose } from 'pl-fe/hooks'; interface IReplyGroupIndicator { composeId: string; @@ -13,9 +13,9 @@ interface IReplyGroupIndicator { const ReplyGroupIndicator = (props: IReplyGroupIndicator) => { const { composeId } = props; - const getStatus = useCallback(makeGetStatus(), []); + const inReplyTo = useCompose(composeId).in_reply_to!; - const status = useAppSelector((state) => getStatus(state, { id: state.compose.get(composeId)?.in_reply_to! })); + const { data: status } = useStatus(inReplyTo); const group = status?.group; if (!group) { diff --git a/packages/pl-fe/src/features/status/index.tsx b/packages/pl-fe/src/features/status/index.tsx index e77467c32..826c393e4 100644 --- a/packages/pl-fe/src/features/status/index.tsx +++ b/packages/pl-fe/src/features/status/index.tsx @@ -1,4 +1,5 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import { useStatus } from 'pl-fe/pl-hooks/hooks/statuses/useStatus'; +import React, { useEffect, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { Redirect } from 'react-router-dom'; @@ -7,8 +8,7 @@ import MissingIndicator from 'pl-fe/components/missing-indicator'; import PullToRefresh from 'pl-fe/components/pull-to-refresh'; import { Column, Stack } from 'pl-fe/components/ui'; import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status'; -import { useAppDispatch, useAppSelector, useLoggedIn } from 'pl-fe/hooks'; -import { makeGetStatus } from 'pl-fe/selectors'; +import { useAppDispatch, useLoggedIn } from 'pl-fe/hooks'; import Thread from './components/thread'; import ThreadLoginCta from './components/thread-login-cta'; @@ -45,10 +45,12 @@ const StatusDetails: React.FC = (props) => { const intl = useIntl(); const { isLoggedIn } = useLoggedIn(); - const getStatus = useCallback(makeGetStatus(), []); - const status = useAppSelector((state) => getStatus(state, { id: props.params.statusId })); + const statusQuery = useStatus(props.params.statusId); - const [isLoaded, setIsLoaded] = useState(!!status); + const status = statusQuery.data; + const isLoaded = statusQuery.isSuccess; + + // const [isLoaded, setIsLoaded] = useState(!!status); /** Fetch the status (and context) from the API. */ const fetchData = () => { @@ -60,9 +62,9 @@ const StatusDetails: React.FC = (props) => { // Load data. useEffect(() => { fetchData().then(() => { - setIsLoaded(true); + // setIsLoaded(true); }).catch(() => { - setIsLoaded(true); + // setIsLoaded(true); }); }, [props.params.statusId]); diff --git a/packages/pl-hooks/lib/hooks/statuses/useStatus.ts b/packages/pl-hooks/lib/hooks/statuses/useStatus.ts index e1e637afb..bf7785bf8 100644 --- a/packages/pl-hooks/lib/hooks/statuses/useStatus.ts +++ b/packages/pl-hooks/lib/hooks/statuses/useStatus.ts @@ -1,11 +1,13 @@ import { useQuery } from '@tanstack/react-query'; -import { useAccount } from 'pl-fe/api/hooks'; + +import { useAccount, useGroup } from 'pl-fe/api/hooks'; import { useAppSelector, useClient } from 'pl-fe/hooks'; import { queryClient } from 'pl-fe/queries/client'; import { selectAccount, selectAccounts } from 'pl-fe/selectors'; import { type MinifiedStatus, minifyStatus } from '../../minifiers/minifyStatus'; import { normalizeStatus, type Status } from '../../normalizers/normalizeStatus'; +import type { Group } from 'pl-fe/normalizers'; type Account = ReturnType; @@ -26,10 +28,14 @@ const useStatus = (statusId: string) => { .then(minifyStatus), }); - const { account } = useAccount(statusQuery.data?.account_id!); + const status = statusQuery.data; - const data: Status | null = useAppSelector((state) => { - const status = statusQuery.data; + const { account } = useAccount(status?.account_id || undefined); + const { group } = useGroup(status?.group_id || undefined); + + const data: Status & { + group: Group; + } | null = useAppSelector((state) => { if (!status) return null; const accounts = selectAccounts(state, status.account_ids).filter((account): account is Account => account !== undefined); @@ -37,6 +43,7 @@ const useStatus = (statusId: string) => { ...status, account, accounts, + group, }; }); diff --git a/packages/pl-hooks/lib/importer.ts b/packages/pl-hooks/lib/importer.ts index 1652c40c4..e4b950462 100644 --- a/packages/pl-hooks/lib/importer.ts +++ b/packages/pl-hooks/lib/importer.ts @@ -8,7 +8,9 @@ let dispatch: AppDispatch; import('pl-fe/store').then(value => dispatch = value.store.dispatch).catch(() => {}); import { MinifiedNotification, minifyNotification } from './minifiers/minifyNotification'; +import { MinifiedStatus, minifyStatus } from './minifiers/minifyStatus'; import { DeduplicatedNotification } from './normalizers/deduplicateNotifications'; +import { normalizeStatus } from './normalizers/normalizeStatus'; import type { Account as BaseAccount, @@ -26,6 +28,13 @@ const importNotification = (notification: DeduplicatedNotification) => { ); }; +const importStatus = (status: BaseStatus) => { + queryClient.setQueryData( + ['statuses', 'entities', status.id], + _ => minifyStatus(normalizeStatus(status)), + ); +}; + const isEmpty = (object: Record) => { for (const i in object) return false; return true; @@ -88,6 +97,7 @@ const importEntities = (entities: { if (!isEmpty(polls)) dispatch(importPolls(Object.values(polls))); if (!isEmpty(relationships)) dispatch(importEntityStoreEntities(Object.values(relationships), Entities.RELATIONSHIPS)); if (!isEmpty(statuses)) dispatch(importStatuses(Object.values(statuses))); + if (!isEmpty(statuses)) Object.values(statuses).forEach(importStatus); }; export { importEntities };