* get params from react-router hook

* cleanup unused vars
* add dependencies to `useEffect`s

Author: lindapaiste

client/modules/IDE/pages/IDEView.jsx

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Prompt } from 'react-router-dom';
+import { useLocation, Prompt, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
@@ -12,13 +11,12 @@ import PreviewFrame from '../components/PreviewFrame';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import { updateFileContent } from '../actions/files';
-import { setPreviousPath, stopSketch } from '../actions/ide';
+import { stopSketch } from '../actions/ide';
 import {
   autosaveProject,
   clearPersistedState,
   getProject
 } from '../actions/project';
-import { selectActiveFile } from '../selectors/files';
 import { getIsUserOwner } from '../selectors/users';
 import RootPage from '../../../components/RootPage';
 import Header from '../components/Header';
@@ -70,15 +68,16 @@ function WarnIfUnsavedChanges() {
 
 export const CmControllerContext = React.createContext({});
 
-const IDEView = (props) => {
+const IDEView = () => {
   const ide = useSelector((state) => state.ide);
-  const selectedFile = useSelector(selectActiveFile);
   const preferences = useSelector((state) => state.preferences);
   const project = useSelector((state) => state.project);
   const isUserOwner = useSelector(getIsUserOwner);
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
+  const params = useParams();
+
   const [consoleSize, setConsoleSize] = useState(150);
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(true);
@@ -87,11 +86,6 @@ const IDEView = (props) => {
 
   const autosaveIntervalRef = useRef(null);
 
-  const location = useLocation();
-
-  const prevFileNameRef = useRef(selectedFile.name);
-  const locationRef = useRef(location.pathname);
-
   const syncFileContent = () => {
     const file = cmRef.current.getContent();
     dispatch(updateFileContent(file.id, file.content));
@@ -101,13 +95,14 @@ const IDEView = (props) => {
     dispatch(clearPersistedState());
 
     dispatch(stopSketch());
-    if (props.params.project_id) {
-      const { project_id: id, username } = props.params;
-      if (id !== project.id) {
-        dispatch(getProject(id, username));
-      }
+  }, [dispatch]);
+
+  useEffect(() => {
+    const { project_id: id, username } = params;
+    if (id && project.id !== id) {
+      dispatch(getProject(id, username));
     }
-  }, []);
+  }, [dispatch, params, project.id]);
 
   const autosaveAllowed = isUserOwner && project.id && preferences.autosave;
   const shouldAutosave = autosaveAllowed && ide.unsavedChanges;
@@ -123,16 +118,15 @@ const IDEView = (props) => {
     }
 
     if (shouldAutosave) {
-      autosaveIntervalRef.current = setTimeout(handleAutosave, 10000);
+      autosaveIntervalRef.current = setTimeout(handleAutosave, 5000);
     }
-    prevFileNameRef.current = selectedFile.name;
 
     return () => {
       if (autosaveIntervalRef.current) {
         clearTimeout(autosaveIntervalRef.current);
       }
     };
-}, [shouldAutosave, dispatch]);
+  }, [shouldAutosave, dispatch]);
 
   return (
     <RootPage>
@@ -249,12 +243,4 @@ const IDEView = (props) => {
   );
 };
 
-IDEView.propTypes = {
-  params: PropTypes.shape({
-    project_id: PropTypes.string,
-    username: PropTypes.string,
-    reset_password_token: PropTypes.string
-  }).isRequired
-};
-
 export default IDEView;