Merge branch 'feature/mobile-save-sketch' of https://github.com/ghalestrilo/p5.js-web-editor into feature/mobile-save-sketch

Author: ghalestrilo

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);

client/components/mobile/ActionStrip.jsx

@@ -1,35 +1,36 @@
 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 {
     max-height: ${remSize(32)};
   }
 `;
 
-export default () => {
-  const { expandConsole, collapseConsole } = bindActionCreators(IDEActions, useDispatch());
-  const { consoleIsExpanded } = useSelector(state => state.ide);
+const ActionStrip = ({ actions }) => (
+  <BottomBarContent>
+    {actions.map(({ icon, aria, action }) =>
+      (<IconButton
+        icon={icon}
+        aria-label={aria}
+        key={`bottom-bar-${aria}`}
+        onClick={() => action()}
+      />))}
+  </BottomBarContent>);
 
-  const actions = [{ icon: TerminalIcon, aria: 'Say Something', action: consoleIsExpanded ? collapseConsole : expandConsole }];
-
-  return (
-    <BottomBarContent>
-      {actions.map(({ icon, aria, action }) =>
-        (<IconButton
-          icon={icon}
-          aria-label={aria}
-          key={`bottom-bar-${aria}`}
-          onClick={() => action()}
-        />))}
-    </BottomBarContent>
-  );
+ActionStrip.propTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.element.isRequired,
+    aria: PropTypes.string.isRequired,
+    action: PropTypes.func.isRequired
+  })).isRequired
 };
+
+export default ActionStrip;

client/components/mobile/Header.jsx

@@ -77,8 +77,9 @@ const Header = ({
   </HeaderDiv>
 );
 
+
 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)]),

client/images/save.svg

@@ -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);
   };
 }
 

client/modules/IDE/actions/project.js

@@ -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) => (
   <span>
@@ -65,13 +70,111 @@ const getNatOptions = (username = undefined) =>
     ]
   );
 
+
+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 <Editor />
+const handleGlobalKeydown = (props, cmController) => (e) => {
+  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 (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, project, selectedFile, user, params, unsavedChanges,
-    stopSketch, startSketch, getProject, clearPersistedState
+    ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
+    stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject
   } = props;
 
-  const [tmController, setTmController] = useState(null); // eslint-disable-line
+
+  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 <Editor />
+  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 (
     <Screen fullscreen>
       <Header
@@ -119,7 +238,7 @@ const MobileIDEView = (props) => {
       </Header>
 
       <IDEWrapper>
-        <Editor provideController={setTmController} />
+        <Editor provideController={setCmController} />
       </IDEWrapper>
 
       <Footer>
@@ -128,17 +247,36 @@ const MobileIDEView = (props) => {
             <Console />
           </Expander>
         )}
-        <ActionStrip />
+        <ActionStrip actions={projectActions} />
       </Footer>
     </Screen>
   );
 };
 
+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));

client/modules/IDE/pages/MobileIDEView.jsx

@@ -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);

client/utils/custom-hooks.js

@@ -0,0 +1 @@
+export const isMac = () => navigator.userAgent.toLowerCase().indexOf('mac') !== -1; // eslint-disable-line