diff --git a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx b/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx deleted file mode 100644 index 05e57725..00000000 --- a/client/modules/IDE/components/CollectionPopover/CollectionPopover.jsx +++ /dev/null @@ -1,144 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import InlineSVG from 'react-inlinesvg'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; - -import * as CollectionsActions from '../../actions/collections'; -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 NoCollections = () => ( -
-

No collections

-
); - -const projectInCollection = (project, collection) => ( - collection.items.find(item => item.project.id === project.id) != null -); - - -const CollectionPopover = ({ - loading, onClose, project, collections, addToCollection, removeFromCollection, getCollections, user -}) => { - const [didLoadData, setDidLoadData] = React.useState(null); - const [searchTerm, setSearchTerm] = React.useState(''); - const filteredCollections = searchTerm === '' ? - collections : - collections.filter(({ name }) => name.toUpperCase().includes(searchTerm.toUpperCase())); - - React.useEffect(() => { - 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); - }; - - const handleRemoveFromCollection = (collectionId) => { - removeFromCollection(collectionId, project.id); - }; - - let content = null; - - if (didLoadData && collections.length === 0) { - content = ; - } else if (didLoadData) { - content = ( - - ); - } else { - content = ; - } - - return ( -
-
-

Add to collection

- -
- -
- setSearchTerm('')} - /> -
- -
- {content} -
-
- ); -}; - -CollectionPopover.propTypes = { - loading: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - getCollections: PropTypes.func.isRequired, - addToCollection: PropTypes.func.isRequired, - removeFromCollection: PropTypes.func.isRequired, - user: PropTypes.shape({ - username: PropTypes.string.isRequired, - }).isRequired, - collections: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.string, - })).isRequired, - project: PropTypes.shape({ - id: PropTypes.string, - }).isRequired, -}; - -function mapStateToProps(state, ownProps) { - return { - user: state.user, - collections: getSortedCollections(state), - loading: state.loading, - }; -} - -function mapDispatchToProps(dispatch) { - return bindActionCreators( - Object.assign({}, CollectionsActions), - dispatch - ); -} - -export default connect(mapStateToProps, mapDispatchToProps)(CollectionPopover); diff --git a/client/modules/IDE/components/CollectionPopover/Item.jsx b/client/modules/IDE/components/CollectionPopover/Item.jsx deleted file mode 100644 index f73192e9..00000000 --- a/client/modules/IDE/components/CollectionPopover/Item.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Link } from 'react-router'; -import InlineSVG from 'react-inlinesvg'; - -import check from '../../../../images/check.svg'; - -const checkIcon = ( - -); - - -const CollectionItem = ({ inCollection, collection, onSelect }) => ( -
  • -
    - {inCollection && checkIcon} - - -
    - -
    - View -
    -
    • -); - -CollectionItem.propTypes = { - inCollection: PropTypes.bool.isRequired, - onSelect: PropTypes.func.isRequired, - collection: PropTypes.shape({ - name: PropTypes.string, - }).isRequired, -}; - -export default CollectionItem; diff --git a/client/modules/IDE/components/CollectionPopover/index.js b/client/modules/IDE/components/CollectionPopover/index.js deleted file mode 100644 index 2457586e..00000000 --- a/client/modules/IDE/components/CollectionPopover/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CollectionPopover.jsx'; diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 40944818..b40f884a 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -16,32 +16,12 @@ import * as SortingActions from '../actions/sorting'; import * as IdeActions from '../actions/ide'; import getSortedSketches from '../selectors/projects'; import Loader from '../../App/components/loader'; -import CollectionPopover from './CollectionPopover'; +import Overlay from '../../App/components/Overlay'; +import AddToCollectionList from './AddToCollectionList'; const arrowUp = require('../../../images/sort-arrow-up.svg'); const arrowDown = require('../../../images/sort-arrow-down.svg'); const downFilledTriangle = require('../../../images/down-filled-triangle.svg'); -const check = require('../../../images/check_encircled.svg'); -const close = require('../../../images/close.svg'); - -const Icons = ({ inCollection }) => { - const classes = [ - 'sketch-list__icon', - inCollection ? 'sketch-list__icon--in-collection' : 'sketch-list__icon--not-in-collection' - ].join(' '); - - return ( -
    - - - -
    - ); -}; - -Icons.propTypes = { - inCollection: PropTypes.bool.isRequired, -}; class SketchListRowBase extends React.Component { constructor(props) { @@ -51,7 +31,6 @@ class SketchListRowBase extends React.Component { renameOpen: false, renameValue: props.sketch.name, isFocused: false, - showPopover: false, }; } @@ -141,18 +120,6 @@ class SketchListRowBase extends React.Component { this.props.exportProjectAsZip(this.props.sketch.id); } - handleShowCollectionPopover = () => { - this.setState({ - showPopover: true - }); - } - - handleCloseCollectionPopover = () => { - this.setState({ - showPopover: false - }); - } - handleSketchDuplicate = () => { this.closeAll(); this.props.cloneProject(this.props.sketch.id); @@ -170,18 +137,6 @@ class SketchListRowBase extends React.Component { } } - handleRowClick = (evt) => { - if (!this.props.addMode) { - return; - } - - if (this.props.inCollection) { - this.props.onCollectionRemove(); - } else { - this.props.onCollectionAdd(); - } - } - renderViewButton = sketchURL => ( View @@ -242,7 +197,10 @@ class SketchListRowBase extends React.Component {
    • } } - {this.state.showPopover && - - } ); } - renderActions = sketchURL => (this.props.addMode === true ? this.renderViewButton(sketchURL) : this.renderDropdown()) - render() { const { sketch, username, - addMode, - inCollection, } = this.props; const { renameOpen, renameValue } = this.state; let url = `/${username}/sketches/${sketch.id}`; @@ -296,53 +244,43 @@ class SketchListRowBase extends React.Component { url = `/${username}/sketches/${slugify(sketch.name, '_')}`; } - const name = addMode ? - {sketch.name} - : ( - - - {renameOpen ? '' : sketch.name} - - {renameOpen - && - e.stopPropagation()} - /> - } - - ); + const name = ( + + + {renameOpen ? '' : sketch.name} + + {renameOpen + && + e.stopPropagation()} + /> + } + + ); return ( - { - this.props.addMode && - - - - } {name} - {!this.props.addMode && {format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}} - {!this.props.addMode && {format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}} - {this.renderActions(url)} + {format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')} + {format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')} + {this.renderDropdown()} ); } } SketchListRowBase.propTypes = { - addMode: PropTypes.bool.isRequired, - inCollection: PropTypes.bool.isRequired, sketch: PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired @@ -357,8 +295,7 @@ SketchListRowBase.propTypes = { cloneProject: PropTypes.func.isRequired, exportProjectAsZip: PropTypes.func.isRequired, changeProjectName: PropTypes.func.isRequired, - onCollectionAdd: PropTypes.func.isRequired, - onCollectionRemove: PropTypes.func.isRequired, + onAddToCollection: PropTypes.func.isRequired, }; function mapDispatchToPropsSketchListRow(dispatch) { @@ -435,14 +372,6 @@ class SketchList extends React.Component { ); } - handleCollectionAdd = (sketchId) => { - this.props.addToCollection(this.props.collection.id, sketchId); - } - - handleCollectionRemove = (sketchId) => { - this.props.removeFromCollection(this.props.collection.id, sketchId); - } - render() { const username = this.props.username !== undefined ? this.props.username : this.props.user.username; return ( @@ -454,16 +383,14 @@ class SketchList extends React.Component { {this._renderEmptyTable()} {this.hasSketches() && - {!this.props.addMode && - - - {this._renderFieldHeader('name', 'Sketch')} - {this._renderFieldHeader('createdAt', 'Date Created')} - {this._renderFieldHeader('updatedAt', 'Date Updated')} - - - - } + + + {this._renderFieldHeader('name', 'Sketch')} + {this._renderFieldHeader('createdAt', 'Date Created')} + {this._renderFieldHeader('updatedAt', 'Date Updated')} + + + {this.props.sketches.map(sketch => ( this.handleCollectionAdd(sketch.id)} - onCollectionRemove={() => this.handleCollectionRemove(sketch.id)} - inCollection={this.props.collection && - this.props.collection.items.find(item => item.project.id === sketch.id) != null} + onAddToCollection={() => { + this.setState({ sketchToAddToCollection: sketch }); + }} />))}
    } + { + this.state.sketchToAddToCollection && + this.setState({ sketchToAddToCollection: null })} + > + + + } ); } @@ -513,13 +451,9 @@ SketchList.propTypes = { field: PropTypes.string.isRequired, direction: PropTypes.string.isRequired }).isRequired, - addToCollection: PropTypes.func.isRequired, - removeFromCollection: PropTypes.func.isRequired, - addMode: PropTypes.bool, }; SketchList.defaultProps = { - addMode: false, username: undefined };