Merge branch 'release-2.15.2' into release

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;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

package.json

@@ -12,7 +12,7 @@ export function renderIndex() {
       <meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
       <title>p5.js Web Editor</title>
       ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
-      <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+      <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
       <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
       <script>