feat: add button to show/hide item in perform

src/components/common/HideButton.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import { useMutation } from 'react-query';
+import { hooks } from '../../config/queryClient';
+import { PIN_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import { HIDDEN_ITEM_TAG_ID } from '../../config/constants';
+
+const HideButton = ({ item }) => {
+  const { t } = useTranslation();
+
+  const { data: tags } = hooks.useItemTags(item.id);
+  const addTag = useMutation(MUTATION_KEYS.POST_ITEM_TAG);
+  const removeTag = useMutation(MUTATION_KEYS.DELETE_ITEM_TAG);
+
+  const isHidden =
+    tags?.filter(({ tagId }) => tagId === HIDDEN_ITEM_TAG_ID).size > 0;
+
+  const handlePin = () => {
+    if (isHidden) {
+      removeTag.mutate({
+        id: item.id,
+        tagId: tags?.filter(({ tagId }) => tagId === HIDDEN_ITEM_TAG_ID).first()
+          .id,
+      });
+    } else {
+      addTag.mutate({
+        id: item.id,
+        tagId: HIDDEN_ITEM_TAG_ID,
+      });
+    }
+  };
+
+  return (
+    <Tooltip title={isHidden ? t('Unpin') : t('Pin')}>
+      <IconButton
+        aria-label={isHidden ? t('Unpin') : t('Pin')}
+        className={PIN_ITEM_BUTTON_CLASS}
+        onClick={handlePin}
+      >
+        {isHidden ? (
+          <VisibilityOff fontSize="small" />
+        ) : (
+          <Visibility fontSize="small" />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+HideButton.propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    itemPath: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default HideButton;

src/components/main/Item.js

@@ -19,6 +19,7 @@ import PinButton from '../common/PinButton';
 import { CurrentUserContext } from '../context/CurrentUserContext';
 import { buildItemPath } from '../../config/paths';
 import { hooks } from '../../config/queryClient';
+import HideButton from '../common/HideButton';
 
 const NameWrapper =
   ({ id, className }) =>
@@ -71,6 +72,7 @@ const Item = ({ item, memberships }) => {
         <>
           <EditButton item={item} />
           <PinButton item={item} />
+          <HideButton item={item} />
         </>
       )}
     </>

src/components/table/ActionsCellRenderer.js

@@ -9,6 +9,7 @@ import {
   getMembershipsForItem,
   isItemUpdateAllowedForUser,
 } from '../../utils/membership';
+import HideButton from '../common/HideButton';
 
 // items and memberships match by index
 const ActionsCellRenderer = ({ memberships, items, member }) => {
@@ -48,6 +49,7 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
         <>
           <EditButton item={item} />
           <PinButton item={item} />
+          <HideButton item={item} />
         </>
       );
     };

src/config/constants.js

@@ -43,6 +43,9 @@ export const GRAASP_PERFORM_HOST =
 export const GA_MEASUREMENT_ID =
   ENV_GA_MEASUREMENT_ID || process.env.REACT_APP_GA_MEASUREMENT_ID;
 
+export const HIDDEN_ITEM_TAG_ID =
+  process.env.REACT_APP_HIDDEN_ITEM_TAG_ID || false;
+
 export const DESCRIPTION_MAX_LENGTH = 30;
 
 // todo: use local image