diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx index e62d63b4..664aa784 100644 --- a/client/modules/IDE/pages/MobileIDEView.jsx +++ b/client/modules/IDE/pages/MobileIDEView.jsx @@ -30,8 +30,7 @@ import useAsModal from '../../../components/useAsModal'; import { PreferencesIcon } from '../../../common/icons'; import Dropdown from '../../../components/Dropdown'; -const isUserOwner = ({ project, user }) => - project.owner && project.owner.id === user.id; +import { useEffectWithComparison } from '../../../utils/custom-hooks'; const withChangeDot = (title, unsavedChanges = false) => ( @@ -67,47 +66,40 @@ const getNatOptions = (username = undefined) => ); -const asd = (props, prevProps) => { - if (isUserOwner(this.props) && this.props.project.id) { - if ( - props.preferences.autosave && - props.ide.unsavedChanges && - !props.ide.justOpenedProject - ) { - if ( - props.selectedFile.name === prevProps.selectedFile.name && - props.selectedFile.content !== prevProps.selectedFile.content - ) { - if (this.autosaveInterval) { - clearTimeout(this.autosaveInterval); +const isUserOwner = ({ project, user }) => + project && project.owner && project.owner.id === user.id; + +const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => { + const { + autosaveProject, preferences, ide, selectedFile: file, project + } = props; + + const { selectedFile: oldFile } = prevProps; + + 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'); - this.autosaveInterval = setTimeout(props.autosaveProject, 20000); + setAutosaveInterval(setTimeout(autosaveProject, 20000)); } - } else if (this.autosaveInterval && !props.preferences.autosave) { - clearTimeout(this.autosaveInterval); - this.autosaveInterval = null; + } else if (autosaveInterval && !preferences.autosave) { + clearTimeout(autosaveInterval); + setAutosaveInterval(null); } - } else if (this.autosaveInterval) { - clearTimeout(this.autosaveInterval); - this.autosaveInterval = null; + } else if (autosaveInterval) { + clearTimeout(autosaveInterval); + setAutosaveInterval(null); } }; -const useEffectWithComparison = (fn, props) => { - const [prevProps, update] = useState({}); - - return useEffect(() => { - fn(props, prevProps); - update(props); - }, Object.values(props)); -}; - const MobileIDEView = (props) => { const { - ide, project, selectedFile, user, params, unsavedChanges, collapseConsole, - stopSketch, startSketch, getProject, clearPersistedState, + ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole, + stopSketch, startSketch, getProject, clearPersistedState, autosaveProject } = props; const [tmController, setTmController] = useState(null); // eslint-disable-line @@ -141,8 +133,11 @@ const MobileIDEView = (props) => { }, [params, project, username]); - // useEffectWithComparison(() => alert('haha'), { consoleIsExpanded }); - + // TODO: This behavior could move to + const [autosaveInterval, setAutosaveInterval] = useState(null); + useEffectWithComparison(autosave(autosaveInterval, setAutosaveInterval), { + autosaveProject, preferences, ide, selectedFile + }); return ( @@ -184,6 +179,9 @@ MobileIDEView.propTypes = { consoleIsExpanded: PropTypes.bool.isRequired, }).isRequired, + preferences: PropTypes.shape({ + }).isRequired, + project: PropTypes.shape({ id: PropTypes.string, name: PropTypes.string.isRequired, @@ -218,6 +216,7 @@ MobileIDEView.propTypes = { getProject: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired, collapseConsole: PropTypes.func.isRequired, + autosaveProject: PropTypes.func.isRequired, }; function mapStateToProps(state) { diff --git a/client/utils/custom-hooks.js b/client/utils/custom-hooks.js index 304497f4..d88066a5 100644 --- a/client/utils/custom-hooks.js +++ b/client/utils/custom-hooks.js @@ -44,7 +44,7 @@ export const useModalBehavior = (hideOverlay) => { // 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. -const useEffectWithComparison = (fn, props) => { +export const useEffectWithComparison = (fn, props) => { const [prevProps, update] = useState({}); return useEffect(() => {