convert Sidebar to a function component & connect it to Redux

client/modules/IDE/components/Sidebar.jsx

@@ -1,178 +1,134 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  closeProjectOptions,
+  newFile,
+  newFolder,
+  openProjectOptions,
+  openUploadFileModal
+} from '../actions/ide';
+import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
 
 import ConnectedFileNode from './FileNode';
 
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 
-class Sidebar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.resetSelectedFile = this.resetSelectedFile.bind(this);
-    this.toggleProjectOptions = this.toggleProjectOptions.bind(this);
-    this.onBlurComponent = this.onBlurComponent.bind(this);
-    this.onFocusComponent = this.onFocusComponent.bind(this);
+// TODO: use a generic Dropdown UI component
 
-    this.state = {
-      isFocused: false
-    };
-  }
+export default function SideBar() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
 
-  onBlurComponent() {
-    this.setState({ isFocused: false });
+  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 projectOptionsVisible = useSelector(
+    (state) => state.ide.projectOptionsVisible
+  );
+  const isExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
+  const canEditProject = useSelector(selectCanEditSketch);
+  const isAuthenticated = useSelector(getAuthenticated);
+
+  const sidebarOptionsRef = useRef(null);
+
+  const onBlurComponent = () => {
+    setIsFocused(false);
     setTimeout(() => {
-      if (!this.state.isFocused) {
-        this.props.closeProjectOptions();
+      if (!isFocused) {
+        dispatch(closeProjectOptions());
       }
     }, 200);
-  }
+  };
 
-  onFocusComponent() {
-    this.setState({ isFocused: true });
-  }
+  const onFocusComponent = () => {
+    setIsFocused(true);
+  };
 
-  resetSelectedFile() {
-    this.props.setSelectedFile(this.props.files[1].id);
-  }
-
-  toggleProjectOptions(e) {
+  const toggleProjectOptions = (e) => {
     e.preventDefault();
-    if (this.props.projectOptionsVisible) {
-      this.props.closeProjectOptions();
+    if (projectOptionsVisible) {
+      dispatch(closeProjectOptions());
     } else {
-      this.sidebarOptions.focus();
-      this.props.openProjectOptions();
+      sidebarOptionsRef.current?.focus();
+      dispatch(openProjectOptions());
     }
-  }
+  };
 
-  userCanEditProject() {
-    let canEdit;
-    if (!this.props.owner) {
-      canEdit = true;
-    } else if (
-      this.props.user.authenticated &&
-      this.props.owner.id === this.props.user.id
-    ) {
-      canEdit = true;
-    } else {
-      canEdit = false;
-    }
-    return canEdit;
-  }
-
-  render() {
-    const canEditProject = this.userCanEditProject();
-    const sidebarClass = classNames({
-      sidebar: true,
-      'sidebar--contracted': !this.props.isExpanded,
-      'sidebar--project-options': this.props.projectOptionsVisible,
-      'sidebar--cant-edit': !canEditProject
-    });
-    const rootFile = this.props.files.filter((file) => file.name === 'root')[0];
+  const sidebarClass = classNames({
+    sidebar: true,
+    'sidebar--contracted': !isExpanded,
+    'sidebar--project-options': projectOptionsVisible,
+    'sidebar--cant-edit': !canEditProject
+  });
 
-    return (
-      <section className={sidebarClass}>
-        <header
-          className="sidebar__header"
-          onContextMenu={this.toggleProjectOptions}
-        >
-          <h3 className="sidebar__title">
-            <span>{this.props.t('Sidebar.Title')}</span>
-          </h3>
-          <div className="sidebar__icons">
-            <button
-              aria-label={this.props.t('Sidebar.ToggleARIA')}
-              className="sidebar__add"
-              tabIndex="0"
-              ref={(element) => {
-                this.sidebarOptions = element;
-              }}
-              onClick={this.toggleProjectOptions}
-              onBlur={this.onBlurComponent}
-              onFocus={this.onFocusComponent}
-            >
-              <DownArrowIcon focusable="false" aria-hidden="true" />
-            </button>
-            <ul className="sidebar__project-options">
+  return (
+    <section className={sidebarClass}>
+      <header className="sidebar__header" onContextMenu={toggleProjectOptions}>
+        <h3 className="sidebar__title">
+          <span>{t('Sidebar.Title')}</span>
+        </h3>
+        <div className="sidebar__icons">
+          <button
+            aria-label={t('Sidebar.ToggleARIA')}
+            className="sidebar__add"
+            tabIndex="0"
+            ref={sidebarOptionsRef}
+            onClick={toggleProjectOptions}
+            onBlur={onBlurComponent}
+            onFocus={onFocusComponent}
+          >
+            <DownArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+          <ul className="sidebar__project-options">
+            <li>
+              <button
+                aria-label={t('Sidebar.AddFolderARIA')}
+                onClick={() => {
+                  dispatch(newFolder(rootFile.id));
+                  setTimeout(() => dispatch(closeProjectOptions()), 0);
+                }}
+                onBlur={onBlurComponent}
+                onFocus={onFocusComponent}
+              >
+                {t('Sidebar.AddFolder')}
+              </button>
+            </li>
+            <li>
+              <button
+                aria-label={t('Sidebar.AddFileARIA')}
+                onClick={() => {
+                  dispatch(newFile(rootFile.id));
+                  setTimeout(() => dispatch(closeProjectOptions()), 0);
+                }}
+                onBlur={onBlurComponent}
+                onFocus={onFocusComponent}
+              >
+                {t('Sidebar.AddFile')}
+              </button>
+            </li>
+            {isAuthenticated && (
               <li>
                 <button
-                  aria-label={this.props.t('Sidebar.AddFolderARIA')}
+                  aria-label={t('Sidebar.UploadFileARIA')}
                   onClick={() => {
-                    this.props.newFolder(rootFile.id);
-                    setTimeout(this.props.closeProjectOptions, 0);
+                    dispatch(openUploadFileModal(rootFile.id));
+                    setTimeout(() => dispatch(closeProjectOptions()), 0);
                   }}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
+                  onBlur={onBlurComponent}
+                  onFocus={onFocusComponent}
                 >
-                  {this.props.t('Sidebar.AddFolder')}
+                  {t('Sidebar.UploadFile')}
                 </button>
               </li>
-              <li>
-                <button
-                  aria-label={this.props.t('Sidebar.AddFileARIA')}
-                  onClick={() => {
-                    this.props.newFile(rootFile.id);
-                    setTimeout(this.props.closeProjectOptions, 0);
-                  }}
-                  onBlur={this.onBlurComponent}
-                  onFocus={this.onFocusComponent}
-                >
-                  {this.props.t('Sidebar.AddFile')}
-                </button>
-              </li>
-              {this.props.user.authenticated && (
-                <li>
-                  <button
-                    aria-label={this.props.t('Sidebar.UploadFileARIA')}
-                    onClick={() => {
-                      this.props.openUploadFileModal(rootFile.id);
-                      setTimeout(this.props.closeProjectOptions, 0);
-                    }}
-                    onBlur={this.onBlurComponent}
-                    onFocus={this.onFocusComponent}
-                  >
-                    {this.props.t('Sidebar.UploadFile')}
-                  </button>
-                </li>
-              )}
-            </ul>
-          </div>
-        </header>
-        <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
-      </section>
-    );
-  }
+            )}
+          </ul>
+        </div>
+      </header>
+      <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
+    </section>
+  );
 }
-
-Sidebar.propTypes = {
-  files: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired
-    })
-  ).isRequired,
-  setSelectedFile: PropTypes.func.isRequired,
-  isExpanded: PropTypes.bool.isRequired,
-  projectOptionsVisible: PropTypes.bool.isRequired,
-  newFile: PropTypes.func.isRequired,
-  openProjectOptions: PropTypes.func.isRequired,
-  closeProjectOptions: PropTypes.func.isRequired,
-  newFolder: PropTypes.func.isRequired,
-  openUploadFileModal: PropTypes.func.isRequired,
-  owner: PropTypes.shape({
-    id: PropTypes.string
-  }),
-  user: PropTypes.shape({
-    id: PropTypes.string,
-    authenticated: PropTypes.bool.isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};
-
-Sidebar.defaultProps = {
-  owner: undefined
-};
-
-export default withTranslation()(Sidebar);

client/modules/IDE/pages/IDEView.jsx

@@ -304,22 +304,7 @@ class IDEView extends React.Component {
             allowResize={this.props.ide.sidebarIsExpanded}
             minSize={125}
           >
-            <Sidebar
-              files={this.props.files}
-              setSelectedFile={this.props.setSelectedFile}
-              newFile={this.props.newFile}
-              isExpanded={this.props.ide.sidebarIsExpanded}
-              deleteFile={this.props.deleteFile}
-              updateFileName={this.props.updateFileName}
-              projectOptionsVisible={this.props.ide.projectOptionsVisible}
-              openProjectOptions={this.props.openProjectOptions}
-              closeProjectOptions={this.props.closeProjectOptions}
-              newFolder={this.props.newFolder}
-              user={this.props.user}
-              owner={this.props.project.owner}
-              openUploadFileModal={this.props.openUploadFileModal}
-              closeUploadFileModal={this.props.closeUploadFileModal}
-            />
+            <Sidebar />
             <SplitPane
               split="vertical"
               defaultSize="50%"
@@ -526,36 +511,22 @@ IDEView.propTypes = {
   setTextOutput: PropTypes.func.isRequired,
   setGridOutput: PropTypes.func.isRequired,
   setAllAccessibleOutput: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      content: PropTypes.string.isRequired
-    })
-  ).isRequired,
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired
   }).isRequired,
