BREAKING CHANGES: Converted to use Redux stores. Login now working using Redux.

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

@@ -1,8 +1,22 @@
 import React, { useState } from "react";
 import ChatWindowComponent from "./chat-window.component";
 import { Button } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 
-export default function ChatWindowContainer() {
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = dispatch => ({
+  // signOutStart: () => dispatch(signOutStart())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatWindowContainer({ currentUser }) {
   const [visible, setVisible] = useState(false);
   return (
     <div style={{ position: "absolute", zIndex: 1000 }}>
@@ -10,9 +24,10 @@ export default function ChatWindowContainer() {
       <Button
         onClick={() => {
           setVisible(!visible);
-        }}>
+        }}
+      >
         Open!
       </Button>
     </div>
   );
-}
+});

client/src/components/current-user-dropdown/current-user-dropdown.component.jsx

@@ -1,17 +1,29 @@
-import { useApolloClient, useQuery } from "@apollo/react-hooks";
+import { useApolloClient } from "@apollo/react-hooks";
 import { Avatar, Col, Dropdown, Icon, Menu, Row } from "antd";
 import i18next from "i18next";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import UserImage from "../../assets/User.svg";
-import { GET_CURRENT_USER } from "../../graphql/local.queries";
-import AlertComponent from "../alert/alert.component";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 import SignOut from "../sign-out/sign-out.component";
 
-export default function CurrentUserDropdown() {
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = dispatch => ({
+  // signOutStart: () => dispatch(signOutStart())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function CurrentUserDropdown({ currentUser }) {
   const { t } = useTranslation();
-  const { loading, error, data } = useQuery(GET_CURRENT_USER);
+
   const client = useApolloClient();
 
   const handleMenuClick = e => {
@@ -24,43 +36,39 @@ export default function CurrentUserDropdown() {
     }
   };
   const menu = (
-    <Menu mode='vertical' onClick={handleMenuClick}>
+    <Menu mode="vertical" onClick={handleMenuClick}>
       <Menu.Item>
         <SignOut />
       </Menu.Item>
       <Menu.Item>
-        <Link to='/manage/profile'> {t("menus.currentuser.profile")}</Link>
+        <Link to="/manage/profile"> {t("menus.currentuser.profile")}</Link>
       </Menu.Item>
       <Menu.SubMenu
         title={
           <span>
-            <Icon type='global' />
+            <Icon type="global" />
             <span>{t("menus.currentuser.languageselector")}</span>
           </span>
-        }>
-        <Menu.Item actiontype='lang-select' key='en_us'>
+        }
+      >
+        <Menu.Item actiontype="lang-select" key="en_us">
           {t("general.languages.english")}
         </Menu.Item>
-        <Menu.Item actiontype='lang-select' key='fr'>
+        <Menu.Item actiontype="lang-select" key="fr">
           {t("general.languages.french")}
         </Menu.Item>
-        <Menu.Item actiontype='lang-select' key='es'>
+        <Menu.Item actiontype="lang-select" key="es">
           {t("general.languages.spanish")}
         </Menu.Item>
       </Menu.SubMenu>
     </Menu>
   );
 
-  if (loading) return null;
-  if (error) return <AlertComponent message={error.message} type='error' />;
-
-  const { currentUser } = data;
-
   return (
     <Dropdown overlay={menu}>
       <Row>
         <Col span={8}>
-          <Avatar size='large' alt='Avatar' src={UserImage} />
+          <Avatar size="large" alt="Avatar" src={UserImage} />
         </Col>
         <Col span={16} style={{ color: "white" }}>
           {currentUser.displayName || t("general.labels.unknown")}
@@ -68,4 +76,4 @@ export default function CurrentUserDropdown() {
       </Row>
     </Dropdown>
   );
-}
+});

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

