Merge branch 'develop' into feature/date-i18n

Author: catarak

client/components/Nav.jsx

@@ -14,6 +14,7 @@ import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
 import { metaKeyName, } from '../utils/metaKey';
+import { getIsUserOwner } from '../modules/IDE/selectors/users';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
 import TriangleIcon from '../images/down-filled-triangle.svg';
@@ -215,10 +216,6 @@ class Nav extends React.PureComponent {
     }
   }
 
-  isUserOwner() {
-    return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
-  }
-
   handleFocus(dropdown) {
     this.clearHideTimeout();
     this.setDropdown(dropdown);
@@ -283,7 +280,7 @@ class Nav extends React.PureComponent {
                 {this.props.t('Nav.File.New')}
               </button>
             </li>
-            { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
+            { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.props.isUserOwner) &&
             <li className="nav__dropdown-item">
               <button
                 onClick={this.handleSave}
@@ -797,6 +794,7 @@ Nav.propTypes = {
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
+  isUserOwner: PropTypes.bool.isRequired
 };
 
 Nav.defaultProps = {
@@ -818,7 +816,8 @@ function mapStateToProps(state) {
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
     rootFile: state.files.filter(file => file.name === 'root')[0],
-    language: state.preferences.language
+    language: state.preferences.language,
+    isUserOwner: getIsUserOwner(state)
   };
 }
 

client/components/mobile/Explorer.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Sidebar from './Sidebar';
 import ConnectedFileNode from '../../modules/IDE/components/FileNode';
 
 
-const Explorer = ({ id, canEdit, onPressClose }) => (
-  <Sidebar title="Files" onPressClose={onPressClose}>
-    <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
-  </Sidebar>
-);
+const Explorer = ({ id, canEdit, onPressClose }) => {
+  const { t } = useTranslation();
+  return (
+    <Sidebar title={t('Explorer.Files')} onPressClose={onPressClose}>
+      <ConnectedFileNode id={id} canEdit={canEdit} onClickFile={() => onPressClose()} />
+    </Sidebar>
+  );
+};
 
 Explorer.propTypes = {
   id: PropTypes.number.isRequired,

client/components/mobile/MobileScreen.jsx

@@ -1,19 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
 
-const Screen = ({ children, fullscreen }) => (
-  <div className={fullscreen && 'fullscreen-preview'}>
+const ScreenWrapper = styled.div`
+  .toast {
+    font-size: ${remSize(12)};
+    padding: ${remSize(8)};
+
+    border-radius: ${remSize(4)};
+    width: 92%;
+    top: unset;
+    min-width: unset;
+    bottom: ${remSize(64)}
+  }
+`;
+
+const Screen = ({ children, fullscreen, slimheader }) => (
+  <ScreenWrapper className={fullscreen && 'fullscreen-preview'} slimheader={slimheader}>
     {children}
-  </div>
+  </ScreenWrapper>
 );
 
 Screen.defaultProps = {
-  fullscreen: false
+  fullscreen: false,
+  slimheader: false,
 };
 
 Screen.propTypes = {
   children: PropTypes.node.isRequired,
-  fullscreen: PropTypes.bool
+  fullscreen: PropTypes.bool,
+  slimheader: PropTypes.bool
 };
 
 export default Screen;

client/modules/App/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/actions/uploader.js

@@ -77,9 +77,6 @@ export function dropzoneSendingCallback(file, xhr, formData) {
       Object.keys(file.postData).forEach((key) => {
         formData.append(key, file.postData[key]);
       });
-      formData.append('Content-type', file.type);
-      formData.append('Content-length', '');
-      formData.append('acl', 'public-read');
     }
   };
 }

client/modules/IDE/components/Editor.jsx

@@ -43,6 +43,7 @@ import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
 import RightArrowIcon from '../../../images/right-arrow.svg';
 import LeftArrowIcon from '../../../images/left-arrow.svg';
 import { getHTMLFile } from '../reducers/files';
+import { getIsUserOwner } from '../selectors/users';
 
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
@@ -411,7 +412,7 @@ Editor.propTypes = {
   isExpanded: PropTypes.bool.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
-  isUserOwner: PropTypes.bool,
+  isUserOwner: PropTypes.bool.isRequired,
   clearConsole: PropTypes.func.isRequired,
   showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
@@ -421,7 +422,6 @@ Editor.propTypes = {
 };
 
 Editor.defaultProps = {
-  isUserOwner: false,
   consoleEvents: [],
 };
 
@@ -447,7 +447,8 @@ function mapStateToProps(state) {
     ...state.project,
     ...state.editorAccessibility,
     isExpanded: state.ide.sidebarIsExpanded,
-    projectSavedTime: state.project.updatedAt
+    projectSavedTime: state.project.updatedAt,
+    isUserOwner: getIsUserOwner(state)
   };
 }
 

client/modules/IDE/components/ErrorModal.jsx

@@ -15,6 +15,19 @@ class ErrorModal extends React.Component {
     );
   }
 
+  oauthError() {
+    const { t, service } = this.props;
+    const serviceLabels = {
+      github: 'GitHub',
+      google: 'Google'
+    };
+    return (
+      <p>
+        {t('ErrorModal.LinkMessage', { serviceauth: serviceLabels[service] })}
+      </p>
+    );
+  }
+
   staleSession() {
     return (
       <p>
@@ -42,6 +55,8 @@ class ErrorModal extends React.Component {
             return this.staleSession();
           } else if (this.props.type === 'staleProject') {
             return this.staleProject();
+          } else if (this.props.type === 'oauthError') {
+            return this.oauthError();
           }
         })()}
       </div>
@@ -52,7 +67,12 @@ class ErrorModal extends React.Component {
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
   closeModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  service: PropTypes.string
+};
+
+ErrorModal.defaultProps = {
+  service: ''
 };
 
 export default withTranslation()(ErrorModal);

client/modules/IDE/components/Preferences/PreferenceCreators.jsx

@@ -1,11 +1,16 @@
-export const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [
-  {
-    value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
-  },
-  {
-    value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
-  },
-];
+import { useTranslation } from 'react-i18next';
+
+export const optionsOnOff = (name) => {
+  const { t } = useTranslation();
+  return [
+    {
+      value: true, label: t('PreferenceCreators.On'), ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
+    },
+    {
+      value: false, label: t('PreferenceCreators.Off'), ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
+    }
+  ];
+};
 
 export const optionsPickOne = (name, ...options) => options.map(option => ({
   value: option,

client/modules/IDE/pages/IDEView.jsx

@@ -34,17 +34,14 @@ import About from '../components/About';
 import AddToCollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
 import { CollectionSearchbar } from '../components/Searchbar';
+import { getIsUserOwner } from '../selectors/users';
 
 
 function getTitle(props) {
   const { id } = props.project;
   return id ? `p5.js Web Editor | ${props.project.name}` : 'p5.js Web Editor';
 }
 
-function isUserOwner(props) {
-  return props.project.owner && props.project.owner.id === props.user.id;
-}
-
 function warnIfUnsavedChanges(props) {
   // eslint-disable-line
   const { route } = props.route;
@@ -138,7 +135,7 @@ class IDEView extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (isUserOwner(this.props) && this.props.project.id) {
+    if (this.props.isUserOwner && this.props.project.id) {
       if (
         this.props.preferences.autosave &&
         this.props.ide.unsavedChanges &&
@@ -151,7 +148,6 @@ class IDEView extends React.Component {
           if (this.autosaveInterval) {
             clearTimeout(this.autosaveInterval);
           }
-          console.log('will save project in 20 seconds');
           this.autosaveInterval = setTimeout(this.props.autosaveProject, 20000);
         }
       } else if (this.autosaveInterval && !this.props.preferences.autosave) {
@@ -182,7 +178,7 @@ class IDEView extends React.Component {
       e.preventDefault();
       e.stopPropagation();
       if (
-        isUserOwner(this.props) ||
+        this.props.isUserOwner ||
         (this.props.user.authenticated && !this.props.project.owner)
       ) {
         this.props.saveProject(this.cmController.getContent());
@@ -603,6 +599,7 @@ IDEView.propTypes = {
   openUploadFileModal: PropTypes.func.isRequired,
   closeUploadFileModal: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  isUserOwner: PropTypes.bool.isRequired
 };
 
 function mapStateToProps(state) {
@@ -620,6 +617,7 @@ function mapStateToProps(state) {
     project: state.project,
     toast: state.toast,
     console: state.console,
+    isUserOwner: getIsUserOwner(state)
   };
 }