♻️ connect <Editor />

This commit is contained in:
ghalestrilo 2020-08-12 11:15:36 -03:00
parent 7402a6b07d
commit 682db4def5
2 changed files with 64 additions and 75 deletions

View file

@ -26,6 +26,8 @@ import { CSSLint } from 'csslint';
import { HTMLHint } from 'htmlhint'; import { HTMLHint } from 'htmlhint';
import classNames from 'classnames'; import classNames from 'classnames';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import '../../../utils/htmlmixed'; import '../../../utils/htmlmixed';
import '../../../utils/p5-javascript'; import '../../../utils/p5-javascript';
import '../../../utils/webGL-clike'; import '../../../utils/webGL-clike';
@ -39,6 +41,16 @@ import beepUrl from '../../../sounds/audioAlert.mp3';
import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg'; import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
import RightArrowIcon from '../../../images/right-arrow.svg'; import RightArrowIcon from '../../../images/right-arrow.svg';
import LeftArrowIcon from '../../../images/left-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); search(CodeMirror);
@ -411,4 +423,47 @@ Editor.defaultProps = {
consoleEvents: [], 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);

View file

@ -74,16 +74,14 @@ const getNatOptions = (username = undefined) =>
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, ide, project, selectedFile, user, params,
selectedFile, updateFileContent, files, user, params, stopSketch, startSketch, getProject, clearPersistedState
closeEditorOptions, showEditorOptions, unsavedChanges,
startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState
} = props; } = props;
const [tmController, setTmController] = useState(null); // eslint-disable-line const [tmController, setTmController] = useState(null); // eslint-disable-line
const { username } = user; const { username } = user;
const { unsavedChanges } = ide;
const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
items={getNatOptions(username)} items={getNatOptions(username)}
@ -127,38 +125,7 @@ const MobileIDEView = (props) => {
</Header> </Header>
<IDEWrapper> <IDEWrapper>
<Editor <Editor provideController={setTmController} />
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}
/>
</IDEWrapper> </IDEWrapper>
<Footer> <Footer>
@ -203,7 +170,6 @@ MobileIDEView.propTypes = {
shareModalProjectUsername: PropTypes.string.isRequired, shareModalProjectUsername: PropTypes.string.isRequired,
editorOptionsVisible: PropTypes.bool.isRequired, editorOptionsVisible: PropTypes.bool.isRequired,
keyboardShortcutVisible: PropTypes.bool.isRequired, keyboardShortcutVisible: PropTypes.bool.isRequired,
unsavedChanges: PropTypes.bool.isRequired,
infiniteLoop: PropTypes.bool.isRequired, infiniteLoop: PropTypes.bool.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired, previewIsRefreshing: PropTypes.bool.isRequired,
infiniteLoopMessage: PropTypes.string.isRequired, infiniteLoopMessage: PropTypes.string.isRequired,
@ -213,6 +179,8 @@ MobileIDEView.propTypes = {
errorType: PropTypes.string, errorType: PropTypes.string,
runtimeErrorWarningVisible: PropTypes.bool.isRequired, runtimeErrorWarningVisible: PropTypes.bool.isRequired,
uploadFileModalVisible: PropTypes.bool.isRequired, uploadFileModalVisible: PropTypes.bool.isRequired,
unsavedChanges: PropTypes.bool.isRequired,
}).isRequired, }).isRequired,
editorAccessibility: PropTypes.shape({ editorAccessibility: PropTypes.shape({
@ -230,10 +198,8 @@ MobileIDEView.propTypes = {
}).isRequired, }).isRequired,
startSketch: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({ selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
@ -241,37 +207,6 @@ MobileIDEView.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
}).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({ user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired, authenticated: PropTypes.bool.isRequired,
id: PropTypes.string, id: PropTypes.string,
@ -284,8 +219,6 @@ MobileIDEView.propTypes = {
project_id: PropTypes.string, project_id: PropTypes.string,
username: PropTypes.string username: PropTypes.string
}).isRequired, }).isRequired,
unsavedChanges: PropTypes.bool.isRequired
}; };
function mapStateToProps(state) { function mapStateToProps(state) {
@ -297,6 +230,7 @@ function mapStateToProps(state) {
state.files.find(file => file.name !== 'root'), state.files.find(file => file.name !== 'root'),
htmlFile: getHTMLFile(state.files), htmlFile: getHTMLFile(state.files),
ide: state.ide, ide: state.ide,
unsavedChanges: state.ide.unsavedChanged,
preferences: state.preferences, preferences: state.preferences,
editorAccessibility: state.editorAccessibility, editorAccessibility: state.editorAccessibility,
user: state.user, user: state.user,