Skip to content

[WIP] Adding sketches to collections #1116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 11 commits into from
Closed

[WIP] Adding sketches to collections #1116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c8b8516
Adds Collections model and Editor API to manage collections
andrewn Jul 8, 2019
bd3b90c
Adds collections Nav item behind a feature flag
andrewn Jul 9, 2019
92e59ef
Displays existing collection
andrewn Jul 9, 2019
815ab65
Non-functional UI for adding to collection
andrewn Jul 9, 2019
2c64426
Move link to collections list in Nav
andrewn Jul 9, 2019
e327478
Create Collection
andrewn Jul 9, 2019
939a21b
Delete collection
andrewn Jul 10, 2019
3b43bfb
EditableInput component
andrewn Jul 10, 2019
31c6d85
Allows Collection name and description to be edited
andrewn Jul 10, 2019
b0f27fb
Better collection creation form
andrewn Jul 10, 2019
a15b191
Adding to collections only available for saved sketches
andrewn Jul 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 85 additions & 61 deletions client/components/Nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,69 +270,81 @@ class Nav extends React.PureComponent {
New
</button>
</li>
{ __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
<li className="nav__dropdown-item">
<button
onClick={this.handleSave}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Save
{__process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
<li className="nav__dropdown-item">
<button
onClick={this.handleSave}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Save
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
</button>
</li>}
{this.props.project.id && this.props.user.authenticated &&
<li className="nav__dropdown-item">
<button
onClick={this.handleDuplicate}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Duplicate
</button>
</li> }
{ this.props.project.id && this.props.user.authenticated &&
<li className="nav__dropdown-item">
<button
onClick={this.handleDuplicate}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Duplicate
</button>
</li> }
{ this.props.project.id &&
<li className="nav__dropdown-item">
<button
onClick={this.handleShare}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Share
</li>}
{this.props.project.id &&
<li className="nav__dropdown-item">
<button
onClick={this.handleShare}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Share
</button>
</li> }
{ this.props.project.id &&
<li className="nav__dropdown-item">
<button
onClick={this.handleDownload}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Download
</li>}
{this.props.project.id &&
<li className="nav__dropdown-item">
<button
onClick={this.handleDownload}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
>
Download
</button>
</li> }
{ this.props.user.authenticated &&
<li className="nav__dropdown-item">
<Link
to={`/${this.props.user.username}/sketches`}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
Open
</Link>
</li> }
{ __process.env.EXAMPLES_ENABLED &&
<li className="nav__dropdown-item">
<Link
to="/p5/sketches"
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
Examples
</li>}
{this.props.user.authenticated &&
<li className="nav__dropdown-item">
<Link
to={`/${this.props.user.username}/sketches`}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
Open
</Link>
</li> }
</li>}
{__process.env.COLLECTIONS_ENABLED && this.props.user.authenticated && this.props.project.id &&
<li className="nav__dropdown-item">
<Link
to={`/${this.props.user.username}/sketches/${this.props.project.id}/add-to-collection`}
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
Add to Collection
</Link>
</li>
}
{__process.env.EXAMPLES_ENABLED &&
<li className="nav__dropdown-item">
<Link
to="/p5/sketches"
onFocus={this.handleFocusForFile}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
Examples
</Link>
</li>}
</ul>
</li>
<li className={navDropdownState.edit}>
Expand Down Expand Up @@ -528,7 +540,7 @@ class Nav extends React.PureComponent {
</ul>
</li>
</ul>
{ __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
{__process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu">
<li>
<Link to="/login">
Expand All @@ -542,7 +554,7 @@ class Nav extends React.PureComponent {
</Link>
</li>
</ul>}
{ __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
{__process.env.LOGIN_ENABLED && this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<span>Hello, {this.props.user.username}!</span>
Expand Down Expand Up @@ -574,6 +586,18 @@ class Nav extends React.PureComponent {
My sketches
</Link>
</li>
{__process.env.COLLECTIONS_ENABLED &&
<li className="nav__dropdown-item">
<Link
to={`/${this.props.user.username}/collections`}
onFocus={this.handleFocusForAccount}
onBlur={this.handleBlur}
onClick={this.setDropdownForNone}
>
My collections
</Link>
</li>
}
<li className="nav__dropdown-item">
<Link
to="/assets"
Expand Down Expand Up @@ -605,7 +629,7 @@ class Nav extends React.PureComponent {
</li>
</ul>
</li>
</ul> }
</ul>}
{/*
<div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released.
Expand Down
8 changes: 8 additions & 0 deletions client/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@ export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
export const SET_PROJECT = 'SET_PROJECT';
export const SET_PROJECTS = 'SET_PROJECTS';

export const SET_COLLECTIONS = 'SET_COLLECTIONS';
export const CREATE_COLLECTION = 'CREATE_COLLECTION';
export const UPDATE_COLLECTION = 'UPDATE_COLLECTION';
export const DELETE_COLLECTION = 'DELETE_COLLECTION';

export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION';
export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION';

export const DELETE_PROJECT = 'DELETE_PROJECT';

export const SET_SELECTED_FILE = 'SET_SELECTED_FILE';
Expand Down
163 changes: 163 additions & 0 deletions client/modules/IDE/actions/collections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import axios from 'axios';
import * as ActionTypes from '../../../constants';
import { startLoader, stopLoader } from './loader';

const __process = (typeof global !== 'undefined' ? global : window).process;
const ROOT_URL = __process.env.API_URL;

// eslint-disable-next-line
export function getCollections(username) {
return (dispatch) => {
dispatch(startLoader());
let url;
if (username) {
url = `${ROOT_URL}/${username}/collections`;
} else {
url = `${ROOT_URL}/collections`;
}
axios.get(url, { withCredentials: true })
.then((response) => {
dispatch({
type: ActionTypes.SET_COLLECTIONS,
collections: response.data
});
dispatch(stopLoader());
})
.catch((response) => {
dispatch({
type: ActionTypes.ERROR,
error: response.data
});
dispatch(stopLoader());
});
};
}

export function createCollection(collection) {
return (dispatch) => {
dispatch(startLoader());
const url = `${ROOT_URL}/collections`;
return axios.post(url, collection, { withCredentials: true })
.then((response) => {
dispatch({
type: ActionTypes.CREATE_COLLECTION
});
dispatch(stopLoader());

return response.data;
})
.catch((response) => {
dispatch({
type: ActionTypes.ERROR,
error: response.data
});
dispatch(stopLoader());

return response.data;
});
};
}

export function updateCollection({ id, metadata }) {
return (dispatch) => {
dispatch(startLoader());
const url = `${ROOT_URL}/collections/${id}`;
return axios.patch(url, metadata, { withCredentials: true })
.then((response) => {
dispatch({
type: ActionTypes.UPDATE_COLLECTION,
payload: response.data
});
dispatch(stopLoader());

return response.data;
})
.catch((response) => {
dispatch({
type: ActionTypes.ERROR,
error: response.data
});
dispatch(stopLoader());

return response.data;
});
};
}

export function deleteCollection(collectionId) {
return (dispatch) => {
dispatch(startLoader());
const url = `${ROOT_URL}/collections/${collectionId}`;
return axios.delete(url, { withCredentials: true })
.then((response) => {
dispatch({
type: ActionTypes.DELETE_COLLECTION,
collectionId
});
dispatch(stopLoader());

return response.data;
})
.catch((response) => {
dispatch({
type: ActionTypes.ERROR,
error: response.data
});
dispatch(stopLoader());

return response.data;
});
};
}

export function addToCollection(collectionId, projectId) {
return (dispatch) => {
dispatch(startLoader());
const url = `${ROOT_URL}/collections/${collectionId}/${projectId}`;
return axios.post(url, { withCredentials: true })
.then((response) => {
dispatch({
type: ActionTypes.ADD_TO_COLLECTION,
payload: response.data
});
dispatch(stopLoader());

return response.data;
})
.catch((response) => {
dispatch({
type: ActionTypes.ERROR,
error: response.data
});
dispatch(stopLoader());

return response.data;
});
};
}

export function removeFromCollection(collectionId, projectId) {
return (dispatch) => {
dispatch(startLoader());
const url = `${ROOT_URL}/collections/${collectionId}/${projectId}`;
return axios.delete(url, { withCredentials: true })
.then((response) => {
dispatch({
type: ActionTypes.REMOVE_FROM_COLLECTION,
payload: response.data
});
dispatch(stopLoader());

return response.data;
})
.catch((response) => {
dispatch({
type: ActionTypes.ERROR,
error: response.data
});
dispatch(stopLoader());

return response.data;
});
};
}
Loading