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

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>
-    <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>
-      </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>
+const ClientProfileView = ({ user }) => (
+  <Card fluid={true}>
+    <Card.Content>
+      <Card.Header>Client Information</Card.Header>
+      {user.client &&
+        user.client.business_number &&
+        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>}
+    </Card.Content>
+  </Card>
 );
 
 export default connect(mapStateToProps)(ClientProfile);

src/components/User/Client/CreateWorkTypeForm.jsx

@@ -1,115 +0,0 @@
-import React, { Component } from "react";
-import { GithubPicker } from "react-color";
-import { connect } from "react-redux";
-import { Container, Form, Header, Label, Message } from "semantic-ui-react";
-
-import {
-  clearWorktypeRequestError,
-  clearWorktypeRequestSuccess,
-  setFormWorktypeColor,
-  setFormWorktypeLabel
-} from "../../../actions/worktype/reducer.actions";
-import { createWorktypeRequest } from "../../../actions/worktype/saga.actions";
-import Error from "../../Shared/Error";
-
-class CreateWorkTypeForm extends Component {
-  componentWillUnmount = () => {
-    this.props.dispatch(clearWorktypeRequestError());
-    this.props.dispatch(clearWorktypeRequestSuccess());
-    this.props.dispatch(setFormWorktypeColor(""));
-    this.props.dispatch(setFormWorktypeLabel(""));
-  };
-
-  changeLabel = event => {
-    this.props.dispatch(setFormWorktypeLabel(event.target.value));
-  };
-
-  changeColor = color => {
-    this.props.dispatch(setFormWorktypeColor(color.hex));
-  };
-
-  onSubmitWorktype = event => {
-    event.preventDefault();
-    const { label, color } = this.props;
-    this.props.dispatch(createWorktypeRequest({ label, color }));
-  };
-
-  render() {
-    const {
-      isSendingWorktypeRequest,
-      worktypeRequestError,
-      worktypeRequestSuccess,
-      label,
-      color
-    } = this.props;
-
-    return (
-      <CreateWorkTypeFormView
-        isSendingWorktypeRequest={isSendingWorktypeRequest}
-        worktypeRequestError={worktypeRequestError}
-        worktypeRequestSuccess={worktypeRequestSuccess}
-        label={label}
-        color={color}
-        changeLabel={this.changeLabel}
-        changeColor={this.changeColor}
-        onSubmitWorktype={this.onSubmitWorktype}
-      />
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return { ...state.worktype };
-}
-
-const CreateWorkTypeFormView = ({
-  isSendingWorktypeRequest,
-  worktypeRequestError,
-  worktypeRequestSuccess,
-  label,
-  color,
-  changeLabel,
-  changeColor,
-  onSubmitWorktype
-}) => (
-  <Container>
-    <Header>Create Worktype</Header>
-    <Form
-      loading={isSendingWorktypeRequest}
-      onSubmit={onSubmitWorktype}
-      error={!!worktypeRequestError}
-      success={!!worktypeRequestSuccess}
-    >
-      <Form.Field>
-        <label>Label</label>
-        <input
-          placeholder="My worktype"
-          type="text"
-          value={label}
-          onChange={changeLabel}
-        />
-      </Form.Field>
-      <Form.Field>
-        <label>Color</label>
-        <Label
-          circular
-          empty
-          size="massive"
-          style={{
-            backgroundColor: color,
-            borderColor: color
-          }}
-        />
-        <GithubPicker color={color} onChangeComplete={changeColor} />
-      </Form.Field>
-      <Error header="Create Worktype failed!" error={worktypeRequestError} />
-      <Message success>
-        <Message.Header>Create Worktype successful!</Message.Header>
-        <p>Set worktype successfully.</p>
-      </Message>
-      <Form.Button>Submit Worktype</Form.Button>
-    </Form>
-  </Container>
-);
-
-export default connect(mapStateToProps)(CreateWorkTypeForm);

src/components/User/Client/UpdateWorkTypeForm.jsx

@@ -1,111 +0,0 @@
-import React, { Component } from "react";
-import { GithubPicker } from "react-color";
-import { connect } from "react-redux";
-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";
-
-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(""));
-  };
-
-  changeColor = color => {
-    this.props.dispatch(setFormWorktypeColor(color.hex));
-  };
-
-  onSubmitWorktype = event => {
-    event.preventDefault();
-    const { uuid, color } = this.props;
-    this.props.dispatch(updateWorktypeRequest({ uuid, color }));
-  };
-
-  render() {
-    const {
-      isSendingWorktypeRequest,
-      worktypeRequestError,
-      worktypeRequestSuccess,
-      uuid,
-      label,
-      color
-    } = this.props;
-
-    return (
-      <UpdateWorkTypeFormView
-        isSendingWorktypeRequest={isSendingWorktypeRequest}
-        worktypeRequestError={worktypeRequestError}
-        worktypeRequestSuccess={worktypeRequestSuccess}
-        uuid={uuid}
-        label={label}
-        color={color}
-        changeColor={this.changeColor}
-        onSubmitWorktype={this.onSubmitWorktype}
-      />
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return { ...state.worktype };
-}
-
-const UpdateWorkTypeFormView = ({
-  isSendingWorktypeRequest,
-  worktypeRequestError,
-  worktypeRequestSuccess,
-  label,
-  color,
-  changeColor,
-  onSubmitWorktype
-}) => (
-  <Container>
-    <Header>Update Worktype</Header>
-    <Form
-      loading={isSendingWorktypeRequest}
-      onSubmit={onSubmitWorktype}
-      error={!!worktypeRequestError}
-      success={!!worktypeRequestSuccess}
-    >
-      <Form.Field>
-        <label>Label</label>
-        <input type="text" disabled value={label}/>
-      </Form.Field>
-      <Form.Field>
-        <label>Color</label>
-        <Label
-          circular
-          empty
-          size="massive"
-          style={{
-            backgroundColor: color,
-            borderColor: color
-          }}
-        />
-        <GithubPicker color={color} onChangeComplete={changeColor} />
-      </Form.Field>
-      <Error header="Update Worktype failed!" error={worktypeRequestError} />
-      <Message success>
-        <Message.Header>Update Worktype successful!</Message.Header>
-        <p>Update worktype successfully.</p>
-      </Message>
-      <Form.Button>Update Worktype</Form.Button>
-    </Form>
-  </Container>
-);
-
-export default connect(mapStateToProps)(UpdateWorkTypeForm);

src/components/User/Profile.jsx

@@ -38,11 +38,13 @@ const ProfileView = ({ user }) => (
               "User Registration Not Completed"}
           </span>
           {user.first_name} {user.last_name}
-          <List>
-            <List.Item>
-              Phone Number: {user.userinfo.phone_number}
-            </List.Item>
-          </List>
+          {user.userinfo &&
+            <List>
+              {user.userinfo.phone_number &&
+                <List.Item>
+                  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 (
-      <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>