Use createMenu for project picker

Ports the project picker (formerly project list) component to use
createMenu, giving it proper click-outside behavior, etc.

Required enhancing the `createMenu` factory to take an optional
`isVisible` function, which takes in props and determines whether the
menu should appear at all.

Author: Mat Brown

src/components/ProjectPreview.jsx

@@ -1,26 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import moment from 'moment';
 
 const MAX_LENGTH = 50;
 
-export default function ProjectPreview({
-  isSelected,
-  preview,
-  project,
-  onProjectSelected,
-}) {
+export default function ProjectPreview({preview, project}) {
   return (
-    <div
-      className={classnames(
-        'project-preview',
-        'top-bar__menu-item',
-        {'top-bar__menu-item_active': isSelected},
-      )}
-      key={project.projectKey}
-      onClick={onProjectSelected}
-    >
+    <div>
       <div className="project-preview__label">
         {preview.slice(0, MAX_LENGTH)}
       </div>
@@ -32,8 +18,6 @@ export default function ProjectPreview({
 }
 
 ProjectPreview.propTypes = {
-  isSelected: PropTypes.bool.isRequired,
   preview: PropTypes.string.isRequired,
   project: PropTypes.object.isRequired,
-  onProjectSelected: PropTypes.func.isRequired,
 };

src/components/TopBar/ProjectList.jsx

@@ -0,0 +1,32 @@
+import map from 'lodash/map';
+import PropTypes from 'prop-types';
+import ProjectPreview from '../../containers/ProjectPreview';
+import ProjectPickerButton from './ProjectPickerButton';
+import createMenu from './createMenu';
+
+const ProjectPicker = createMenu({
+  name: 'projectPicker',
+
+  isVisible({currentProjectKey, projectKeys}) {
+    return currentProjectKey && projectKeys.length > 1;
+  },
+
+  mapPropsToItems({currentProjectKey, projectKeys}) {
+    return map(projectKeys, projectKey => ({
+      key: projectKey,
+      isEnabled: projectKey === currentProjectKey,
+      props: {projectKey},
+    }));
+  },
+})(ProjectPickerButton, ProjectPreview);
+
+ProjectPicker.propTypes = {
+  currentProjectKey: PropTypes.string,
+  projectKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+ProjectPicker.defaultProps = {
+  currentProjectKey: null,
+};
+
+export default ProjectPicker;

src/components/TopBar/ProjectPicker.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {t} from 'i18next';
+
+export default function ProjectPickerButton() {
+  return (
+    <span>
+      {t('top-bar.load-project')}
+      {' '}
+      <span className="u__icon">
+        &#xf0d7;
+      </span>
+    </span>
+  );
+}
+
+ProjectPickerButton.propTypes = {};

src/components/TopBar/ProjectPickerButton.jsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import {connect} from 'react-redux';
+import constant from 'lodash/constant';
 import onClickOutside from 'react-onclickoutside';
 import partial from 'lodash/partial';
 import preventClickthrough from 'react-prevent-clickthrough';
@@ -9,7 +10,11 @@ import React from 'react';
 import {closeTopBarMenu, toggleTopBarMenu} from '../../actions';
 import {getOpenTopBarMenu} from '../../selectors';
 
-export default function createMenu({mapPropsToItems, name}) {
+export default function createMenu({
+  isVisible = constant(true),
+  mapPropsToItems,
+  name,
+}) {
   function mapStateToProps(state) {
     const isOpen = getOpenTopBarMenu(state) === name;
     return {
@@ -32,6 +37,10 @@ export default function createMenu({mapPropsToItems, name}) {
 
   return function createMenuWithMappedProps(Label, Item) {
     function Menu(props) {
+      if (!isVisible(props)) {
+        return null;
+      }
+
       const {isOpen, onClickItem, onToggle} = props;
       const items = mapPropsToItems(props);
       const menu = isOpen ?

src/components/TopBar/ProjectsButton.jsx

@@ -8,7 +8,7 @@ import CurrentUser from './CurrentUser';
 import HamburgerMenuButton from './HamburgerMenuButton';
 import LibraryPicker from './LibraryPicker';
 import NewProjectButton from './NewProjectButton';
-import ProjectsButton from './ProjectsButton';
+import ProjectPicker from './ProjectPicker';
 import SnapshotButton from './SnapshotButton';
 import TextSize from './TextSize';
 
@@ -38,6 +38,7 @@ export default function TopBar({
   openMenu,
   projectKeys,
   validationState,
+  onChangeCurrentProject,
   onClickMenu,
   onCloseMenu,
   onCreateNewProject,
@@ -73,10 +74,10 @@ export default function TopBar({
         isUserAuthenticated={isUserAuthenticated}
         onClick={onCreateNewProject}
       />
-      <ProjectsButton
-        isOpen={openMenu === 'projectPicker'}
+      <ProjectPicker
+        currentProjectKey={currentProjectKey}
         projectKeys={projectKeys}
-        onClick={partial(onClickMenu, 'projectPicker')}
+        onClickItem={onChangeCurrentProject}
       />
       <LibraryPicker
         enabledLibraries={enabledLibraries}
@@ -112,6 +113,7 @@ TopBar.propTypes = {
   openMenu: PropTypes.string,
   projectKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
   validationState: PropTypes.string.isRequired,
+  onChangeCurrentProject: PropTypes.func.isRequired,
   onClickMenu: PropTypes.func.isRequired,
   onCloseMenu: PropTypes.func.isRequired,
   onCreateNewProject: PropTypes.func.isRequired,

src/components/TopBar/createMenu.jsx

@@ -18,6 +18,7 @@ import {
   isUserTyping,
 } from '../selectors';
 import {
+  changeCurrentProject,
   closeTopBarMenu,
   createProject,
   createSnapshot,
@@ -52,6 +53,10 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
+    onChangeCurrentProject(projectKey) {
+      dispatch(changeCurrentProject(projectKey));
+    },
+
     onClickMenu(menuKey) {
       dispatch(toggleTopBarMenu(menuKey));
     },

src/components/TopBar/index.jsx

@@ -40,6 +40,13 @@ export default function ui(stateIn, action) {
 
   switch (action.type) {
     case 'CHANGE_CURRENT_PROJECT':
+      return state.
+        set('workspace', DEFAULT_WORKSPACE).
+        updateIn(
+          ['topBar', 'openMenu'],
+          menu => menu === 'projectPicker' ? null : menu,
+        );
+
     case 'PROJECT_CREATED':
       return state.set('workspace', DEFAULT_WORKSPACE);