From 63785e9a2950e5bb85473d259c849a565f53be7a Mon Sep 17 00:00:00 2001
From: raclim <43053081+raclim@users.noreply.github.com>
Date: Tue, 3 Dec 2024 00:42:08 -0500
Subject: [PATCH] Revert "Fix Console Errors and Update Hooks in FileNode"

---
 .../modules/IDE/components/ConsoleInput.jsx   |   4 +-
 client/modules/IDE/components/FileNode.jsx    | 131 +++++++++++++-----
 .../IDE/components/FileNode.unit.test.jsx     | 112 ++++++---------
 client/modules/IDE/components/Sidebar.jsx     |   4 +-
 client/modules/IDE/utils/parseFileName.js     |  28 ----
 5 files changed, 147 insertions(+), 132 deletions(-)
 delete mode 100644 client/modules/IDE/utils/parseFileName.js

diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx
index daac76839..c026d29d4 100644
--- a/client/modules/IDE/components/ConsoleInput.jsx
+++ b/client/modules/IDE/components/ConsoleInput.jsx
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import CodeMirror from 'codemirror';
 import { Encode } from 'console-feed';
 
@@ -16,7 +15,6 @@ function ConsoleInput({ theme, fontSize }) {
   const [commandCursor, setCommandCursor] = useState(-1);
   const codemirrorContainer = useRef(null);
   const cmInstance = useRef(null);
-  const dispatch = useDispatch();
 
   useEffect(() => {
     cmInstance.current = CodeMirror(codemirrorContainer.current, {
@@ -47,7 +45,7 @@ function ConsoleInput({ theme, fontSize }) {
           payload: { source: 'console', messages }
         });
 
-        dispatch(dispatchConsoleEvent(consoleEvent));
+        dispatchConsoleEvent(consoleEvent);
         cm.setValue('');
         setCommandHistory([value, ...commandHistory]);
         setCommandCursor(-1);
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index cd6caa325..e589fb3cf 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -1,17 +1,43 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
-import parseFileName from '../utils/parseFileName';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
 import FileTypeIcon from './FileTypeIcon';
 
+function parseFileName(name) {
+  const nameArray = name.split('.');
+  if (nameArray.length > 1) {
+    const extension = `.${nameArray[nameArray.length - 1]}`;
+    const baseName = nameArray.slice(0, -1).join('.');
+    const firstLetter = baseName[0];
+    const lastLetter = baseName[baseName.length - 1];
+    const middleText = baseName.slice(1, -1);
+    return {
+      baseName,
+      firstLetter,
+      lastLetter,
+      middleText,
+      extension
+    };
+  }
+  const firstLetter = name[0];
+  const lastLetter = name[name.length - 1];
+  const middleText = name.slice(1, -1);
+  return {
+    baseName: name,
+    firstLetter,
+    lastLetter,
+    middleText
+  };
+}
+
 function FileName({ name }) {
   const {
     baseName,
@@ -36,35 +62,40 @@ FileName.propTypes = {
   name: PropTypes.string.isRequired
 };
 
-const FileNode = ({ id, canEdit, onClickFile }) => {
-  const dispatch = useDispatch();
-  const { t } = useTranslation();
-
-  const fileNode =
-    useSelector((state) => state.files.find((file) => file.id === id)) || {};
-  const authenticated = useSelector((state) => state.user.authenticated);
-
-  const {
-    name = '',
-    parentId = null,
-    children = [],
-    fileType = 'file',
-    isSelectedFile = false,
-    isFolderClosed = false
-  } = fileNode;
-
+const FileNode = ({
+  id,
+  parentId,
+  children,
+  name,
+  fileType,
+  isSelectedFile,
+  isFolderClosed,
+  setSelectedFile,
+  deleteFile,
+  updateFileName,
+  resetSelectedFile,
+  newFile,
+  newFolder,
+  showFolderChildren,
+  hideFolderChildren,
+  canEdit,
+  openUploadFileModal,
+  authenticated,
+  onClickFile
+}) => {
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [updatedName, setUpdatedName] = useState(name);
 
+  const { t } = useTranslation();
   const fileNameInput = useRef(null);
   const fileOptionsRef = useRef(null);
 
   const handleFileClick = (event) => {
     event.stopPropagation();
     if (name !== 'root' && !isDeleting) {
-      dispatch(IDEActions.setSelectedFile(id));
+      setSelectedFile(id);
     }
     if (onClickFile) {
       onClickFile();
@@ -91,17 +122,17 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
   };
 
   const handleClickAddFile = () => {
-    dispatch(IDEActions.newFile(id));
+    newFile(id);
     setTimeout(() => hideFileOptions(), 0);
   };
 
   const handleClickAddFolder = () => {
-    dispatch(IDEActions.newFolder(id));
+    newFolder(id);
     setTimeout(() => hideFileOptions(), 0);
   };
 
   const handleClickUploadFile = () => {
-    dispatch(IDEActions.openUploadFileModal(id));
+    openUploadFileModal(id);
     setTimeout(hideFileOptions, 0);
   };
 
@@ -110,8 +141,8 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
 
     if (window.confirm(prompt)) {
       setIsDeleting(true);
-      dispatch(IDEActions.resetSelectedFile(id));
-      setTimeout(() => dispatch(FileActions.deleteFile(id, parentId), 100));
+      resetSelectedFile(id);
+      setTimeout(() => deleteFile(id, parentId), 100);
     }
   };
 
@@ -127,7 +158,7 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
 
   const saveUpdatedFileName = () => {
     if (updatedName !== name) {
-      dispatch(FileActions.updateFileName(id, updatedName));
+      updateFileName(id, updatedName);
     }
   };
 
@@ -212,7 +243,7 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
             <div className="sidebar__file-item--folder">
               <button
                 className="sidebar__file-item-closed"
-                onClick={() => dispatch(FileActions.showFolderChildren(id))}
+                onClick={() => showFolderChildren(id)}
                 aria-label={t('FileNode.OpenFolderARIA')}
                 title={t('FileNode.OpenFolderARIA')}
               >
@@ -224,7 +255,7 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
               </button>
               <button
                 className="sidebar__file-item-open"
-                onClick={() => dispatch(FileActions.hideFolderChildren(id))}
+                onClick={() => hideFolderChildren(id)}
                 aria-label={t('FileNode.CloseFolderARIA')}
                 title={t('FileNode.CloseFolderARIA')}
               >
@@ -322,7 +353,7 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
         <ul className="file-item__children">
           {children.map((childId) => (
             <li key={childId}>
-              <FileNode
+              <ConnectedFileNode
                 id={childId}
                 parentId={id}
                 canEdit={canEdit}
@@ -338,12 +369,50 @@ const FileNode = ({ id, canEdit, onClickFile }) => {
 
 FileNode.propTypes = {
   id: PropTypes.string.isRequired,
+  parentId: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  name: PropTypes.string.isRequired,
+  fileType: PropTypes.string.isRequired,
+  isSelectedFile: PropTypes.bool,
+  isFolderClosed: PropTypes.bool,
+  setSelectedFile: PropTypes.func.isRequired,
+  deleteFile: PropTypes.func.isRequired,
+  updateFileName: PropTypes.func.isRequired,
+  resetSelectedFile: PropTypes.func.isRequired,
+  newFile: PropTypes.func.isRequired,
+  newFolder: PropTypes.func.isRequired,
+  showFolderChildren: PropTypes.func.isRequired,
+  hideFolderChildren: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,
+  openUploadFileModal: PropTypes.func.isRequired,
+  authenticated: PropTypes.bool.isRequired,
   onClickFile: PropTypes.func
 };
 
 FileNode.defaultProps = {
-  onClickFile: null
+  onClickFile: null,
+  parentId: '0',
+  isSelectedFile: false,
+  isFolderClosed: false
 };
 
-export default FileNode;
+function mapStateToProps(state, ownProps) {
+  // this is a hack, state is updated before ownProps
+  const fileNode = state.files.find((file) => file.id === ownProps.id) || {
+    name: 'test',
+    fileType: 'file'
+  };
+  return Object.assign({}, fileNode, {
+    authenticated: state.user.authenticated
+  });
+}
+
+const mapDispatchToProps = { ...FileActions, ...IDEActions };
+
+const ConnectedFileNode = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FileNode);
+
+export { FileNode };
+export default ConnectedFileNode;
diff --git a/client/modules/IDE/components/FileNode.unit.test.jsx b/client/modules/IDE/components/FileNode.unit.test.jsx
index 4f75d9a27..8676a817d 100644
--- a/client/modules/IDE/components/FileNode.unit.test.jsx
+++ b/client/modules/IDE/components/FileNode.unit.test.jsx
@@ -1,8 +1,4 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import { useDispatch } from 'react-redux';
-import * as FileActions from '../actions/files';
 
 import {
   fireEvent,
@@ -11,27 +7,9 @@ import {
   waitFor,
   within
 } from '../../../test-utils';
-import FileNode from './FileNode';
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: jest.fn()
-}));
-
-jest.mock('../actions/files', () => ({
-  updateFileName: jest.fn()
-}));
-
-const mockStore = configureStore([]);
+import { FileNode } from './FileNode';
 
 describe('<FileNode />', () => {
-  const mockDispatch = jest.fn();
-
-  beforeEach(() => {
-    useDispatch.mockReturnValue(mockDispatch);
-    jest.clearAllMocks();
-  });
-
   const changeName = (newFileName) => {
     const renameButton = screen.getByText(/Rename/i);
     fireEvent.click(renameButton);
@@ -46,64 +24,62 @@ describe('<FileNode />', () => {
     await waitFor(() => within(name).queryByText(expectedName));
   };
 
-  const renderFileNode = (fileType, extraState = {}) => {
-    const initialState = {
-      files: [
-        {
-          id: '0',
-          name: fileType === 'folder' ? 'afolder' : 'test.jsx',
-          fileType,
-          parentId: 'root',
-          children: [],
-          isSelectedFile: false,
-          isFolderClosed: false
-        }
-      ],
-      user: { authenticated: false },
-      ...extraState
+  const renderFileNode = (fileType, extraProps = {}) => {
+    const props = {
+      ...extraProps,
+      id: '0',
+      name: fileType === 'folder' ? 'afolder' : 'test.jsx',
+      fileType,
+      canEdit: true,
+      children: [],
+      authenticated: false,
+      setSelectedFile: jest.fn(),
+      deleteFile: jest.fn(),
+      updateFileName: jest.fn(),
+      resetSelectedFile: jest.fn(),
+      newFile: jest.fn(),
+      newFolder: jest.fn(),
+      showFolderChildren: jest.fn(),
+      hideFolderChildren: jest.fn(),
+      openUploadFileModal: jest.fn(),
+      setProjectName: jest.fn()
     };
 
-    const store = mockStore(initialState);
+    render(<FileNode {...props} />);
 
-    render(
-      <Provider store={store}>
-        <FileNode id="0" canEdit />
-      </Provider>
-    );
-
-    return { store };
+    return props;
   };
 
   describe('fileType: file', () => {
     it('cannot change to an empty name', async () => {
-      renderFileNode('file');
+      const props = renderFileNode('file');
 
       changeName('');
 
-      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
-      await expectFileNameToBe('test.jsx');
+      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await expectFileNameToBe(props.name);
     });
 
     it('can change to a valid filename', async () => {
       const newName = 'newname.jsx';
-      renderFileNode('file');
+      const props = renderFileNode('file');
 
       changeName(newName);
 
       await waitFor(() =>
-        expect(FileActions.updateFileName).toHaveBeenCalledWith('0', newName)
+        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
       );
       await expectFileNameToBe(newName);
     });
 
     it('must have an extension', async () => {
       const newName = 'newname';
-      renderFileNode('file');
+      const props = renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
-      await expectFileNameToBe('test.jsx');
+      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await expectFileNameToBe(props.name);
     });
 
     it('can change to a different extension', async () => {
@@ -111,58 +87,58 @@ describe('<FileNode />', () => {
       window.confirm = mockConfirm;
 
       const newName = 'newname.gif';
-      renderFileNode('file');
+      const props = renderFileNode('file');
 
       changeName(newName);
 
       expect(mockConfirm).toHaveBeenCalled();
       await waitFor(() =>
-        expect(FileActions.updateFileName).toHaveBeenCalledWith('0', newName)
+        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
       );
-      await expectFileNameToBe(newName);
+      await expectFileNameToBe(props.name);
     });
 
     it('cannot be just an extension', async () => {
       const newName = '.jsx';
-      renderFileNode('file');
+      const props = renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
-      await expectFileNameToBe('test.jsx');
+      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await expectFileNameToBe(props.name);
     });
   });
 
   describe('fileType: folder', () => {
     it('cannot change to an empty name', async () => {
-      renderFileNode('folder');
+      const props = renderFileNode('folder');
 
       changeName('');
 
-      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
-      await expectFileNameToBe('afolder');
+      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await expectFileNameToBe(props.name);
     });
 
     it('can change to another name', async () => {
       const newName = 'foldername';
-      renderFileNode('folder');
+      const props = renderFileNode('folder');
 
       changeName(newName);
 
       await waitFor(() =>
-        expect(FileActions.updateFileName).toHaveBeenCalledWith('0', newName)
+        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
       );
       await expectFileNameToBe(newName);
     });
 
     it('cannot have a file extension', async () => {
       const newName = 'foldername.jsx';
-      renderFileNode('folder');
+      const props = renderFileNode('folder');
 
       changeName(newName);
 
-      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
-      await expectFileNameToBe('afolder');
+      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await expectFileNameToBe(props.name);
     });
   });
 });
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 20f0104ca..79ffed3b8 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -13,7 +13,7 @@ import {
 import { selectRootFile } from '../selectors/files';
 import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
 
-import FileNode from './FileNode';
+import ConnectedFileNode from './FileNode';
 import { PlusIcon } from '../../../common/icons';
 import { FileDrawer } from './Editor/MobileEditor';
 
@@ -130,7 +130,7 @@ export default function SideBar() {
             </ul>
           </div>
         </header>
-        <FileNode id={rootFile.id} canEdit={canEditProject} />
+        <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
       </section>
     </FileDrawer>
   );
diff --git a/client/modules/IDE/utils/parseFileName.js b/client/modules/IDE/utils/parseFileName.js
deleted file mode 100644
index 1bde7be0f..000000000
--- a/client/modules/IDE/utils/parseFileName.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function parseFileName(name) {
-  const nameArray = name.split('.');
-  if (nameArray.length > 1) {
-    const extension = `.${nameArray[nameArray.length - 1]}`;
-    const baseName = nameArray.slice(0, -1).join('.');
-    const firstLetter = baseName[0];
-    const lastLetter = baseName[baseName.length - 1];
-    const middleText = baseName.slice(1, -1);
-    return {
-      baseName,
-      firstLetter,
-      lastLetter,
-      middleText,
-      extension
-    };
-  }
-  const firstLetter = name[0];
-  const lastLetter = name[name.length - 1];
-  const middleText = name.slice(1, -1);
-  return {
-    baseName: name,
-    firstLetter,
-    lastLetter,
-    middleText
-  };
-}
-
-export default parseFileName;