✨ add save button to bottom bar

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/images/save.svg

@@ -29,9 +29,10 @@ 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';
 
+
 import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks';
 
 import * as device from '../../../utils/device';
@@ -147,10 +148,6 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) =
 
   const doAutosave = () => autosaveProject(true);
 
-  console.log(user);
-
-  console.log(isUserOwner(props), project);
-
   if (isUserOwner(props) && project.id) {
     if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) {
       if (file.name === oldFile.name && file.content !== oldFile.content) {
@@ -172,8 +169,8 @@ const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) =
 
 const MobileIDEView = (props) => {
   const {
-    ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole,
-    stopSketch, startSketch, getProject, clearPersistedState, autosaveProject
+    ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
+    stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject
   } = props;
 
 
@@ -216,6 +213,10 @@ const MobileIDEView = (props) => {
 
   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>
@@ -246,7 +247,7 @@ const MobileIDEView = (props) => {
             <Console />
           </Expander>
         )}
-        <ActionStrip />
+        <ActionStrip actions={projectActions} />
       </Footer>
     </Screen>
   );