@@ -6,45 +6,45 @@ 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 ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
-import "./header.styles.scss";
 
 export default ({ landingHeader, navItems, selectedNavItem }) => {
   const apolloClient = useApolloClient();
   const { t } = useTranslation();
-  
+
   const handleClick = e => {
     apolloClient.writeData({ data: { selectedNavItem: e.key } });
   };
 
   return (
-    <Row type='flex' justify='space-around'>
+    <Row type="flex" justify="space-around">
       <Col span={16}>
         <Menu
-          theme='dark'
-          className='header'
+          theme="dark"
+          className="header"
           onClick={handleClick}
           selectedKeys={selectedNavItem}
-          mode='horizontal'>
+          mode="horizontal"
+        >
           <Menu.Item>
             <GlobalSearch />
           </Menu.Item>
 
-          <Menu.Item key='home'>
-            <Link to='/manage'>
-              <Icon type='home' />
+          <Menu.Item key="home">
+            <Link to="/manage">
+              <Icon type="home" />
               {t("menus.header.home")}
             </Link>
           </Menu.Item>
           <Menu.SubMenu title={t("menus.header.jobs")}>
-            <Menu.Item key='activejobs'>
-              <Link to='/manage/jobs'>
-                <Icon type='home' />
+            <Menu.Item key="activejobs">
+              <Link to="/manage/jobs">
+                <Icon type="home" />
                 {t("menus.header.activejobs")}
               </Link>
             </Menu.Item>
-            <Menu.Item key='availablejobs'>
-              <Link to='/manage/available'>
-                <Icon type='home' />
+            <Menu.Item key="availablejobs">
+              <Link to="/manage/available">
+                <Icon type="home" />
                 {t("menus.header.availablejobs")}
               </Link>
             </Menu.Item>

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

@@ -1,25 +1,8 @@
 import React from "react";
-import "./header.styles.scss";
-import { useQuery } from "react-apollo";
-// //import {
-//   GET_LANDING_NAV_ITEMS,
-//   GET_NAV_ITEMS
-// } from "../../graphql/metadata.queries";
-import { GET_CURRENT_SELECTED_NAV_ITEM } from "../../graphql/local.queries";
-//import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-//import AlertComponent from "../alert/alert.component";
 import HeaderComponent from "./header.component";
 
 export default ({ landingHeader, signedIn }) => {
-  const hookSelectedNavItem = useQuery(GET_CURRENT_SELECTED_NAV_ITEM);
-
-  const { selectedNavItem } = hookSelectedNavItem.data;
-
-  console.log("selectedNavItem", selectedNavItem);
   return (
-    <HeaderComponent
-      landingHeader={landingHeader}
-      selectedNavItem={selectedNavItem}
-    />
+    <HeaderComponent landingHeader={landingHeader} selectedNavItem={null} />
   );
 };

client/src/components/header/header.styles.scss

@@ -1,4 +0,0 @@
-.header{
-        text-align: center;     
-        width: 100%; 
-}

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -132,6 +132,7 @@ export default function JobLinesComponent({
           />
         );
       }}
+      {...formItemLayout}
       size="small"
       pagination={{ position: "bottom", defaultPageSize: 50 }}
       columns={columns.map(item => ({ ...item }))}

client/src/components/manage-sign-in-button/manage-sign-in-button.component.jsx

@@ -4,18 +4,23 @@ import { Link } from "react-router-dom";
 import { GET_CURRENT_USER } from "../../graphql/local.queries";
 import { Icon } from "antd";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 
-export default function ManageSignInButton() {
-  const {
-    loading,
-    error,
-    data: { currentUser }
-  } = useQuery(GET_CURRENT_USER);
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return error.message;
+const mapDispatchToProps = dispatch => ({
+  // signOutStart: () => dispatch(signOutStart())
+});
 
-  return currentUser ? (
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ManageSignInButton({ currentUser }) {
+  return currentUser.isAuthorized ? (
     <div>
       {" "}
       <Link to="/manage">
@@ -31,4 +36,4 @@ export default function ManageSignInButton() {
       </Link>
     </div>
   );
-}
+});

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -1,76 +1,97 @@
+import { Button, Form, Icon, Input } from "antd";
 import React from "react";
-import { auth } from "../../firebase/firebase.utils";
-import { Form, Icon, Input, Button, Alert } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import Logo from "../../assets/logo240.png";
+import { emailSignInStart } from "../../redux/user/user.actions";
+import {
+  selectCurrentUser,
+  selectSignInError
+} from "../../redux/user/user.selectors";
+import { Redirect } from "react-router-dom";
 
-class SignInForm extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      errorMessage: null
-    };
-  }
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  signInError: selectSignInError
+});
 
-  handleSubmit = e => {
-    e.preventDefault();
+const mapDispatchToProps = dispatch => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password }))
+});
 
