Merge pull request #3270 from processing/fix/collection-view

Update Collection View

Author: raclim

client/modules/User/components/Collection.jsx

@@ -13,19 +13,14 @@ import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import CollectionMetadata from './CollectionMetadata';
 import CollectionItemRow from './CollectionItemRow';
 
-const Collection = ({ collectionId }) => {
+const Collection = ({ collectionId, username }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
-  const { user, collection, sorting, loading, username } = useSelector(
-    (state) => ({
-      user: state.user,
-      collection: getCollection(state, collectionId),
-      sorting: state.sorting,
-      loading: state.loading,
-      username: state.user.username
-    })
-  );
+  const user = useSelector((state) => state.user);
+  const collection = useSelector((state) => getCollection(state, collectionId));
+  const sorting = useSelector((state) => state.sorting);
+  const loading = useSelector((state) => state.loading);
 
   useEffect(() => {
     dispatch(CollectionsActions.getCollections(username));
@@ -34,7 +29,7 @@ const Collection = ({ collectionId }) => {
 
   const isOwner = () =>
     user != null &&
-    user.username &&
+    typeof user.username !== 'undefined' &&
     collection?.owner?.username === user.username;
 
   const hasCollection = () => !!collection;
@@ -160,7 +155,8 @@ const Collection = ({ collectionId }) => {
 };
 
 Collection.propTypes = {
-  collectionId: PropTypes.string.isRequired
+  collectionId: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired
 };
 
 export default Collection;

client/modules/User/components/CollectionItemRow.jsx

@@ -2,18 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { removeFromCollection } from '../../IDE/actions/collections';
 import dates from '../../../utils/formatDate';
 import RemoveIcon from '../../../images/close.svg';
 
-const CollectionItemRow = ({
-  collection,
-  item,
-  isOwner,
-  removeFromCollection
-}) => {
+const CollectionItemRow = ({ collection, item, isOwner }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
   const projectIsDeleted = item.isDeleted;
-
   const handleSketchRemove = () => {
     const name = projectIsDeleted ? 'deleted sketch' : item.project.name;
 
@@ -22,7 +19,7 @@ const CollectionItemRow = ({
         t('Collection.DeleteFromCollection', { name_sketch: name })
       )
     ) {
-      removeFromCollection(collection.id, item.projectId);
+      dispatch(removeFromCollection(collection.id, item.projectId));
     }
   };
 
@@ -75,10 +72,9 @@ CollectionItemRow.propTypes = {
       user: PropTypes.shape({
         username: PropTypes.string.isRequired
       })
-    }).isRequired
+    })
   }).isRequired,
-  isOwner: PropTypes.bool.isRequired,
-  removeFromCollection: PropTypes.func.isRequired
+  isOwner: PropTypes.bool.isRequired
 };
 
 export default CollectionItemRow;