Edit sketch name/description
This commit is contained in:
parent
60ec67804b
commit
7a1fa663af
5 changed files with 99 additions and 7 deletions
|
@ -41,6 +41,7 @@ export const CREATE_COLLECTION = 'CREATED_COLLECTION';
|
||||||
|
|
||||||
export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION';
|
export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION';
|
||||||
export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION';
|
export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION';
|
||||||
|
export const EDIT_COLLECTION = 'EDIT_COLLECTION';
|
||||||
|
|
||||||
export const DELETE_PROJECT = 'DELETE_PROJECT';
|
export const DELETE_PROJECT = 'DELETE_PROJECT';
|
||||||
|
|
||||||
|
|
|
@ -126,3 +126,25 @@ export function removeFromCollection(collectionId, projectId) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function editCollection(collectionId, { name, description }) {
|
||||||
|
return (dispatch) => {
|
||||||
|
const url = `${ROOT_URL}/collections/${collectionId}`;
|
||||||
|
return axios.patch(url, { name, description }, { withCredentials: true })
|
||||||
|
.then((response) => {
|
||||||
|
dispatch({
|
||||||
|
type: ActionTypes.EDIT_COLLECTION,
|
||||||
|
payload: response.data
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
})
|
||||||
|
.catch((response) => {
|
||||||
|
dispatch({
|
||||||
|
type: ActionTypes.ERROR,
|
||||||
|
error: response.data
|
||||||
|
});
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
@ -5,8 +5,9 @@ const sketches = (state = [], action) => {
|
||||||
case ActionTypes.SET_COLLECTIONS:
|
case ActionTypes.SET_COLLECTIONS:
|
||||||
return action.collections;
|
return action.collections;
|
||||||
|
|
||||||
// The API returns the complete new collection
|
// The API returns the complete new edited collection
|
||||||
// with the items added or removed
|
// with any items added or removed
|
||||||
|
case ActionTypes.EDIT_COLLECTION:
|
||||||
case ActionTypes.ADD_TO_COLLECTION:
|
case ActionTypes.ADD_TO_COLLECTION:
|
||||||
case ActionTypes.REMOVE_FROM_COLLECTION:
|
case ActionTypes.REMOVE_FROM_COLLECTION:
|
||||||
return state.map((collection) => {
|
return state.map((collection) => {
|
||||||
|
|
|
@ -15,6 +15,7 @@ import * as SortingActions from '../../IDE/actions/sorting';
|
||||||
import * as IdeActions from '../../IDE/actions/ide';
|
import * as IdeActions from '../../IDE/actions/ide';
|
||||||
import { getCollection } from '../../IDE/selectors/collections';
|
import { getCollection } from '../../IDE/selectors/collections';
|
||||||
import Loader from '../../App/components/loader';
|
import Loader from '../../App/components/loader';
|
||||||
|
import EditableInput from '../../IDE/components/EditableInput';
|
||||||
|
|
||||||
const arrowUp = require('../../../images/sort-arrow-up.svg');
|
const arrowUp = require('../../../images/sort-arrow-up.svg');
|
||||||
const arrowDown = require('../../../images/sort-arrow-down.svg');
|
const arrowDown = require('../../../images/sort-arrow-down.svg');
|
||||||
|
@ -240,10 +241,24 @@ class Collection extends React.Component {
|
||||||
return `p5.js Web Editor | ${this.props.username}'s collections`;
|
return `p5.js Web Editor | ${this.props.username}'s collections`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getUsername() {
|
||||||
|
return this.props.username !== undefined ? this.props.username : this.props.user.username;
|
||||||
|
}
|
||||||
|
|
||||||
getCollectionName() {
|
getCollectionName() {
|
||||||
return this.props.collection.name;
|
return this.props.collection.name;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isOwner() {
|
||||||
|
let isOwner = false;
|
||||||
|
|
||||||
|
if (this.props.user != null && this.props.user.username && this.props.collection.owner.username === this.props.user.username) {
|
||||||
|
isOwner = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isOwner;
|
||||||
|
}
|
||||||
|
|
||||||
hasCollection() {
|
hasCollection() {
|
||||||
return !this.props.loading && this.props.collection != null;
|
return !this.props.loading && this.props.collection != null;
|
||||||
}
|
}
|
||||||
|
@ -258,13 +273,47 @@ class Collection extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
_renderCollectionMetadata() {
|
_renderCollectionMetadata() {
|
||||||
const { name, description, items, owner } = this.props.collection;
|
const {
|
||||||
|
id, name, description, items, owner
|
||||||
|
} = this.props.collection;
|
||||||
|
|
||||||
|
const handleEditCollectionName = (value) => {
|
||||||
|
if (value === name) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.editCollection(id, { name: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditCollectionDescription = (value) => {
|
||||||
|
if (value === description) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.editCollection(id, { description: value });
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="collection-metadata">
|
<div className="collection-metadata">
|
||||||
<h2 className="collection-metadata__name">{name}</h2>
|
<h2 className="collection-metadata__name">
|
||||||
|
{
|
||||||
|
this.isOwner() ? <EditableInput value={name} onChange={handleEditCollectionName} /> : name
|
||||||
|
}
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p className="collection-metadata__user">{items.length} sketches collected by {owner.username}</p>
|
<p className="collection-metadata__user">{items.length} sketches collected by {owner.username}</p>
|
||||||
<p className="collection-metadata__description">{description}</p>
|
|
||||||
|
<p className="collection-metadata__description">
|
||||||
|
{
|
||||||
|
this.isOwner() ?
|
||||||
|
<EditableInput
|
||||||
|
InputComponent="textarea"
|
||||||
|
value={description}
|
||||||
|
onChange={handleEditCollectionDescription}
|
||||||
|
/> :
|
||||||
|
description
|
||||||
|
}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -298,7 +347,6 @@ class Collection extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
|
|
||||||
const title = this.hasCollection() ? this.getCollectionName() : null;
|
const title = this.hasCollection() ? this.getCollectionName() : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -326,7 +374,7 @@ class Collection extends React.Component {
|
||||||
key={item.id}
|
key={item.id}
|
||||||
item={item}
|
item={item}
|
||||||
user={this.props.user}
|
user={this.props.user}
|
||||||
username={username}
|
username={this.getUsername()}
|
||||||
/>))}
|
/>))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>}
|
</table>}
|
||||||
|
|
|
@ -12,10 +12,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.collection-metadata__name {
|
||||||
|
padding: #{12 / $base-font-size}rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-metadata__name .editable-input__label span {
|
||||||
|
padding: 0.83333rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-metadata__name,
|
||||||
|
.collection-metadata__name .editable-input__input {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.collection-metadata__user {
|
.collection-metadata__user {
|
||||||
padding-top: #{12 / $base-font-size}rem;
|
padding-top: #{12 / $base-font-size}rem;
|
||||||
|
padding-left: #{8 / $base-font-size}rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-metadata__description {
|
.collection-metadata__description {
|
||||||
padding-top: #{24 / $base-font-size}rem;
|
padding-top: #{24 / $base-font-size}rem;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection-metadata__description .editable-input__input {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue