File clean up. Refactor header.

client/src/components/header/header.component.jsx

@@ -1,27 +1,35 @@
-import { Col, Icon, Menu, Row } from "antd";
+import { Avatar, Col, Icon, Menu, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import CurrentUserDropdown from "../current-user-dropdown/current-user-dropdown.component";
-import GlobalSearch from "../global-search/global-search.component";
+import UserImage from "../../assets/User.svg";
+import { signOutStart } from "../../redux/user/user.actions";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 
-export default ({ landingHeader, selectedNavItem }) => {
+export default ({
+  landingHeader,
+  selectedNavItem,
+  logo,
+  handleMenuClick,
+  currentUser
+}) => {
   const { t } = useTranslation();
-
+  //TODO Add
   return (
-    <Row type="flex" justify="space-around">
-      <Col span={16}>
+    <Row type="flex" justify="space-around" align="middle">
+      {logo ? (
+        <Col span={4}>
+          <img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
+        </Col>
+      ) : null}
+      <Col span={14}>
         <Menu
           theme="dark"
           className="header"
           selectedKeys={selectedNavItem}
           mode="horizontal"
+          onClick={handleMenuClick}
         >
-          <Menu.Item>
-            <GlobalSearch />
-          </Menu.Item>
-
           <Menu.Item key="home">
             <Link to="/manage">
               <Icon type="home" />
@@ -64,16 +72,47 @@ export default ({ landingHeader, selectedNavItem }) => {
             </Menu.Item>
           </Menu.SubMenu>
 
-          {!landingHeader ? null : (
-            <Menu.Item>
-              <ManageSignInButton />
+          <Menu.SubMenu
+            title={
+              <div>
+                <Avatar
+                  size="medium"
+                  alt="Avatar"
+                  src={currentUser.photoURL ? currentUser.photoURL : UserImage}
+                  style={{ margin: "10px" }}
+                />
+                {currentUser.displayName || t("general.labels.unknown")}
+              </div>
+            }
+          >
+            <Menu.Item onClick={signOutStart()}>
+              {t("user.actions.signout")}
             </Menu.Item>
-          )}
+            <Menu.Item>
+              <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
+            </Menu.Item>
+            <Menu.SubMenu
+              title={
+                <span>
+                  <Icon type="global" />
+                  <span>{t("menus.currentuser.languageselector")}</span>
+                </span>
+              }
+            >
+              <Menu.Item actiontype="lang-select" key="en_us">
+                {t("general.languages.english")}
+              </Menu.Item>
+              <Menu.Item actiontype="lang-select" key="fr">
+                {t("general.languages.french")}
+              </Menu.Item>
+              <Menu.Item actiontype="lang-select" key="es">
+                {t("general.languages.spanish")}
+              </Menu.Item>
+            </Menu.SubMenu>
+          </Menu.SubMenu>
         </Menu>
       </Col>
-      <Col span={6} offset={2}>
-        {!landingHeader ? <CurrentUserDropdown /> : null}
-      </Col>
+      <Col span={4}>{!landingHeader ? null : <ManageSignInButton />}</Col>
     </Row>
   );
 };

client/src/components/header/header.container.jsx

@@ -1,8 +1,52 @@
 import React from "react";
 import HeaderComponent from "./header.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import i18next from "i18next";
+import { setUserLanguage, signOutStart } from "../../redux/user/user.actions";
+import {
+  selectCurrentUser,
+  selectBodyshop
+} from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = dispatch => ({
+  signOutStart: () => dispatch(signOutStart()),
+  setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function HeaderContainer({
+  landingHeader,
+  currentUser,
+  bodyshop,
+  signOutStart,
+  setUserLanguage
+}) {
+  const handleMenuClick = e => {
+    if (e.item.props.actiontype === "lang-select") {
+      i18next.changeLanguage(e.key, (err, t) => {
+        if (err)
+          return console.log("Error encountered when changing languages.", err);
+        setUserLanguage(e.key);
+      });
+    }
+  };
 
-export default ({ landingHeader, signedIn }) => {
   return (
-    <HeaderComponent landingHeader={landingHeader} selectedNavItem={null} />
+    <HeaderComponent
+      handleMenuClick={handleMenuClick}
+      signOutStart={signOutStart}
+      landingHeader={landingHeader}
+      selectedNavItem={null}
+      currentUser={currentUser}
+      logo={bodyshop ? bodyshop.logo_img_path : null}
+    />
   );
-};
+});