From c1ca3ab3ff9e0218c7ea96289484c9ba9ccadc2b Mon Sep 17 00:00:00 2001
From: Julien Torrent <julien.torrent@outlook.com>
Date: Wed, 18 Aug 2021 16:19:05 +0200
Subject: [PATCH] feat: add pinButton with icon

---
 package.json                       |  2 +-
 src/components/common/PinButton.js | 50 ++++++++++++++++++++++++++++++
 src/components/main/Item.js        |  2 ++
 yarn.lock                          | 17 +++++-----
 4 files changed, 61 insertions(+), 10 deletions(-)
 create mode 100644 src/components/common/PinButton.js

diff --git a/package.json b/package.json
index 0a0ea5782..26eb0ab77 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git",
     "@graasp/ui": "git://github.com/graasp/graasp-ui.git",
     "@material-ui/core": "4.11.2",
-    "@material-ui/icons": "4.11.2",
+    "@material-ui/icons": "5.0.0-beta.4",
     "@material-ui/lab": "4.0.0-alpha.57",
     "@uppy/aws-s3": "1.7.7",
     "@uppy/core": "1.16.1",
diff --git a/src/components/common/PinButton.js b/src/components/common/PinButton.js
new file mode 100644
index 000000000..eb656d1bc
--- /dev/null
+++ b/src/components/common/PinButton.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import { Map } from 'immutable';
+import PushPinIcon from '@material-ui/icons/PushPin';
+import PushPinOutlinedIcon from '@material-ui/icons/PushPinOutlined' 
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import { FAVORITE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+
+const PinButton = ({ item, member }) => {
+  const { t } = useTranslation();
+  // const mutation = useMutation(MUTATION_KEYS.PIN_ITEM);
+  console.log(item, member);
+
+  const isPinned = true; // isItemPinned(item, member);
+
+  const handlePin = () => {
+
+  };
+
+  const handleUnpin = () => {
+
+  };
+
+  return (
+    <Tooltip
+      title={isPinned ? t('Unpin') : t('Pin')}
+    >
+      <IconButton
+        aria-label="favorite"
+        className={FAVORITE_ITEM_BUTTON_CLASS}
+        onClick={isPinned ? handleUnpin : handlePin}
+      >
+        {isPinned ? (
+          <PushPinIcon fontSize="small" />
+        ) : (
+          <PushPinOutlinedIcon fontSize="small" />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+PinButton.propTypes = {
+  item: PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired,
+  member: PropTypes.instanceOf(Map).isRequired,
+};
+
+export default PinButton;
diff --git a/src/components/main/Item.js b/src/components/main/Item.js
index 89f3b02cc..cb21c11ff 100644
--- a/src/components/main/Item.js
+++ b/src/components/main/Item.js
@@ -15,6 +15,7 @@ import DeleteButton from '../common/DeleteButton';
 import { getItemImage } from '../../utils/item';
 import FavoriteButton from '../common/FavoriteButton';
 import { hooks } from '../../config/queryClient';
+import PinButton from '../common/PinButton';
 
 const { useCurrentMember } = hooks;
 
@@ -46,6 +47,7 @@ const Item = ({ item }) => {
         </Typography>
       </CardContent>
       <CardActions disableSpacing>
+        <PinButton member={member} item={item} />
         <FavoriteButton member={member} item={item} />
         <EditButton item={item} />
         <DeleteButton itemIds={[id]} id={buildDeleteButtonId(id)} />
diff --git a/yarn.lock b/yarn.lock
index 41c100d2a..6064c1587 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2542,20 +2542,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material-ui/icons@npm:4.11.2":
-  version: 4.11.2
-  resolution: "@material-ui/icons@npm:4.11.2"
+"@material-ui/icons@npm:5.0.0-beta.4":
+  version: 5.0.0-beta.4
+  resolution: "@material-ui/icons@npm:5.0.0-beta.4"
   dependencies:
-    "@babel/runtime": ^7.4.4
+    "@babel/runtime": ^7.14.8
   peerDependencies:
-    "@material-ui/core": ^4.0.0
+    "@material-ui/core": ^5.0.0-alpha.36
     "@types/react": ^16.8.6 || ^17.0.0
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^17.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 0cd1d54b25a4237bd0cefd383d287911f721d4c4ac4fd7980370566b9927f3a9725e7a715042f7c65c87fa554173fbef5328de1d08e60eb996038f375ddf583a
+  checksum: c5880edaa5d7460d67ae00985e7d0227b327c2be1dda6dab35bf5830eb605299bc8f765a766623150459591859b75a5d0cfe7416d1bb5a2eb5059d5b558e44cf
   languageName: node
   linkType: hard
 
@@ -10228,7 +10227,7 @@ fsevents@^1.2.7:
     "@graasp/ui": "git://github.com/graasp/graasp-ui.git"
     "@graasp/websockets": "git://github.com/graasp/graasp-websockets.git#master"
     "@material-ui/core": 4.11.2
-    "@material-ui/icons": 4.11.2
+    "@material-ui/icons": 5.0.0-beta.4
     "@material-ui/lab": 4.0.0-alpha.57
     "@testing-library/jest-dom": ^5.11.6
     "@testing-library/react": ^11.2.2