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>
+    );
+  })
+);

client/src/firebase/firebase.utils.js

@@ -34,6 +34,7 @@ export const createUserProfileDocument = async (userAuth, additionalData) => {
 };
 
 export const auth = firebase.auth();
+
 export const firestore = firebase.firestore();
 
 const provider = new firebase.auth.GoogleAuthProvider();
@@ -49,3 +50,15 @@ export const getCurrentUser = () => {
     }, reject);
   });
 };
+
+export const updateCurrentUser = userDetails => {
+  return new Promise((resolve, reject) => {
+    const unsubscribe = auth.onAuthStateChanged(userAuth => {
+      console.log("userDetails", userDetails);
+      userAuth.updateProfile(userDetails).then(r => {
+        unsubscribe();
+        resolve(userAuth);
+      });
+    }, reject);
+  });
+};

client/src/graphql/apollo-error-handling.js

@@ -42,8 +42,9 @@ const errorLink = onError(
               authorization: token ? `Bearer ${token}` : ""
             }
           });
-
-          return forward(operation);
+          console.log("forward", forward);
+          console.log("operation", operation);
+          return forward(operation).subscribe();
 
           // return new Observable(observer => {
           //   const subscriber = {

client/src/pages/manage/manage.page.jsx

@@ -2,7 +2,6 @@ import { BackTop, Layout } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Route } from "react-router";
-import ChatWindowContainer from "../../components/chat-window/chat-window.container";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
@@ -25,6 +24,9 @@ const JobsDocumentsPage = lazy(() =>
 const JobsAvailablePage = lazy(() =>
   import("../jobs-available/jobs-available.page.container")
 );
+const ChatWindowContainer = lazy(() =>
+  import("../../components/chat-window/chat-window.container")
+);
 
 const { Header, Content, Footer, Sider } = Layout;
 //This page will handle all routing for the entire application.
@@ -41,17 +43,9 @@ export default function Manage({ match }) {
         <HeaderContainer />
       </Header>
       <Layout>
-        <Sider
-          collapsible
-          defaultCollapsed
-          theme="light"
-          collapsedWidth={0}
-          width={300}
-        >
-          <chatWindowContainer />
-        </Sider>
+        <ChatWindowContainer />
 
-        <Content className="content-container" style={{ margin: "50px" }}>
+        <Content className="content-container" style={{ margin: "0px" }}>
           <ErrorBoundary>
             <Suspense
               fallback={

client/src/redux/messaging/messaging.actions.js

@@ -0,0 +1,7 @@
+import MessagingActionTypes from './messaging.types' 
+
+export const toggleChatVisible = () => ({
+  type: MessagingActionTypes.TOGGLE_CHAT_VISIBLE,
+  //payload: user
+});
+

client/src/redux/messaging/messaging.reducer.js

@@ -0,0 +1,24 @@
+import MessagingActionTypes from "./messaging.types";
+
+const INITIAL_STATE = {
+  visible: false
+};
+
+const messagingReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case MessagingActionTypes.TOGGLE_CHAT_VISIBLE:
+      return {
+        ...state,
+        visible: !state.visible
+      };
+    case MessagingActionTypes.SET_CHAT_VISIBLE:
+      return {
+        ...state,
+        visible: true
+      };
+    default:
+      return state;
+  }
+};
+
+export default messagingReducer;

client/src/redux/messaging/messaging.sagas.js

@@ -0,0 +1,90 @@
+import {
+  all
+  //  call, put, takeLatest
+} from "redux-saga/effects";
+//import { auth, getCurrentUser } from "../../firebase/firebase.utils";
+
+// import { toggleChatVisible } from "./messaging.actions";
+// import MessagingActionTypes from "./messaging.types";
+
+// export function* getSnapshotFromUserAuth(userAuth) {
+//   try {
+//     const userRef = yield call(createUserProfileDocument, userAuth);
+//     //const userSnapshot = yield userRef.get();
+//   } catch (error) {
+//     yield put(signInFailure(error));
+//   }
+// }
+
+// export function* signInWithEmail({ payload: { email, password } }) {
+//   try {
+//     const { user } = yield auth.signInWithEmailAndPassword(email, password);
+//     yield put(
+//       signInSuccess({
+//         uid: user.uid,
+//         email: user.email,
+//         displayName: user.displayName,
+//         authorized: true
+//       })
+//     );
+//   } catch (error) {
+//     yield put(signInFailure(error));
+//   }
+// }
+// //This is the listener fo rthe call, and when it finds it, it triggers somethign else.
+// export function* onEmailSignInStart() {
+//   yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START, signInWithEmail);
+// }
+
+// export function* isUserAuthenticated() {
+//   try {
+//     const user = yield getCurrentUser();
+//     if (!user) {
+//       yield put(unauthorizedUser());
+//       return;
+//     }
+//     let token = yield user.getIdToken();
+//     localStorage.setItem("token", token);
+//     window.sessionStorage.setItem(`lastTokenRefreshTime`, new Date());
+
+//     yield put(
+//       signInSuccess({
+//         uid: user.uid,
+//         email: user.email,
+//         displayName: user.displayName,
+//         authorized: true
+//       })
+//     );
+//   } catch (error) {
+//     yield put(signInFailure(error));
+//   }
+// }
+
+// export function* onCheckUserSession() {
+//   yield takeLatest(UserActionTypes.CHECK_USER_SESSION, isUserAuthenticated);
+// }
+
+// export function* signOutStart() {
+//   try {
+//     yield auth.signOut();
+//     yield put(signOutSuccess());
+//     localStorage.removeItem("token");
+//   } catch (error) {
+//     yield put(signOutFailure(error.message));
+//   }
+// }
+
+// export function* onSignOutStart() {
+//   yield takeLatest(UserActionTypes.SIGN_OUT_START, signOutStart);
+// }
+
+export function* messagingSagas() {
+  yield all([
+    // call(onGoogleSignInStart),
+    // call(onEmailSignInStart),
+    // call(onCheckUserSession),
+    // call(onSignOutStart)
+    // call(onEmailSignUpStart),
+    // call(onEmailSignUpSuccess)
+  ]);
+}

client/src/redux/messaging/messaging.selectors.js

@@ -0,0 +1,8 @@
+import { createSelector } from "reselect";
+
+const selectMessaging = state => state.messaging;
+
+export const selectChatVisible = createSelector(
+  [selectMessaging],
+  messaging => messaging.visible
+);

client/src/redux/messaging/messaging.types.js

@@ -0,0 +1,5 @@
+const MessagingActionTypes = {
+  TOGGLE_CHAT_VISIBLE: "TOGGLE_CHAT_VISIBLE",
+  SET_CHAT_VISIBLE: "SET_CHAT_VISIBLE"
+};
+export default MessagingActionTypes;

client/src/redux/root.reducer.js

@@ -3,6 +3,7 @@ import { persistReducer } from "redux-persist";
 import storage from "redux-persist/lib/storage";
 
 import userReducer from "./user/user.reducer";
+import messagingReducer from "./messaging/messaging.reducer";
 // import cartReducer from './cart/cart.reducer';
 // import directoryReducer from './directory/directory.reducer';
 // import shopReducer from './shop/shop.reducer';
@@ -15,7 +16,8 @@ const persistConfig = {
 };
 
 const rootReducer = combineReducers({
-  user: userReducer
+  user: userReducer,
+  messaging: messagingReducer
   //   cart: cartReducer,
   //   directory: directoryReducer,
   //   shop: shopReducer

client/src/redux/root.saga.js

@@ -3,9 +3,10 @@ import { all, call } from "redux-saga/effects";
 //List of all Sagas
 // import { shopSagas } from "./shop/shop.sagas";
 import { userSagas } from "./user/user.sagas";
+import { messagingSagas } from "./messaging/messaging.sagas";
 //import { cartSagas } from "./cart/cart.sagas";
 
 export default function* rootSaga() {
   //All starts all the Sagas concurrently.
-  yield all([call(userSagas)]);
+  yield all([call(userSagas), call(messagingSagas)]);
 }

client/src/redux/user/user.actions.js

@@ -38,3 +38,13 @@ export const setUserLanguage = language => ({
   type: UserActionTypes.SET_USER_LANGUAGE,
   payload: language
 });
+
+export const updateUserDetails = userDetails => ({
+  type: UserActionTypes.UPDATE_USER_DETAILS,
+  payload: userDetails
+});
+
+export const updateUserDetailsSuccess = userDetails => ({
+  type: UserActionTypes.UPDATE_USER_DETAILS_SUCCESS,
+  payload: userDetails
+});

client/src/redux/user/user.reducer.js

@@ -33,10 +33,17 @@ const userReducer = (state = INITIAL_STATE, action) => {
         ...state,
         language: action.payload
       };
+    case UserActionTypes.UPDATE_USER_DETAILS_SUCCESS:
+      return {
+        ...state,
+        currentUser: {
+          ...state.currentUser,
+          ...action.payload //Spread current user details in.
+        }
+      };
     case UserActionTypes.SIGN_IN_FAILURE:
     case UserActionTypes.SIGN_OUT_FAILURE:
     case UserActionTypes.EMAIL_SIGN_UP_FAILURE:
-      console.log("Reduced getting called.");
       return {
         ...state,
         error: action.payload

client/src/redux/user/user.sagas.js

@@ -1,6 +1,17 @@
 import { all, call, put, takeLatest } from "redux-saga/effects";
-import { auth, getCurrentUser } from "../../firebase/firebase.utils";
-import { signInFailure, signInSuccess, signOutFailure, signOutSuccess, unauthorizedUser } from "./user.actions";
+import {
+  auth,
+  getCurrentUser,
+  updateCurrentUser
+} from "../../firebase/firebase.utils";
+import {
+  signInFailure,
+  signInSuccess,
+  signOutFailure,
+  signOutSuccess,
+  unauthorizedUser,
+  updateUserDetailsSuccess
+} from "./user.actions";
 import UserActionTypes from "./user.types";
 
 // export function* getSnapshotFromUserAuth(userAuth) {
@@ -74,6 +85,18 @@ export function* onSignOutStart() {
   yield takeLatest(UserActionTypes.SIGN_OUT_START, signOutStart);
 }
 
+export function* onUpdateUserDetails() {
+  yield takeLatest(UserActionTypes.UPDATE_USER_DETAILS, updateUserDetails);
+}
+export function* updateUserDetails(userDetails) {
+  try {
+    yield updateCurrentUser(userDetails.payload);
+    yield put(updateUserDetailsSuccess(userDetails.payload));
+  } catch (error) {
+    //yield put(signOutFailure(error.message));
+    //TODO: error handling
+  }
+}
 
 export function* userSagas() {
   yield all([
@@ -81,6 +104,7 @@ export function* userSagas() {
     call(onEmailSignInStart),
     call(onCheckUserSession),
     call(onSignOutStart),
+    call(onUpdateUserDetails)
     // call(onEmailSignUpStart),
     // call(onEmailSignUpSuccess)
   ]);

client/src/redux/user/user.types.js

@@ -12,6 +12,8 @@ const UserActionTypes = {
   EMAIL_SIGN_UP_SUCCESS: "EMAIL_SIGN_UP_SUCCESS",
   EMAIL_SIGN_UP_FAILURE: "EMAIL_SIGN_UP_FAILURE",
   UNAUTHORIZED_USER: "UNAUTHORIZED_USER",
-  SET_USER_LANGUAGE: "SET_USER_LANGUAGE"
+  SET_USER_LANGUAGE: "SET_USER_LANGUAGE",
+  UPDATE_USER_DETAILS: "UPDATE_USER_DETAILS",
+  UPDATE_USER_DETAILS_SUCCESS: "UPDATE_USER_DETAILS_SUCCESS"
 };
 export default UserActionTypes;

client/src/translations/en_us/common.json

@@ -272,6 +272,9 @@
 		"user": {
 			"actions": {
 				"signout": "Sign Out"
+			},
+			"fields": {
+				"displayname": "Display Name"
 			}
 		},
 		"vehicles": {

client/src/translations/es/common.json

@@ -272,6 +272,9 @@
 		"user": {
 			"actions": {
 				"signout": "desconectar"
+			},
+			"fields": {
+				"displayname": "Nombre para mostrar"
 			}
 		},
 		"vehicles": {

client/src/translations/fr/common.json

@@ -272,6 +272,9 @@
 		"user": {
 			"actions": {
 				"signout": "Déconnexion"
+			},
+			"fields": {
+				"displayname": "Afficher un nom"
 			}
 		},
 		"vehicles": {