-  setSelectedFile: PropTypes.func.isRequired,
   htmlFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired
   }).isRequired,
-  newFile: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,
   expandConsole: PropTypes.func.isRequired,
   collapseConsole: PropTypes.func.isRequired,
-  deleteFile: PropTypes.func.isRequired,
-  updateFileName: PropTypes.func.isRequired,
   updateFileContent: PropTypes.func.isRequired,
-  openProjectOptions: PropTypes.func.isRequired,
-  closeProjectOptions: PropTypes.func.isRequired,
-  newFolder: PropTypes.func.isRequired,
   closeNewFolderModal: PropTypes.func.isRequired,
   closeNewFileModal: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
@@ -571,15 +542,13 @@ IDEView.propTypes = {
   hideErrorModal: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
-  openUploadFileModal: PropTypes.func.isRequired,
   closeUploadFileModal: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   isUserOwner: PropTypes.bool.isRequired
 };
 
 function mapStateToProps(state) {
   return {
-    files: state.files,
     selectedFile:
       state.files.find((file) => file.isSelectedFile) ||
       state.files.find((file) => file.name === 'sketch.js') ||

client/modules/IDE/selectors/users.js

@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
 import getConfig from '../../../utils/getConfig';
 
-const getAuthenticated = (state) => state.user.authenticated;
+export const getAuthenticated = (state) => state.user.authenticated;
 const getTotalSize = (state) => state.user.totalSize;
 const getAssetsTotalSize = (state) => state.assets.totalSize;
 const getSketchOwner = (state) => state.project.owner;
@@ -39,3 +39,9 @@ export const getIsUserOwner = createSelector(
     return sketchOwner.id === userId;
   }
 );
+
+export const selectCanEditSketch = createSelector(
+  getSketchOwner,
+  getIsUserOwner,
+  (sketchOwner, isOwner) => !sketchOwner || isOwner
+);