Change/error handling (codesandbox#10)

* intermediate

* Fix error handling

* Don't denormalize in the root

Author: CompuIves

src/app/components/sandbox/CodeEditor/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import CodeMirror from 'codemirror';
 import styled from 'styled-components';
-import { debounce } from 'lodash';
+import type { Preferences, ModuleError } from 'common/types';
 
 import { getCodeMirror } from 'app/utils/codemirror';
 import prettify from 'app/utils/codemirror/prettify';
@@ -11,15 +11,13 @@ import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/tern/tern';
 
-import type { Preferences } from 'common/types';
-
 import Header from './Header';
 
 const documentCache = {};
 
 type Props = {
   code: ?string,
-  error: ?Object,
+  errors: ?Array<ModuleError>,
   id: string,
   title: string,
   modulePath: string,
@@ -41,32 +39,32 @@ const CodeContainer = styled.div`
   height: calc(100% - 6rem);
 `;
 
-const handleError = (cm, currentError, nextError, nextCode, prevId, nextId) => {
-  if (currentError || nextError) {
-    if (
-      currentError &&
-      nextError &&
-      currentError.line === nextError.line &&
-      prevId === nextId
-    ) {
-      return;
-    }
-
-    if (currentError) {
-      cm.getValue().split('\n').forEach((_, i) => {
-        cm.removeLineClass(i, 'background', 'cm-line-error');
-      });
-    }
+const handleError = (
+  cm: typeof CodeMirror,
+  currentErrors: ?Array<ModuleError>,
+  nextErrors: ?Array<ModuleError>,
+  nextCode: ?string,
+  prevId: string,
+  nextId: string,
+) => {
+  if (currentErrors && currentErrors.length > 0) {
+    cm.getValue().split('\n').forEach((_, i) => {
+      cm.removeLineClass(i, 'background', 'cm-line-error');
+    });
+  }
 
-    const code = nextCode || '';
-    if (
-      nextError &&
-      (nextError.moduleId == null || nextError.moduleId === nextId) &&
-      nextError.line !== 0 &&
-      nextError.line <= code.split('\n').length
-    ) {
-      cm.addLineClass(nextError.line - 1, 'background', 'cm-line-error');
-    }
+  if (nextErrors) {
+    nextErrors.forEach(error => {
+      const code = nextCode || '';
+      if (
+        error &&
+        (error.moduleId == null || error.moduleId === nextId) &&
+        error.line !== 0 &&
+        error.line <= code.split('\n').length
+      ) {
+        cm.addLineClass(error.line - 1, 'background', 'cm-line-error');
+      }
+    });
   }
 };
 
@@ -76,7 +74,7 @@ export default class CodeEditor extends React.PureComponent {
   shouldComponentUpdate(nextProps: Props) {
     return (
       nextProps.id !== this.props.id ||
-      nextProps.error !== this.props.error ||
+      nextProps.errors !== this.props.errors ||
       this.props.canSave !== nextProps.canSave ||
       this.props.preferences !== nextProps.preferences
     );
@@ -105,13 +103,13 @@ export default class CodeEditor extends React.PureComponent {
     }
   };
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillUpdate(nextProps: Props) {
     const cm = this.codemirror;
-    const { id: currentId, error: currentError } = this.props;
+    const { id: currentId, errors: currentErrors } = this.props;
     const {
       id: nextId,
       code: nextCode,
-      error: nextError,
+      errors: nextErrors,
       title: nextTitle,
     } = nextProps;
 
@@ -122,7 +120,7 @@ export default class CodeEditor extends React.PureComponent {
         nextCode,
         nextTitle,
       }).then(() => {
-        handleError(cm, currentError, nextError, nextCode, currentId, nextId);
+        handleError(cm, currentErrors, nextErrors, nextCode, currentId, nextId);
       });
     }
   }
@@ -253,9 +251,7 @@ export default class CodeEditor extends React.PureComponent {
 
     if (preferences.lintEnabled) {
       System.import('app/utils/codemirror/eslint-lint')
-        .then(initializer => {
-          return initializer.default();
-        })
+        .then(initializer => initializer.default())
         .then(() => {
           this.codemirror.setOption('lint', true);
         });

src/app/components/sandbox/Preview/index.js

@@ -6,7 +6,7 @@ import { debounce } from 'lodash';
 
 import type { Preferences } from 'app/store/preferences/reducer';
 
-import type { Module, Sandbox, Directory } from 'common/types';
+import type { Module, Sandbox, Directory, ModuleError } from 'common/types';
 import { frameUrl } from 'app/utils/url-generator';
 import { isMainModule } from 'app/store/entities/sandboxes/modules/validator';
 import defaultBoilerplates
@@ -37,12 +37,16 @@ type Props = {
   externalResources: typeof Sandbox.externalResources,
   preferences: Preferences,
   fetchBundle: (id: string) => Object,
-  setProjectView: (id: string, isInProjectView: boolean) => void,
+  setProjectView: (id: string, isInProjectView: boolean) => any,
   module: Module,
-  setError: (id: string, error: ?{ message: string, line: number }) => void,
-  clearErrors: () => void,
+  addError: (
+    sandboxId: string,
+    error: ?{ message: string, line: number },
+  ) => any,
+  clearErrors: (sandboxId: string) => any,
   sandboxActions: typeof sandboxActionCreators,
   noDelay: ?boolean,
+  errors: ?Array<ModuleError>,
 };
 
 type State = {
@@ -54,7 +58,7 @@ type State = {
 };
 
 export default class Preview extends React.PureComponent {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -150,9 +154,7 @@ export default class Preview extends React.PureComponent {
       const { type } = e.data;
       if (type === 'error') {
         const { error } = e.data;
-        this.setError(error);
-      } else if (type === 'success') {
-        this.clearErrors();
+        this.addError(error);
       } else if (type === 'urlchange') {
         const url = e.data.url.replace('/', '');
         this.commitUrl(url);
@@ -187,7 +189,7 @@ export default class Preview extends React.PureComponent {
       }
       return;
     }
-
+    this.clearErrors();
     const renderedModule = this.getRenderedModule();
     this.sendMessage({
       type: 'compile',
@@ -203,20 +205,12 @@ export default class Preview extends React.PureComponent {
     });
   };
 
-  setError = (e: { moduleId: string, message: string, line: number }) => {
-    const errorOriginModuleId = e.moduleId;
-    const currentModuleId = this.getRenderedModule().id;
-
-    // Throw the error twice, because both modules can't render because of this
-    // error
-    if (errorOriginModuleId) {
-      this.props.setError(errorOriginModuleId, e);
-    }
-    this.props.setError(currentModuleId, e);
+  addError = (e: { moduleId: string, message: string, line: number }) => {
+    this.props.addError(this.props.sandboxId, e);
   };
 
   clearErrors = () => {
-    this.props.clearErrors();
+    this.props.clearErrors(this.props.sandboxId);
   };
 
   updateUrl = (url: string) => {
@@ -292,11 +286,10 @@ export default class Preview extends React.PureComponent {
       sandboxActions,
       isInProjectView,
       setProjectView,
+      errors,
     } = this.props;
     const { historyPosition, history, urlInAddressBar } = this.state;
 
-    const renderedModule = this.getRenderedModule();
-
     const url = urlInAddressBar || '';
 
     return (
@@ -313,11 +306,12 @@ export default class Preview extends React.PureComponent {
         />
 
         {!bundle.processing &&
-          renderedModule.error &&
+          errors &&
+          errors.length > 0 &&
           <Message
             modules={modules}
             sandboxActions={sandboxActions}
-            error={renderedModule.error}
+            error={errors[0]}
             sandboxId={sandboxId}
           />}
         {bundle.processing &&

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -1,22 +1,28 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 import styled from 'styled-components';
 import ShareIcon from 'react-icons/lib/md/share';
 import Files from 'embed/components/Files';
 import ModeIcons from 'app/components/sandbox/ModeIcons';
+import {
+  isMainModule,
+  modulesFromSandboxSelector,
+} from 'app/store/entities/sandboxes/modules/selectors';
+import {
+  directoriesFromSandboxSelector,
+} from 'app/store/entities/sandboxes/directories/selectors';
 import {
   optionsToParameterizedUrl,
   protocolAndHost,
   sandboxUrl,
   embedUrl,
 } from 'app/utils/url-generator';
 
-import type { Sandbox } from 'common/types';
+import type { Sandbox, Directory, Module } from 'common/types';
 
 import HoverMenu from './HoverMenu';
 import Action from './Action';
-import {
-  isMainModule,
-} from '../../../../../store/entities/sandboxes/modules/selectors';
 
 const Container = styled.div`
   position: relative;
@@ -114,12 +120,19 @@ const ButtonName = styled.div`
 
 type Props = {
   sandbox: Sandbox,
+  modules: Array<Module>,
+  directories: Array<Directory>,
   sendMessage: (message: string) => void,
 };
 
 const BUTTON_URL = 'https://codesandbox.io/static/img/play-codesandbox.svg';
 
-export default class ShareView extends React.PureComponent {
+const mapStateToProps = createSelector(
+  modulesFromSandboxSelector,
+  directoriesFromSandboxSelector,
+  (modules, directories) => ({ modules, directories }),
+);
+class ShareView extends React.PureComponent {
   props: Props;
   state = {
     showEditor: true,
@@ -197,11 +210,11 @@ export default class ShareView extends React.PureComponent {
   };
 
   render() {
-    const { sandbox } = this.props;
+    const { sandbox, modules, directories } = this.props;
     const { showEditor, showPreview } = this.state;
 
     const defaultModule =
-      this.state.defaultModule || sandbox.modules.find(isMainModule).id;
+      this.state.defaultModule || modules.find(isMainModule).id;
 
     return (
       <Container>
@@ -241,8 +254,8 @@ export default class ShareView extends React.PureComponent {
                     <h4>Default module to show and preview</h4>
 
                     <Files
-                      modules={sandbox.modules}
-                      directories={sandbox.directories}
+                      modules={modules}
+                      directories={directories}
                       directoryId={null}
                       currentModule={defaultModule}
                       setCurrentModule={this.setDefaultModule}
@@ -256,8 +269,8 @@ export default class ShareView extends React.PureComponent {
                     <input onFocus={this.select} value={this.getEditorUrl()} />
                     <LinkName>Fullscreen url</LinkName>
                     <input onFocus={this.select} value={this.getEmbedUrl()} />
-                    {/*<LinkName>Embed url (Medium/Embedly)</LinkName>
-                  <input onFocus={this.select} value={this.getEmbedUrl()} />*/}
+                    <LinkName>Embed url (Medium/Embedly)</LinkName>
+                    <input onFocus={this.select} value={this.getEditorUrl()} />
                     <LinkName>iframe</LinkName>
                     <textarea
                       onFocus={this.select}
@@ -297,3 +310,5 @@ export default class ShareView extends React.PureComponent {
     );
   }
 }
+
+export default connect(mapStateToProps)(ShareView);

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -72,6 +72,7 @@ type Props = {
   sandboxActions: typeof sandboxActionCreators,
   userActions: typeof userActionCreators,
   user: CurrentUser,
+  canSave: boolean,
 };
 
 export default class Header extends React.PureComponent {
@@ -120,8 +121,9 @@ export default class Header extends React.PureComponent {
       user,
       toggleWorkspace,
       workspaceHidden,
+      canSave,
     } = this.props;
-    const canSave = sandbox.modules.some(m => m.isNotSynced);
+
     return (
       <Container>
         <Left>