From 5da8b24da8fcf02dcd31603d8e4171ca796932cd Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 16:32:50 -0300 Subject: [PATCH 01/10] :lipstick: start with terinal collapsed --- client/modules/App/App.jsx | 3 ++- client/modules/IDE/pages/MobileIDEView.jsx | 14 ++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..1da42325 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,8 @@ class App extends React.Component { render() { return (
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } + {false && + this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } {this.props.children}
); diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index d48399cb..eb0f6031 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -10,6 +10,7 @@ import { bindActionCreators } from 'redux'; import * as IDEActions from '../actions/ide'; import * as ProjectActions from '../actions/project'; +import * as ConsoleActions from '../actions/console'; // Local Imports import Editor from '../components/Editor'; @@ -67,8 +68,8 @@ const getNatOptions = (username = undefined) => const MobileIDEView = (props) => { const { - ide, project, selectedFile, user, params, unsavedChanges, - stopSketch, startSketch, getProject, clearPersistedState + ide, project, selectedFile, user, params, unsavedChanges, collapseConsole, + stopSketch, startSketch, getProject, clearPersistedState, } = props; const [tmController, setTmController] = useState(null); // eslint-disable-line @@ -84,7 +85,10 @@ const MobileIDEView = (props) => { // Force state reset useEffect(clearPersistedState, []); - useEffect(stopSketch, []); + useEffect(() => { + stopSketch(); + collapseConsole(); + }, []); // Load Project const [currentProjectID, setCurrentProjectID] = useState(null); @@ -172,6 +176,7 @@ MobileIDEView.propTypes = { stopSketch: PropTypes.func.isRequired, getProject: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired, + collapseConsole: PropTypes.func.isRequired, }; function mapStateToProps(state) { @@ -192,7 +197,8 @@ function mapStateToProps(state) { const mapDispatchToProps = dispatch => bindActionCreators({ ...ProjectActions, - ...IDEActions + ...IDEActions, + ...ConsoleActions }, dispatch); export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView)); From 955d8c20a46bc066c32a3042717c027679c5a34b Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 17:02:39 -0300 Subject: [PATCH 02/10] :sparkles: create useEffectWithComparison hook --- client/modules/IDE/pages/MobileIDEView.jsx | 41 ++++++++++++++++++++++ client/utils/custom-hooks.js | 12 +++++++ 2 files changed, 53 insertions(+) diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index eb0f6031..e62d63b4 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -66,6 +66,44 @@ const getNatOptions = (username = undefined) => ] ); + +const asd = (props, prevProps) => { + if (isUserOwner(this.props) && this.props.project.id) { + if ( + props.preferences.autosave && + props.ide.unsavedChanges && + !props.ide.justOpenedProject + ) { + if ( + props.selectedFile.name === prevProps.selectedFile.name && + props.selectedFile.content !== prevProps.selectedFile.content + ) { + if (this.autosaveInterval) { + clearTimeout(this.autosaveInterval); + } + console.log('will save project in 20 seconds'); + this.autosaveInterval = setTimeout(props.autosaveProject, 20000); + } + } else if (this.autosaveInterval && !props.preferences.autosave) { + clearTimeout(this.autosaveInterval); + this.autosaveInterval = null; + } + } else if (this.autosaveInterval) { + clearTimeout(this.autosaveInterval); + this.autosaveInterval = null; + } +}; + +const useEffectWithComparison = (fn, props) => { + const [prevProps, update] = useState({}); + + return useEffect(() => { + fn(props, prevProps); + update(props); + }, Object.values(props)); +}; + + const MobileIDEView = (props) => { const { ide, project, selectedFile, user, params, unsavedChanges, collapseConsole, @@ -103,6 +141,9 @@ const MobileIDEView = (props) => { }, [params, project, username]); + // useEffectWithComparison(() => alert('haha'), { consoleIsExpanded }); + + return (
{ return [visible, trigger, setRef]; }; + +// Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 }) +// This hook basically applies useEffect but keeping track of the last value of relevant props +// So you can passa a 2-param function to capture new and old values and do whatever with them. +const useEffectWithComparison = (fn, props) => { + const [prevProps, update] = useState({}); + + return useEffect(() => { + fn(props, prevProps); + update(props); + }, Object.values(props)); +}; From 99594a390c856d03df06f18f2a418b4b6407d05f Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 17:22:03 -0300 Subject: [PATCH 03/10] :sparkles: create autosave method / thunk --- client/modules/IDE/pages/MobileIDEView.jsx | 69 +++++++++++----------- client/utils/custom-hooks.js | 2 +- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index e62d63b4..664aa784 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -30,8 +30,7 @@ import useAsModal from '../../../components/useAsModal'; import { PreferencesIcon } from '../../../common/icons'; import Dropdown from '../../../components/Dropdown'; -const isUserOwner = ({ project, user }) => - project.owner && project.owner.id === user.id; +import { useEffectWithComparison } from '../../../utils/custom-hooks'; const withChangeDot = (title, unsavedChanges = false) => ( @@ -67,47 +66,40 @@ const getNatOptions = (username = undefined) => ); -const asd = (props, prevProps) => { - if (isUserOwner(this.props) && this.props.project.id) { - if ( - props.preferences.autosave && - props.ide.unsavedChanges && - !props.ide.justOpenedProject - ) { - if ( - props.selectedFile.name === prevProps.selectedFile.name && - props.selectedFile.content !== prevProps.selectedFile.content - ) { - if (this.autosaveInterval) { - clearTimeout(this.autosaveInterval); +const isUserOwner = ({ project, user }) => + project && project.owner && project.owner.id === user.id; + +const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => { + const { + autosaveProject, preferences, ide, selectedFile: file, project + } = props; + + const { selectedFile: oldFile } = prevProps; + + if (isUserOwner(props) && project.id) { + if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) { + if (file.name === oldFile.name && file.content !== oldFile.content) { + if (autosaveInterval) { + clearTimeout(autosaveInterval); } console.log('will save project in 20 seconds'); - this.autosaveInterval = setTimeout(props.autosaveProject, 20000); + setAutosaveInterval(setTimeout(autosaveProject, 20000)); } - } else if (this.autosaveInterval && !props.preferences.autosave) { - clearTimeout(this.autosaveInterval); - this.autosaveInterval = null; + } else if (autosaveInterval && !preferences.autosave) { + clearTimeout(autosaveInterval); + setAutosaveInterval(null); } - } else if (this.autosaveInterval) { - clearTimeout(this.autosaveInterval); - this.autosaveInterval = null; + } else if (autosaveInterval) { + clearTimeout(autosaveInterval); + setAutosaveInterval(null); } }; -const useEffectWithComparison = (fn, props) => { - const [prevProps, update] = useState({}); - - return useEffect(() => { - fn(props, prevProps); - update(props); - }, Object.values(props)); -}; - const MobileIDEView = (props) => { const { - ide, project, selectedFile, user, params, unsavedChanges, collapseConsole, - stopSketch, startSketch, getProject, clearPersistedState, + ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole, + stopSketch, startSketch, getProject, clearPersistedState, autosaveProject } = props; const [tmController, setTmController] = useState(null); // eslint-disable-line @@ -141,8 +133,11 @@ const MobileIDEView = (props) => { }, [params, project, username]); - // useEffectWithComparison(() => alert('haha'), { consoleIsExpanded }); - + // TODO: This behavior could move to + const [autosaveInterval, setAutosaveInterval] = useState(null); + useEffectWithComparison(autosave(autosaveInterval, setAutosaveInterval), { + autosaveProject, preferences, ide, selectedFile + }); return ( @@ -184,6 +179,9 @@ MobileIDEView.propTypes = { consoleIsExpanded: PropTypes.bool.isRequired, }).isRequired, + preferences: PropTypes.shape({ + }).isRequired, + project: PropTypes.shape({ id: PropTypes.string, name: PropTypes.string.isRequired, @@ -218,6 +216,7 @@ MobileIDEView.propTypes = { getProject: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired, collapseConsole: PropTypes.func.isRequired, + autosaveProject: PropTypes.func.isRequired, }; function mapStateToProps(state) { diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js index 304497f4..d88066a5 100644 --- a/client/utils/custom-hooks.js +++ b/client/utils/custom-hooks.js @@ -44,7 +44,7 @@ export const useModalBehavior = (hideOverlay) => { // Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 }) // This hook basically applies useEffect but keeping track of the last value of relevant props // So you can passa a 2-param function to capture new and old values and do whatever with them. -const useEffectWithComparison = (fn, props) => { +export const useEffectWithComparison = (fn, props) => { const [prevProps, update] = useState({}); return useEffect(() => { From 53a5198e02c4f0894922a17f8e4635d04662196a Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 17:27:38 -0300 Subject: [PATCH 04/10] :sparkles: create useEventListener hook --- client/utils/custom-hooks.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js index d88066a5..cf6c0130 100644 --- a/client/utils/custom-hooks.js +++ b/client/utils/custom-hooks.js @@ -52,3 +52,8 @@ export const useEffectWithComparison = (fn, props) => { update(props); }, Object.values(props)); }; + +export const useEventListener = (event, callback, useCapture = false) => useEffect(() => { + document.addEventListener(event, callback, useCapture); + return document.removeEventListener(event, callback, useCapture); +}, []); From fac3f9607279bccba656265a8f4bfc9f2128ddd7 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 13 Aug 2020 18:29:39 -0300 Subject: [PATCH 05/10] :construction: copy handleGlobalKeydown to MobileIDEView --- client/components/mobile/Header.jsx | 3 +- client/modules/IDE/pages/MobileIDEView.jsx | 102 +++++++++++++++++++-- client/utils/device.js | 1 + 3 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 client/utils/device.js diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx index 96e82177..28689037 100644 --- a/client/components/mobile/Header.jsx +++ b/client/components/mobile/Header.jsx @@ -77,8 +77,9 @@ const Header = ({ ); + Header.propTypes = { - title: PropTypes.string, + title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), subtitle: PropTypes.string, leftButton: PropTypes.element, children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]), diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index 664aa784..ac73644d 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -11,6 +11,8 @@ import { bindActionCreators } from 'redux'; import * as IDEActions from '../actions/ide'; import * as ProjectActions from '../actions/project'; import * as ConsoleActions from '../actions/console'; +import * as PreferencesActions from '../actions/preferences'; + // Local Imports import Editor from '../components/Editor'; @@ -30,7 +32,9 @@ import useAsModal from '../../../components/useAsModal'; import { PreferencesIcon } from '../../../common/icons'; import Dropdown from '../../../components/Dropdown'; -import { useEffectWithComparison } from '../../../utils/custom-hooks'; +import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks'; + +import * as device from '../../../utils/device'; const withChangeDot = (title, unsavedChanges = false) => ( @@ -69,6 +73,69 @@ const getNatOptions = (username = undefined) => const isUserOwner = ({ project, user }) => project && project.owner && project.owner.id === user.id; +// TODO: This could go into +const handleGlobalKeydown = (props, cmController) => (e) => { + alert('haha'); + const { + user, project, ide, + setAllAccessibleOutput, + saveProject, cloneProject, showErrorModal, startSketch, stopSketch, + expandSidebar, collapseSidebar, expandConsole, collapseConsole, + closeNewFolderModal, closeUploadFileModal, closeNewFileModal + } = props; + + + const isMac = device.isMac(); + + // const ctrlDown = (e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac); + const ctrlDown = (isMac ? e.metaKey : e.ctrlKey); + + if (ctrlDown) { + if (e.shiftKey) { + if (e.keyCode === 13) { + e.preventDefault(); + e.stopPropagation(); + stopSketch(); + } else if (e.keyCode === 13) { + e.preventDefault(); + e.stopPropagation(); + startSketch(); + // 50 === 2 + } else if (e.keyCode === 50 + ) { + e.preventDefault(); + setAllAccessibleOutput(false); + // 49 === 1 + } else if (e.keyCode === 49) { + e.preventDefault(); + setAllAccessibleOutput(true); + } + } else if (e.keyCode === 83) { + // 83 === s + e.preventDefault(); + e.stopPropagation(); + if (isUserOwner(props) || (user.authenticated && !project.owner)) saveProject(cmController.getContent()); + else if (user.authenticated) cloneProject(); + else showErrorModal('forceAuthentication'); + + // 13 === enter + } else if (e.keyCode === 66) { + e.preventDefault(); + if (!ide.sidebarIsExpanded) expandSidebar(); + else collapseSidebar(); + } + } else if (e.keyCode === 192 && e.ctrlKey) { + e.preventDefault(); + if (ide.consoleIsExpanded) collapseConsole(); + else expandConsole(); + } else if (e.keyCode === 27) { + if (ide.newFolderModalVisible) closeNewFolderModal(); + else if (ide.uploadFileModalVisible) closeUploadFileModal(); + else if (ide.modalIsVisible) closeNewFileModal(); + } +}; + + const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => { const { autosaveProject, preferences, ide, selectedFile: file, project @@ -95,14 +162,14 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) = } }; - const MobileIDEView = (props) => { const { ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole, stopSketch, startSketch, getProject, clearPersistedState, autosaveProject } = props; - const [tmController, setTmController] = useState(null); // eslint-disable-line + + const [cmController, setCmController] = useState(null); // eslint-disable-line const { username } = user; const { consoleIsExpanded } = ide; @@ -139,6 +206,10 @@ const MobileIDEView = (props) => { autosaveProject, preferences, ide, selectedFile }); + // useEventListener('keydown', () => alert('haha')); + useEventListener('keydown', handleGlobalKeydown(props, cmController)); + + return (
{
- + );