merge master

client/constants.js

@@ -6,12 +6,13 @@ export const STOP_SKETCH = 'STOP_SKETCH';
 
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
-export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
+export const SET_FONT_SIZE = 'SET_FONT_SIZE';
-export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
+
-export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
 export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
 export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
 export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
+export const SET_INDENTATION = 'SET_INDENTATION';
+
 export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
 export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
 
@@ -42,7 +43,19 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
+
 export const TOGGLE_BEEP = 'TOGGLE_BEEP';
 
+export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS';
+export const HIDE_FILE_OPTIONS = 'HIDE_FILE_OPTIONS';
+
+export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
+export const DELETE_FILE = 'DELETE_FILE';
+export const SHOW_EDIT_FILE_NAME = 'SHOW_EDIT_FILE_NAME';
+export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME';
+
+export const SET_AUTOSAVE = 'SET_AUTOSAVE';
+export const SET_PREFERENCES = 'SET_PREFERENCES';
+
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/files.js

@@ -112,3 +112,46 @@ export function createFile(formProps) {
     }
   };
 }
+
+export function showFileOptions(fileId) {
+  return {
+    type: ActionTypes.SHOW_FILE_OPTIONS,
+    id: fileId
+  };
+}
+
+export function hideFileOptions(fileId) {
+  return {
+    type: ActionTypes.HIDE_FILE_OPTIONS,
+    id: fileId
+  };
+}
+
+export function showEditFileName(id) {
+  return {
+    type: ActionTypes.SHOW_EDIT_FILE_NAME,
+    id
+  };
+}
+
+export function hideEditFileName(id) {
+  return {
+    type: ActionTypes.HIDE_EDIT_FILE_NAME,
+    id
+  };
+}
+
+export function updateFileName(id, name) {
+  return {
+    type: ActionTypes.UPDATE_FILE_NAME,
+    id,
+    name
+  };
+}
+
+export function deleteFile(id) {
+  return {
+    type: ActionTypes.DELETE_FILE,
+    id
+  };
+}

client/modules/IDE/actions/preferences.js

@@ -1,53 +1,102 @@
 import * as ActionTypes from '../../../constants';
+import axios from 'axios';
 
