Merge branch 'develop' of https://github.com/processing/p5.js-web-editor into dewanshmobile/mobilenav

Author: dewanshDT

client/modules/IDE/components/Editor.jsx

@@ -44,6 +44,7 @@ import '../../../utils/htmlmixed';
 import '../../../utils/p5-javascript';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
+import { selectActiveFile } from '../selectors/files';
 import AssetPreview from './AssetPreview';
 import { metaKey } from '../../../utils/metaKey';
 import './show-hint';
@@ -605,10 +606,7 @@ Editor.propTypes = {
 function mapStateToProps(state) {
   return {
     files: state.files,
-    file:
-      state.files.find((file) => file.isSelectedFile) ||
-      state.files.find((file) => file.name === 'sketch.js') ||
-      state.files.find((file) => file.name !== 'root'),
+    file: selectActiveFile(state),
     htmlFile: getHTMLFile(state.files),
     ide: state.ide,
     preferences: state.preferences,

client/modules/IDE/components/Header/Nav.jsx

@@ -14,6 +14,7 @@ import { setLanguage } from '../../actions/preferences';
 import NavBar from '../../../../components/Nav/NavBar';
 import CaretLeftIcon from '../../../../images/left-arrow.svg';
 import LogoIcon from '../../../../images/p5js-logo-small.svg';
+import { selectRootFile } from '../../selectors/files';
 import { selectSketchPath } from '../../selectors/project';
 import { metaKey, metaKeyName } from '../../../../utils/metaKey';
 import { useSketchActions } from '../../hooks';
@@ -111,17 +112,14 @@ const DashboardMenu = () => {
   );
 };
 
-const ProjectMenu = (props) => {
+const ProjectMenu = () => {
   const isUserOwner = useSelector(getIsUserOwner);
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
 
   const isUnsaved = !project?.id;
 
-  // TODO: use selectRootFile selector
-  const rootFile = useSelector(
-    (state) => state.files.filter((file) => file.name === 'root')[0]
-  );
+  const rootFile = useSelector(selectRootFile);
 
   const cmRef = useContext(CmControllerContext);