Merge pull request #873 from outoftime/containers

Use presentational/container pattern in Output component subtree

Author: outoftime

.eslintrc

@@ -688,6 +688,9 @@
         "react/no-unknown-property": [
             2
         ],
+        "react/no-unused-prop-types": [
+          2
+        ],
         "react/prefer-es6-class": [
           2,
           "always"

.projections.json

@@ -1,7 +1,11 @@
 {
   "src/components/*.jsx": {
     "type": "component",
-    "template": "import React from 'react';\n\nclass {camelcase|capitalize} extends React.Component {open}\n  render() {open}\n  {close}\n{close};\n\nexport default {camelcase|capitalize};"
+    "template": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function {}() {open}\n{close}\n\n{}.propTypes = {open}\n{close};"
+  },
+  "src/containers/*.js": {
+    "type": "container",
+    "template": "import {open}connect{close} from 'react-redux';\nimport {open}{}{close} from '../components';\nimport {open}{close} from '../actions';\n\nfunction mapStateToProps(state) {open}\n  return {open}\n  {close};\n{close}\n\nfunction mapDispatchToProps(dispatch) {open}\n  return {open}\n  {close};\n{close}\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps,\n)({});\n"
   },
   "src/store.js": {
     "type": "store"

src/actions/errors.js

@@ -1,5 +1,10 @@
 import {createAction} from 'redux-actions';
 
+export const addRuntimeError = createAction(
+  'ADD_RUNTIME_ERROR',
+  (language, error) => ({language, error}),
+);
+
 export const validatedSource = createAction(
   'VALIDATED_SOURCE',
   (language, errors) => ({language, errors}),

src/actions/index.js

@@ -25,26 +25,18 @@ import {
   notificationTriggered,
   userDismissedNotification,
   refreshPreview,
+  popOutProject,
 } from './ui';
 
+import {
+  addRuntimeError,
+} from './errors';
+
 import {
   userAuthenticated,
   userLoggedOut,
 } from './user';
 
-function addRuntimeError(error) {
-  return {
-    type: 'RUNTIME_ERROR_ADDED',
-    payload: {error},
-  };
-}
-
-function clearRuntimeErrors() {
-  return {
-    type: 'RUNTIME_ERRORS_CLEARED',
-  };
-}
-
 function toggleDashboard() {
   return {type: 'DASHBOARD_TOGGLED'};
 }
@@ -61,7 +53,6 @@ export {
   userAuthenticated,
   userLoggedOut,
   addRuntimeError,
-  clearRuntimeErrors,
   hideComponent,
   unhideComponent,
   toggleDashboard,
@@ -77,6 +68,7 @@ export {
   exportGist,
   gistExportDisplayed,
   gistExportNotDisplayed,
+  popOutProject,
   applicationLoaded,
   refreshPreview,
 };

src/actions/ui.js

@@ -28,6 +28,10 @@ export const stopDragColumnDivider = createAction(
   'STOP_DRAG_COLUMN_DIVIDER',
 );
 
+export const popOutProject = createAction(
+  'POP_OUT_PROJECT',
+);
+
 export const notificationTriggered = createAction(
   'NOTIFICATION_TRIGGERED',
   (type, severity = 'error', payload = {}) => ({type, severity, payload}),

src/components/Dashboard.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {t} from 'i18next';
 import partial from 'lodash/partial';
+import includes from 'lodash/includes';
 import isNull from 'lodash/isNull';
 import classnames from 'classnames';
 import config from '../config';
@@ -144,14 +145,14 @@ class Dashboard extends React.Component {
     );
   }
 
-  _renderPopSvg(variant, validationState) {
+  _renderPopSvg(variant, ...validationStates) {
     return (
       <div
         className={classnames(
           'dashboard__pop',
           {
             dashboard__pop_visible:
-              this.props.validationState === validationState,
+              includes(validationStates, this.props.validationState),
           },
         )}
       >
@@ -165,7 +166,7 @@ class Dashboard extends React.Component {
       <div className="dashboard__pop-container">
         {this._renderPopSvg('neutral', 'passed')}
         {this._renderPopSvg('thinking', 'validating')}
-        {this._renderPopSvg('horns', 'failed')}
+        {this._renderPopSvg('horns', 'validation-error', 'runtime-error')}
       </div>
     );
   }
@@ -202,7 +203,8 @@ class Dashboard extends React.Component {
       'u__flex-container_column',
       {
         dashboard_yellow: this.props.validationState === 'validating',
-        dashboard_red: this.props.validationState === 'failed',
+        dashboard_red: this.props.validationState === 'validation-error' ||
+          this.props.validationState === 'runtime-error',
       },
     );
 

src/components/EditorsColumn.jsx

@@ -10,13 +10,6 @@ import {getNodeHeights} from '../util/resize';
 import EditorContainer from './EditorContainer';
 import Editor from './Editor';
 
-function allErrorsFor(language, errors, runtimeErrors) {
-  if (language === 'javascript') {
-    return errors.javascript.items.concat(runtimeErrors);
-  }
-  return errors[language].items;
-}
-
 export default class EditorsColumn extends React.Component {
   constructor(props) {
     super(props);
@@ -58,7 +51,6 @@ export default class EditorsColumn extends React.Component {
       onEditorInput,
       onRef,
       onRequestedLineFocused,
-      runtimeErrors,
       style,
       ui,
     } = this.props;
@@ -78,7 +70,7 @@ export default class EditorsColumn extends React.Component {
           onRef={partial(this._storeEditorRef, index)}
         >
           <Editor
-            errors={allErrorsFor(language, errors, runtimeErrors)}
+            errors={errors[language].items}
             key={language}
             language={language}
             percentageOfHeight={1 / languages.length}
@@ -121,7 +113,6 @@ EditorsColumn.propTypes = {
   currentProject: PropTypes.object.isRequired,
   editorsFlex: PropTypes.array.isRequired,
   errors: PropTypes.object.isRequired,
-  runtimeErrors: PropTypes.array.isRequired,
   style: PropTypes.object.isRequired,
   ui: PropTypes.shape({
     editors: PropTypes.object.isRequired,

src/components/ErrorList.jsx

@@ -1,46 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import ErrorSublist from './ErrorSublist';
+import map from 'lodash/map';
+import partial from 'lodash/partial';
+import {t} from 'i18next';
+import ErrorItem from './ErrorItem';
 
-function ErrorList(props) {
-  return (
-    <div
-      className={classnames(
-        'error-list',
-        'output__item',
-        {'error-list_docked': props.docked, output__item_shrink: props.docked},
+function ErrorList({errors, onErrorClick, language}) {
+  if (errors.state === 'passed') {
+    return false;
+  }
+
+  const errorItems = map(errors.items, error => (
+    <ErrorItem
+      {...error}
+      key={[error.reason, error.row]}
+      onClick={partial(
+        onErrorClick,
+        language,
       )}
-    >
-      <ErrorSublist
-        errors={props.html}
-        language="html"
-        onErrorClick={props.onErrorClick}
-      />
-      <ErrorSublist
-        errors={props.css}
-        language="css"
-        onErrorClick={props.onErrorClick}
-      />
-      <ErrorSublist
-        errors={props.javascript}
-        language="javascript"
-        onErrorClick={props.onErrorClick}
-      />
+    />
+  ));
+
+  const errorMessage = t(
+    'errors.notice',
+    {count: errors.items.length, language},
+  );
+
+  return (
+    <div>
+      <h2 className="error-list__header">
+        {errorMessage}
+      </h2>
+      <ul className="error-list__errors">
+        {errorItems}
+      </ul>
     </div>
   );
 }
 
 ErrorList.propTypes = {
-  css: PropTypes.object.isRequired,
-  docked: PropTypes.bool,
-  html: PropTypes.object.isRequired,
-  javascript: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  language: PropTypes.oneOf(['html', 'css', 'javascript']).isRequired,
   onErrorClick: PropTypes.func.isRequired,
 };
 
-ErrorList.defaultProps = {
-  docked: false,
-};
-
 export default ErrorList;

src/components/ErrorReport.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import find from 'lodash/find';
+import ErrorList from './ErrorList';
+
+function ErrorReport({errors, isValidating, onErrorClick}) {
+  if (isValidating) {
+    return <div className="output__delayed-error-overlay" />;
+  }
+
+  const hasErrors = Boolean(find(errors, list => list.items.length));
+  if (!hasErrors) {
+    return null;
+  }
+
+  const isDocked = Boolean(find(errors, {state: 'runtime-error'}));
+  const {html, css, javascript} = errors;
+
+  return (
+    <div
+      className={classnames(
+        'error-list',
+        'output__item',
+        {'error-list_docked': isDocked, output__item_shrink: isDocked},
+      )}
+    >
+      <ErrorList
+        errors={html}
+        language="html"
+        onErrorClick={onErrorClick}
+      />
+      <ErrorList
+        errors={css}
+        language="css"
+        onErrorClick={onErrorClick}
+      />
+      <ErrorList
+        errors={javascript}
+        language="javascript"
+        onErrorClick={onErrorClick}
+      />
+    </div>
+  );
+}
+
+ErrorReport.propTypes = {
+  errors: PropTypes.shape({
+    css: PropTypes.object.isRequired,
+    html: PropTypes.object.isRequired,
+    javascript: PropTypes.object.isRequired,
+  }).isRequired,
+  isValidating: PropTypes.bool.isRequired,
+  onErrorClick: PropTypes.func.isRequired,
+};
+
+export default ErrorReport;