Added worktype menu option, usertype check, deletion confirmation, redirect

2017-09-21 20:39:58 -06:00 · 2017-09-21 20:39:58 -06:00 · 0486a7fe64
commit 0486a7fe64
parent 0ae0a92187
8 changed files with 184 additions and 109 deletions
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@ -7,8 +7,9 @@ import Register from "./Auth/Register";
 import ResetPassword from "./Auth/ResetPassword";
 import Settings from "./Auth/Settings";
 import VerifyEmail from "./Auth/VerifyEmail";
-import CreateWorkTypeForm from "./User/Client/CreateWorkTypeForm";
-import UpdateWorkTypeForm from "./User/Client/UpdateWorkTypeForm";
+import CreateWorkTypeForm from "./Worktype/CreateWorkTypeForm";
+import UpdateWorkTypeForm from "./Worktype/UpdateWorkTypeForm";
+import Worktypes from "./Worktype/Worktypes";
 import CompleteRegistration from "./User/CompleteRegistration";
 import EditProfile from "./User/EditProfile";
 import Profile from "./User/Profile";
@ -48,6 +49,10 @@ class App extends Component {
                path="/auth/reset-password/:uid/:token"
                component={ResetPassword}
              />
+              <PrivateRoute
+                path="/user/profile/client/worktypes"
+                component={Worktypes}
+              />
              <PrivateRoute
                path="/user/profile/client/update-worktype/:uuid"
                component={UpdateWorkTypeForm}
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@ -20,11 +20,12 @@ class Navbar extends Component {
  };

  render() {
-    const { userToken } = this.props;
+    const { userToken, selfUser } = this.props;
    return (
      <NavbarView
        isAuthenticated={!!userToken}
        dispatchLogoutRequest={this.dispatchLogoutRequest}
+        selfUser={selfUser}
      />
    );
  }
@ -37,7 +38,7 @@ function mapStateToProps(state) {
  };
 }

