diff --git a/client/common/icons.jsx b/client/common/icons.jsx index 215083a6..cc979d3d 100644 --- a/client/common/icons.jsx +++ b/client/common/icons.jsx @@ -14,6 +14,7 @@ import Preferences from '../images/preferences.svg'; import Play from '../images/triangle-arrow-right.svg'; import More from '../images/more.svg'; import Code from '../images/code.svg'; +import Save from '../images/save.svg'; import Terminal from '../images/terminal.svg'; @@ -81,3 +82,4 @@ export const PlayIcon = withLabel(Play); export const MoreIcon = withLabel(More); export const TerminalIcon = withLabel(Terminal); export const CodeIcon = withLabel(Code); +export const SaveIcon = withLabel(Save); diff --git a/client/components/mobile/ActionStrip.jsx b/client/components/mobile/ActionStrip.jsx index 0d75a579..a93a6607 100644 --- a/client/components/mobile/ActionStrip.jsx +++ b/client/components/mobile/ActionStrip.jsx @@ -1,13 +1,12 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { bindActionCreators } from 'redux'; -import { useDispatch, useSelector } from 'react-redux'; import { remSize } from '../../theme'; import IconButton from './IconButton'; -import { TerminalIcon } from '../../common/icons'; -import * as IDEActions from '../../modules/IDE/actions/ide'; -const BottomBarContent = styled.h2` +const BottomBarContent = styled.div` + display: grid; + grid-template-columns: repeat(8,1fr); padding: ${remSize(8)}; svg { @@ -15,21 +14,23 @@ const BottomBarContent = styled.h2` } `; -export default () => { - const { expandConsole, collapseConsole } = bindActionCreators(IDEActions, useDispatch()); - const { consoleIsExpanded } = useSelector(state => state.ide); +const ActionStrip = ({ actions }) => ( + + {actions.map(({ icon, aria, action }) => + ( action()} + />))} + ); - const actions = [{ icon: TerminalIcon, aria: 'Say Something', action: consoleIsExpanded ? collapseConsole : expandConsole }]; - - return ( - - {actions.map(({ icon, aria, action }) => - ( action()} - />))} - - ); +ActionStrip.propTypes = { + actions: PropTypes.arrayOf(PropTypes.shape({ + icon: PropTypes.element.isRequired, + aria: PropTypes.string.isRequired, + action: PropTypes.func.isRequired + })).isRequired }; + +export default ActionStrip; 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/images/save.svg b/client/images/save.svg new file mode 100644 index 00000000..b32e097c --- /dev/null +++ b/client/images/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index b57cacd2..9c15112a 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -126,7 +126,7 @@ function getSynchedProject(currentState, responseProject) { }; } -export function saveProject(selectedFile = null, autosave = false) { +export function saveProject(selectedFile = null, autosave = false, mobile = false) { return (dispatch, getState) => { const state = getState(); if (state.project.isSaving) { @@ -185,16 +185,15 @@ export function saveProject(selectedFile = null, autosave = false) { .then((response) => { dispatch(endSavingProject()); const { hasChanges, synchedProject } = getSynchedProject(getState(), response.data); + + dispatch(setNewProject(synchedProject)); + dispatch(setUnsavedChanges(false)); + browserHistory.push(`${mobile ? '/mobile' : ''}/${response.data.user.username}/sketches/${response.data.id}`); + if (hasChanges) { - dispatch(setNewProject(synchedProject)); - dispatch(setUnsavedChanges(false)); - browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`); dispatch(setUnsavedChanges(true)); - } else { - dispatch(setNewProject(synchedProject)); - dispatch(setUnsavedChanges(false)); - browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`); } + dispatch(projectSaveSuccess()); if (!autosave) { if (state.preferences.autosave) { @@ -222,9 +221,9 @@ export function saveProject(selectedFile = null, autosave = false) { }; } -export function autosaveProject() { +export function autosaveProject(mobile = false) { return (dispatch, getState) => { - saveProject(null, true)(dispatch, getState); + saveProject(null, true, mobile)(dispatch, getState); }; } diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index d48399cb..f924db16 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -10,6 +10,9 @@ 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'; @@ -26,11 +29,13 @@ import { remSize } from '../../../theme'; // import OverlayManager from '../../../components/OverlayManager'; import ActionStrip from '../../../components/mobile/ActionStrip'; import useAsModal from '../../../components/useAsModal'; -import { PreferencesIcon } from '../../../common/icons'; +import { PreferencesIcon, TerminalIcon, SaveIcon } from '../../../common/icons'; import Dropdown from '../../../components/Dropdown'; -const isUserOwner = ({ project, user }) => - project.owner && project.owner.id === user.id; + +import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks'; + +import * as device from '../../../utils/device'; const withChangeDot = (title, unsavedChanges = false) => ( @@ -65,13 +70,111 @@ const getNatOptions = (username = undefined) => ] ); -const MobileIDEView = (props) => { + +const isUserOwner = ({ project, user }) => + project && project.owner && project.owner.id === user.id; + +const canSaveProject = (project, user) => + isUserOwner({ project, user }) || (user.authenticated && !project.owner); + +// TODO: This could go into +const handleGlobalKeydown = (props, cmController) => (e) => { const { - ide, project, selectedFile, user, params, unsavedChanges, - stopSketch, startSketch, getProject, clearPersistedState + user, project, ide, + setAllAccessibleOutput, + saveProject, cloneProject, showErrorModal, startSketch, stopSketch, + expandSidebar, collapseSidebar, expandConsole, collapseConsole, + closeNewFolderModal, closeUploadFileModal, closeNewFileModal } = props; - const [tmController, setTmController] = useState(null); // eslint-disable-line + + 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 (canSaveProject(project, user)) saveProject(cmController.getContent(), false, true); + 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, user + } = props; + + const { selectedFile: oldFile } = prevProps; + + const doAutosave = () => autosaveProject(true); + + 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'); + setAutosaveInterval(setTimeout(doAutosave, 20000)); + } + } else if (autosaveInterval && !preferences.autosave) { + clearTimeout(autosaveInterval); + setAutosaveInterval(null); + } + } else if (autosaveInterval) { + clearTimeout(autosaveInterval); + setAutosaveInterval(null); + } +}; + +const MobileIDEView = (props) => { + const { + ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole, + stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject + } = props; + + + const [cmController, setCmController] = useState(null); // eslint-disable-line const { username } = user; const { consoleIsExpanded } = ide; @@ -84,7 +187,10 @@ const MobileIDEView = (props) => { // Force state reset useEffect(clearPersistedState, []); - useEffect(stopSketch, []); + useEffect(() => { + stopSketch(); + collapseConsole(); + }, []); // Load Project const [currentProjectID, setCurrentProjectID] = useState(null); @@ -99,6 +205,19 @@ const MobileIDEView = (props) => { }, [params, project, username]); + // TODO: This behavior could move to + const [autosaveInterval, setAutosaveInterval] = useState(null); + useEffectWithComparison(autosave(autosaveInterval, setAutosaveInterval), { + autosaveProject, preferences, ide, selectedFile, project, user + }); + + useEventListener('keydown', handleGlobalKeydown(props, cmController), false, [props]); + + const projectActions = + [{ icon: TerminalIcon, aria: 'Toggle console open/closed', action: consoleIsExpanded ? collapseConsole : expandConsole }, + { icon: SaveIcon, aria: 'Save project', action: () => saveProject(cmController.getContent(), false, true) } + ]; + return (
{
- + ); }; +const handleGlobalKeydownProps = { + expandConsole: PropTypes.func.isRequired, + collapseConsole: PropTypes.func.isRequired, + expandSidebar: PropTypes.func.isRequired, + collapseSidebar: PropTypes.func.isRequired, + + setAllAccessibleOutput: PropTypes.func.isRequired, + saveProject: PropTypes.func.isRequired, + cloneProject: PropTypes.func.isRequired, + showErrorModal: PropTypes.func.isRequired, + + closeNewFolderModal: PropTypes.func.isRequired, + closeUploadFileModal: PropTypes.func.isRequired, + closeNewFileModal: PropTypes.func.isRequired, +}; + MobileIDEView.propTypes = { ide: PropTypes.shape({ consoleIsExpanded: PropTypes.bool.isRequired, }).isRequired, + preferences: PropTypes.shape({ + }).isRequired, + project: PropTypes.shape({ id: PropTypes.string, name: PropTypes.string.isRequired, @@ -172,6 +310,10 @@ MobileIDEView.propTypes = { stopSketch: PropTypes.func.isRequired, getProject: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired, + autosaveProject: PropTypes.func.isRequired, + + + ...handleGlobalKeydownProps }; function mapStateToProps(state) { @@ -192,7 +334,9 @@ function mapStateToProps(state) { const mapDispatchToProps = dispatch => bindActionCreators({ ...ProjectActions, - ...IDEActions + ...IDEActions, + ...ConsoleActions, + ...PreferencesActions }, dispatch); export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView)); diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js index e289147f..b0981ae0 100644 --- a/client/utils/custom-hooks.js +++ b/client/utils/custom-hooks.js @@ -40,3 +40,20 @@ export const useModalBehavior = (hideOverlay) => { 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. +export const useEffectWithComparison = (fn, props) => { + const [prevProps, update] = useState({}); + + return useEffect(() => { + fn(props, prevProps); + update(props); + }, Object.values(props)); +}; + +export const useEventListener = (event, callback, useCapture = false, list = []) => useEffect(() => { + document.addEventListener(event, callback, useCapture); + return () => document.removeEventListener(event, callback, useCapture); +}, list); diff --git a/client/utils/device.js b/client/utils/device.js new file mode 100644 index 00000000..040b16b7 --- /dev/null +++ b/client/utils/device.js @@ -0,0 +1 @@ +export const isMac = () => navigator.userAgent.toLowerCase().indexOf('mac') !== -1; // eslint-disable-line