✨ create useEffectWithComparison hook

Author: ghalestrilo

client/modules/IDE/pages/MobileIDEView.jsx

@@ -66,6 +66,44 @@ 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);
+        }
+        console.log('will save project in 20 seconds');
+        this.autosaveInterval = setTimeout(props.autosaveProject, 20000);
+      }
+    } else if (this.autosaveInterval && !props.preferences.autosave) {
+      clearTimeout(this.autosaveInterval);
+      this.autosaveInterval = null;
+    }
+  } else if (this.autosaveInterval) {
+    clearTimeout(this.autosaveInterval);
+    this.autosaveInterval = 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,
@@ -103,6 +141,9 @@ const MobileIDEView = (props) => {
   }, [params, project, username]);
 
 
+  // useEffectWithComparison(() => alert('haha'), { consoleIsExpanded });
+
+
   return (
     <Screen fullscreen>
       <Header

client/utils/custom-hooks.js

@@ -40,3 +40,15 @@ export const useModalBehavior = (hideOverlay) => {
 
   return [visible, trigger, setRef];
 };
+
+// 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) => {
+  const [prevProps, update] = useState({});
+
+  return useEffect(() => {
+    fn(props, prevProps);
+    update(props);
+  }, Object.values(props));
+};