♻️ connect <Editor />

Author: ghalestrilo

client/modules/IDE/components/Editor.jsx

@@ -26,6 +26,8 @@ import { CSSLint } from 'csslint';
 import { HTMLHint } from 'htmlhint';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import '../../../utils/htmlmixed';
 import '../../../utils/p5-javascript';
 import '../../../utils/webGL-clike';
@@ -39,6 +41,16 @@ import beepUrl from '../../../sounds/audioAlert.mp3';
 import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
 import RightArrowIcon from '../../../images/right-arrow.svg';
 import LeftArrowIcon from '../../../images/left-arrow.svg';
+import { getHTMLFile } from '../reducers/files';
+
+import * as FileActions from '../actions/files';
+import * as IDEActions from '../actions/ide';
+import * as ProjectActions from '../actions/project';
+import * as EditorAccessibilityActions from '../actions/editorAccessibility';
+import * as PreferencesActions from '../actions/preferences';
+import * as UserActions from '../../User/actions';
+import * as ToastActions from '../actions/toast';
+import * as ConsoleActions from '../actions/console';
 
 search(CodeMirror);
 
@@ -411,4 +423,47 @@ Editor.defaultProps = {
   consoleEvents: [],
 };
 
-export default Editor;
+
+function mapStateToProps(state) {
+  return {
+    files: state.files,
+    file:
+      state.files.find(file => file.isSelectedFile) ||
+      state.files.find(file => file.name === 'sketch.js') ||
+      state.files.find(file => file.name !== 'root'),
+    htmlFile: getHTMLFile(state.files),
+    ide: state.ide,
+    preferences: state.preferences,
+    editorAccessibility: state.editorAccessibility,
+    user: state.user,
+    project: state.project,
+    toast: state.toast,
+    console: state.console,
+
+    ...state.preferences,
+    ...state.ide,
+    ...state.project,
+    ...state.editorAccessibility,
+    isExpanded: state.ide.consoleIsExpanded,
+    projectSavedTime: state.project.updatedAt
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign(
+      {},
+      EditorAccessibilityActions,
+      FileActions,
+      ProjectActions,
+      IDEActions,
+      PreferencesActions,
+      UserActions,
+      ToastActions,
+      ConsoleActions
+    ),
+    dispatch
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Editor);

client/modules/IDE/pages/MobileIDEView.jsx

@@ -74,16 +74,14 @@ const getNatOptions = (username = undefined) =>
 
 const MobileIDEView = (props) => {
   const {
-    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
-    selectedFile, updateFileContent, files, user, params,
-    closeEditorOptions, showEditorOptions, unsavedChanges,
-    startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
-    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState
+    ide, project, selectedFile, user, params,
+    stopSketch, startSketch, getProject, clearPersistedState
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
 
   const { username } = user;
+  const { unsavedChanges } = ide;
 
   const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
     items={getNatOptions(username)}
@@ -127,38 +125,7 @@ const MobileIDEView = (props) => {
       </Header>
 
       <IDEWrapper>
-        <Editor
-          lintWarning={preferences.lintWarning}
-          linewrap={preferences.linewrap}
-          lintMessages={editorAccessibility.lintMessages}
-          updateLintMessage={updateLintMessage}
-          clearLintMessage={clearLintMessage}
-          file={selectedFile}
-          updateFileContent={updateFileContent}
-          fontSize={preferences.fontSize}
-          lineNumbers={preferences.lineNumbers}
-          files={files}
-          editorOptionsVisible={ide.editorOptionsVisible}
-          showEditorOptions={showEditorOptions}
-          closeEditorOptions={closeEditorOptions}
-          showKeyboard={ide.isPlaying}
-          theme={preferences.theme}
-          startRefreshSketch={startRefreshSketch}
-          stopSketch={stopSketch}
-          autorefresh={preferences.autorefresh}
-          unsavedChanges={ide.unsavedChanges}
-          projectSavedTime={project.updatedAt}
-          isExpanded={ide.sidebarIsExpanded}
-          expandSidebar={expandSidebar}
-          collapseSidebar={collapseSidebar}
-          isUserOwner={isUserOwner(props)}
-          clearConsole={clearConsole}
-          consoleEvents={console}
-          showRuntimeErrorWarning={showRuntimeErrorWarning}
-          hideRuntimeErrorWarning={hideRuntimeErrorWarning}
-          runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
-          provideController={setTmController}
-        />
+        <Editor provideController={setTmController} />
       </IDEWrapper>
 
       <Footer>
@@ -203,7 +170,6 @@ MobileIDEView.propTypes = {
     shareModalProjectUsername: PropTypes.string.isRequired,
     editorOptionsVisible: PropTypes.bool.isRequired,
     keyboardShortcutVisible: PropTypes.bool.isRequired,
-    unsavedChanges: PropTypes.bool.isRequired,
     infiniteLoop: PropTypes.bool.isRequired,
     previewIsRefreshing: PropTypes.bool.isRequired,
     infiniteLoopMessage: PropTypes.string.isRequired,
@@ -213,6 +179,8 @@ MobileIDEView.propTypes = {
     errorType: PropTypes.string,
     runtimeErrorWarningVisible: PropTypes.bool.isRequired,
     uploadFileModalVisible: PropTypes.bool.isRequired,
+
+    unsavedChanges: PropTypes.bool.isRequired,
   }).isRequired,
 
   editorAccessibility: PropTypes.shape({
@@ -230,48 +198,15 @@ MobileIDEView.propTypes = {
   }).isRequired,
 
   startSketch: PropTypes.func.isRequired,
+  stopSketch: PropTypes.func.isRequired,
 
-  updateLintMessage: PropTypes.func.isRequired,
-
-  clearLintMessage: PropTypes.func.isRequired,
 
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   }).isRequired,
 
-  updateFileContent: PropTypes.func.isRequired,
-
-  files: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-  })).isRequired,
-
-  closeEditorOptions: PropTypes.func.isRequired,
-
-  showEditorOptions: PropTypes.func.isRequired,
-
-  startRefreshSketch: PropTypes.func.isRequired,
-
-  stopSketch: PropTypes.func.isRequired,
-
-  expandSidebar: PropTypes.func.isRequired,
-
-  collapseSidebar: PropTypes.func.isRequired,
-
-  clearConsole: PropTypes.func.isRequired,
-
-  console: PropTypes.arrayOf(PropTypes.shape({
-    method: PropTypes.string.isRequired,
-    args: PropTypes.arrayOf(PropTypes.string),
-  })).isRequired,
-
-  showRuntimeErrorWarning: PropTypes.func.isRequired,
-
-  hideRuntimeErrorWarning: PropTypes.func.isRequired,
-
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,
     id: PropTypes.string,
@@ -284,8 +219,6 @@ MobileIDEView.propTypes = {
     project_id: PropTypes.string,
     username: PropTypes.string
   }).isRequired,
-
-  unsavedChanges: PropTypes.bool.isRequired
 };
 
 function mapStateToProps(state) {
@@ -297,6 +230,7 @@ function mapStateToProps(state) {
       state.files.find(file => file.name !== 'root'),
     htmlFile: getHTMLFile(state.files),
     ide: state.ide,
+    unsavedChanges: state.ide.unsavedChanged,
     preferences: state.preferences,
     editorAccessibility: state.editorAccessibility,
     user: state.user,