-export function increaseFont() {
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
-  return {
+
-    type: ActionTypes.INCREASE_FONTSIZE
+function updatePreferences(formParams, dispatch) {
+  axios.put(`${ROOT_URL}/preferences`, formParams, { withCredentials: true })
+    .then(() => {
+    })
+    .catch((response) => dispatch({
+      type: ActionTypes.ERROR,
+      error: response.data
+    }));
+}
+
+export function setFontSize(value) {
+  return (dispatch, getState) => { // eslint-disable-line
+    dispatch({
+      type: ActionTypes.SET_FONT_SIZE,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          fontSize: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 
-export function decreaseFont() {
+export function setIndentation(value) {
-  return {
+  return (dispatch, getState) => {
-    type: ActionTypes.DECREASE_FONTSIZE
+    dispatch({
-  };
+      type: ActionTypes.SET_INDENTATION,
-}
+      value
-
+    });
-export function updateFont(event) {
+    const state = getState();
-  const value = event.target.value;
+    if (state.user.authenticated) {
-  return {
+      const formParams = {
-    type: ActionTypes.UPDATE_FONTSIZE,
+        preferences: {
-    value
+          indentationAmount: value
-  };
+        }
-}
+      };
-
+      updatePreferences(formParams, dispatch);
-export function increaseIndentation() {
+    }
-  return {
-    type: ActionTypes.INCREASE_INDENTATION
-  };
-}
-
-export function decreaseIndentation() {
-  return {
-    type: ActionTypes.DECREASE_INDENTATION
-  };
-}
-
-export function updateIndentation(event) {
-  const value = event.target.value;
-  return {
-    type: ActionTypes.UPDATE_INDENTATION,
-    value
   };
 }
 
 export function indentWithTab() {
-  return {
+  return (dispatch, getState) => {
-    type: ActionTypes.INDENT_WITH_TAB
+    dispatch({
+      type: ActionTypes.INDENT_WITH_TAB
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          isTabIndent: true
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 
 export function indentWithSpace() {
-  return {
+  return (dispatch, getState) => {
-    type: ActionTypes.INDENT_WITH_SPACE
+    dispatch({
+      type: ActionTypes.INDENT_WITH_SPACE
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          isTabIndent: false
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
+export function setAutosave(value) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_AUTOSAVE,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autosave: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }

client/modules/IDE/components/Preferences.js

@@ -1,130 +1,161 @@
 import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
-import { bindActionCreators } from 'redux';
+// import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+// import { connect } from 'react-redux';
-import * as PreferencesActions from '../actions/preferences';
+// import * as PreferencesActions from '../actions/preferences';
 
 const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
 
-function Preferences(props) {
+class Preferences extends React.Component {
-  const preferencesContainerClass = classNames({
+  constructor(props) {
-    preferences: true,
+    super(props);
-    'preferences--selected': props.isVisible
+    this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
-  });
+  }
-  let preferencesTabOptionClass = classNames({
-    preference__option: true,
-    'preference__option--selected': props.isTabIndent
-  });
-  let preferencesSpaceOptionClass = classNames({
-    preference__option: true,
-    'preference__option--selected': !props.isTabIndent
-  });
-  return (
-    <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
-      <div className="preferences__heading">
-        <h2 className="preferences__title">Preferences</h2>
-        <button
-          className="preferences__exit-button"
-          onClick={props.closePreferences}
-          title="exit"
-          aria-label="exit preferences"
-        >
-          <InlineSVG src={exitUrl} alt="Exit Preferences" />
-        </button>
-      </div>
 
-      <div className="preference">
+  handleUpdateFont(event) {
-        <h4 className="preference__title">Text Size</h4>
+    this.props.setFontSize(parseInt(event.target.value, 10));
-        <button
+  }
-          className="preference__plus-button"
-          onClick={props.decreaseFont}
-          aria-label="decrease font size"
-        >
-          <InlineSVG src={minusUrl} alt="Decrease Font Size" />
-          <h6 className="preference__label">Decrease</h6>
-        </button>
-        <input
-          className="preference__value"
-          aria-live="status"
-          aria-live="polite"
-          role="status"
-          value={props.fontSize}
-          onChange={props.updateFont}
-        >
-        </input>
-        <button
-          className="preference__minus-button"
-          onClick={props.increaseFont}
-          aria-label="increase font size"
-        >
-          <InlineSVG src={plusUrl} alt="Increase Font Size" />
-          <h6 className="preference__label">Increase</h6>
-        </button>
-      </div>
 
-      <div className="preference">
+  handleUpdateIndentation(event) {
-        <h4 className="preference__title">Indentation Amount</h4>
+    this.props.setIndentation(parseInt(event.target.value, 10));
-        <button
+  }
-          className="preference__plus-button"
+
-          onClick={props.decreaseIndentation}
+  handleUpdateAutosave(event) {
-          aria-label="decrease indentation amount"
+    const value = event.target.value === 'true';
-        >
+    this.props.setAutosave(value);
-          <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
+  }
-          <h6 className="preference__label">Decrease</h6>
+
-        </button>
+  render() {
-        <input
+    const preferencesContainerClass = classNames({
-          className="preference__value"
+      preferences: true,
-          aria-live="status"
+      'preferences--selected': this.props.isVisible
-          aria-live="polite"
+    });
-          role="status"
+    let preferencesTabOptionClass = classNames({
-          value={props.indentationAmount}
+      preference__option: true,
-          onChange={props.updateIndentation}
+      'preference__option--selected': this.props.isTabIndent
-        >
+    });
-        </input>
+    let preferencesSpaceOptionClass = classNames({
-        <button
+      preference__option: true,
-          className="preference__minus-button"
+      'preference__option--selected': !this.props.isTabIndent
-          onClick={props.increaseIndentation}
+    });
-          aria-label="increase indentation amount"
+    let autosaveOnClass = classNames({
-        >
+      preference__option: true,
-          <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
+      'preference__option--selected': this.props.autosave
-          <h6 className="preference__label">Increase</h6>
+    });
-        </button>
+    let autosaveOffClass = classNames({
-        <div className="preference__vertical-list">
+      preference__option: true,
-          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
+      'preference__option--selected': !this.props.autosave
-          <button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
+    });
+    return (
+      <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
+        <div className="preferences__heading">
+          <h2 className="preferences__title">Preferences</h2>
+          <button
+            className="preferences__exit-button"
+            onClick={this.props.closePreferences}
+            title="exit"
+            aria-label="exit preferences"
+          >
+            <InlineSVG src={exitUrl} alt="Exit Preferences" />
+          </button>
         </div>
-      </div>
-    </section>
-  );
-}
 
-function mapStateToProps(state) {
+        <div className="preference">
-  return {
+          <h4 className="preference__title">Text Size</h4>
-    ...state.preferences
+          <button
-  };
+            className="preference__minus-button"
-}
+            onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
+            aria-label="decrease font size"
+          >
+            <InlineSVG src={minusUrl} alt="Decrease Font Size" />
+            <h6 className="preference__label">Decrease</h6>
+          </button>
+          <input
+            className="preference__value"
+            aria-live="status"
+            aria-live="polite"
+            role="status"
+            value={this.props.fontSize}
+            onChange={this.handleUpdateFont}
+          >
+          </input>
+          <button
+            className="preference__plus-button"
+            onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
+            aria-label="increase font size"
+          >
+            <InlineSVG src={plusUrl} alt="Increase Font Size" />
+            <h6 className="preference__label">Increase</h6>
+          </button>
+        </div>
 
-function mapDispatchToProps(dispatch) {
+        <div className="preference">
-  return bindActionCreators(PreferencesActions, dispatch);
+          <h4 className="preference__title">Indentation Amount</h4>
+          <button
+            className="preference__minus-button"
+            onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
+            aria-label="decrease indentation amount"
+          >
+            <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
+            <h6 className="preference__label">Decrease</h6>
+          </button>
+          <input
+            className="preference__value"
+            aria-live="status"
+            aria-live="polite"
+            role="status"
+            value={this.props.indentationAmount}
+            onChange={this.handleUpdateIndentation}
+          >
+          </input>
+          <button
+            className="preference__plus-button"
+            onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
+            aria-label="increase indentation amount"
+          >
+            <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
+            <h6 className="preference__label">Increase</h6>
+          </button>
+          <div className="preference__vertical-list">
+            <button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
+            <button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
+          </div>
+        </div>
+        <div className="preference">
+          <h4 className="preference__title">Autosave</h4>
+          <div className="preference__options">
+            <button
+              className={autosaveOnClass}
+              onClick={() => this.props.setAutosave(true)}
+              aria-label="autosave on"
+            >On</button>
+            <button
+              className={autosaveOffClass}
+              onClick={() => this.props.setAutosave(false)}
+              aria-label="autosave off"
+            >Off</button>
+          </div>
+        </div>
+      </section>
+    );
+  }
 }
 
 Preferences.propTypes = {
   isVisible: PropTypes.bool.isRequired,
   closePreferences: PropTypes.func.isRequired,
-  decreaseFont: PropTypes.func.isRequired,
-  updateFont: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
-  increaseFont: PropTypes.func.isRequired,
   indentationAmount: PropTypes.number.isRequired,
-  decreaseIndentation: PropTypes.func.isRequired,
+  setIndentation: PropTypes.func.isRequired,
-  increaseIndentation: PropTypes.func.isRequired,
-  updateIndentation: PropTypes.func.isRequired,
   indentWithSpace: PropTypes.func.isRequired,
   indentWithTab: PropTypes.func.isRequired,
-  isTabIndent: PropTypes.bool.isRequired
+  isTabIndent: PropTypes.bool.isRequired,
+  setFontSize: PropTypes.func.isRequired,
+  autosave: PropTypes.bool.isRequired,
+  setAutosave: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Preferences);
+export default Preferences;

client/modules/IDE/components/Sidebar.js

@@ -1,71 +1,89 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
+import SidebarItem from './SidebarItem';
 const rightArrowUrl = require('../../../images/right-arrow.svg');
 const leftArrowUrl = require('../../../images/left-arrow.svg');
 
-function Sidebar(props) {
+class Sidebar extends React.Component {
-  const sidebarClass = classNames({
+  constructor(props) {
-    sidebar: true,
+    super(props);
-    'sidebar--contracted': !props.isExpanded
+    this.resetSelectedFile = this.resetSelectedFile.bind(this);
-  });
+  }
 
-  return (
+  resetSelectedFile() {
-    <nav className={sidebarClass} title="file-navigation" role="navigation">
+    this.props.setSelectedFile(this.props.files[0].id);
-      <div className="sidebar__header">
+  }
-        <h3 className="sidebar__title">Sketch Files</h3>
+
-        <div className="sidebar__icons">
+  render() {
-          <button
+    const sidebarClass = classNames({
-            aria-label="add file"
+      sidebar: true,
-            className="sidebar__add"
+      'sidebar--contracted': !this.props.isExpanded
-            onClick={props.newFile}
+    });
-          >
+
-            +
+    return (
-          </button>
+      <nav className={sidebarClass} title="file-navigation" role="navigation">
-          <button
+        <div className="sidebar__header">
-            aria-label="collapse file navigation"
+          <h3 className="sidebar__title">Sketch Files</h3>
-            className="sidebar__contract"
+          <div className="sidebar__icons">
-            onClick={props.collapseSidebar}
+            <button
-          >
+              aria-label="add file"
-            <InlineSVG src={leftArrowUrl} />
+              className="sidebar__add"
-          </button>
+              onClick={this.props.newFile}
-          <button
-            aria-label="expand file navigation"
-            className="sidebar__expand"
-            onClick={props.expandSidebar}
-          >
-            <InlineSVG src={rightArrowUrl} />
-          </button>
-        </div>
-      </div>
-      <ul className="sidebar__file-list">
-        {props.files.map(file => {
-          let itemClass = classNames({
-            'sidebar__file-item': true,
-            'sidebar__file-item--selected': file.id === props.selectedFile.id
-          });
-          return (
-            <li
-              className={itemClass}
-              key={file.id}
             >
-              <a
+              +
-                onClick={() => props.setSelectedFile(file.id)}
+            </button>
-              >{file.name}</a>
+            <button
-            </li>
+              aria-label="collapse file navigation"
-          );
+              className="sidebar__contract"
-        })}
+              onClick={this.props.collapseSidebar}
-      </ul>
+            >
-    </nav>
+              <InlineSVG src={leftArrowUrl} />
-  );
+            </button>
+            <button
+              aria-label="expand file navigation"
+              className="sidebar__expand"
+              onClick={this.props.expandSidebar}
+            >
+              <InlineSVG src={rightArrowUrl} />
+            </button>
+          </div>
+        </div>
+        <ul className="sidebar__file-list">
+          {this.props.files.map((file, fileIndex) =>
+            <SidebarItem
+              key={file.id}
+              file={file}
+              setSelectedFile={this.props.setSelectedFile}
+              fileIndex={fileIndex}
+              showFileOptions={this.props.showFileOptions}
+              hideFileOptions={this.props.hideFileOptions}
+              deleteFile={this.props.deleteFile}
+              resetSelectedFile={this.resetSelectedFile}
+              showEditFileName={this.props.showEditFileName}
+              hideEditFileName={this.props.hideEditFileName}
+              updateFileName={this.props.updateFileName}
+            />
+          )}
+        </ul>
+      </nav>
+    );
+  }
 }
 
 Sidebar.propTypes = {
   files: PropTypes.array.isRequired,
-  selectedFile: PropTypes.shape({
+  setSelectedFile: PropTypes.func.isRequired,
-    id: PropTypes.string.isRequired
+  isExpanded: PropTypes.bool.isRequired,
-  }),
+  newFile: PropTypes.func.isRequired,
-  setSelectedFile: PropTypes.func.isRequired
+  collapseSidebar: PropTypes.func.isRequired,
+  expandSidebar: PropTypes.func.isRequired,
+  showFileOptions: PropTypes.func.isRequired,
+  hideFileOptions: PropTypes.func.isRequired,
+  deleteFile: PropTypes.func.isRequired,
+  showEditFileName: PropTypes.func.isRequired,
+  hideEditFileName: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired
 };
 
 export default Sidebar;

client/modules/IDE/components/SidebarItem.js

@@ -0,0 +1,118 @@
+import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+import classNames from 'classnames';
+const downArrowUrl = require('../../../images/down-arrow.svg');
+
+class SidebarItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleFileNameChange = this.handleFileNameChange.bind(this);
+    this.validateFileName = this.validateFileName.bind(this);
+  }
+
+  handleFileNameChange(event) {
+    this.props.updateFileName(this.props.file.id, event.target.value);
+  }
+
+  handleKeyPress(event) {
+    console.log(event.key);
+    if (event.key === 'Enter') {
+      this.props.hideEditFileName(this.props.file.id);
+    }
+  }
+
+  validateFileName() {
+    if (!this.props.file.name.match(/.*\.(js|css|html|json)$/)) {
+      this.props.updateFileName(this.props.file.id, this.originalFileName);
+    }
+  }
+
+  render() {
+    let itemClass = classNames({
+      'sidebar__file-item': true,
+      'sidebar__file-item--selected': this.props.file.isSelected,
+      'sidebar__file-item--open': this.props.file.isOptionsOpen,
+      'sidebar__file-item--editing': this.props.file.isEditingName
+    });
+
+    return (
+      <li
+        className={itemClass}
+        onBlur={() => this.props.hideFileOptions(this.props.file.id)}
+        tabIndex={this.props.fileIndex}
+      >
+        <a
+          className="sidebar__file-item-name"
+          onClick={() => this.props.setSelectedFile(this.props.file.id)}
+        >{this.props.file.name}</a>
+        <input
+          type="text"
+          className="sidebar__file-item-input"
+          value={this.props.file.name}
+          onChange={this.handleFileNameChange}
+          ref="fileNameInput"
+          onBlur={() => {
+            this.validateFileName();
+            this.props.hideEditFileName(this.props.file.id);
+          }}
+          onKeyPress={this.handleKeyPress}
+        />
+        <a
+          className="sidebar__file-item-show-options"
+          onClick={() => this.props.showFileOptions(this.props.file.id)}
+        >
+          <InlineSVG src={downArrowUrl} />
+        </a>
+        <div ref="fileOptions" className="sidebar__file-item-options">
+          <ul>
+            <li>
+              <a
+                onClick={() => {
+                  this.originalFileName = this.props.file.name;
+                  this.props.showEditFileName(this.props.file.id);
+                  setTimeout(() => this.refs.fileNameInput.focus(), 0);
+                }}
+              >
+                Rename
+              </a>
+            </li>
+            <li>
+              <a
+                onClick={() => {
+                  if (window.confirm(`Are you sure you want to delete ${this.props.file.name}?`)) {
+                    this.props.deleteFile(this.props.file.id);
+                    this.props.resetSelectedFile();
+                  }
+                }}
+              >
+                Delete
+              </a>
+            </li>
+          </ul>
+        </div>
+      </li>
+    );
+  }
+}
+
+SidebarItem.propTypes = {
+  file: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    isSelected: PropTypes.bool,
+    isOptionsOpen: PropTypes.bool,
+    isEditingName: PropTypes.bool
+  }).isRequired,
+  setSelectedFile: PropTypes.func.isRequired,
+  fileIndex: PropTypes.number.isRequired,
+  showFileOptions: PropTypes.func.isRequired,
+  hideFileOptions: PropTypes.func.isRequired,
+  deleteFile: PropTypes.func.isRequired,
+  resetSelectedFile: PropTypes.func.isRequired,
+  showEditFileName: PropTypes.func.isRequired,
+  hideEditFileName: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired
+};
+
+export default SidebarItem;

client/modules/IDE/pages/IDEView.js

@@ -13,16 +13,46 @@ import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
 import * as EditorHiddenActions from '../actions/editorHidden';
-import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
+import * as PreferencesActions from '../actions/preferences';
+import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
 
 class IDEView extends React.Component {
   componentDidMount() {
     if (this.props.params.project_id) {
       const id = this.props.params.project_id;
       this.props.getProject(id);
+
+      // if autosave is on and the user is the owner of the project
+      if (this.props.preferences.autosave
+        && this.props.project.owner
+        && this.props.project.owner.id === this.props.user.id) {
+        this.autosaveInterval = setInterval(this.props.saveProject, 30000);
+      }
     }
   }
 
+  componentDidUpdate(prevProps) {
+    // if user is the owner of the project
+    if (this.props.project.owner && this.props.project.owner.id === this.props.user.id) {
+      // if the user turns on autosave
+      // or the user saves the project for the first time
+      if (!this.autosaveInterval &&
+        ((this.props.preferences.autosave && !prevProps.preferences.autosave) ||
+        (this.props.project.id && !prevProps.project.id))) {
+        this.autosaveInterval = setInterval(this.props.saveProject, 30000);
+      // if user turns off autosave preference
+      } else if (this.autosaveInterval && !this.props.preferences.autosave && prevProps.preferences.autosave) {
+        clearInterval(this.autosaveInterval);
+        this.autosaveInterval = null;
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.autosaveInterval);
+    this.autosaveInterval = null;
+  }
+
   render() {
     return (
       <div className="ide">
@@ -47,16 +77,30 @@ class IDEView extends React.Component {
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
           closePreferences={this.props.closePreferences}
+          fontSize={this.props.preferences.fontSize}
+          indentationAmount={this.props.preferences.indentationAmount}
+          setIndentation={this.props.setIndentation}
+          indentWithSpace={this.props.indentWithSpace}
+          indentWithTab={this.props.indentWithTab}
+          isTabIndent={this.props.preferences.isTabIndent}
+          setFontSize={this.props.setFontSize}
+          autosave={this.props.preferences.autosave}
+          setAutosave={this.props.setAutosave}
         />
         <div className="editor-preview-container">
           <Sidebar
             files={this.props.files}
-            selectedFile={this.props.selectedFile}
             setSelectedFile={this.props.setSelectedFile}
             newFile={this.props.newFile}
             isExpanded={this.props.ide.sidebarIsExpanded}
             expandSidebar={this.props.expandSidebar}
             collapseSidebar={this.props.collapseSidebar}
+            showFileOptions={this.props.showFileOptions}
+            hideFileOptions={this.props.hideFileOptions}
+            deleteFile={this.props.deleteFile}
+            showEditFileName={this.props.showEditFileName}
+            hideEditFileName={this.props.hideEditFileName}
+            updateFileName={this.props.updateFileName}
           />
           <div className="editor-console-container">
             <div className="editor-linenumber" aria-live="assertive" id="editor-linenumber"></div>
@@ -115,7 +159,8 @@ IDEView.propTypes = {
   }),
   getProject: PropTypes.func.isRequired,
   user: PropTypes.shape({
-    authenticated: PropTypes.bool.isRequired
+    authenticated: PropTypes.bool.isRequired,
+    id: PropTypes.string
   }).isRequired,
   createProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
@@ -130,9 +175,11 @@ IDEView.propTypes = {
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   project: PropTypes.shape({
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     owner: PropTypes.shape({
-      username: PropTypes.string
+      username: PropTypes.string,
+      id: PropTypes.string
     })
   }).isRequired,
   setProjectName: PropTypes.func.isRequired,
@@ -144,9 +191,15 @@ IDEView.propTypes = {
   preferences: PropTypes.shape({
     fontSize: PropTypes.number.isRequired,
     indentationAmount: PropTypes.number.isRequired,
-    isTabIndent: PropTypes.bool.isRequired
+    isTabIndent: PropTypes.bool.isRequired,
+    autosave: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
+  setFontSize: PropTypes.func.isRequired,
+  setIndentation: PropTypes.func.isRequired,
+  indentWithTab: PropTypes.func.isRequired,
+  indentWithSpace: PropTypes.func.isRequired,
+  setAutosave: PropTypes.func.isRequired,
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
@@ -166,11 +219,17 @@ IDEView.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   collapseConsole: PropTypes.func.isRequired,
+  showFileOptions: PropTypes.func.isRequired,
+  hideFileOptions: PropTypes.func.isRequired,
+  deleteFile: PropTypes.func.isRequired,
+  showEditFileName: PropTypes.func.isRequired,
+  hideEditFileName: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
   return {
-    files: state.files,
+    files: setSelectedFile(state.files, state.ide.selectedFile),
     selectedFile: getFile(state.files, state.ide.selectedFile),
     htmlFile: getHTMLFile(state.files),
     jsFiles: getJSFiles(state.files),
@@ -188,7 +247,8 @@ function mapDispatchToProps(dispatch) {
     EditorHiddenActions,
     FileActions,
     ProjectActions,
-    IDEActions),
+    IDEActions,
+    PreferencesActions),
   dispatch);
 }
 

client/modules/IDE/reducers/files.js

@@ -73,11 +73,61 @@ const files = (state = initialState, action) => {
       return [...action.files];
     case ActionTypes.CREATE_FILE:
       return [...state, { name: action.name, id: action.id, content: '', url: action.url }];
+    case ActionTypes.SHOW_FILE_OPTIONS:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { isOptionsOpen: true });
+      });
+    case ActionTypes.HIDE_FILE_OPTIONS:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { isOptionsOpen: false });
+      });
+    case ActionTypes.UPDATE_FILE_NAME:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { name: action.name });
+      });
+    case ActionTypes.DELETE_FILE:
+      return state.filter(file => file.id !== action.id);
+    case ActionTypes.SHOW_EDIT_FILE_NAME:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { isEditingName: true });
+      });
+    case ActionTypes.HIDE_EDIT_FILE_NAME:
+      return state.map(file => {
+        if (file.id !== action.id) {
+          return file;
+        }
+
+        return Object.assign({}, file, { isEditingName: false });
+      });
     default:
       return state;
   }
 };
 
+export const setSelectedFile = (state, id) =>
+  state.map(file => {
+    if (file.id === id) {
+      return Object.assign({}, file, { isSelected: true });
+    }
+    return file;
+  });
+
 export const getFile = (state, id) => state.filter(file => file.id === id)[0];
 export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/))[0];
 export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/));

client/modules/IDE/reducers/preferences.js

@@ -3,35 +3,16 @@ import * as ActionTypes from '../../../constants';
 const initialState = {
   fontSize: 18,
   indentationAmount: 2,
-  isTabIndent: true
+  isTabIndent: true,
+  autosave: true
 };
 
 const preferences = (state = initialState, action) => {
   switch (action.type) {
-    case ActionTypes.INCREASE_FONTSIZE:
+    case ActionTypes.SET_FONT_SIZE:
-      return Object.assign({}, state, {
+      return Object.assign({}, state, { fontSize: action.value });
-        fontSize: state.fontSize + 2
+    case ActionTypes.SET_INDENTATION:
-      });
+      return Object.assign({}, state, { indentationAmount: action.value });
-    case ActionTypes.DECREASE_FONTSIZE:
-      return Object.assign({}, state, {
-        fontSize: state.fontSize - 2
-      });
-    case ActionTypes.UPDATE_FONTSIZE:
-      return Object.assign({}, state, {
-        fontSize: parseInt(action.value, 10)
-      });
-    case ActionTypes.INCREASE_INDENTATION:
-      return Object.assign({}, state, {
-        indentationAmount: state.indentationAmount + 2
-      });
-    case ActionTypes.DECREASE_INDENTATION:
-      return Object.assign({}, state, {
-        indentationAmount: state.indentationAmount - 2
-      });
-    case ActionTypes.UPDATE_INDENTATION:
-      return Object.assign({}, state, {
-        indentationAmount: parseInt(action.value, 10)
-      });
     case ActionTypes.INDENT_WITH_TAB:
       return Object.assign({}, state, {
         isTabIndent: true
@@ -40,6 +21,10 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, {
         isTabIndent: false
       });
+    case ActionTypes.SET_AUTOSAVE:
+      return Object.assign({}, state, { autosave: action.value });
+    case ActionTypes.SET_PREFERENCES:
+      return action.preferences;
     default:
       return state;
   }

client/modules/Sketch/pages/SketchListView.js

@@ -19,16 +19,20 @@ class SketchListView extends React.Component {
           user={this.props.user}
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
+          exportProjectAsZip={this.props.exportProjectAsZip}
+          cloneProject={this.props.cloneProject}
         />
         <table className="sketches-table" summary="table containing all saved projects">
           <thead>
-            <th scope="col">Name</th>
+            <tr>
-            <th scope="col">Created</th>
+              <th scope="col">Name</th>
-            <th scope="col">Last Updated</th>
+              <th scope="col">Created</th>
+              <th scope="col">Last Updated</th>
+            </tr>
           </thead>
           <tbody>
             {this.props.sketches.map(sketch =>
-              <tr className="sketches-table__row">
+              <tr className="sketches-table__row" key={sketch.id}>
                 <td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
                 <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
                 <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
@@ -46,7 +50,9 @@ SketchListView.propTypes = {
   createProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   getProjects: PropTypes.func.isRequired,
-  sketches: PropTypes.array.isRequired
+  sketches: PropTypes.array.isRequired,
+  exportProjectAsZip: PropTypes.func.isRequired,
+  cloneProject: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/User/actions.js

@@ -46,7 +46,13 @@ export function getUser() {
           type: ActionTypes.AUTH_USER,
           user: response.data
         });
+        dispatch({
+          type: ActionTypes.SET_PREFERENCES,
+          preferences: response.data.preferences
+        });
       })
-      .catch(response => dispatch(authError(response.data.error)));
+      .catch(response => {
+        dispatch(authError(response.data.error));
+      });
   };
 }

client/styles/abstracts/_placeholders.scss

@@ -95,7 +95,7 @@
 %preference-option {
 	background-color: $light-button-background-color;
 	color: $light-inactive-text-color;
-	font-size: #{14 / $base-font-size}rem;
+	font-size: #{12 / $base-font-size}rem;
 	cursor: pointer;
 	text-align: left;
 	margin-bottom: #{5 / $base-font-size}rem;

client/styles/components/_preferences.scss

@@ -61,6 +61,7 @@
 	margin: 0;
 	line-height: #{20 / $base-font-size}rem;
 	color: $light-inactive-text-color;
+	font-size: #{9 / $base-font-size}rem;
 	&:hover {
 		color: $light-inactive-text-color;
 	}
@@ -69,13 +70,22 @@
 .preference__vertical-list {
 	display: flex;
 	flex-direction: column;
+	width: #{90 / $base-font-size}rem;
+	padding-left: #{28 / $base-font-size}rem;
 }
 
 .preference__option {
 	@extend %preference-option;
 	list-style-type: none;
-	padding-left: #{28 / $base-font-size}rem;
+	padding: 0;
 	&--selected {
 		@extend %preference-option--selected;
 	}
 }
+
+.preference__options {
+	display: flex;
+	justify-content: space-between;
+	width: #{70 / $base-font-size}rem;
+}
+

client/styles/components/_sidebar.scss

@@ -38,11 +38,54 @@
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
   &--selected {
     background-color: $ide-border-color;
   }
 }
 
+.sidebar__file-item-name {
+  .sidebar__file-item--editing & {
+    display: none;
+  }
+}
+
+.sidebar__file-item-show-options {
+  @extend %icon;
+  display: none;
+  .sidebar__file-item--selected & {
+    display: inline-block;
+  }
+}
+
+.sidebar__file-item-options {
+  @extend %modal;
+  position: absolute;
+  top: 95%;
+  left: 77%;
+  display: none;
+  z-index: 100;
+  padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+  background-color: $light-modal-background-color;
+  z-index: 100;
+  .sidebar__file-item--open & {
+    display: block;
+  }
+}
+
+.sidebar__file-item-input {
+  display: none;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  max-width: 90%;
+  .sidebar__file-item--editing & {
+    display: inline-block;
+  }
+}
+
 .sidebar__contract {
   @extend %icon;
   height: #{14 / $base-font-size}rem;

client/styles/layout/_ide.scss

@@ -16,10 +16,15 @@
   max-width: 45%;
   height: 100%;
   position: relative;
+
+  // temporary fix for safari
+  min-height: 75vh;
 }
 
 .editor-holder {
 	height: 100%;
+  width: 100%;
+  position: absolute;
 }
 
 .preview-frame {

server/controllers/project.controller.js

@@ -46,7 +46,7 @@ export function getProjects(req, res) {
   if (req.user) {
     Project.find({user: req.user._id}) // eslint-disable-line no-underscore-dangle
       .sort('-createdAt')
-      .select('name files _id createdAt updatedAt')
+      .select('name files id createdAt updatedAt')
       .exec((err, projects) => {
         res.json(projects);
       });

server/controllers/session.controller.js

@@ -11,7 +11,9 @@ export function createSession(req, res, next) {
       if (innerErr) { return next(innerErr); }
       return res.json({
         email: req.user.email,
-        username: req.user.username
+        username: req.user.username,
+        preferences: req.user.preferences,
+        id: req.user._id
       });
     });
   })(req, res, next);
@@ -21,7 +23,9 @@ export function getSession(req, res) {
   if (req.user) {
     return res.json({
       email: req.user.email,
-      username: req.user.username
+      username: req.user.username,
+      preferences: req.user.preferences,
+      id: req.user._id
     });
   }
   return res.status(404).send({ message: 'Session does not exist' });

server/controllers/user.controller.js

@@ -22,9 +22,33 @@ export function createUser(req, res, next) {
           }
           res.json({
             email: req.user.email,
-            username: req.user.username
+            username: req.user.username,
+            preferences: req.user.preferences,
+            id: req.user._id
           });
         });
       });
     });
 }
