fix: refactor & fix by review

graasp · Mar 29, 2022 · 6d59133 · 6d59133
1 parent 7852199
commit 6d59133
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 164 deletions.
diff --git a/cypress/integration/item/share/categories.spec.js b/cypress/integration/item/share/categories.spec.js
@@ -13,11 +13,9 @@ import {
 import { DEFAULT_TAGS } from '../../../fixtures/itemTags';
 import { PUBLISHED_ITEM } from '../../../fixtures/items';
 import { MEMBERS, SIGNED_OUT_MEMBER } from '../../../fixtures/members';
-import { SHARE_TAB_PUBLISHED_PAUSE } from '../../../support/constants';
 
 const openShareItemTab = (id) => {
   cy.get(`#${buildShareButtonId(id)}`).click();
-  cy.wait(SHARE_TAB_PUBLISHED_PAUSE);
 };
 
 const findCategoryNameById = (id) =>

diff --git a/...ntegration/item/share/publishItem.spec.js → ...egration/item/share/publishedItem.spec.js b/...ntegration/item/share/publishItem.spec.js → ...egration/item/share/publishedItem.spec.js
@@ -1,7 +1,7 @@
 import {
   buildShareButtonId,
-  ITEM_PUBLISH_SECTION_TITLE_SELECTOR,
-  ITEM_VALIDATION_BUTTON_SELECTOR,
+  ITEM_PUBLISH_SECTION_TITLE_ID,
+  ITEM_VALIDATION_BUTTON_ID,
   SHARE_ITEM_VISIBILITY_SELECT_ID,
 } from '../../../../src/config/selectors';
 import { buildItemPath } from '../../../../src/config/paths';
@@ -13,8 +13,6 @@ import {
 import { SETTINGS } from '../../../../src/config/constants';
 import { DEFAULT_TAGS } from '../../../fixtures/itemTags';
 
-const ITEM_PUBLISH_SECTION_TITLE = 'Publication On Explorer';
-
 const openShareItemTab = (id) => {
   cy.get(`#${buildShareButtonId(id)}`).click();
 };
@@ -33,13 +31,10 @@ describe('Change visibililty to published', () => {
     openShareItemTab(item.id);
 
     // publication section should not exist at this time
-    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_SELECTOR}`).should('not.exist');
+    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_ID}`).should('not.exist');
 
     changeVisibility(SETTINGS.ITEM_PUBLISHED.name);
-    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_SELECTOR}`).should(
-      'have.text',
-      ITEM_PUBLISH_SECTION_TITLE,
-    );
+    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_ID}`).should('be.visible');
     // visibilitySelect value should not be changed
     const visiblitySelect = cy.get(
       `#${SHARE_ITEM_VISIBILITY_SELECT_ID} + input`,
@@ -54,13 +49,10 @@ describe('Change visibililty to published', () => {
     openShareItemTab(item.id);
 
     // publication section should not exist at this time
-    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_SELECTOR}`).should('not.exist');
+    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_ID}`).should('not.exist');
 
     changeVisibility(SETTINGS.ITEM_PUBLISHED.name);
-    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_SELECTOR}`).should(
-      'have.text',
-      ITEM_PUBLISH_SECTION_TITLE,
-    );
+    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_ID}`).should('be.visible');
     // visibilitySelect value should not be changed
     const visiblitySelect = cy.get(
       `#${SHARE_ITEM_VISIBILITY_SELECT_ID} + input`,
@@ -75,13 +67,10 @@ describe('Change visibililty to published', () => {
     openShareItemTab(item.id);
 
     // publication section should not exist at this time
-    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_SELECTOR}`).should('not.exist');
+    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_ID}`).should('not.exist');
 
     changeVisibility(SETTINGS.ITEM_PUBLISHED.name);
-    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_SELECTOR}`).should(
-      'have.text',
-      ITEM_PUBLISH_SECTION_TITLE,
-    );
+    cy.get(`#${ITEM_PUBLISH_SECTION_TITLE_ID}`).should('be.visible');
     // visibilitySelect value should not be changed
     const visiblitySelect = cy.get(
       `#${SHARE_ITEM_VISIBILITY_SELECT_ID} + input`,
@@ -99,7 +88,7 @@ describe('Validate item', () => {
     changeVisibility(SETTINGS.ITEM_PUBLISHED.name);
 
     // click validate item button
-    cy.get(`#${ITEM_VALIDATION_BUTTON_SELECTOR}`).click();
+    cy.get(`#${ITEM_VALIDATION_BUTTON_ID}`).click();
 
     cy.wait('@postItemValidation').then((data) => {
       const {

diff --git a/cypress/integration/item/share/tags.spec.js b/cypress/integration/item/share/tags.spec.js
@@ -12,11 +12,9 @@ import {
 import { PUBLISHED_ITEM } from '../../../fixtures/items';
 import { DEFAULT_TAGS } from '../../../fixtures/itemTags';
 import { MEMBERS, SIGNED_OUT_MEMBER } from '../../../fixtures/members';
-import { SHARE_TAB_PUBLISHED_PAUSE } from '../../../support/constants';
 
 const openShareItemTab = (id) => {
   cy.get(`#${buildShareButtonId(id)}`).click();
-  cy.wait(SHARE_TAB_PUBLISHED_PAUSE);
 };
 
 const visitItemPage = (item) => {

diff --git a/cypress/support/constants.js b/cypress/support/constants.js
@@ -10,7 +10,6 @@ export const TREE_VIEW_PAUSE = 2000;
 export const ITEM_LOADING_PAUSE = 2000;
 export const WEBSOCKETS_DELAY_TIME = 1500;
 export const WAIT_FOR_ITEM_TABLE_ROW_TIME = 7000;
-export const SHARE_TAB_PUBLISHED_PAUSE = 15000;
 
 export const REDIRECTION_CONTENT = 'hello';
 export const REQUEST_FAILURE_TIME = 2500;

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "license": "AGPL-3.0-only",
   "dependencies": {
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git",
-    "@graasp/query-client": "github:graasp/graasp-query-client.git",
+    "@graasp/query-client": "github:graasp/graasp-query-client.git#147/exportHook",
     "@graasp/translations": "github:graasp/graasp-translations.git",
     "@graasp/ui": "github:graasp/graasp-ui.git",
     "@graasp/utils": "github:graasp/graasp-utils.git",

diff --git a/src/components/item/sharing/ItemPublishConfiguration.js b/src/components/item/sharing/ItemPublishConfiguration.js
@@ -10,26 +10,26 @@ import Looks3Icon from '@material-ui/icons/Looks3';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import CancelIcon from '@material-ui/icons/Cancel';
 import UpdateIcon from '@material-ui/icons/Update';
-import { MUTATION_KEYS } from '@graasp/query-client';
+import { MUTATION_KEYS, HOOK_KEYS } from '@graasp/query-client';
 import { useMutation, hooks, queryClient } from '../../../config/queryClient';
 import CategorySelection from './CategorySelection';
 import CustomizedTagsEdit from './CustomizedTagsEdit';
 import CCLicenseSelection from './CCLicenseSelection';
 import {
   ADMIN_CONTACT,
-  buildItemValidationAndReviewsKey,
-  ITEM_VALIDATION_REVIEW_STATUSES,
   ITEM_VALIDATION_STATUSES,
   SETTINGS,
   SUBMIT_BUTTON_WIDTH,
 } from '../../../config/constants';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
 import {
-  ITEM_PUBLISH_SECTION_TITLE_SELECTOR,
-  ITEM_VALIDATION_BUTTON_SELECTOR,
+  ITEM_PUBLISH_SECTION_TITLE_ID,
+  ITEM_VALIDATION_BUTTON_ID,
 } from '../../../config/selectors';
+import { getValidationStatusFromItemValidations } from '../../../utils/itemValidation';
 
 const { DELETE_ITEM_TAG, POST_ITEM_TAG, POST_ITEM_VALIDATION } = MUTATION_KEYS;
+const { buildItemValidationAndReviewsKey } = HOOK_KEYS;
 const {
   useItemValidationAndReviews,
   useItemValidationStatuses,
@@ -103,48 +103,15 @@ const ItemPublishConfiguration = ({
 
   const [itemValidationStatus, setItemValidationStatus] = useState(false);
 
-  const processFailureValidations = (records) => {
-    // first try to find successful validations, where ivrStatus is 'rejected'
-    const successfulRecord = records?.find(
-      (record) =>
-        validationStatusesMap.get(record.reviewStatusId) ===
-        ITEM_VALIDATION_REVIEW_STATUSES.REJECTED,
-    );
-    if (successfulRecord) {
-      setItemValidationStatus(ITEM_VALIDATION_STATUSES.SUCCESS);
-    } else {
-      // try to find pending review
-      const pendingRecord = records?.find(
-        (record) =>
-          validationStatusesMap.get(record.reviewStatusId) ===
-          ITEM_VALIDATION_REVIEW_STATUSES.PENDING,
-      );
-      if (pendingRecord) {
-        setItemValidationStatus(ITEM_VALIDATION_STATUSES.PENDING);
-      } else {
-        setItemValidationStatus(ITEM_VALIDATION_STATUSES.FAILURE); // only failed records
-      }
-    }
-  };
-
   useEffect(() => {
     // process when we fetch the item validation and review records
     if (ivByStatus) {
-      // first check if there exist any valid successful record
-      if (ivByStatus.get(ITEM_VALIDATION_STATUSES.SUCCESS)) {
-        setItemValidationStatus(ITEM_VALIDATION_STATUSES.SUCCESS);
-        // then check if there exist any pending item validation or review
-      } else if (ivByStatus.get(ITEM_VALIDATION_STATUSES.PENDING)) {
-        setItemValidationStatus(ITEM_VALIDATION_STATUSES.PENDING);
-      } else {
-        const failureValidations = ivByStatus.get(
-          ITEM_VALIDATION_STATUSES.FAILURE,
-        );
-        // only process when there is failed item validation records
-        if (failureValidations) {
-          processFailureValidations(failureValidations);
-        }
-      }
+      setItemValidationStatus(
+        getValidationStatusFromItemValidations(
+          ivByStatus,
+          validationStatusesMap,
+        ),
+      );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ivByStatus]);
@@ -232,7 +199,7 @@ const ItemPublishConfiguration = ({
       <Typography
         variant="h6"
         className={classes.heading}
-        id={ITEM_PUBLISH_SECTION_TITLE_SELECTOR}
+        id={ITEM_PUBLISH_SECTION_TITLE_ID}
       >
         {t('Publication On Explorer')}
       </Typography>
@@ -255,7 +222,7 @@ const ItemPublishConfiguration = ({
         )}
       </Typography>
       <Button
-        id={ITEM_VALIDATION_BUTTON_SELECTOR}
+        id={ITEM_VALIDATION_BUTTON_ID}
         variant="outlined"
         onClick={handleValidate}
         color="primary"

diff --git a/src/components/main/DownloadButton.js b/src/components/main/DownloadButton.js
@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import { DownloadButton as Button } from '@graasp/ui';
+import PropTypes from 'prop-types';
+import { useMutation } from '../../config/queryClient';
+
+export const DownloadButton = ({ id }) => {
+  const { t } = useTranslation();
+
+  const {
+    mutate: downloadItem,
+    data,
+    isSuccess,
+    isLoading: isDownloading,
+  } = useMutation(MUTATION_KEYS.EXPORT_ZIP);
+
+  useEffect(() => {
+    if (isSuccess) {
+      const url = window.URL.createObjectURL(new Blob([data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `${id}.zip`);
+      document.body.appendChild(link);
+      link.click();
+    }
+  }, [data, isSuccess, id]);
+
+  const handleDownload = () => {
+    downloadItem(id);
+  };
+  return (
+    <Button
+      handleDownload={handleDownload}
+      isLoading={isDownloading}
+      title={t('Download')}
+    />
+  );
+};
+
+DownloadButton.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+export default DownloadButton;
diff --git a/src/components/main/Item.js b/src/components/main/Item.js
@@ -1,7 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Card as GraaspCard, Thumbnail, DownloadButton } from '@graasp/ui';
-import { MUTATION_KEYS } from '@graasp/query-client';
+import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
 import truncate from 'lodash.truncate';
 import { makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
@@ -19,8 +18,9 @@ import FavoriteButton from '../common/FavoriteButton';
 import PinButton from '../common/PinButton';
 import { CurrentUserContext } from '../context/CurrentUserContext';
 import { buildItemPath } from '../../config/paths';
-import { hooks, useMutation } from '../../config/queryClient';
+import { hooks } from '../../config/queryClient';
 import HideButton from '../common/HideButton';
+import DownloadButton from './DownloadButton';
 
 const NameWrapper =
   ({ id, className }) =>
@@ -66,28 +66,6 @@ const Item = ({ item, memberships }) => {
     memberId: member?.get('id'),
   });
 
-  const {
-    mutate: downloadItem,
-    data,
-    isSuccess,
-    isLoading: isDownloading,
-  } = useMutation(MUTATION_KEYS.EXPORT_ZIP);
-
-  useEffect(() => {
-    if (isSuccess) {
-      const url = window.URL.createObjectURL(new Blob([data]));
-      const link = document.createElement('a');
-      link.href = url;
-      link.setAttribute('download', `${item.id}.zip`);
-      document.body.appendChild(link);
-      link.click();
-    }
-  }, [data, isSuccess, item]);
-
-  const handleDownload = () => {
-    downloadItem(item.id);
-  };
-
   const Actions = (
     <>
       {!member.isEmpty() && <FavoriteButton member={member} item={item} />}
@@ -96,11 +74,7 @@ const Item = ({ item, memberships }) => {
           <EditButton item={item} />
           <PinButton item={item} />
           <HideButton item={item} />
-          <DownloadButton
-            handleDownload={handleDownload}
-            isLoading={isDownloading}
-            title={t('Download')}
-          />
+          <DownloadButton id={id} />
         </>
       )}
     </>

diff --git a/src/components/table/ActionsCellRenderer.js b/src/components/table/ActionsCellRenderer.js
@@ -1,9 +1,6 @@
 import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import React, { useEffect, useState } from 'react';
-import { DownloadButton } from '@graasp/ui';
-import { MUTATION_KEYS } from '@graasp/query-client';
-import { useTranslation } from 'react-i18next';
 import EditButton from '../common/EditButton';
 import ItemMenu from '../main/ItemMenu';
 import FavoriteButton from '../common/FavoriteButton';
@@ -13,32 +10,13 @@ import {
   isItemUpdateAllowedForUser,
 } from '../../utils/membership';
 import HideButton from '../common/HideButton';
-import { useMutation } from '../../config/queryClient';
+import DownloadButton from '../main/DownloadButton';
 
 // items and memberships match by index
 const ActionsCellRenderer = ({ memberships, items, member }) => {
-  const { t } = useTranslation();
   const ChildComponent = ({ data: item }) => {
     const [canEdit, setCanEdit] = useState(false);
 
-    const {
-      mutate: downloadItem,
-      content,
-      isSuccess,
-      isLoading: isDownloading,
-    } = useMutation(MUTATION_KEYS.EXPORT_ZIP);
-
-    useEffect(() => {
-      if (isSuccess) {
-        const url = window.URL.createObjectURL(new Blob([content]));
-        const link = document.createElement('a');
-        link.href = url;
-        link.setAttribute('download', `${item.id}.zip`);
-        document.body.appendChild(link);
-        link.click();
-      }
-    }, [content, isSuccess, item]);
-
     useEffect(() => {
       if (items && memberships && !memberships.isEmpty() && !items.isEmpty()) {
         setCanEdit(
@@ -63,10 +41,6 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
       return <FavoriteButton item={item} />;
     };
 
-    const handleDownload = () => {
-      downloadItem(item.id);
-    };
-
     const renderEditorActions = () => {
       if (!canEdit) {
         return null;
@@ -77,11 +51,7 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
           <EditButton item={item} />
           <PinButton item={item} />
           <HideButton item={item} />
-          <DownloadButton
-            handleDownload={handleDownload}
-            isLoading={isDownloading}
-            title={t('Download')}
-          />
+          <DownloadButton id={item?.id} />
         </>
       );
     };