feat: add pinButton with icon

graasp · Oct 12, 2021 · c1ca3ab · c1ca3ab
1 parent fd5ec00
commit c1ca3ab
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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