diff --git a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx b/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
index 2129d153..79dbb1f8 100644
--- a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
+++ b/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx
@@ -9,27 +9,13 @@ import getSortedCollections from '../../selectors/collections';
import exitUrl from '../../../../images/exit.svg';
+import Loader from '../../../App/components/loader';
import { Searchbar } from '../Searchbar';
import Item from './Item';
-// const reducer = () => {
-// switch ()
-// case 'noItems':
-// return 'NoCollections';
-// case
-// }
-
const NoCollections = () => (
-
+
No collections
- {/*
- {}}
- >Create
-
-
*/}
);
const projectInCollection = (project, collection) => (
@@ -38,8 +24,9 @@ const projectInCollection = (project, collection) => (
const CollectionPopover = ({
- onClose, project, collections, addToCollection, removeFromCollection, getCollections, user
+ loading, onClose, project, collections, addToCollection, removeFromCollection, getCollections, user
}) => {
+ const [didLoadData, setDidLoadData] = React.useState(null);
const [searchTerm, setSearchTerm] = React.useState('');
const filteredCollections = searchTerm === '' ?
collections :
@@ -49,6 +36,18 @@ const CollectionPopover = ({
getCollections(user.username);
}, [user]);
+ React.useEffect(() => {
+ if (didLoadData === true) {
+ return;
+ }
+
+ if (loading && didLoadData === null) {
+ setDidLoadData(false);
+ } else if (!loading && didLoadData === false) {
+ setDidLoadData(true);
+ }
+ }, [loading]);
+
const handleAddToCollection = (collectionId) => {
addToCollection(collectionId, project.id);
};
@@ -57,6 +56,29 @@ const CollectionPopover = ({
removeFromCollection(collectionId, project.id);
};
+ let content = null;
+
+ if (didLoadData && collections.length === 0) {
+ content =
;
+ } else if (didLoadData) {
+ content = (
+
+ {
+ filteredCollections.map((collection) => {
+ const inCollection = projectInCollection(project, collection);
+ const handleSelect = inCollection ? handleRemoveFromCollection : handleAddToCollection;
+
+ return (
+ - handleSelect(collection.id)} />
+ );
+ })
+ }
+
+ );
+ } else {
+ content =
;
+ }
+
return (
@@ -71,24 +93,14 @@ const CollectionPopover = ({
-
- {
- filteredCollections.map((collection) => {
- const inCollection = projectInCollection(project, collection);
- const handleSelect = inCollection ? handleRemoveFromCollection : handleAddToCollection;
-
- return (
- - handleSelect(collection.id)} />
- );
- })
- }
-
+ {content}
);
};
CollectionPopover.propTypes = {
+ loading: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
getCollections: PropTypes.func.isRequired,
addToCollection: PropTypes.func.isRequired,
diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss
index fa199f07..2d5db110 100644
--- a/client/styles/components/_collection-popover.scss
+++ b/client/styles/components/_collection-popover.scss
@@ -86,3 +86,10 @@
.collection-popover__item__view-button {
@extend %button;
}
+
+.collection-popover__empty {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}