Create selector functions for files.

Author: lindapaiste

client/components/Nav.jsx

@@ -12,6 +12,7 @@ import {
   setAllAccessibleOutput,
   setLanguage
 } from '../modules/IDE/actions/preferences';
+import { selectRootFile } from '../modules/IDE/selectors/files';
 import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
@@ -403,7 +404,7 @@ function mapStateToProps(state) {
     project: state.project,
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
-    rootFile: state.files.filter((file) => file.name === 'root')[0],
+    rootFile: selectRootFile(state),
     language: state.preferences.language,
     isUserOwner: getIsUserOwner(state),
     editorLink: selectSketchPath(state)

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';
@@ -601,10 +602,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/Sidebar.jsx

@@ -9,6 +9,7 @@ import {
   openProjectOptions,
   openUploadFileModal
 } from '../actions/ide';
+import { selectRootFile } from '../selectors/files';
 import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
 
 import ConnectedFileNode from './FileNode';
@@ -23,9 +24,7 @@ export default function SideBar() {
 
   const [isFocused, setIsFocused] = useState(false);
 
-  const files = useSelector((state) => state.files);
-  // TODO: use `selectRootFile` defined in another PR
-  const rootFile = files.filter((file) => file.name === 'root')[0];
+  const rootFile = useSelector(selectRootFile);
   const projectOptionsVisible = useSelector(
     (state) => state.ide.projectOptionsVisible
   );

client/modules/IDE/pages/IDEView.jsx

@@ -33,6 +33,7 @@ import About from '../components/About';
 import AddToCollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
 import { CollectionSearchbar } from '../components/Searchbar';
+import { selectActiveFile } from '../selectors/files';
 import { getIsUserOwner } from '../selectors/users';
 import RootPage from '../../../components/RootPage';
 
@@ -549,10 +550,7 @@ IDEView.propTypes = {
 
 function mapStateToProps(state) {
   return {
-    selectedFile:
-      state.files.find((file) => file.isSelectedFile) ||
-      state.files.find((file) => file.name === 'sketch.js') ||
-      state.files.find((file) => file.name !== 'root'),
+    selectedFile: selectActiveFile(state),
     htmlFile: getHTMLFile(state.files),
     ide: state.ide,
     preferences: state.preferences,

client/modules/IDE/pages/MobileIDEView.jsx

@@ -41,6 +41,7 @@ import { remSize } from '../../../theme';
 import ActionStrip from '../../../components/mobile/ActionStrip';
 import useAsModal from '../../../components/useAsModal';
 import Dropdown from '../../../components/Dropdown';
+import { selectActiveFile } from '../selectors/files';
 import { getIsUserOwner } from '../selectors/users';
 
 import {
@@ -475,10 +476,7 @@ MobileIDEView.propTypes = {
 
 function mapStateToProps(state) {
   return {
-    selectedFile:
-      state.files.find((file) => file.isSelectedFile) ||
-      state.files.find((file) => file.name === 'sketch.js') ||
-      state.files.find((file) => file.name !== 'root'),
+    selectedFile: selectActiveFile(state),
     ide: state.ide,
     files: state.files,
     unsavedChanges: state.ide.unsavedChanges,

client/modules/IDE/selectors/files.js

@@ -0,0 +1,15 @@
+import { createSelector } from 'reselect';
+
+const selectFiles = (state) => state.files;
+
+export const selectRootFile = createSelector(selectFiles, (files) =>
+  files.find((file) => file.name === 'root')
+);
+
+export const selectActiveFile = createSelector(
+  selectFiles,
+  (files) =>
+    files.find((file) => file.isSelectedFile) ||
+    files.find((file) => file.name === 'sketch.js') ||
+    files.find((file) => file.name !== 'root')
+);

client/modules/Mobile/MobileSketchView.jsx

@@ -16,19 +16,15 @@ import { getHTMLFile } from '../IDE/reducers/files';
 
 import { ExitIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
+import { selectActiveFile } from '../IDE/selectors/files';
 import Content from './MobileViewContent';
 
 const MobileSketchView = () => {
   const { files, ide, preferences } = useSelector((state) => state);
 
   const htmlFile = useSelector((state) => getHTMLFile(state.files));
   const projectName = useSelector((state) => state.project.name);
-  const selectedFile = useSelector(
-    (state) =>
-      state.files.find((file) => file.isSelectedFile) ||
-      state.files.find((file) => file.name === 'sketch.js') ||
-      state.files.find((file) => file.name !== 'root')
-  );
+  const selectedFile = useSelector(selectActiveFile);
 
   const {
     setTextOutput,