Focus on expanded editor

README.md

@@ -165,6 +165,8 @@ When you're done, lint and make sure tests pass before opening a pull request:
 $ yarn test
 ```
 
+If you're using homebrew and the latest version of yarn is incompatible with the current one used by popcode, you can check out this [stack overflow to install an older version of yarn](https://stackoverflow.com/questions/39187812/homebrew-how-to-install-older-versions)
+
 ### Debug Mode ###
 
 By default, Popcode’s JavaScript code  is compiled to ES5 to support a wide

src/actions/index.js

@@ -11,8 +11,7 @@ import {
   createProject,
   changeCurrentProject,
   toggleLibrary,
-  hideComponent,
-  unhideComponent,
+  storeHiddenComponentLine,
   toggleComponent,
   updateProjectSource,
   updateProjectInstructions,
@@ -75,8 +74,7 @@ export {
   userAuthenticated,
   userLoggedOut,
   addRuntimeError,
-  hideComponent,
-  unhideComponent,
+  storeHiddenComponentLine,
   toggleComponent,
   focusLine,
   editorFocusedRequestedLine,

src/actions/projects.js

@@ -30,22 +30,18 @@ export const toggleLibrary = createAction(
   (_projectKey, _libraryKey, timestamp = Date.now()) => ({timestamp}),
 );
 
-export const hideComponent = createAction(
-  'HIDE_COMPONENT',
-  (projectKey, componentName) => ({projectKey, componentName}),
-  (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
-);
-
-export const unhideComponent = createAction(
-  'UNHIDE_COMPONENT',
-  (projectKey, componentName) => ({projectKey, componentName}),
-  (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
+export const storeHiddenComponentLine = createAction(
+  'STORE_HIDDEN_LINE',
+  (projectKey, componentKey, line, column) =>
+    ({projectKey, componentKey, line, column}),
 );
 
 export const toggleComponent = createAction(
   'TOGGLE_COMPONENT',
-  (projectKey, componentName) => ({projectKey, componentName}),
-  (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
+  (projectKey, componentKey, hiddenUIComponent) =>
+    ({projectKey, componentKey, hiddenUIComponent}),
+  (projectKey, componentKey, hiddenUIComponent, timestamp = Date.now()) =>
+    ({timestamp}),
 );
 
 export const gistImported = createAction(

src/actions/ui.js

@@ -4,8 +4,8 @@ export const userDoneTyping = createAction('USER_DONE_TYPING');
 
 export const focusLine = createAction(
   'FOCUS_LINE',
-  (component, line, column) => ({component, line, column}),
-  (_component, _line, _column, timestamp = Date.now()) => ({timestamp}),
+  (componentKey, line, column) => ({componentKey, line, column}),
+  (_componentKey, _line, _column, timestamp = Date.now()) => ({timestamp}),
 );
 
 export const editorFocusedRequestedLine = createAction(

src/clients/github.js

@@ -106,7 +106,8 @@ function buildGistFromProject(project) {
       language: 'Markdown',
     };
   }
-  if (project.enabledLibraries.length || project.hiddenUIComponents.length) {
+  if (project.enabledLibraries.length ||
+    !isEmpty(project.hiddenUIComponents)) {
     files['popcode.json'] = {
       content: createPopcodeJson(project),
       language: 'JSON',
@@ -137,7 +138,7 @@ function createPopcodeJson(project) {
   if (project.enabledLibraries.length) {
     json.enabledLibraries = project.enabledLibraries;
   }
-  if (project.hiddenUIComponents.length) {
+  if (!isEmpty(project.hiddenUIComponents)) {
     json.hiddenUIComponents = project.hiddenUIComponents;
   }
   return JSON.stringify(json);

src/components/ConsoleInput.jsx

@@ -26,7 +26,7 @@ export default class ConsoleInput extends Component {
   }
 
   _focusRequestedLine(requestedFocusedLine) {
-    if (get(requestedFocusedLine, 'component') !== 'console') {
+    if (get(requestedFocusedLine, 'componentKey') !== 'console') {
       return;
     }
 

src/components/Editor.jsx

@@ -58,13 +58,15 @@ class Editor extends React.Component {
   }
 
   componentWillUnmount() {
+    const {onComponentHidden, language} = this.props;
+    const {row, column} = this._editor.getCursorPosition();
+    onComponentHidden(language, row, column);
     this._editor.destroy();
     window.removeEventListener('resize', this._handleWindowResize);
   }
 
   _focusRequestedLine(requestedFocusedLine) {
-    if (get(requestedFocusedLine, 'component') !==
-      `editor.${this.props.language}`) {
+    if (get(requestedFocusedLine, 'componentKey') !== this.props.language) {
       return;
     }
 
@@ -141,6 +143,7 @@ Editor.propTypes = {
   requestedFocusedLine: PropTypes.object,
   source: PropTypes.string.isRequired,
   textSizeIsLarge: PropTypes.bool.isRequired,
+  onComponentHidden: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,
 };

src/components/EditorsColumn.jsx

@@ -5,9 +5,9 @@ import {t} from 'i18next';
 import {DraggableCore} from 'react-draggable';
 import bindAll from 'lodash/bindAll';
 import isEmpty from 'lodash/isEmpty';
-import includes from 'lodash/includes';
 import partial from 'lodash/partial';
 import partition from 'lodash/partition';
+import find from 'lodash/find';
 import {getNodeHeights} from '../util/resize';
 
 import EditorContainer from './EditorContainer';
@@ -50,6 +50,7 @@ export default class EditorsColumn extends React.Component {
       currentProject,
       editorsFlex,
       errors,
+      onComponentHidden,
       onComponentHide,
       onEditorInput,
       onRef,
@@ -61,10 +62,7 @@ export default class EditorsColumn extends React.Component {
     const children = [];
     const [hiddenLanguages, visibleLanguages] = partition(
       ['html', 'css', 'javascript'],
-      language => includes(
-        currentProject.hiddenUIComponents,
-        `editor.${language}`,
-      ),
+      language => find(currentProject.hiddenUIComponents, {language}),
     );
     visibleLanguages.forEach((language, index) => {
       children.push(
@@ -73,7 +71,7 @@ export default class EditorsColumn extends React.Component {
           language={language}
           source={currentProject.sources[language]}
           style={{flex: editorsFlex[index]}}
-          onHide={partial(onComponentHide, `editor.${language}`)}
+          onHide={partial(onComponentHide, language)}
           onRef={partial(this._storeEditorRef, index)}
         >
           <Editor
@@ -84,6 +82,7 @@ export default class EditorsColumn extends React.Component {
             requestedFocusedLine={ui.editors.requestedFocusedLine}
             source={currentProject.sources[language]}
             textSizeIsLarge={ui.editors.textSizeIsLarge}
+            onComponentHidden={onComponentHidden}
             onInput={partial(onEditorInput, language)}
             onRequestedLineFocused={onRequestedLineFocused}
           />
@@ -111,7 +110,7 @@ export default class EditorsColumn extends React.Component {
           key={language}
           onClick={partial(
             this.props.onComponentUnhide,
-            `editor.${language}`,
+            language,
           )}
         >
           <div className="label editors__label editors__label_collapsed">
@@ -147,6 +146,7 @@ EditorsColumn.propTypes = {
   ui: PropTypes.shape({
     editors: PropTypes.object.isRequired,
   }).isRequired,
+  onComponentHidden: PropTypes.func.isRequired,
   onComponentHide: PropTypes.func.isRequired,
   onComponentUnhide: PropTypes.func.isRequired,
   onDividerDrag: PropTypes.func.isRequired,

src/components/Workspace.jsx

@@ -17,20 +17,20 @@ import {dehydrateProject, rehydrateProject} from '../clients/localStorage';
 
 import {
   updateProjectSource,
-  hideComponent,
-  unhideComponent,
   editorFocusedRequestedLine,
   dragRowDivider,
   dragColumnDivider,
   startDragColumnDivider,
   stopDragColumnDivider,
   toggleComponent,
   applicationLoaded,
-
+  storeHiddenComponentLine,
+  focusLine,
 } from '../actions';
 
 import {isPristineProject} from '../util/projectUtils';
 import {getCurrentProject, isEditingInstructions} from '../selectors';
+import {HiddenUIComponent} from '../records';
 
 import TopBar from '../containers/TopBar';
 import Instructions from '../containers/Instructions';
@@ -61,6 +61,7 @@ class Workspace extends React.Component {
       this,
       '_handleUnload',
       '_handleClickInstructionsBar',
+      '_handleComponentHidden',
       '_handleComponentUnhide',
       '_handleComponentHide',
       '_handleDividerDrag',
@@ -114,24 +115,29 @@ class Workspace extends React.Component {
     }
   }
 
-  _handleComponentHide(componentName) {
+  _handleComponentHidden(componentKey, line, column) {
+    const {projectKey} = this.props.currentProject;
     this.props.dispatch(
-      hideComponent(
-        this.props.currentProject.projectKey,
-        componentName,
-      ),
+      storeHiddenComponentLine(projectKey, componentKey, line, column),
     );
   }
 
-  _handleComponentUnhide(componentName) {
+  _handleComponentHide(language) {
     this.props.dispatch(
-      unhideComponent(
+      toggleComponent(
         this.props.currentProject.projectKey,
-        componentName,
+        language,
+        new HiddenUIComponent({componentType: 'editor', language}),
       ),
     );
   }
 
+  _handleComponentUnhide(componentKey) {
+    const {dispatch, currentProject} = this.props;
+    const {line, column} = currentProject.hiddenUIComponents[componentKey];
+    dispatch(focusLine(componentKey, line, column));
+  }
+
   _handleEditorInput(language, source) {
     this.props.dispatch(
       updateProjectSource(
@@ -266,6 +272,7 @@ class Workspace extends React.Component {
           errors={errors}
           style={{flex: rowsFlex[0]}}
           ui={ui}
+          onComponentHidden={this._handleComponentHidden}
           onComponentHide={this._handleComponentHide}
           onComponentUnhide={this._handleComponentUnhide}
           onDividerDrag={this._handleEditorsDividerDrag}

src/containers/Console.js

@@ -22,7 +22,7 @@ function mapStateToProps(state) {
     currentCompiledProjectKey: getCurrentCompiledProjectKey(state),
     currentProjectKey: getCurrentProjectKey(state),
     history: getConsoleHistory(state),
-    isOpen: !getHiddenUIComponents(state).includes('console'),
+    isOpen: !getHiddenUIComponents(state).console,
     isTextSizeLarge: isTextSizeLarge(state),
     requestedFocusedLine: getRequestedFocusedLine(state),
     isHidden: !isCurrentProjectSyntacticallyValid(state),

src/containers/ErrorReport.js

@@ -19,7 +19,7 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     onErrorClick(language, line, column) {
-      dispatch(focusLine(`editor.${language}`, line, column));
+      dispatch(focusLine(language, line, column));
     },
   };
 }

src/containers/Instructions.js

@@ -15,7 +15,7 @@ function mapStateToProps(state) {
   return {
     instructions: getCurrentProjectInstructions(state),
     isEditing: isEditingInstructions(state),
-    isOpen: !getHiddenUIComponents(state).includes('instructions'),
+    isOpen: !getHiddenUIComponents(state).instructions,
     projectKey: getCurrentProjectKey(state),
   };
 }

src/records/HiddenUIComponent.js

@@ -0,0 +1,8 @@
+import {Record} from 'immutable';
+
+export default Record({
+  componentType: '',
+  language: null,
+  line: null,
+  column: null,
+}, 'HiddenUIComponent');

src/records/Project.js

@@ -1,6 +1,25 @@
-import {Record, Set} from 'immutable';
+import {Record, Set, Map} from 'immutable';
+import isArray from 'lodash/isArray';
+import isPlainObject from 'lodash/isPlainObject';
 
 import HTML_TEMPLATE from '../../templates/new.html';
+import HiddenUIComponent from './HiddenUIComponent';
+
+function hiddenUIArrayToObject(hiddenUIComponents) {
+  let obj = {};
+  if (isPlainObject(hiddenUIComponents)) {
+    obj = hiddenUIComponents;
+  } else if (isArray(hiddenUIComponents)) {
+    let component;
+    for (component of hiddenUIComponents) {
+      const [componentType, language] = component.split('.');
+      const componentKey = language || componentType;
+      obj[componentKey] = new HiddenUIComponent({componentType, language});
+    }
+  }
+  obj.console = new HiddenUIComponent({componentType: 'console'});
+  return obj;
+}
 
 const Sources = Record({
   html: HTML_TEMPLATE,
@@ -12,23 +31,25 @@ export default class Project extends Record({
   projectKey: null,
   sources: new Sources(),
   enabledLibraries: new Set(),
-  hiddenUIComponents: new Set(['console']),
+  hiddenUIComponents: new Map({
+    console: new HiddenUIComponent({componentType: 'console'}),
+  }),
   updatedAt: null,
   instructions: '',
 }) {
   static fromJS({
     projectKey = null,
     sources = {},
     enabledLibraries = [],
-    hiddenUIComponents = [],
+    hiddenUIComponents = {},
     updatedAt = null,
     instructions = '',
   }) {
     return new Project({
       projectKey,
       sources: new Sources(sources),
       enabledLibraries: new Set(enabledLibraries),
-      hiddenUIComponents: new Set(hiddenUIComponents),
+      hiddenUIComponents: new Map(hiddenUIArrayToObject(hiddenUIComponents)),
       updatedAt,
       instructions,
     });

src/records/index.js

@@ -4,6 +4,7 @@ import ConsoleError from './ConsoleError';
 import Error from './Error';
 import ErrorList from './ErrorList';
 import ErrorReport from './ErrorReport';
+import HiddenUIComponent from './HiddenUIComponent';
 import Project from './Project';
 
 export {
@@ -13,5 +14,6 @@ export {
   Error,
   ErrorList,
   ErrorReport,
+  HiddenUIComponent,
   Project,
 };