diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 99f57201..59130704 100644 --- a/client/modules/User/components/Collection.jsx +++ b/client/modules/User/components/Collection.jsx @@ -23,7 +23,7 @@ import { SketchSearchbar } from '../../IDE/components/Searchbar'; 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 trashCan = require('../../../images/trash-can.svg'); const ShareURL = ({ value }) => { const [showURL, setShowURL] = React.useState(false); @@ -48,114 +48,7 @@ ShareURL.propTypes = { }; class CollectionItemRowBase extends React.Component { - constructor(props) { - super(props); - this.state = { - optionsOpen: false, - renameOpen: false, - renameValue: props.item.project.name, - isFocused: false - }; - } - - onFocusComponent = () => { - this.setState({ isFocused: true }); - } - - onBlurComponent = () => { - this.setState({ isFocused: false }); - setTimeout(() => { - if (!this.state.isFocused) { - this.closeAll(); - } - }, 200); - } - - openOptions = () => { - this.setState({ - optionsOpen: true - }); - } - - closeOptions = () => { - this.setState({ - optionsOpen: false - }); - } - - toggleOptions = () => { - if (this.state.optionsOpen) { - this.closeOptions(); - } else { - this.openOptions(); - } - } - - openRename = () => { - this.setState({ - renameOpen: true - }); - } - - closeRename = () => { - this.setState({ - renameOpen: false - }); - } - - closeAll = () => { - this.setState({ - renameOpen: false, - optionsOpen: false - }); - } - - handleRenameChange = (e) => { - this.setState({ - renameValue: e.target.value - }); - } - - handleRenameEnter = (e) => { - if (e.key === 'Enter') { - // TODO pass this func - this.props.changeProjectName(this.props.collection.id, this.state.renameValue); - this.closeAll(); - } - } - - resetSketchName = () => { - this.setState({ - renameValue: this.props.collection.name - }); - } - - handleDropdownOpen = () => { - this.closeAll(); - this.openOptions(); - } - - handleRenameOpen = () => { - this.closeAll(); - this.openRename(); - } - - handleSketchDownload = () => { - this.props.exportProjectAsZip(this.props.collection.id); - } - - handleSketchDuplicate = () => { - this.closeAll(); - this.props.cloneProject(this.props.collection.id); - } - - handleSketchShare = () => { - this.closeAll(); - this.props.showShareModal(this.props.collection.id, this.props.collection.name, this.props.username); - } - handleSketchRemove = () => { - this.closeAll(); if (window.confirm(`Are you sure you want to remove "${this.props.item.project.name}" from this collection?`)) { this.props.removeFromCollection(this.props.collection.id, this.props.item.project.id); } @@ -163,63 +56,28 @@ class CollectionItemRowBase extends React.Component { render() { const { item } = this.props; - const { renameOpen, optionsOpen, renameValue } = this.state; const sketchOwnerUsername = item.project.user.username; - const userIsOwner = this.props.user.username === sketchOwnerUsername; const sketchUrl = `/${item.project.user.username}/sketches/${item.project.id}`; - const dropdown = ( -