Merge pull request #1401 from ajgreenb/instructions-ui-polish

Follow-up polish for Instructions editor UX

Author: outoftime

src/actions/projects.js

@@ -21,6 +21,7 @@ export const updateProjectSource = createAction(
 export const updateProjectInstructions = createAction(
   'UPDATE_PROJECT_INSTRUCTIONS',
   (projectKey, newValue) => ({projectKey, newValue}),
+  (_projectKey, _newValue, timestamp = Date.now()) => ({timestamp}),
 );
 
 export const toggleLibrary = createAction(

src/components/InstructionsEditor.jsx

@@ -9,6 +9,12 @@ export default class InstructionsEditor extends React.Component {
     bindAll(this, '_handleCancelEditing', '_handleSaveChanges', '_ref');
   }
 
+  componentDidMount() {
+    if (!this.props.instructions) {
+      this._editor.focus();
+    }
+  }
+
   _handleCancelEditing() {
     this.props.onCancelEditing();
   }
@@ -43,6 +49,7 @@ export default class InstructionsEditor extends React.Component {
           <textarea
             className="instructions-editor__input"
             defaultValue={this.props.instructions}
+            placeholder="Type here..."
             ref={this._ref}
           />
         </div>

src/components/TopBar/LibraryPicker.jsx

@@ -13,15 +13,15 @@ const LibraryPicker = createMenu({
 
   renderItems({enabledLibraries, onToggleLibrary}) {
     return map(libraries, (library, key) => {
-      const isEnabled = enabledLibraries.includes(key);
+      const isActive = enabledLibraries.includes(key);
 
       return (
         <MenuItem
-          isEnabled={isEnabled}
+          isActive={isActive}
           key={key}
           onClick={partial(onToggleLibrary, key)}
         >
-          <span className={classnames('u__icon', {u__invisible: !isEnabled})}>
+          <span className={classnames('u__icon', {u__invisible: !isActive})}>
             &#xf00c;{' '}
           </span>
           {library.name}

src/components/TopBar/ProjectPicker.jsx

@@ -20,7 +20,7 @@ const ProjectPicker = createMenu({
   renderItems({currentProjectKey, projectKeys, onChangeCurrentProject}) {
     return map(projectKeys, projectKey => (
       <MenuItem
-        isEnabled={projectKey === currentProjectKey}
+        isActive={projectKey === currentProjectKey}
         key={projectKey}
         onClick={partial(onChangeCurrentProject, projectKey)}
       >

src/components/TopBar/createMenu.jsx

@@ -12,11 +12,11 @@ import React from 'react';
 import {closeTopBarMenu, toggleTopBarMenu} from '../../actions';
 import {getOpenTopBarMenu} from '../../selectors';
 
-export function MenuItem({children, isDisabled, isEnabled, onClick}) {
+export function MenuItem({children, isActive, isDisabled, onClick}) {
   return (
     <div
       className={classnames('top-bar__menu-item', {
-        'top-bar__menu-item_active': isEnabled,
+        'top-bar__menu-item_active': isActive,
         'top-bar__menu-item_disabled': isDisabled,
       })}
       onClick={isDisabled ? noop : onClick}
@@ -28,14 +28,14 @@ export function MenuItem({children, isDisabled, isEnabled, onClick}) {
 
 MenuItem.propTypes = {
   children: PropTypes.node.isRequired,
+  isActive: PropTypes.bool,
   isDisabled: PropTypes.bool,
-  isEnabled: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 };
 
 MenuItem.defaultProps = {
+  isActive: false,
   isDisabled: false,
-  isEnabled: false,
 };
 
 export default function createMenu({

src/css/application.css

@@ -376,6 +376,7 @@ body {
   height: 100%;
   padding: 0.5rem;
   box-sizing: border-box;
+  font-family: 'Inconsolata';
   font-size: 1rem;
   border: 0;
   outline: 0;

src/reducers/projects.js

@@ -119,6 +119,9 @@ export default function reduceProjects(stateIn, action) {
       return state.setIn(
         [action.payload.projectKey, 'instructions'],
         action.payload.newValue,
+      ).setIn(
+        [action.payload.projectKey, 'updatedAt'],
+        action.meta.timestamp,
       );
 
     case 'PROJECT_CREATED':

src/sagas/projects.js

@@ -110,7 +110,10 @@ export default function* () {
     takeEvery('APPLICATION_LOADED', applicationLoaded),
     takeEvery('CREATE_PROJECT', createProject),
     takeEvery('CHANGE_CURRENT_PROJECT', changeCurrentProject),
-    throttle(500, 'UPDATE_PROJECT_SOURCE', updateProjectSource),
+    throttle(500, [
+      'UPDATE_PROJECT_SOURCE',
+      'UPDATE_PROJECT_INSTRUCTIONS',
+    ], updateProjectSource),
     takeEvery('USER_AUTHENTICATED', userAuthenticated),
     takeEvery('TOGGLE_LIBRARY', toggleLibrary),
   ]);

test/unit/reducers/projects.js

@@ -66,16 +66,16 @@ test('updateProjectSource', reducerTest(
     ),
 ));
 
-tap(initProjects({1: false}), projects =>
-  test('updateProjectInstructions', reducerTest(
-    reducer,
-    projects,
-    partial(updateProjectInstructions, '1', '# Instructions\n\nHello.'),
-    projects.update('1', projectIn =>
-      projectIn.set('instructions', '# Instructions\n\nHello.'),
+test('updateProjectInstructions', reducerTest(
+  reducer,
+  initProjects({[projectKey]: false}),
+  partial(updateProjectInstructions, projectKey, '# Instructions', now),
+  initProjects({[projectKey]: true}).
+    update(
+      projectKey,
+      editedProject => editedProject.set('instructions', '# Instructions'),
     ),
-  )),
-);
+));
 
 test('changeCurrentProject', (t) => {
   t.test('from modified to pristine', reducerTest(

test/unit/sagas/projects.js

@@ -16,6 +16,7 @@ import {
   gistNotFound,
   projectsLoaded,
   toggleLibrary,
+  updateProjectInstructions,
   updateProjectSource,
 } from '../../../src/actions/projects';
 import {
@@ -230,6 +231,18 @@ test('updateProjectSource', (assert) => {
   assert.end();
 });
 
+test('updateProjectInstructions', (assert) => {
+  const scenario = new Scenario();
+  testSaga(
+    updateProjectSourceSaga,
+    updateProjectInstructions(scenario.projectKey, '# Instructions'),
+  ).
+    next().select().
+    next(scenario.state).call(saveCurrentProject, scenario.state).
+    next().isDone();
+  assert.end();
+});
+
 test('toggleLibrary', (assert) => {
   const scenario = new Scenario();
   testSaga(