-const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => (
+const NavbarView = ({ isAuthenticated, dispatchLogoutRequest, selfUser }) => (
  <Menu>
    <Menu.Item as={Link} to="/">
      Caremyway
@ -61,6 +62,10 @@ const NavbarView = ({ isAuthenticated, dispatchLogoutRequest }) => (
            <Dropdown.Item as={Link} to="/user/profile">
              My Profile
            </Dropdown.Item>
+            {selfUser.client &&
+              <Dropdown.Item as={Link} to="/user/profile/client/worktypes">
+                Work Types
+              </Dropdown.Item>}
            <Dropdown.Item as={Link} to="/auth/settings">
              Settings
            </Dropdown.Item>
--- a/src/components/User/Client/ClientProfile.jsx
+++ b/src/components/User/Client/ClientProfile.jsx
@ -1,20 +1,11 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-import { Card, Button, Label } from "semantic-ui-react";
-
-import { deleteWorktypeRequest } from "../../../actions/worktype/saga.actions";
+import { Card } from "semantic-ui-react";

 class ClientProfile extends Component {
-  deleteWorkType = uuid => {
-    this.props.dispatch(deleteWorktypeRequest(uuid));
-  };
-
  render() {
    const { selfUser } = this.props;
-    return (
-      <ClientProfileView user={selfUser} deleteWorkType={this.deleteWorkType} />
-    );
+    return <ClientProfileView user={selfUser} />;
  }
 }

@ -22,72 +13,15 @@ function mapStateToProps(state) {
  return { ...state.user };
 }

-const ClientProfileView = ({ user, deleteWorkType }) => (
-  <div>
+const ClientProfileView = ({ user }) => (
  <Card fluid={true}>
    <Card.Content>
      <Card.Header>Client Information</Card.Header>
-        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>
-        <Card.Description>
-          <Button
-            basic
-            color="green"
-            size="small"
-            as={Link}
-            to="/user/profile/client/create-worktype"
-          >
-            Create Worktype
-          </Button>
-        </Card.Description>
+      {user.client &&
+        user.client.business_number &&
+        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>}
    </Card.Content>
  </Card>
-    {(user.client.work_types || []).filter(worktype => !worktype.deleted)
-      .length > 0 &&
-      <Card.Group>
-        {user.client.work_types
-          .filter(worktype => !worktype.deleted)
-          .map((worktype, index) => (
-            <Card key={index}>
-              <Card.Content>
-                <Card.Header as="h4">
-                  <Label
-                    circular
-                    empty
-                    style={{
-                      backgroundColor: worktype.color,
-                      borderColor: worktype.color
-                    }}
-                  />{"  " + worktype.label}
-                </Card.Header>
-                <Card.Meta>
-                  Worktype
-                </Card.Meta>
-              </Card.Content>
-              <Card.Content extra>
-                <Button.Group>
-                  <Button
-                    basic
-                    color="yellow"
-                    size="small"
-                    as={Link}
-                    to={`/user/profile/client/update-worktype/${worktype.uuid}`}
-                  >
-                    Edit
-                  </Button>
-                  <Button
-                    basic
-                    color="red"
-                    size="small"
-                    onClick={() => deleteWorkType(worktype.uuid)}
-                  >
-                    Delete
-                  </Button>
-                </Button.Group>
-              </Card.Content>
-            </Card>
-          ))}
-      </Card.Group>}
-  </div>
 );

 export default connect(mapStateToProps)(ClientProfile);
--- a/src/components/User/Profile.jsx
+++ b/src/components/User/Profile.jsx
@ -38,11 +38,13 @@ const ProfileView = ({ user }) => (
              "User Registration Not Completed"}
          </span>
          {user.first_name} {user.last_name}
+          {user.userinfo &&
            <List>
+              {user.userinfo.phone_number &&
                <List.Item>
                  Phone Number: {user.userinfo.phone_number}
-            </List.Item>
-          </List>
+                </List.Item>}
+            </List>}
        </Card.Description>
      </Card.Content>
      <Card.Content extra>
--- a/src/components/User/Provider/ProviderProfile.jsx
+++ b/src/components/User/Provider/ProviderProfile.jsx
@ -5,9 +5,7 @@ import { Card } from "semantic-ui-react";
 class ProviderProfile extends Component {
  render() {
    const { selfUser } = this.props;
-    return (
-      <ProviderProfileView user={selfUser} />
-    );
+    return <ProviderProfileView user={selfUser} />;
  }
 }

@ -20,7 +18,9 @@ const ProviderProfileView = ({ user }) => (
    <Card fluid={true}>
      <Card.Content>
        <Card.Header>Provider Information</Card.Header>
-        <Card.Meta>Social Insurance Number: {user.provider.sin}</Card.Meta>
+        {user.provider &&
+          user.provider.sin &&
+          <Card.Meta>Social Insurance Number: {user.provider.sin}</Card.Meta>}
      </Card.Content>
    </Card>
  </div>
--- a/src/components/User/Client/CreateWorkTypeForm.jsx
+++ b/src/components/User/Client/CreateWorkTypeForm.jsx
@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { GithubPicker } from "react-color";
 import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
 import { Container, Form, Header, Label, Message } from "semantic-ui-react";

 import {
@ -8,12 +9,12 @@ import {
  clearWorktypeRequestSuccess,
  setFormWorktypeColor,
  setFormWorktypeLabel
-} from "../../../actions/worktype/reducer.actions";
-import { createWorktypeRequest } from "../../../actions/worktype/saga.actions";
-import Error from "../../Shared/Error";
+} from "../../actions/worktype/reducer.actions";
+import { createWorktypeRequest } from "../../actions/worktype/saga.actions";
+import Error from "../Shared/Error";

 class CreateWorkTypeForm extends Component {
-  componentWillUnmount = () => {
+  componentWillMount = () => {
    this.props.dispatch(clearWorktypeRequestError());
    this.props.dispatch(clearWorktypeRequestSuccess());
    this.props.dispatch(setFormWorktypeColor(""));
@ -40,9 +41,14 @@ class CreateWorkTypeForm extends Component {
      worktypeRequestError,
      worktypeRequestSuccess,
      label,
-      color
+      color,
+      selfUser
    } = this.props;

+    if (!selfUser.client) {
+      return <Redirect to="/" />;
+    }
+
    return (
      <CreateWorkTypeFormView
        isSendingWorktypeRequest={isSendingWorktypeRequest}
@ -59,7 +65,7 @@ class CreateWorkTypeForm extends Component {
 }

 function mapStateToProps(state) {
-  return { ...state.worktype };
+  return { ...state.worktype, selfUser: state.user.selfUser };
 }

 const CreateWorkTypeFormView = ({
@ -105,7 +111,8 @@ const CreateWorkTypeFormView = ({
      <Error header="Create Worktype failed!" error={worktypeRequestError} />
      <Message success>
        <Message.Header>Create Worktype successful!</Message.Header>
-        <p>Set worktype successfully.</p>
+        <p>Worktype successfully created.</p>
+        {!!worktypeRequestSuccess && <Redirect to="/user/profile/client/worktypes" />}
      </Message>
      <Form.Button>Submit Worktype</Form.Button>
    </Form>
--- a/src/components/User/Client/UpdateWorkTypeForm.jsx
+++ b/src/components/User/Client/UpdateWorkTypeForm.jsx
@ -1,26 +1,26 @@
 import React, { Component } from "react";
 import { GithubPicker } from "react-color";
 import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
 import { Container, Form, Header, Label, Message } from "semantic-ui-react";

 import {
-  clearWorktypeRequestError,
-  clearWorktypeRequestSuccess,
  setFormWorktypeColor,
  setFormWorktypeLabel
-} from "../../../actions/worktype/reducer.actions";
-import { updateWorktypeRequest, readWorktypeRequest } from "../../../actions/worktype/saga.actions";
-import Error from "../../Shared/Error";
+} from "../../actions/worktype/reducer.actions";
+import {
+  updateWorktypeRequest,
+  readWorktypeRequest
+} from "../../actions/worktype/saga.actions";
+import Error from "../Shared/Error";

 class UpdateWorkTypeForm extends Component {
  componentWillMount = () => {
    const uuid = this.props.match.params.uuid;
    this.props.dispatch(readWorktypeRequest(uuid));
-  }
+  };

  componentWillUnmount = () => {
-    this.props.dispatch(clearWorktypeRequestError());
-    this.props.dispatch(clearWorktypeRequestSuccess());
    this.props.dispatch(setFormWorktypeColor(""));
    this.props.dispatch(setFormWorktypeLabel(""));
  };
@ -42,9 +42,14 @@ class UpdateWorkTypeForm extends Component {
      worktypeRequestSuccess,
      uuid,
      label,
-      color
+      color,
+      selfUser
    } = this.props;

+    if (!selfUser.client) {
+      return <Redirect to="/" />;
+    }
+
    return (
      <UpdateWorkTypeFormView
        isSendingWorktypeRequest={isSendingWorktypeRequest}
@ -61,7 +66,7 @@ class UpdateWorkTypeForm extends Component {
 }

 function mapStateToProps(state) {
-  return { ...state.worktype };
+  return { ...state.worktype, selfUser: state.user.selfUser };
 }

 const UpdateWorkTypeFormView = ({
@ -101,7 +106,9 @@ const UpdateWorkTypeFormView = ({
      <Error header="Update Worktype failed!" error={worktypeRequestError} />
      <Message success>
        <Message.Header>Update Worktype successful!</Message.Header>
-        <p>Update worktype successfully.</p>
+        <p>Worktype successfully updated.</p>
+        {!!worktypeRequestSuccess &&
+          <Redirect to="/user/profile/client/worktypes" />}
      </Message>
      <Form.Button>Update Worktype</Form.Button>
    </Form>
--- a/src/components/Worktype/Worktypes.jsx
+++ b/src/components/Worktype/Worktypes.jsx
@ -0,0 +1,115 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Redirect, Link } from "react-router-dom";
+import {
+  Button,
+  Card,
+  Container,
+  Header,
+  Label,
+  Popup,
+  Segment
+} from "semantic-ui-react";
+
+import { deleteWorktypeRequest } from "../../actions/worktype/saga.actions";
+
+class Worktypes extends Component {
+  deleteWorkType = uuid => {
+    this.props.dispatch(deleteWorktypeRequest(uuid));
+  };
+
+  render() {
+    const { selfUser } = this.props;
+    if (selfUser.client) {
+      return (
+        <WorktypesView
+          user={selfUser}
+          deleteWorkType={this.deleteWorkType}
+        />
+      );
+    } else {
+      return <Redirect to="/" />;
+    }
+  }
+}
+
+function mapStateToProps(state) {
+  return { selfUser: state.user.selfUser };
+}
+
+const WorktypesView = ({ user, deleteWorkType, worktypeSuccess }) => (
+  <Container>
+    <Header>Worktypes</Header>
+    <Segment>
+      <Button
+        basic
+        color="green"
+        size="small"
+        as={Link}
+        to="/user/profile/client/create-worktype"
+      >
+        Create Worktype
+      </Button>
+    </Segment>
+    {(user.client.work_types || []).filter(worktype => !worktype.deleted)
+      .length > 0 &&
+      <Card.Group>
+        {user.client.work_types
+          .filter(worktype => !worktype.deleted)
+          .map((worktype, index) => (
+            <Card key={index}>
+              <Card.Content>
+                <Card.Header as="h4">
+                  <Label
+                    circular
+                    empty
+                    style={{
+                      backgroundColor: worktype.color,
+                      borderColor: worktype.color
+                    }}
+                  />{"  " + worktype.label}
+                </Card.Header>
+                <Card.Meta>
+                  Worktype
+                </Card.Meta>
+              </Card.Content>
+              <Card.Content extra>
+                <Button.Group>
+                  <Button
+                    basic
+                    color="yellow"
+                    size="small"
+                    as={Link}
+                    to={`/user/profile/client/update-worktype/${worktype.uuid}`}
+                  >
+                    Edit
+                  </Button>
+                  <Popup
+                    content={
+                      <div>
+                        Are you sure you want to delete this work type?<br />
+                        <Button
+                          basic
+                          color="red"
+                          size="small"
+                          onClick={() => deleteWorkType(worktype.uuid)}
+                        >
+                          Confirm Deletion
+                        </Button>
+                      </div>
+                    }
+                    trigger={
+                      <Button basic color="red" size="small">Delete</Button>
+                    }
+                    on="click"
+                    position="top right"
+                  />
+                </Button.Group>
+              </Card.Content>
+            </Card>
+          ))}
+      </Card.Group>}
+  </Container>
+);
+
+export default connect(mapStateToProps)(Worktypes);