Project managers, board members, auto-update after reconnection, refactoring

client/src/components/Header/Header.jsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { Icon, Menu } from 'semantic-ui-react';
 
@@ -11,52 +12,98 @@ import styles from './Header.module.scss';
 
 const Header = React.memo(
   ({
+    project,
     user,
     notifications,
-    isEditable,
-    onUsers,
+    canEditProject,
+    canEditUsers,
+    onProjectSettingsClick,
+    onUsersClick,
     onNotificationDelete,
-    onUserSettings,
+    onUserSettingsClick,
     onLogout,
-  }) => (
-    <div className={styles.wrapper}>
-      <Link to={Paths.ROOT} className={styles.logo}>
-        Planka
-      </Link>
-      <Menu inverted size="large" className={styles.menu}>
-        <Menu.Menu position="right">
-          {isEditable && (
-            <Menu.Item className={styles.item} onClick={onUsers}>
-              <Icon fitted name="users" />
-            </Menu.Item>
+  }) => {
+    const handleProjectSettingsClick = useCallback(() => {
+      if (canEditProject) {
+        onProjectSettingsClick();
+      }
+    }, [canEditProject, onProjectSettingsClick]);
+
+    return (
+      <div className={styles.wrapper}>
+        {!project && (
+          <Link to={Paths.ROOT} className={classNames(styles.logo, styles.title)}>
+            Planka
+          </Link>
+        )}
+        <Menu inverted size="large" className={styles.menu}>
+          {project && (
+            <Menu.Menu position="left">
+              <Menu.Item
+                as={Link}
+                to={Paths.ROOT}
+                className={classNames(styles.item, styles.itemHoverable)}
+              >
+                <Icon fitted name="arrow left" />
+              </Menu.Item>
+              <Menu.Item
+                className={classNames(
+                  styles.item,
+                  canEditProject && styles.itemHoverable,
+                  styles.title,
+                )}
+                onClick={handleProjectSettingsClick}
+              >
+                {project.name}
+              </Menu.Item>
+            </Menu.Menu>
           )}
-          <NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
-            <Menu.Item className={styles.item}>
-              <Icon fitted name="bell" />
-              {notifications.length > 0 && (
-                <span className={styles.notification}>{notifications.length}</span>
-              )}
-            </Menu.Item>
-          </NotificationsPopup>
-          <UserPopup onSettings={onUserSettings} onLogout={onLogout}>
-            <Menu.Item className={styles.item}>{user.name}</Menu.Item>
-          </UserPopup>
-        </Menu.Menu>
-      </Menu>
-    </div>
-  ),
+          <Menu.Menu position="right">
+            {canEditUsers && (
+              <Menu.Item
+                className={classNames(styles.item, styles.itemHoverable)}
+                onClick={onUsersClick}
+              >
+                <Icon fitted name="users" />
+              </Menu.Item>
+            )}
+            <NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
+              <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
+                <Icon fitted name="bell" />
+                {notifications.length > 0 && (
+                  <span className={styles.notification}>{notifications.length}</span>
+                )}
+              </Menu.Item>
+            </NotificationsPopup>
+            <UserPopup onSettingsClick={onUserSettingsClick} onLogout={onLogout}>
+              <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
+                {user.name}
+              </Menu.Item>
+            </UserPopup>
+          </Menu.Menu>
+        </Menu>
+      </div>
+    );
+  },
 );
 
 Header.propTypes = {
   /* eslint-disable react/forbid-prop-types */
+  project: PropTypes.object,
   user: PropTypes.object.isRequired,
   notifications: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
-  isEditable: PropTypes.bool.isRequired,
-  onUsers: PropTypes.func.isRequired,
+  canEditProject: PropTypes.bool.isRequired,
+  canEditUsers: PropTypes.bool.isRequired,
+  onProjectSettingsClick: PropTypes.func.isRequired,
+  onUsersClick: PropTypes.func.isRequired,
   onNotificationDelete: PropTypes.func.isRequired,
-  onUserSettings: PropTypes.func.isRequired,
+  onUserSettingsClick: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
 };
 
+Header.defaultProps = {
+  project: undefined,
+};
+
 export default Header;

client/src/components/Header/Header.module.scss

@@ -1,19 +1,26 @@
 :global(#app) {
   .item {
+    cursor: auto;
+    user-select: auto;
+
     &:before {
       background: none;
     }
 
-    &:hover {
-      background: rgba(0, 0, 0, 0.32);
+    &:active, &:hover {
+      background: transparent;
+      color: rgba(255, 255, 255, 0.9);
     }
   }
 
+  .itemHoverable:hover {
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.32);
+  }
+
   .logo {
     color: #fff;
     flex: 0 0 auto;
-    font-size: 20px;
-    font-weight: bold;
     letter-spacing: 3.5px;
     line-height: 50px;
     padding: 0 16px;
@@ -54,6 +61,11 @@
     width: 16px;
   }
 
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
   .wrapper {
     background: rgba(0, 0, 0, 0.24);
     display: flex;