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

graasp · Oct 2, 2024 · dfd7197 · dfd7197
1 parent 9def0fb
commit dfd7197
Show file tree

Hide file tree

Showing 22 changed files with 62 additions and 109 deletions.
diff --git a/cypress/fixtures/files.ts b/cypress/fixtures/files.ts
@@ -3,7 +3,8 @@ import {
   LocalFileItemFactory,
   MaxWidth,
   MimeTypes,
-  S3FileItemFactory,
+  PackedLocalFileItemFactory,
+  PackedS3FileItemFactory,
   buildFileExtra,
   buildS3FileExtra,
 } from '@graasp/sdk';
@@ -18,7 +19,7 @@ export const VIDEO_FILEPATH = 'files/video.mp4';
 export const TEXT_FILEPATH = 'files/sometext.txt';
 
 export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
-  ...LocalFileItemFactory({
+  ...PackedLocalFileItemFactory({
     id: 'bd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'icon.png',
     description: 'a default image description',
@@ -70,7 +71,7 @@ export const IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH: LocalFileItemForTest = {
 };
 
 export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
-  ...LocalFileItemFactory({
+  ...PackedLocalFileItemFactory({
     id: 'qd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'video.mp4',
     description: 'a default video description',
@@ -95,7 +96,7 @@ export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
 };
 
 export const PDF_ITEM_DEFAULT: LocalFileItemForTest = {
-  ...LocalFileItemFactory({
+  ...PackedLocalFileItemFactory({
     id: 'cd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'doc.pdf',
     description: 'a default pdf description',
@@ -125,7 +126,7 @@ export const ZIP_DEFAULT: ZIPInternalItem = {
 };
 
 export const IMAGE_ITEM_S3: S3FileItemForTest = {
-  ...S3FileItemFactory({
+  ...PackedS3FileItemFactory({
     id: 'ad5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'icon.png',
     description: 'a default image description',
@@ -150,7 +151,7 @@ export const IMAGE_ITEM_S3: S3FileItemForTest = {
 };
 
 export const VIDEO_ITEM_S3: S3FileItemForTest = {
-  ...S3FileItemFactory({
+  ...PackedS3FileItemFactory({
     id: 'qd5519a2-5ba9-4305-b221-185facbe6a93',
     name: 'video.mp4',
     description: 'a default video description',
@@ -175,7 +176,7 @@ export const VIDEO_ITEM_S3: S3FileItemForTest = {
 };
 
 export const PDF_ITEM_S3: S3FileItemForTest = {
-  ...S3FileItemFactory({
+  ...PackedS3FileItemFactory({
     id: 'bd5519a2-5ba9-4305-b221-185facbe6a99',
     name: 'doc.pdf',
     description: 'a default pdf description',

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.3.0",
     "@graasp/map": "1.19.0",
-    "@graasp/query-client": "3.25.0",
+    "@graasp/query-client": "3.26.0",
     "@graasp/sdk": "4.31.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.39.0",

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -64,7 +64,7 @@ const Root = (): JSX.Element => (
         <ThemeWrapper />
       </I18nextProvider>
       {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
-        <ReactQueryDevtools position="bottom-right" />
+        <ReactQueryDevtools buttonPosition="bottom-left" />
       )}
     </QueryClientProvider>
   </HelmetProvider>

diff --git a/src/components/file/FileUploader.tsx b/src/components/file/FileUploader.tsx
@@ -36,7 +36,7 @@ const FileUploader = ({
   const { itemId: parentItemId } = useParams();
   const [error, setError] = useState<string>();
 
-  const { mutateAsync: uploadFiles, isLoading } = mutations.useUploadFiles();
+  const { mutateAsync: uploadFiles, isPending } = mutations.useUploadFiles();
 
   const [totalProgress, setTotalProgress] = useState(0);
 
@@ -96,7 +96,7 @@ const FileUploader = ({
             onDrop([...e.target.files]);
           }
         }}
-        isLoading={isLoading}
+        isLoading={isPending}
         uploadProgress={Math.ceil(totalProgress * 100)}
         multiple
         onDrop={onDrop}

diff --git a/src/components/hooks/useItemCategories.tsx b/src/components/hooks/useItemCategories.tsx
@@ -36,13 +36,13 @@ export const useItemCategories = ({
 
   const {
     mutate: createItemCategory,
-    isLoading: isPostLoading,
+    isPending: isPostLoading,
     isSuccess: isPostSuccess,
     isError: isPostError,
   } = usePostItemCategory();
   const {
     mutate: deleteItemCategory,
-    isLoading: isDeleteLoading,
+    isPending: isDeleteLoading,
     isSuccess: isDeleteSuccess,
     isError: isDeleteError,
   } = useDeleteItemCategory();

diff --git a/src/components/hooks/useItemLicense.tsx b/src/components/hooks/useItemLicense.tsx
@@ -54,7 +54,7 @@ const useItemLicense = ({
 
   const {
     mutate: updateItem,
-    isLoading,
+    isPending: isLoading,
     isError,
     isSuccess,
   } = useEditItem({ enableNotifications });

diff --git a/src/components/item/publish/CoEditorsContainer.tsx b/src/components/item/publish/CoEditorsContainer.tsx
@@ -43,7 +43,7 @@ export const CoEditorsContainer = ({
 
   const {
     mutate: updateDisplayCoEditors,
-    isLoading,
+    isPending: isLoading,
     isSuccess,
     isError,
   } = mutations.useEditItem({

diff --git a/src/components/item/publish/EditItemDescription.tsx b/src/components/item/publish/EditItemDescription.tsx
@@ -32,7 +32,7 @@ export const EditItemDescription = ({ item }: Props): JSX.Element => {
   const {
     mutate: updateItem,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
     isError,
   } = mutations.useEditItem({
     enableNotifications: false,

diff --git a/src/components/item/publish/EditItemName.tsx b/src/components/item/publish/EditItemName.tsx
@@ -29,7 +29,7 @@ export const EditItemName = ({ item }: Props): JSX.Element => {
   const {
     mutate: updateItem,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
     isError,
   } = mutations.useEditItem({
     enableNotifications: false,

diff --git a/src/components/item/publish/ItemPublishTab.tsx b/src/components/item/publish/ItemPublishTab.tsx
@@ -38,10 +38,8 @@ const ItemPublishTab = (): JSX.Element => {
   const { isLoading: isMemberLoading } = hooks.useCurrentMember();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const { status } = useDataSyncContext();
-  const {
-    data: publicationStatus,
-    isInitialLoading: isPublicationStatusLoading,
-  } = usePublicationStatus(item.id);
+  const { data: publicationStatus, isLoading: isPublicationStatusLoading } =
+    usePublicationStatus(item.id);
 
   const [notifyCoEditors, setNotifyCoEditors] = useState<boolean>(false);
 

diff --git a/src/components/item/publish/PublicationStatusComponent.tsx b/src/components/item/publish/PublicationStatusComponent.tsx
@@ -29,10 +29,10 @@ const { usePublicationStatus } = hooks;
 export const PublicationStatusComponent = ({ item }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const { t: translateEnum } = useEnumsTranslation();
-  const { data: status, isInitialLoading } = usePublicationStatus(item.id);
+  const { data: status, isLoading } = usePublicationStatus(item.id);
   const translatedType = capitalizeFirstLetter(translateEnum(item.type));
 
-  if (isInitialLoading) {
+  if (isLoading) {
     return (
       <Chip
         icon={<CircularProgress size={15} />}

diff --git a/src/components/item/publish/customizedTags/CustomizedTags.hook.tsx b/src/components/item/publish/customizedTags/CustomizedTags.hook.tsx
@@ -32,7 +32,7 @@ export const useCustomizedTags = ({
   const {
     mutate: updateCustomizedTags,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
     isError,
   } = mutations.useEditItem({
     enableNotifications,

diff --git a/src/components/item/publish/publicationButtons/InvalidButton.tsx b/src/components/item/publish/publicationButtons/InvalidButton.tsx
@@ -24,7 +24,7 @@ export const InvalidButton = ({ item, isLoading }: Props): JSX.Element => {
   const { id: itemId, public: isPublic } = item;
   const { isOpen, openModal, closeModal } = useModalStatus();
 
-  const { mutate: validateItem, isLoading: isValidating } =
+  const { mutate: validateItem, isPending: isValidating } =
     usePostItemValidation();
 
   const handleValidateItem = () => {

diff --git a/src/components/item/publish/publicationButtons/PublicationButtonSelector.tsx b/src/components/item/publish/publicationButtons/PublicationButtonSelector.tsx
@@ -23,7 +23,7 @@ export const PublicationButtonSelector = ({
   item,
   notifyCoEditors,
 }: Props): ReactNode | undefined => {
-  const { data: status, isInitialLoading: isStatusFirstLoading } =
+  const { data: status, isLoading: isStatusFirstLoading } =
     usePublicationStatus(item.id);
 
   switch (status) {

diff --git a/src/components/item/publish/publicationButtons/PublishedButton.tsx b/src/components/item/publish/publicationButtons/PublishedButton.tsx
@@ -27,7 +27,7 @@ export const PublishedButton = ({ item, isLoading }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
   const { id: itemId } = item;
 
-  const { mutate: unpublish, isLoading: isUnPublishing } = useUnpublishItem();
+  const { mutate: unpublish, isPending: isUnPublishing } = useUnpublishItem();
 
   const handleUnPublishItem = () => unpublish({ id: itemId });
 

diff --git a/src/components/item/publish/publicationButtons/ReadyToPublishButton.tsx b/src/components/item/publish/publicationButtons/ReadyToPublishButton.tsx
@@ -29,7 +29,7 @@ export const ReadyToPublishButton = ({
   const { id: itemId, public: isPublic } = item;
   const { isOpen, openModal, closeModal } = useModalStatus();
 
-  const { mutate: publish, isLoading: isPublishing } = usePublishItem();
+  const { mutate: publish, isPending: isPublishing } = usePublishItem();
 
   const publishItem = () =>
     publish({ id: itemId, notification: notifyCoEditors });

diff --git a/src/components/item/publish/publicationButtons/UnpublishedButton.tsx b/src/components/item/publish/publicationButtons/UnpublishedButton.tsx
@@ -23,7 +23,7 @@ export const UnpublishedButton = ({ item, isLoading }: Props): JSX.Element => {
   const { id: itemId, public: isPublic } = item;
   const { isOpen, openModal, closeModal } = useModalStatus();
 
-  const { mutate: validateItem, isLoading: isValidating } =
+  const { mutate: validateItem, isPending: isValidating } =
     usePostItemValidation();
 
   const handleValidateItem = () => {

diff --git a/src/components/item/sharing/shortLink/ShortLinkDialogContent.tsx b/src/components/item/sharing/shortLink/ShortLinkDialogContent.tsx
@@ -44,9 +44,9 @@ const ShortLinkDialogContent = ({
 }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
-  const { mutateAsync: postShortLink, isLoading: loadingPost } =
+  const { mutateAsync: postShortLink, isPending: loadingPost } =
     usePostShortLink();
-  const { mutateAsync: patchShortLink, isLoading: loadingDelete } =
+  const { mutateAsync: patchShortLink, isPending: loadingDelete } =
     usePatchShortLink();
 
   const DIALOG_TITLE = translateBuilder(

diff --git a/src/components/main/DownloadButton.tsx b/src/components/main/DownloadButton.tsx
@@ -20,7 +20,7 @@ export const DownloadButton = ({ item }: Props): JSX.Element => {
     mutate: downloadItem,
     data,
     isSuccess,
-    isLoading: isDownloading,
+    isPending: isDownloading,
   } = mutations.useExportItem();
 
   useEffect(() => {

diff --git a/src/components/main/ImportH5P.tsx b/src/components/main/ImportH5P.tsx
@@ -24,7 +24,8 @@ const ImportH5P = ({
   previousItemId?: DiscriminatedItem['id'];
 }): JSX.Element => {
   const { itemId } = useParams();
-  const { mutateAsync: importH5P, isLoading } = mutations.useImportH5P();
+  const { mutateAsync: importH5P, isPending: isLoading } =
+    mutations.useImportH5P();
   const { update, close: closeNotification } = useUploadWithProgress();
   const { t: translateBuilder } = useBuilderTranslation();
 

diff --git a/src/components/pages/item/accessWrapper/RequestAccessContent.tsx b/src/components/pages/item/accessWrapper/RequestAccessContent.tsx
@@ -27,7 +27,7 @@ const RequestAccessContent = ({ member, itemId }: Props): JSX.Element => {
   const {
     mutateAsync: requestMembership,
     isSuccess,
-    isLoading,
+    isPending: isLoading,
   } = mutations.useRequestMembership();
   const { data: request } = hooks.useOwnMembershipRequest(itemId);