refactor: update item card and item table, factor out buttons, delete…

… items

src/actions/item.js

@@ -22,6 +22,8 @@ import {
   FLAG_SETTING_ITEM,
   FLAG_EDITING_ITEM,
   GET_SHARED_ITEMS_SUCCESS,
+  FLAG_DELETING_ITEMS,
+  DELETE_ITEMS_SUCCESS,
 } from '../types/item';
 import { getParentsIdsFromPath } from '../utils/item';
 import { createFlag } from './utils';
@@ -129,13 +131,35 @@ export const createItem = (props) => async (dispatch) => {
   }
 };
 
-export const deleteItem = (item) => async (dispatch) => {
+export const deleteItem = (itemId) => async (dispatch) => {
   try {
     dispatch(createFlag(FLAG_DELETING_ITEM, true));
-    await Api.deleteItem(item.id);
+    await Api.deleteItem(itemId);
     dispatch({
       type: DELETE_ITEM_SUCCESS,
-      payload: item,
+      payload: { id: itemId },
+    });
+  } catch (e) {
+    console.error(e);
+  } finally {
+    dispatch(createFlag(FLAG_DELETING_ITEM, false));
+  }
+};
+
+export const deleteItems = (itemIds) => async (dispatch) => {
+  try {
+    dispatch(createFlag(FLAG_DELETING_ITEMS, true));
+
+    // choose corresponding call depending on number of items
+    if (itemIds.length === 1) {
+      await Api.deleteItem(itemIds);
+    } else {
+      await Api.deleteItems(itemIds);
+    }
+
+    dispatch({
+      type: DELETE_ITEMS_SUCCESS,
+      payload: itemIds,
     });
   } catch (e) {
     console.error(e);

src/api/item.js

@@ -2,6 +2,7 @@ import { API_HOST, ROOT_ID } from '../config/constants';
 import {
   buildCopyItemRoute,
   buildDeleteItemRoute,
+  buildDeleteItemsRoute,
   buildEditItemRoute,
   buildGetChildrenRoute,
   buildGetItemRoute,
@@ -87,6 +88,20 @@ export const deleteItem = async (id) => {
   return res.json();
 };
 
+export const deleteItems = async (ids) => {
+  const res = await fetch(
+    `${API_HOST}/${buildDeleteItemsRoute(ids)}`,
+    DEFAULT_DELETE,
+  );
+
+  if (!res.ok) {
+    throw new Error((await res.json()).message);
+  }
+  await CacheOperations.deleteItems(ids);
+
+  return res.json();
+};
+
 // payload = {name, type, description, extra}
 // querystring = {parentId}
 export const editItem = async (item) => {

src/api/routes.js

@@ -8,6 +8,8 @@ export const buildPostItemRoute = (parentId) => {
   return url;
 };
 export const buildDeleteItemRoute = (id) => `items/${id}`;
+export const buildDeleteItemsRoute = (ids) =>
+  `items?${ids.map((id) => `id=${id}`).join('&')}`;
 export const buildGetChildrenRoute = (id) => `items/${id}/children`;
 export const buildGetItemRoute = (id) => `items/${id}`;
 export const buildMoveItemRoute = (id) => `items/${id}/move`;

src/components/Root.js

@@ -11,6 +11,7 @@ const theme = createMuiTheme({
     primary: {
       main: '#5050d2',
     },
+    secondary: { main: '#ffffff' },
   },
 });
 

src/components/common/DeleteButton.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { deleteItems } from '../../actions/item';
+import { ITEM_DELETE_BUTTON_CLASS } from '../../config/selectors';
+
+const DeleteButton = ({ itemIds, dispatchDeleteItems, color }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={t('Delete')}>
+      <IconButton
+        color={color}
+        className={ITEM_DELETE_BUTTON_CLASS}
+        aria-label="delete"
+        onClick={() => dispatchDeleteItems(itemIds)}
+      >
+        <DeleteIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+DeleteButton.propTypes = {
+  itemIds: PropTypes.string.isRequired,
+  dispatchDeleteItems: PropTypes.func.isRequired,
+  color: PropTypes.string,
+};
+
+DeleteButton.defaultProps = {
+  color: '',
+};
+
+const mapDispatchToProps = {
+  dispatchDeleteItems: deleteItems,
+};
+
+const ConnectedComponent = connect(null, mapDispatchToProps)(DeleteButton);
+
+export default ConnectedComponent;

src/components/common/EditButton.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import EditIcon from '@material-ui/icons/Edit';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import { ITEM_MENU_EDIT_BUTTON_CLASS } from '../../config/selectors';
+import { setEditModalSettings } from '../../actions/layout';
+
+const Item = ({ itemId, dispatchSetEditModalSettings }) => {
+  const { t } = useTranslation();
+
+  const handleEdit = () => {
+    dispatchSetEditModalSettings({ open: true, itemId });
+  };
+
+  return (
+    <Tooltip title={t('Edit')}>
+      <IconButton
+        aria-label="edit"
+        className={ITEM_MENU_EDIT_BUTTON_CLASS}
+        onClick={handleEdit}
+      >
+        <EditIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+Item.propTypes = {
+  itemId: PropTypes.string.isRequired,
+  dispatchSetEditModalSettings: PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = {
+  dispatchSetEditModalSettings: setEditModalSettings,
+};
+
+const ConnectedComponent = connect(null, mapDispatchToProps)(Item);
+
+export default ConnectedComponent;

src/components/common/ShareButton.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import ShareIcon from '@material-ui/icons/Share';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import { ITEM_MENU_SHARE_BUTTON_CLASS } from '../../config/selectors';
+import { setShareModalSettings } from '../../actions/layout';
+
+const Item = ({ itemId, dispatchSetShareModalSettings }) => {
+  const { t } = useTranslation();
+
+  const handleShare = () => {
+    dispatchSetShareModalSettings({ open: true, itemId });
+  };
+
+  return (
+    <Tooltip title={t('Share')}>
+      <IconButton
+        aria-label="share"
+        className={ITEM_MENU_SHARE_BUTTON_CLASS}
+        onClick={handleShare}
+      >
+        <ShareIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+Item.propTypes = {
+  itemId: PropTypes.string.isRequired,
+  dispatchSetShareModalSettings: PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = {
+  dispatchSetShareModalSettings: setShareModalSettings,
+};
+
+const ConnectedComponent = connect(null, mapDispatchToProps)(Item);
+
+export default ConnectedComponent;

src/components/main/CustomCardHeader.js

@@ -59,7 +59,7 @@ const CustomCardHeader = ({ item }) => {
           </Typography>
         </div>
       </div>
-      <ItemMenu item={item} />
+      <ItemMenu itemId={item.id} />
     </div>
   );
 };

src/components/main/EmptyItem.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
+import { ITEMS_GRID_NO_ITEM_ID } from '../../config/selectors';
+
+const EmptyItem = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Typography
+      id={ITEMS_GRID_NO_ITEM_ID}
+      variant="subtitle1"
+      align="center"
+      display="block"
+    >
+      {t('This item is empty.')}
+    </Typography>
+  );
+};
+
+export default EmptyItem;

src/components/main/Home.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { List } from 'immutable';
 import PropTypes from 'prop-types';
 import Divider from '@material-ui/core/Divider';
 import { connect } from 'react-redux';
@@ -15,8 +16,8 @@ class Home extends Component {
       params: PropTypes.shape({ itemId: PropTypes.string }).isRequired,
     }).isRequired,
     activity: PropTypes.bool.isRequired,
-    ownItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-    sharedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+    ownItems: PropTypes.instanceOf(List).isRequired,
+    sharedItems: PropTypes.instanceOf(List).isRequired,
     t: PropTypes.func.isRequired,
     dispatchGetSharedItems: PropTypes.func.isRequired,
   };
@@ -62,7 +63,7 @@ class Home extends Component {
 }
 
 const mapStateToProps = ({ item }) => ({
-  activity: Object.values(item.get('activity').toJS()).flat().length,
+  activity: Boolean(Object.values(item.get('activity').toJS()).flat().length),
   ownItems: item.get('own'),
   sharedItems: item.get('shared'),
 });

src/components/main/Item.js

@@ -1,25 +1,21 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import truncate from 'lodash.truncate';
 import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
-import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import DeleteIcon from '@material-ui/icons/Delete';
 import CustomCardHeader from './CustomCardHeader';
-import { deleteItem } from '../../actions/item';
 import {
   DEFAULT_IMAGE_SRC,
   DESCRIPTION_MAX_LENGTH,
 } from '../../config/constants';
-import {
-  buildItemCard,
-  ITEM_DELETE_BUTTON_CLASS,
-} from '../../config/selectors';
+import { buildItemCard } from '../../config/selectors';
+import EditButton from '../common/EditButton';
+import ShareButton from '../common/ShareButton';
+import DeleteButton from '../common/DeleteButton';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -31,7 +27,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const Item = ({ item, dispatchDeleteItem }) => {
+const Item = ({ item }) => {
   const classes = useStyles();
   const { id, name, description, extra } = item;
 
@@ -49,13 +45,9 @@ const Item = ({ item, dispatchDeleteItem }) => {
         </Typography>
       </CardContent>
       <CardActions disableSpacing>
-        <IconButton
-          className={ITEM_DELETE_BUTTON_CLASS}
-          aria-label="delete"
-          onClick={() => dispatchDeleteItem(item)}
-        >
-          <DeleteIcon />
-        </IconButton>
+        <EditButton itemId={id} />
+        <ShareButton itemId={id} />
+        <DeleteButton itemIds={[id]} />
       </CardActions>
     </Card>
   );
@@ -72,13 +64,6 @@ Item.propTypes = {
       image: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
-  dispatchDeleteItem: PropTypes.func.isRequired,
-};
-
-const mapDispatchToProps = {
-  dispatchDeleteItem: deleteItem,
 };
 
-const ConnectedComponent = connect(null, mapDispatchToProps)(Item);
-
-export default ConnectedComponent;
+export default Item;