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

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 CreateWorkTypeForm from "./Worktype/CreateWorkTypeForm";
-import UpdateWorkTypeForm from "./User/Client/UpdateWorkTypeForm";
+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}

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>

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 } from "semantic-ui-react";
-import { Card, Button, Label } from "semantic-ui-react";
-
-import { deleteWorktypeRequest } from "../../../actions/worktype/saga.actions";
 
 class ClientProfile extends Component {
-  deleteWorkType = uuid => {
-    this.props.dispatch(deleteWorktypeRequest(uuid));
-  };
-
   render() {
     const { selfUser } = this.props;
-    return (
+    return <ClientProfileView user={selfUser} />;
-      <ClientProfileView user={selfUser} deleteWorkType={this.deleteWorkType} />
-    );
   }
 }
 
@@ -22,72 +13,15 @@ function mapStateToProps(state) {
   return { ...state.user };
 }
 
-const ClientProfileView = ({ user, deleteWorkType }) => (
+const ClientProfileView = ({ user }) => (
-  <div>
+  <Card fluid={true}>
-    <Card fluid={true}>
+    <Card.Content>
-      <Card.Content>
+      <Card.Header>Client Information</Card.Header>
-        <Card.Header>Client Information</Card.Header>
+      {user.client &&
-        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>
+        user.client.business_number &&
-        <Card.Description>
+        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>}
-          <Button
+    </Card.Content>
-            basic
+  </Card>
-            color="green"
-            size="small"
-            as={Link}
-            to="/user/profile/client/create-worktype"
-          >
-            Create Worktype
-          </Button>
-        </Card.Description>
-      </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);

src/components/User/Profile.jsx

@@ -38,11 +38,13 @@ const ProfileView = ({ user }) => (
               "User Registration Not Completed"}
           </span>
           {user.first_name} {user.last_name}
-          <List>
+          {user.userinfo &&
-            <List.Item>
+            <List>
-              Phone Number: {user.userinfo.phone_number}
+              {user.userinfo.phone_number &&
-            </List.Item>
+                <List.Item>
-          </List>
+                  Phone Number: {user.userinfo.phone_number}
+                </List.Item>}
+            </List>}
         </Card.Description>
       </Card.Content>
       <Card.Content extra>

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 (
+    return <ProviderProfileView user={selfUser} />;
-      <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>

src/components/Worktype/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";
+} from "../../actions/worktype/reducer.actions";
-import { createWorktypeRequest } from "../../../actions/worktype/saga.actions";
+import { createWorktypeRequest } from "../../actions/worktype/saga.actions";
-import Error from "../../Shared/Error";
+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>

src/components/Worktype/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";
+} from "../../actions/worktype/reducer.actions";
-import { updateWorktypeRequest, readWorktypeRequest } from "../../../actions/worktype/saga.actions";
+import {
-import Error from "../../Shared/Error";
+  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 = ({
@@ -83,7 +88,7 @@ const UpdateWorkTypeFormView = ({
     >
       <Form.Field>
         <label>Label</label>
-        <input type="text" disabled value={label}/>
+        <input type="text" disabled value={label} />
       </Form.Field>
       <Form.Field>
         <label>Color</label>
@@ -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>

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