Merge pull request #1617 from processing/bug/timer

[#1616] Restore isUserOwner prop to Editor

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

client/modules/IDE/pages/MobileIDEView.jsx

@@ -33,6 +33,7 @@ import { remSize } from '../../../theme';
 import ActionStrip from '../../../components/mobile/ActionStrip';
 import useAsModal from '../../../components/useAsModal';
 import Dropdown from '../../../components/Dropdown';
+import { getIsUserOwner } from '../selectors/users';
 
 
 import { useEffectWithComparison, useEventListener } from '../../../utils/custom-hooks';
@@ -76,12 +77,8 @@ const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceD
     ]
   );
 
-
-const isUserOwner = ({ project, user }) =>
-  project && project.owner && project.owner.id === user.id;
-
-const canSaveProject = (project, user) =>
-  isUserOwner({ project, user }) || (user.authenticated && !project.owner);
+const canSaveProject = (isUserOwner, project, user) =>
+  isUserOwner || (user.authenticated && !project.owner);
 
 // TODO: This could go into <Editor />
 const handleGlobalKeydown = (props, cmController) => (e) => {
@@ -90,7 +87,7 @@ const handleGlobalKeydown = (props, cmController) => (e) => {
     setAllAccessibleOutput,
     saveProject, cloneProject, showErrorModal, startSketch, stopSketch,
     expandSidebar, collapseSidebar, expandConsole, collapseConsole,
-    closeNewFolderModal, closeUploadFileModal, closeNewFileModal
+    closeNewFolderModal, closeUploadFileModal, closeNewFileModal, isUserOwner
   } = props;
 
 
@@ -123,7 +120,7 @@ const handleGlobalKeydown = (props, cmController) => (e) => {
       // 83 === s
       e.preventDefault();
       e.stopPropagation();
-      if (canSaveProject(project, user)) saveProject(cmController.getContent(), false, true);
+      if (canSaveProject(isUserOwner, project, user)) saveProject(cmController.getContent(), false, true);
       else if (user.authenticated) cloneProject();
       else showErrorModal('forceAuthentication');
 
@@ -147,14 +144,14 @@ const handleGlobalKeydown = (props, cmController) => (e) => {
 
 const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => {
   const {
-    autosaveProject, preferences, ide, selectedFile: file, project
+    autosaveProject, preferences, ide, selectedFile: file, project, isUserOwner
   } = props;
 
   const { selectedFile: oldFile } = prevProps;
 
   const doAutosave = () => autosaveProject(true);
 
-  if (isUserOwner(props) && project.id) {
+  if (props.isUserOwner && project.id) {
     if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) {
       if (file.name === oldFile.name && file.content !== oldFile.content) {
         if (autosaveInterval) {
@@ -189,7 +186,7 @@ const MobileIDEView = (props) => {
   const {
     ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
     stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject, files,
-    toggleForceDesktop, logoutUser, toast
+    toggleForceDesktop, logoutUser, toast, isUserOwner
   } = props;
 
 
@@ -234,7 +231,7 @@ const MobileIDEView = (props) => {
   // TODO: This behavior could move to <Editor />
   const [autosaveInterval, setAutosaveInterval] = useState(null);
   useEffectWithComparison(autosave(autosaveInterval, setAutosaveInterval), {
-    autosaveProject, preferences, ide, selectedFile, project, user
+    autosaveProject, preferences, ide, selectedFile, project, user, isUserOwner
   });
 
   useEventListener('keydown', handleGlobalKeydown(props, cmController), false, [props]);
@@ -299,6 +296,7 @@ const handleGlobalKeydownProps = {
   closeNewFolderModal: PropTypes.func.isRequired,
   closeUploadFileModal: PropTypes.func.isRequired,
   closeNewFileModal: PropTypes.func.isRequired,
+  isUserOwner: PropTypes.bool.isRequired
 };
 
 MobileIDEView.propTypes = {
@@ -356,6 +354,7 @@ MobileIDEView.propTypes = {
 
   unsavedChanges: PropTypes.bool.isRequired,
   autosaveProject: PropTypes.func.isRequired,
+  isUserOwner: PropTypes.bool.isRequired,
 
 
   ...handleGlobalKeydownProps
@@ -375,6 +374,7 @@ function mapStateToProps(state) {
     project: state.project,
     toast: state.toast,
     console: state.console,
+    isUserOwner: getIsUserOwner(state)
   };
 }
 

client/modules/IDE/selectors/users.js

@@ -4,6 +4,8 @@ import getConfig from '../../../utils/getConfig';
 const getAuthenticated = state => state.user.authenticated;
 const getTotalSize = state => state.user.totalSize;
 const getAssetsTotalSize = state => state.assets.totalSize;
+const getSketchOwner = state => state.project.owner;
+const getUserId = state => state.user.id;
 const limit = getConfig('UPLOAD_LIMIT') || 250000000;
 
 export const getCanUploadMedia = createSelector(
@@ -28,3 +30,12 @@ export const getreachedTotalSizeLimit = createSelector(
     return false;
   }
 );
+
+export const getIsUserOwner = createSelector(
+  getSketchOwner,
+  getUserId,
+  (sketchOwner, userId) => {
+    if (!sketchOwner) return false;
+    return sketchOwner.id === userId;
+  }
+);