r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

✨ create autosave method / thunk

Browse source
This commit is contained in:
ghalestrilo 2020-08-13 17:22:03 -03:00
parent 955d8c20a4
commit 99594a390c
2 changed files with 35 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
client/modules/IDE/pages/MobileIDEView.jsx
View file

@ -30,8 +30,7 @@ import useAsModal from '../../../components/useAsModal';
import { PreferencesIcon } from '../../../common/icons'; import { PreferencesIcon } from '../../../common/icons';
import Dropdown from '../../../components/Dropdown'; import Dropdown from '../../../components/Dropdown';
const isUserOwner = ({ project, user }) => import { useEffectWithComparison } from '../../../utils/custom-hooks';
project.owner && project.owner.id === user.id;
const withChangeDot = (title, unsavedChanges = false) => ( const withChangeDot = (title, unsavedChanges = false) => (
<span> <span>
@ -67,47 +66,40 @@ const getNatOptions = (username = undefined) =>
); );
const asd = (props, prevProps) => { const isUserOwner = ({ project, user }) =>
if (isUserOwner(this.props) && this.props.project.id) { project && project.owner && project.owner.id === user.id;
if (
props.preferences.autosave && const autosave = (autosaveInterval, setAutosaveInterval) => (props, prevProps) => {
props.ide.unsavedChanges && const {
!props.ide.justOpenedProject autosaveProject, preferences, ide, selectedFile: file, project
) { } = props;
if (
props.selectedFile.name === prevProps.selectedFile.name && const { selectedFile: oldFile } = prevProps;
props.selectedFile.content !== prevProps.selectedFile.content
) { if (isUserOwner(props) && project.id) {
if (this.autosaveInterval) { if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) {
clearTimeout(this.autosaveInterval); if (file.name === oldFile.name && file.content !== oldFile.content) {
if (autosaveInterval) {
clearTimeout(autosaveInterval);
} }
console.log('will save project in 20 seconds'); 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) { } else if (autosaveInterval && !preferences.autosave) {
clearTimeout(this.autosaveInterval); clearTimeout(autosaveInterval);
this.autosaveInterval = null; setAutosaveInterval(null);
} }
} else if (this.autosaveInterval) { } else if (autosaveInterval) {
clearTimeout(this.autosaveInterval); clearTimeout(autosaveInterval);
this.autosaveInterval = null; setAutosaveInterval(null);
} }
}; };
const useEffectWithComparison = (fn, props) => {
const [prevProps, update] = useState({});
return useEffect(() => {
fn(props, prevProps);
update(props);
}, Object.values(props));
};
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
const { const {
ide, project, selectedFile, user, params, unsavedChanges, collapseConsole, ide, preferences, project, selectedFile, user, params, unsavedChanges, collapseConsole,
stopSketch, startSketch, getProject, clearPersistedState, stopSketch, startSketch, getProject, clearPersistedState, autosaveProject
} = props; } = props;
const [tmController, setTmController] = useState(null); // eslint-disable-line const [tmController, setTmController] = useState(null); // eslint-disable-line
@ -141,8 +133,11 @@ const MobileIDEView = (props) => {
}, [params, project, username]); }, [params, project, username]);
// useEffectWithComparison(() => alert('haha'), { consoleIsExpanded }); // TODO: This behavior could move to <Editor />
const [autosaveInterval, setAutosaveInterval] = useState(null);
useEffectWithComparison(autosave(autosaveInterval, setAutosaveInterval), {
autosaveProject, preferences, ide, selectedFile
});
return ( return (
<Screen fullscreen> <Screen fullscreen>
@ -184,6 +179,9 @@ MobileIDEView.propTypes = {
consoleIsExpanded: PropTypes.bool.isRequired, consoleIsExpanded: PropTypes.bool.isRequired,
}).isRequired, }).isRequired,
preferences: PropTypes.shape({
}).isRequired,
project: PropTypes.shape({ project: PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
@ -218,6 +216,7 @@ MobileIDEView.propTypes = {
getProject: PropTypes.func.isRequired, getProject: PropTypes.func.isRequired,
clearPersistedState: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired,
collapseConsole: PropTypes.func.isRequired, collapseConsole: PropTypes.func.isRequired,
autosaveProject: PropTypes.func.isRequired,
}; };
function mapStateToProps(state) { function mapStateToProps(state) {

2
client/utils/custom-hooks.js
View file

@ -44,7 +44,7 @@ export const useModalBehavior = (hideOverlay) => {
// Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 }) // Usage: useEffectWithComparison((props, prevProps) => { ... }, { prop1, prop2 })
// This hook basically applies useEffect but keeping track of the last value of relevant props // 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. // 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({}); const [prevProps, update] = useState({});
return useEffect(() => { return useEffect(() => {