wip hooks migration

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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<BaseGroup, Group>(
-    [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(() => {

packages/pl-fe/src/api/hooks/statuses/useStatus.ts

@@ -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 };

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<IQuotedStatusIndicator> = ({ statusId }) => {
-  const getStatus = useCallback(makeGetStatus(), []);
-
-  const status = useAppSelector(state => getStatus(state, { id: statusId }));
+  const { data: status } = useStatus(statusId);
 
   if (!status) return null;
 

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) {

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<IStatusDetails> = (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<boolean>(!!status);
+  const status = statusQuery.data;
+  const isLoaded = statusQuery.isSuccess;
+
+  // const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
 
   /** Fetch the status (and context) from the API. */
   const fetchData = () => {
@@ -60,9 +62,9 @@ const StatusDetails: React.FC<IStatusDetails> = (props) => {
   // Load data.
   useEffect(() => {
     fetchData().then(() => {
-      setIsLoaded(true);
+      // setIsLoaded(true);
     }).catch(() => {
-      setIsLoaded(true);
+      // setIsLoaded(true);
     });
   }, [props.params.statusId]);
 

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<typeof selectAccount>;
 
@@ -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,
     };
   });
 

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<MinifiedStatus>(
+    ['statuses', 'entities', status.id],
+    _ => minifyStatus(normalizeStatus(status)),
+  );
+};
+
 const isEmpty = (object: Record<string, any>) => {
   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 };