fix: update un-publish process to reflect changes (#1002)

* fix: make buttons more responsive on un-publish

* fix: update with isFetching

src/components/item/publish/ItemPublishButton.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { CheckCircle, InfoRounded } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
 import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
-import { Button, Loader } from '@graasp/ui';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks, mutations } from '../../../config/queryClient';
@@ -32,30 +32,18 @@ const ItemPublishButton = ({
   const { t: translateBuilder } = useBuilderTranslation();
 
   // item tags
-  const { mutate: unpublish } = useUnpublishItem();
-  const { mutate: publishItem } = usePublishItem();
+  const { mutate: unpublish, isLoading: isUnPublishing } = useUnpublishItem();
+  const { mutate: publishItem, isLoading: isPublishing } = usePublishItem();
 
-  const { data: itemPublishedEntry, isLoading: isItemTagsLoading } =
-    useItemPublishedInformation({ itemId: item.id });
+  const { data: itemPublishedEntry, isFetching } = useItemPublishedInformation({
+    itemId: item.id,
+  });
 
-  const [isPublished, setIsPublished] = useState(false);
-  const [isDisabled, setIsDisabled] = useState(false);
   const [emailNotification, setEmailNotification] = useState<boolean>(false);
 
-  // update state variables depending on fetch values
-  useEffect(() => {
-    if (itemPublishedEntry) {
-      setIsPublished(Boolean(itemPublishedEntry));
-
-      // disable setting if any publication is set on any ancestor items
-      setIsDisabled(itemPublishedEntry?.item?.path !== item?.path);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [itemPublishedEntry, item]);
-
-  if (isItemTagsLoading) {
-    return <Loader />;
-  }
+  const isPublished = Boolean(itemPublishedEntry);
+  const isDisabled =
+    itemPublishedEntry && itemPublishedEntry?.item?.path !== item?.path;
 
   if (!isValidated) {
     return null;
@@ -91,25 +79,39 @@ const ItemPublishButton = ({
           </Typography>
         </Stack>
       )}
-      <Button
-        disabled={disabled || isDisabled || !isValidated || isPublished}
-        onClick={handlePublish}
-        endIcon={isPublished && <CheckCircle color="primary" />}
-        id={ITEM_PUBLISH_BUTTON_ID}
-      >
-        {translateBuilder(BUILDER.LIBRARY_SETTINGS_PUBLISH_BUTTON)}
-      </Button>
-      <Button
-        disabled={disabled || isDisabled || !isPublished}
-        onClick={handleUnpublish}
-        id={ITEM_UNPUBLISH_BUTTON_ID}
-      >
-        {translateBuilder(BUILDER.LIBRARY_SETTINGS_UNPUBLISH_BUTTON)}
-      </Button>
+      <Stack direction="row" spacing={1}>
+        <LoadingButton
+          variant="contained"
+          disabled={disabled || isDisabled || !isValidated || isPublished}
+          onClick={handlePublish}
+          endIcon={
+            // only show the icon when the item is published and we are not un-publishing it
+            isPublished &&
+            !isUnPublishing &&
+            !isFetching && <CheckCircle color="primary" />
+          }
+          id={ITEM_PUBLISH_BUTTON_ID}
+          // show a loading state when we are fetching the entry and when we are publishing
+          loading={isFetching || isPublishing}
+        >
+          {isPublished
+            ? translateBuilder(BUILDER.LIBRARY_SETTINGS_PUBLISH_BUTTON_DISABLED)
+            : translateBuilder(BUILDER.LIBRARY_SETTINGS_PUBLISH_BUTTON)}
+        </LoadingButton>
+        <LoadingButton
+          variant="contained"
+          disabled={disabled || isDisabled || !isPublished}
+          onClick={handleUnpublish}
+          id={ITEM_UNPUBLISH_BUTTON_ID}
+          // show a loading state when we are un-publishing the entry
+          loading={isUnPublishing}
+        >
+          {translateBuilder(BUILDER.LIBRARY_SETTINGS_UNPUBLISH_BUTTON)}
+        </LoadingButton>
+      </Stack>
       <div>
         <FormControlLabel
           control={
-            // eslint-disable-next-line react/jsx-wrap-multilines
             <Checkbox
               id={EMAIL_NOTIFICATION_CHECKBOX}
               checked={emailNotification}

src/langs/constants.ts

@@ -228,6 +228,8 @@ export const BUILDER = {
   LIBRARY_SETTINGS_NOT_PUBLISHED_ITEM_MESSAGE:
     'LIBRARY_SETTINGS_NOT_PUBLISHED_ITEM_MESSAGE',
   LIBRARY_SETTINGS_PUBLISH_BUTTON: 'LIBRARY_SETTINGS_PUBLISH_BUTTON',
+  LIBRARY_SETTINGS_PUBLISH_BUTTON_DISABLED:
+    'LIBRARY_SETTINGS_PUBLISH_BUTTON_DISABLED',
   LIBRARY_SETTINGS_PUBLISH_NOTIFICATIONS_LABEL:
     'LIBRARY_SETTINGS_PUBLISH_NOTIFICATIONS_LABEL',
   LIBRARY_SETTINGS_PUBLISHED_STATUS: 'LIBRARY_SETTINGS_PUBLISHED_STATUS',

src/langs/en.json

@@ -160,6 +160,7 @@
   "LIBRARY_SETTINGS_INFORMATION": "You can publish your collection to Graasp Library, our open educational resource library.\nPublished collections are accessible by the public.\nTo publish your collection, please follow the three steps below.",
   "LIBRARY_SETTINGS_NOT_PUBLISHED_ITEM_MESSAGE": "Only users with admin rights can publish this item and validate it.",
   "LIBRARY_SETTINGS_PUBLISH_BUTTON": "Publish",
+  "LIBRARY_SETTINGS_PUBLISH_BUTTON_DISABLED": "Published",
   "LIBRARY_SETTINGS_PUBLISH_NOTIFICATIONS_LABEL": "Send email notifications to all co-editors",
   "LIBRARY_SETTINGS_PUBLISHED_STATUS": "This element is published. Anyone can access it and is available on Graasp Library, our public repository of learning ressources.",
   "LIBRARY_SETTINGS_CHILD_PUBLISHED_STATUS": "This element is part of a collection that is already published. Publishing and un-publishing can be done at the collection root.",

src/langs/fr.json

@@ -153,6 +153,7 @@
   "LIBRARY_SETTINGS_INFORMATION": "Vous pouvez publier votre collection sur Graasp Library, notre bibliothèque de ressources pour l'éducation.",
   "LIBRARY_SETTINGS_NOT_PUBLISHED_ITEM_MESSAGE": "Seuls les utilisateurs disposant de droits d'administration peuvent publier cet élément et le valider.",
   "LIBRARY_SETTINGS_PUBLISH_BUTTON": "Publier",
+  "LIBRARY_SETTINGS_PUBLISH_BUTTON_DISABLED": "Publié",
   "LIBRARY_SETTINGS_PUBLISH_NOTIFICATIONS_LABEL": "Envoyer une notification par email à tous les co-éditeurs",
   "LIBRARY_SETTINGS_PUBLISHED_STATUS": "Cet élément est publié. N'importe qui peut y accéder et l'élément est répertorié sur Graasp Library, notre librarie de ressources d'apprentissage.",
   "LIBRARY_SETTINGS_CHILD_PUBLISHED_STATUS": "Cet élément fait partie d'une collection déjà publiée. La publication et la dépublication peuvent être effectuées à la racine de la collection.",