+
+export function updatePreferences(req, res) {
+  User.findById(req.user.id, (err, user) => {
+    if (err) {
+      return res.status(500).json({error: err});
+    }
+    if (!user){
+      return res.status(404).json({error: 'Document not found'});
+    }
+
+    const preferences = Object.assign({}, user.preferences, req.body.preferences);
+    user.preferences = preferences;
+
+    user.save((err) => {
+      if (err) {
+        return res.status(500).json({error: err});
+      }
+
+      return res.json(user.preferences);
+    });
+  })
+}

server/models/user.js

@@ -9,7 +9,12 @@ const userSchema = new Schema({
   github: { type: String },
   email: { type: String, unique: true },
   tokens: Array,
-  admin: { type: Boolean, default: false }
+  preferences: {
+    fontSize: { type: Number, default: 18 },
+    indentationAmount: { type: Number, default: 2 },
+    isTabIndent: { type: Boolean, default: false },
+    autosave: { type: Boolean, default: true }
+  }
 }, { timestamps: true });
 
 /**
@@ -28,6 +33,15 @@ userSchema.pre('save', function checkPassword(next) { // eslint-disable-line con
   });
 });
 
+userSchema.virtual('id').get(function(){
+    return this._id.toHexString();
+});
+
+userSchema.set('toJSON', {
+    virtuals: true
+});
+
+
 /**
  * Helper method for validating user's password.
  */

server/routes/user.routes.js

@@ -4,4 +4,6 @@ const router = new Router();
 
 router.route('/signup').post(UserController.createUser);
 
+router.route('/preferences').put(UserController.updatePreferences);
+
 export default router;