-    this.props.form.validateFields(async (err, values) => {
-      if (!err) {
-        const { email, password } = values;
-        try {
-          await auth.signInWithEmailAndPassword(email, password);
-
-          this.props.form.resetFields();
-        } catch (error) {
-          this.setState({ ...this.state, errorMessage: error.message });
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  Form.create({ name: "sign_in" })(function SignInComponent({
+    form,
+    emailSignInStart,
+    currentUser,
+    signInError
+  }) {
+    const handleSubmit = e => {
+      e.preventDefault();
+      form.validateFields(async (err, values) => {
+        if (!err) {
+          const { email, password } = values;
+          emailSignInStart(email, password);
+          //Try to do the login using a saga here.
         }
-      }
-    });
-  };
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    const { errorMessage } = this.state;
+      });
+    };
 
+    console.log("currentUser", currentUser);
+    const { getFieldDecorator } = form;
     return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
-        <Form.Item label="E-mail">
-          {getFieldDecorator("email", {
-            rules: [
-              {
-                type: "email",
-                message: "Please enter a valid email."
-              },
-              {
-                required: true,
-                message: "Please your email."
-              }
-            ]
-          })(<Input />)}
-        </Form.Item>
-        <Form.Item>
-          {getFieldDecorator("password", {
-            rules: [{ required: true, message: "Please enter your password." }]
-          })(
-            <Input
-              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
-              type="password"
-              placeholder="Password"
-            />
-          )}
-        </Form.Item>
-        <Form.Item>
-          <div className="login-form-forgot">Forgot password</div>
-          <Button
-            type="primary"
-            htmlType="submit"
-            className="login-form-button"
-          >
-            Log in
-          </Button>
-        </Form.Item>
-        {errorMessage ? <Alert message={errorMessage} type="error" /> : null}
-      </Form>
+      <div>
+        {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
+
+        <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
+
+        <Form onSubmit={handleSubmit} className="login-form">
+          <Form.Item label="E-mail">
+            {getFieldDecorator("email", {
+              rules: [
+                {
+                  type: "email",
+                  message: "Please enter a valid email."
+                },
+                {
+                  required: true,
+                  message: "Please your email."
+                }
+              ]
+            })(<Input />)}
+          </Form.Item>
+          <Form.Item>
+            {getFieldDecorator("password", {
+              rules: [
+                { required: true, message: "Please enter your password." }
+              ]
+            })(
+              <Input
+                prefix={
+                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
+                }
+                type="password"
+                placeholder="Password"
+              />
+            )}
+          </Form.Item>
+          <Form.Item>
+            <div className="login-form-forgot">Forgot password</div>
+            <Button
+              type="primary"
+              htmlType="submit"
+              className="login-form-button"
+            >
+              Log in
+            </Button>
+          </Form.Item>
+          {signInError ? <div>{signInError.message}</div> : null}
+        </Form>
+      </div>
     );
-  }
-}
-export default Form.create({ name: "sign_in" })(SignInForm);
+  })
+);

client/src/components/sign-in-form/sign-in-form.container.jsx

@@ -1,46 +0,0 @@
-import React from "react";
-import { ApolloConsumer } from "react-apollo";
-import SignInFormComponent from "./sign-in-form.component";
-import { Row, Col, Layout, Typography } from "antd";
-import FooterComponent from "../footer/footer.component";
-import Logo from "../../assets/logo240.png";
-
-const { Content, Footer } = Layout;
-
-export default function SignInFormContainer() {
-  return (
-    <ApolloConsumer>
-      {client => {
-        return (
-          <Layout>
-            <Content>
-              <Row align="middle">
-                <Col span={2} offset={8}>
-                  <div>
-                    <img
-                      src={Logo}
-                      height="100"
-                      width="100"
-                      alt="Bodyshop.app"
-                    />
-                  </div>
-                </Col>
-                <Col span={6}>
-                  <Typography.Title>Bodyshop.app</Typography.Title>
-                </Col>
-              </Row>
-              <Row>
-                <Col span={8} offset={8}>
-                  <SignInFormComponent apolloClient={client} />
-                </Col>
-              </Row>
-            </Content>
-            <Footer>
-              <FooterComponent />
-            </Footer>
-          </Layout>
-        );
-      }}
-    </ApolloConsumer>
-  );
-}