feat(deps): update TanStack Query to v5 (#689)

package.json

@@ -33,10 +33,11 @@
     "@emotion/react": "11.13.0",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.13.0",
-    "@graasp/query-client": "3.22.2",
-    "@graasp/sdk": "4.26.0",
+    "@graasp/query-client": "3.26.0",
+    "@graasp/sdk": "4.31.0",
+    "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.35.0",
-    "@graasp/ui": "4.26.0",
+    "@graasp/ui": "5.2.1",
     "@mui/icons-material": "5.16.5",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.16.5",

src/components/collection/Collection.tsx

@@ -6,6 +6,8 @@ import { useContext, useEffect } from 'react';
 
 import { Box } from '@mui/material';
 
+import { AccountType } from '@graasp/sdk';
+
 import {
   ERROR_INVALID_COLLECTION_ID_CODE,
   ERROR_UNEXPECTED_ERROR_CODE,
@@ -72,6 +74,10 @@ const Collection = ({ id }: Props) => {
     );
   }
 
+  if (currentMember?.type === AccountType.Guest) {
+    return null;
+  }
+
   return (
     <>
       <UnpublishedItemAlert

src/components/collection/CopyButton.tsx

@@ -18,7 +18,7 @@ export const useCopyAction = (id?: string) => {
   const [showTreeModal, setShowTreeModal] = useState(false);
   const { hooks, mutations } = useContext(QueryClientContext);
   const { data: user } = hooks.useCurrentMember();
-  const { mutate: copyItems, isLoading: isCopying } = mutations.useCopyItems();
+  const { mutate: copyItems, isPending: isCopying } = mutations.useCopyItems();
 
   const startCopy = (event: MouseEvent<HTMLButtonElement>) => {
     if (user?.id) {

src/components/collection/DownloadButton.tsx

@@ -14,7 +14,7 @@ export const useDownloadAction = (itemId?: string) => {
     mutate: exportZip,
     data,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
   } = mutations.useExportItem();
 
   useEffect(() => {

src/components/collection/summary/SummaryDetails.tsx

@@ -104,9 +104,8 @@ const SummaryDetails: React.FC<SummaryDetailsProps> = ({
 }) => {
   const { t } = useLibraryTranslation();
   const { hooks } = useContext(QueryClientContext);
-  const { data: rawItemCategories, isInitialLoading } = hooks.useItemCategories(
-    publishedRootItem?.id,
-  );
+  const { data: rawItemCategories, isLoading: isInitialLoading } =
+    hooks.useItemCategories(publishedRootItem?.id);
 
   const ccLicenseAdaption = publishedRootItem
     ? publishedRootItem.settings?.ccLicenseAdaption

src/components/common/TranslationWrapper.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 
-import { getLangCookie } from '@graasp/sdk';
+import { CurrentAccount, getLangCookie } from '@graasp/sdk';
 
 import { appI18n } from '../../config/i18n';
 import { QueryClientContext } from '../QueryClientContext';
@@ -10,13 +10,21 @@ type Props = {
   children: JSX.Element | JSX.Element[];
 };
 
+const getUserLang = (member?: CurrentAccount | null) => {
+  if (member && 'extra' in member && member.extra?.lang) {
+    return member.extra.lang;
+  }
+
+  return getLangCookie();
+};
+
 const TranslationWrapper = ({ children }: Props): JSX.Element => {
   const { hooks } = useContext(QueryClientContext);
   const { data: member } = hooks.useCurrentMember();
 
   useEffect(() => {
     // change language
-    const lang = member?.extra?.lang ?? getLangCookie();
+    const lang = getUserLang(member);
     if (lang) {
       appI18n.changeLanguage(lang);
     }

src/components/layout/UserSwitchWrapper.tsx

@@ -56,9 +56,9 @@ const UserSwitchWrapper = ({ ButtonContent }: Props) => {
       isCurrentMemberLoading={isLoading}
       profilePath={GRAASP_ACCOUNT_HOST}
       redirectPath={redirectUrl.toString()}
-      renderAvatar={(m) => (
-        <MemberAvatar size={MEMBER_AVATAR_ICON_SIZE} memberId={m?.id} />
-      )}
+      avatar={
+        <MemberAvatar size={MEMBER_AVATAR_ICON_SIZE} memberId={member?.id} />
+      }
     />
   );
 };

src/components/member/BioSection.tsx

@@ -24,7 +24,7 @@ const BioSection = ({ memberId }: Props): JSX.Element | null => {
   const { t } = useLibraryTranslation();
 
   const { hooks } = useContext(QueryClientContext);
-  const { data: publicProfile, isInitialLoading: isLoadingPublicProfile } =
+  const { data: publicProfile, isLoading: isLoadingPublicProfile } =
     hooks.usePublicProfile(memberId);
 
   if (publicProfile !== undefined) {

src/components/member/MemberHeader.tsx

@@ -25,7 +25,7 @@ const MemberHeader = ({ memberId, isOwnProfile }: Props) => {
 
   const { hooks } = useContext(QueryClientContext);
   const { data: member } = hooks.useMember(memberId);
-  const { data: authorUrl, isInitialLoading: isLoadingAuthorAvatar } =
+  const { data: authorUrl, isLoading: isLoadingAuthorAvatar } =
     hooks.useAvatarUrl({
       id: memberId,
       size: ThumbnailSize.Medium,