Added updating of display name to profile. Added employees table.

client/src/components/chat-window/chat-window.container.jsx

@@ -1,32 +1,34 @@
-import React, { useState } from "react";
-import ChatWindowComponent from "./chat-window.component";
-import { Button } from "antd";
+import { Layout } from "antd";
+import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
+import ChatWindowComponent from "./chat-window.component";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+  chatVisible: selectChatVisible
 });
 
 const mapDispatchToProps = dispatch => ({
-  // signOutStart: () => dispatch(signOutStart())
+  toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function ChatWindowContainer() {
-  const [visible, setVisible] = useState(false);
+)(function ChatWindowContainer({ chatVisible, toggleChatVisible }) {
   return (
-    <div>
-      <Button onClick={() => setVisible(!visible)}>Drawer!</Button>
-      <ChatWindowComponent
-        mask={false}
-        maskClosable={false}
-        visible={visible}
-        zIndex={0}
-      />
-    </div>
+    <Layout.Sider
+      collapsible
+      defaultCollapsed
+      theme="light"
+      collapsedWidth={0}
+      width={300}
+      collapsed={!chatVisible}
+      onCollapse={(collapsed, type) => toggleChatVisible()}
+    >
+      <ChatWindowComponent mask={false} maskClosable={false} zIndex={0} />
+    </Layout.Sider>
   );
 });

client/src/components/profile-content/profile-content.component.jsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
+import ProfileMyComponent from "../profile-my/profile-my.component";
 
 export default function ProfileContent({ sidebarSelection }) {
   const { t } = useTranslation();
 
   switch (sidebarSelection.key) {
     case "profile":
-      return <div>Profile stuff</div>;
-    case "shop":
+      return <ProfileMyComponent />;
+    case "shops":
       return <div>Shop stuff</div>;
     default:
       return (

client/src/components/profile-my/profile-my.component.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import { Form, Input, notification, Button } from "antd";
+import { updateUserDetails } from "../../redux/user/user.actions";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  updateUserDetails: userDetails => dispatch(updateUserDetails(userDetails))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  Form.create({ name: "ProfileMyComponentForm" })(function ProfileMyComponent({
+    currentUser,
+    form,
+    updateUserDetails
+  }) {
+    const { isFieldsTouched, resetFields, getFieldDecorator } = form;
+    const { t } = useTranslation();
+
+    const handleSubmit = e => {
+      e.preventDefault();
+
+      form.validateFieldsAndScroll((err, values) => {
+        if (err) {
+          notification["error"]({
+            message: t("jobs.errors.validationtitle"),
+            description: t("jobs.errors.validation")
+          });
+        }
+        if (!err) {
+          console.log("values", values);
+          updateUserDetails({ displayName: values.displayname });
+        }
+      });
+    };
+
+    return (
+      <div>
+        <AlertComponent message={"hi"} />
+        <Form onSubmit={handleSubmit} autoComplete={"no"}>
+          <Form.Item label={t("user.fields.displayname")}>
+            {getFieldDecorator("displayname", {
+              initialValue: currentUser.displayName,
+              rules: [{ required: true }]
+            })(<Input name="displayname" />)}
+          </Form.Item>
+          <Button
+            type="primary"
+            key="submit"
+            htmlType="submit"
+            onClick={handleSubmit}
+          >
+            Save
+          </Button>
+        </Form>
+      </div>
+    );
+  })
+);