feat: use tags to add / remove pinned

src/components/common/PinButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import { Map } from 'immutable';
@@ -7,28 +7,51 @@ import PushPinOutlinedIcon from '@material-ui/icons/PushPinOutlined'
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@material-ui/core/Tooltip';
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { useMutation } from '../../config/queryClient';
+import { useMutation, hooks } from '../../config/queryClient';
 import { FAVORITE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import { getItemPinnedTag } from '../../utils/itemTag';
+import { getItemPinnedTagFromItem } from '../../utils/itemExtra'
+
+const { useTags, useItemTags } = hooks;
 
 const PinButton = ({ item, member }) => {
   const { t } = useTranslation();
-  const mutation = useMutation(MUTATION_KEYS.EDIT_ITEM);
-  console.log(item, member);
+  const { data: tags } = useTags();
+
+  const addPinned = useMutation(MUTATION_KEYS.POST_ITEM_TAG);
+  const deletePinned = useMutation(MUTATION_KEYS.DELETE_ITEM_TAG);
+  const { data: itemTags } = useItemTags(item.id);
+  const [isPinned, setPinned] = useState(false);
+  const [ItemPinnedTagValueForItem, setItemPinnedTagValueForItem] = useState();
+
+  // update state variables depending on fetch values
+  useEffect(() => {
+    if (tags && itemTags) {
+      const tagValue = getItemPinnedTagFromItem({ tags, itemTags });
+      setItemPinnedTagValueForItem(tagValue);
+    }
+  }, [tags, itemTags, item]);
 
-  const isPinned = item?.isPinned ?? false; // isItemPinned(item, member);
+  console.log(member);
 
   const handlePin = () => {
-    mutation.mutate({
-        ...item,
-        isPinned: true
+    addPinned.mutate({
+      id: item.id,
+      // use item login tag id
+      tagId: getItemPinnedTag(tags).id,
     });
+
+    setPinned(true);
   };
 
   const handleUnpin = () => {
-    mutation.mutate({
-        ...item,
-        isPinned: false
+    deletePinned.mutate({
+      id: item.id,
+      // use item login tag id
+      tagId: ItemPinnedTagValueForItem.id,
     });
+
+    setPinned(false);
   };
 
   return (

src/config/constants.js

@@ -115,12 +115,8 @@ export const SETTINGS = {
   ITEM_PUBLIC: {
     name: 'public-item',
   },
-  ITEM_PUBLISHED: {
-    name: 'published-item',
-  },
-  // this tag doesn't exist but is used if none of the visiblity tag is set
-  ITEM_PRIVATE: {
-    name: 'private-item',
+  ITEM_PINNED: {
+    name: 'pinned',
   },
 };
 

src/utils/itemExtra.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { ITEM_TYPES } from '../enums';
-import { getItemLoginTag, getItemPublicTag } from './itemTag';
+import { getItemLoginTag, getItemPublicTag, getItemPinnedTag } from './itemTag';
 
 export const getFileExtra = (extra) => extra?.[ITEM_TYPES.FILE];
 
@@ -64,6 +64,17 @@ export const getItemLoginTagFromItem = ({ tags, itemTags }) => {
   return itemTags?.find(({ tagId }) => tagId === itemLoginTagId);
 };
 
+export const getItemPinnedTagFromItem = ({ tags, itemTags }) => {
+  const itemPinnedTagId = getItemPinnedTag(tags)?.id;
+
+  // the tag setting does not exist
+  if (!itemPinnedTagId) {
+    return null;
+  }
+
+  return itemTags?.find(({ tagId }) => tagId === itemPinnedTagId);
+};
+
 export const getItemPublicTagFromItem = ({ tags, itemTags }) => {
   const itemTagId = getItemPublicTag(tags)?.id;
 

src/utils/itemTag.js

@@ -1,5 +1,8 @@
 import { SETTINGS } from '../config/constants';
 
+export const getItemPinnedTag = (tags) =>
+  tags?.find(({ name }) => name === SETTINGS.ITEM_PINNED.name);
+
 export const getItemLoginTag = (tags) =>
   tags?.find(({ name }) => name === SETTINGS.ITEM_LOGIN.name);