merge master

Author: catarak

.babelrc

@@ -45,6 +45,11 @@
         "@babel/preset-env",
         "@babel/preset-react"
       ]
+    },
+    "development": {
+      "plugins": [
+        "react-hot-loader/babel"
+      ]
     }
   },
   "plugins": [

README.md

@@ -1,6 +1,8 @@
 # [p5.js Web Editor](https://editor.p5js.org)
 
-Hello! The p5.js Web Editor is an in-browser editor for creative coding, specifically for writing [p5.js](https://p5js.org/) sketches. p5.js, a separate [open source project](https://github.com/processing/p5.js), is a JavaScript library with the goal of making coding accessible for artists, designers, educators, and beginners. The web editor shares the same spirit as p5.js–it is designed with the beginner in mind. When using the web editor, you don't need to download or configure anything, you can simply open the website, and start writing code. You can also host your work online and share it with others. 
+The p5.js Web Editor is a platform for creative coding, with a focus on making coding accessible for as many people as possible, including artists, designers, educators, beginners, and anyone who wants to learn. Simply by opening the website you can get started writing p5.js sketches without downloading or configuring anything. The editor is designed with simplicity in mind by limiting features and frills. We strive to listen to the community to drive the editor’s development, and to be intentional with every change. The editor is free and open-source.
+
+We also strive to give the community as much ownership and control as possible. You can download your sketches so that you can edit them locally or host them elsewhere. You can also host your own version of the editor, giving you control over its data.
 
 The p5.js Web Editor is currently in active development, and looking for contributions of any type! Please check out the [contribution guide](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) for more details.
 

client/components/Nav.jsx

@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
+import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
 import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
@@ -93,8 +94,12 @@ class Nav extends React.PureComponent {
 
   handleNew() {
     if (!this.props.unsavedChanges) {
+      this.props.showToast(1500);
+      this.props.setToastText('Opened new sketch.');
       this.props.newProject();
     } else if (this.props.warnIfUnsavedChanges()) {
+      this.props.showToast(1500);
+      this.props.setToastText('Opened new sketch.');
       this.props.newProject();
     }
     this.setDropdown('none');
@@ -682,6 +687,8 @@ class Nav extends React.PureComponent {
 
 Nav.propTypes = {
   newProject: PropTypes.func.isRequired,
+  showToast: PropTypes.func.isRequired,
+  setToastText: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   autosaveProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
@@ -738,6 +745,7 @@ function mapStateToProps(state) {
 const mapDispatchToProps = {
   ...IDEActions,
   ...projectActions,
+  ...toastActions,
   logoutUser,
   setAllAccessibleOutput
 };

client/constants.js

@@ -12,6 +12,7 @@ export const STOP_ACCESSIBLE_OUTPUT = 'STOP_ACCESSIBLE_OUTPUT';
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
 export const SET_FONT_SIZE = 'SET_FONT_SIZE';
+export const SET_LINE_NUMBERS = 'SET_LINE_NUMBERS';
 
 export const AUTH_USER = 'AUTH_USER';
 export const UNAUTH_USER = 'UNAUTH_USER';
@@ -124,6 +125,9 @@ export const SET_ASSETS = 'SET_ASSETS';
 
 export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
 export const SET_SORTING = 'SET_SORTING';
+export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
+export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
+export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
 export const START_LOADING = 'START_LOADING';
 export const STOP_LOADING = 'STOP_LOADING';

client/images/magnifyingglass.svg

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { hot } from 'react-hot-loader';
+import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import configureStore from './store';
@@ -22,7 +22,7 @@ const App = () => (
   </Provider>
 );
 
-const HotApp = hot(module)(App);
+const HotApp = hot(App);
 
 render(
   <HotApp />,

client/index.jsx

@@ -1,26 +1,32 @@
 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;
 
-function setAssets(assets) {
+function setAssets(assets, totalSize) {
   return {
     type: ActionTypes.SET_ASSETS,
-    assets
+    assets,
+    totalSize
   };
 }
 
 export function getAssets() {
-  return (dispatch, getState) => {
+  return (dispatch) => {
+    dispatch(startLoader());
     axios.get(`${ROOT_URL}/S3/objects`, { withCredentials: true })
       .then((response) => {
-        dispatch(setAssets(response.data.assets));
+        dispatch(setAssets(response.data.assets, response.data.totalSize));
+        dispatch(stopLoader());
       })
-      .catch(response => dispatch({
-        type: ActionTypes.ERROR
-      }));
+      .catch(() => {
+        dispatch({
+          type: ActionTypes.ERROR
+        });
+        dispatch(stopLoader());
+      });
   };
 }
 

client/modules/IDE/actions/assets.js

@@ -32,6 +32,24 @@ export function setFontSize(value) {
   };
 }
 
+export function setLineNumbers(value) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_LINE_NUMBERS,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          lineNumbers: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
 export function setAutosave(value) {
   return (dispatch, getState) => {
     dispatch({

client/modules/IDE/actions/preferences.js

@@ -25,3 +25,14 @@ export function toggleDirectionForField(field) {
     field
   };
 }
+
+export function setSearchTerm(searchTerm) {
+  return {
+    type: ActionTypes.SET_SEARCH_TERM,
+    query: searchTerm
+  };
+}
+
+export function resetSearchTerm() {
+  return setSearchTerm('');
+}

client/modules/IDE/actions/sorting.js

@@ -4,12 +4,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
 import { Helmet } from 'react-helmet';
-
 import prettyBytes from 'pretty-bytes';
 
+import Loader from '../../App/components/loader';
 import * as AssetActions from '../actions/assets';
 
-
 class AssetList extends React.Component {
   constructor(props) {
     super(props);
@@ -23,17 +22,37 @@ class AssetList extends React.Component {
     return `p5.js Web Editor | ${this.props.username}'s assets`;
   }
 
+  hasAssets() {
+    return !this.props.loading && this.props.assetList.length > 0;
+  }
+
+  renderLoader() {
+    if (this.props.loading) return <Loader />;
+    return null;
+  }
+
+  renderEmptyTable() {
+    if (!this.props.loading && this.props.assetList.length === 0) {
+      return (<p className="asset-table__empty">No uploaded assets.</p>);
+    }
+    return null;
+  }
+
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+    const { assetList, totalSize } = this.props;
     return (
       <div className="asset-table-container">
+        {/* Eventually, this copy should be Total / 250 MB Used */}
+        {this.hasAssets() &&
+          <p className="asset-table__total">{`${prettyBytes(totalSize)} Total`}</p>
+        }
         <Helmet>
           <title>{this.getAssetsTitle()}</title>
         </Helmet>
-        {this.props.assets.length === 0 &&
-          <p className="asset-table__empty">No uploaded assets.</p>
-        }
-        {this.props.assets.length > 0 &&
+        {this.renderLoader()}
+        {this.renderEmptyTable()}
+        {this.hasAssets() &&
           <table className="asset-table">
             <thead>
               <tr>
@@ -44,7 +63,7 @@ class AssetList extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {this.props.assets.map(asset =>
+              {assetList.map(asset =>
                 (
                   <tr className="asset-table__row" key={asset.key}>
                     <td>{asset.name}</td>
@@ -65,20 +84,24 @@ AssetList.propTypes = {
     username: PropTypes.string
   }).isRequired,
   username: PropTypes.string.isRequired,
-  assets: PropTypes.arrayOf(PropTypes.shape({
+  assetList: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
     sketchName: PropTypes.string.isRequired,
     sketchId: PropTypes.string.isRequired
   })).isRequired,
+  totalSize: PropTypes.number.isRequired,
   getAssets: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired
 };
 
 function mapStateToProps(state) {
   return {
     user: state.user,
-    assets: state.assets
+    assetList: state.assets.list,
+    totalSize: state.assets.totalSize,
+    loading: state.loading
   };
 }