nicolium: utils updates, move stuff around

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useRef } from 'react';
 import Counter from '@/components/ui/counter';
 import Icon from '@/components/ui/icon';
 import Toggle from '@/components/ui/toggle';
-import { userTouching } from '@/is-mobile';
+import { userTouching } from '@/utils/is-mobile';
 
 type Menu = Array<MenuItem | null>;
 

packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx

@@ -16,9 +16,9 @@ import ReactSwipeableViews from 'react-swipeable-views';
 
 import IconButton from '@/components/ui/icon-button';
 import Portal from '@/components/ui/portal';
-import { userTouching } from '@/is-mobile';
 import { useModalsActions } from '@/stores/modals';
 import { useUiStoreActions } from '@/stores/ui';
+import { userTouching } from '@/utils/is-mobile';
 
 import DropdownMenuItem, { type Menu } from './dropdown-menu-item';
 

packages/pl-fe/src/components/extended-video-player.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-import { isIOS } from '@/is-mobile';
+import { isIOS } from '@/utils/is-mobile';
 
 interface IExtendedVideoPlayer {
   src: string;

packages/pl-fe/src/components/hover-account-wrapper.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 
-import { isMobile } from '@/is-mobile';
 import { useAccountHoverCardActions } from '@/stores/account-hover-card';
+import { isMobile } from '@/utils/is-mobile';
 
 const showAccountHoverCard = debounce((openAccountHoverCard, ref, accountId) => {
   openAccountHoverCard(ref, accountId);

packages/pl-fe/src/components/hover-status-wrapper.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 
-import { isMobile } from '@/is-mobile';
 import { useStatusHoverCardActions } from '@/stores/status-hover-card';
+import { isMobile } from '@/utils/is-mobile';
 
 const showStatusHoverCard = debounce((openStatusHoverCard, ref, statusId) => {
   openStatusHoverCard(ref, statusId);

packages/pl-fe/src/components/media-gallery.tsx

@@ -14,7 +14,7 @@ import { useFrontendConfig } from '@/hooks/use-frontend-config';
 import { useSettings } from '@/stores/settings';
 import { truncateFilename } from '@/utils/media';
 
-import { isIOS } from '../is-mobile';
+import { isIOS } from '../utils/is-mobile';
 import {
   isPanoramic,
   isPortrait,

packages/pl-fe/src/modals/media-modal.tsx

@@ -19,8 +19,8 @@ import ZoomableImage from '@/features/ui/components/zoomable-image';
 import Video from '@/features/video';
 import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useAppSelector } from '@/hooks/use-app-selector';
-import { userTouching } from '@/is-mobile';
 import { makeGetStatus } from '@/selectors';
+import { userTouching } from '@/utils/is-mobile';
 
 import type { BaseModalProps } from '@/features/ui/components/modal-root';
 import type { MediaAttachment } from 'pl-api';

packages/pl-fe/src/pages/accounts/account-gallery.tsx

@@ -12,11 +12,11 @@ import Column from '@/components/ui/column';
 import Spinner from '@/components/ui/spinner';
 import { profileMediaRoute } from '@/features/ui/router';
 import { type AccountGalleryAttachment, useAccountGallery } from '@/hooks/use-account-gallery';
-import { isIOS } from '@/is-mobile';
 import { useAccount } from '@/queries/accounts/use-account';
 import { useAccountLookup } from '@/queries/accounts/use-account-lookup';
 import { useModalsActions } from '@/stores/modals';
 import { useSettings } from '@/stores/settings';
+import { isIOS } from '@/utils/is-mobile';
 
 interface IMediaItem {
   attachment: AccountGalleryAttachment;

packages/pl-fe/src/queries/groups/use-group-members.ts

@@ -24,18 +24,21 @@ const removeGroupMember = (groupId: string, accountId: string) =>
         : undefined,
   );
 
+const minifyGroupMember = ({ account, ...groupMember }: GroupMember) => ({
+  ...groupMember,
+  account_id: account.id,
+});
+
+type MinifiedGroupMember = ReturnType<typeof minifyGroupMember>;
+
 const minifyGroupMembersList = (
   response: PaginatedResponse<GroupMember>,
-): PaginatedResponse<Omit<GroupMember, 'account'> & { account_id: string }> =>
-  minifyList(
-    response,
-    ({ account, ...groupMember }) => ({ ...groupMember, account_id: account.id }),
-    (groupMembers) => {
-      for (const { account } of groupMembers) {
-        queryClient.setQueryData(queryKeys.accounts.show(account.id), account);
-      }
-    },
-  );
+): PaginatedResponse<MinifiedGroupMember> =>
+  minifyList(response, minifyGroupMember, (groupMembers) => {
+    for (const { account } of groupMembers) {
+      queryClient.setQueryData(queryKeys.accounts.show(account.id), account);
+    }
+  });
 
 const useGroupMembers = makePaginatedResponseQuery(
   (groupId: string, role?: GroupRole) => queryKeys.accountsLists.groupMembers.byRole(groupId, role),
@@ -129,8 +132,6 @@ const useDemoteGroupMemberMutation = (groupId: string) => {
   });
 };
 
-type MinifiedGroupMember = ReturnType<typeof minifyGroupMembersList>['items'][0];
-
 export {
   useGroupMembers,
   useKickGroupMemberMutation,

packages/pl-fe/src/queries/keys.ts

@@ -1,4 +1,5 @@
 import type { MinifiedScrobble } from './accounts/account-scrobble';
+import type { MinifiedGroupMember } from './groups/use-group-members';
 import type { FilterType } from './notifications/use-notifications';
 import type { DraftStatus } from './statuses/use-draft-statuses';
 import type { MinifiedInteractionRequest } from './statuses/use-interaction-requests';
@@ -155,11 +156,11 @@ const accountsLists = {
   groupMembers: {
     root: (groupId: string) => {
       const key = ['accountsLists', 'groupMembers', groupId] as const;
-      return key as TaggedKey<typeof key, InfiniteData<PaginatedResponse<string>>>;
+      return key as TaggedKey<typeof key, InfiniteData<PaginatedResponse<MinifiedGroupMember>>>;
     },
     byRole: (groupId: string, role?: GroupRole) => {
       const key = ['accountsLists', 'groupMembers', groupId, role] as const;
-      return key as TaggedKey<typeof key, InfiniteData<PaginatedResponse<string>>>;
+      return key as TaggedKey<typeof key, InfiniteData<PaginatedResponse<MinifiedGroupMember>>>;
     },
   },
   groupMembershipRequests: (groupId: string) => {
@@ -356,7 +357,10 @@ const notifications = {
   root: ['notifications'] as const,
   list: (activeFilter?: FilterType) => {
     const key = ['notifications', activeFilter] as const;
-    return key as TaggedKey<typeof key, InfiniteData<PaginatedResponse<NotificationGroup>>>;
+    return key as TaggedKey<
+      typeof key,
+      InfiniteData<PaginatedResponse<Array<NotificationGroup>, false>>
+    >;
   },
 };
 
@@ -435,7 +439,7 @@ const settings = {
   >,
   domainBlocks: ['settings', 'domainBlocks'] as TaggedKey<
     ['settings', 'domainBlocks'],
-    Array<string>
+    InfiniteData<PaginatedResponse<string>>
   >,
 };
 
@@ -457,7 +461,7 @@ const security = {
   root: ['security'] as const,
   oauthTokens: ['security', 'oauthTokens'] as TaggedKey<
     ['security', 'oauthTokens'],
-    Array<OauthToken>
+    InfiniteData<PaginatedResponse<OauthToken>>
   >,
 };
 
@@ -563,7 +567,10 @@ const draftStatuses = {
 
 const scheduledStatuses = {
   root: ['scheduledStatuses'] as const,
-  all: ['scheduledStatuses'] as TaggedKey<['scheduledStatuses'], Array<ScheduledStatus>>,
+  all: ['scheduledStatuses'] as TaggedKey<
+    ['scheduledStatuses'],
+    InfiniteData<PaginatedResponse<ScheduledStatus>>
+  >,
 };
 
 const interactionRequests = {

packages/pl-fe/src/queries/utils/update-paginated-response.ts

@@ -14,18 +14,15 @@ const updatePaginatedResponse = <
     items: PaginatedResponse<InferPaginatedItem<TKey>>['items'],
   ) => PaginatedResponse<InferPaginatedItem<TKey>>['items'],
 ) =>
-  queryClient.setQueryData<InfiniteData<PaginatedResponse<InferPaginatedItem<TKey>>>>(
-    queryKey,
-    (data) => {
-      if (!data) return undefined;
-      return {
-        ...data,
-        pages: data.pages.map((page) => ({
-          ...page,
-          items: updater(page.items),
-        })),
-      };
-    },
-  );
+  queryClient.setQueryData(queryKey, (data) => {
+    if (!data) return undefined;
+    return {
+      ...data,
+      pages: data.pages.map((page) => ({
+        ...page,
+        items: updater(page.items),
+      })),
+    };
+  });
 
 export { updatePaginatedResponse };

packages/pl-fe/src/utils/chats.ts

@@ -21,7 +21,7 @@ const updateChatInChatSearchQuery = (newChat: Chat) => {
  * Re-order the ChatSearch query by the last message timestamp.
  */
 const reOrderChatListItems = () => {
-  sortQueryData<Chat>(queryKeys.chats.search, (chatA, chatB) =>
+  sortQueryData(queryKeys.chats.search, (chatA, chatB) =>
     compareDate(chatA.last_message?.created_at as string, chatB.last_message?.created_at as string),
   );
 };

packages/pl-fe/src/utils/queries.ts

@@ -1,6 +1,6 @@
 import { queryClient } from '@/queries/client';
 
-import type { InfiniteData, QueryKey } from '@tanstack/react-query';
+import type { DataTag, InfiniteData, QueryKey } from '@tanstack/react-query';
 import type { PaginatedResponse } from 'pl-api';
 
 interface Entity {
@@ -52,8 +52,11 @@ const updatePageItem = <T>(
 };
 
 /** Insert the new item at the beginning of the first page. */
-const appendPageItem = <T>(queryKey: QueryKey, newItem: T) => {
-  queryClient.setQueryData<InfiniteData<PaginatedResponse<T>>>(queryKey, (data) => {
+const appendPageItem = <T>(
+  queryKey: DataTag<QueryKey, InfiniteData<PaginatedResponse<T>>>,
+  newItem: T,
+) => {
+  queryClient.setQueryData(queryKey, (data) => {
     if (data) {
       const pages = [...data.pages];
       pages[0] = { ...pages[0], items: [newItem, ...pages[0].items] };
@@ -90,8 +93,11 @@ const paginateQueryData = <T>(array: T[] | undefined) =>
     return resultArray;
   }, []);
 
-const sortQueryData = <T>(queryKey: QueryKey, comparator: (a: T, b: T) => number) => {
-  queryClient.setQueryData<InfiniteData<PaginatedResponse<T>>>(queryKey, (prevResult) => {
+const sortQueryData = <T>(
+  queryKey: DataTag<QueryKey, InfiniteData<PaginatedResponse<T>>>,
+  comparator: (a: T, b: T) => number,
+) => {
+  queryClient.setQueryData(queryKey, (prevResult) => {
     if (prevResult) {
       const nextResult = { ...prevResult };
       const flattenedQueryData = flattenPages(nextResult);