Added delete worktype functionality, separated client/provider subprofiles

src/components/User/Client/ClientProfile.jsx

@@ -3,10 +3,18 @@ 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";
+
 class ClientProfile extends Component {
+  deleteWorkType = uuid => {
+    this.props.dispatch(deleteWorktypeRequest(uuid));
+  };
+
   render() {
     const { selfUser } = this.props;
-    return <ClientProfileView user={selfUser} />;
+    return (
+      <ClientProfileView user={selfUser} deleteWorkType={this.deleteWorkType} />
+    );
   }
 }
 
@@ -14,7 +22,7 @@ function mapStateToProps(state) {
   return { ...state.user };
 }
 
-const ClientProfileView = ({ user }) => (
+const ClientProfileView = ({ user, deleteWorkType }) => (
   <div>
     <Card fluid={true}>
       <Card.Content>
@@ -33,41 +41,51 @@ const ClientProfileView = ({ user }) => (
         </Card.Description>
       </Card.Content>
     </Card>
-    {(user.client.work_types || []).length &&
+    {(user.client.work_types || []).filter(worktype => !worktype.deleted)
+      .length > 0 &&
       <Card.Group>
-        {user.client.work_types.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">Delete</Button>
-              </Button.Group>
-            </Card.Content>
-          </Card>
-        ))}
+        {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>
 );

src/components/User/Client/CreateWorkTypeForm.jsx

@@ -16,6 +16,8 @@ class CreateWorkTypeForm extends Component {
   componentWillUnmount = () => {
     this.props.dispatch(clearWorktypeRequestError());
     this.props.dispatch(clearWorktypeRequestSuccess());
+    this.props.dispatch(setFormWorktypeColor(""));
+    this.props.dispatch(setFormWorktypeLabel(""));
   };
 
   changeLabel = event => {

src/components/User/Client/UpdateWorkTypeForm.jsx

@@ -6,7 +6,8 @@ import { Container, Form, Header, Label, Message } from "semantic-ui-react";
 import {
   clearWorktypeRequestError,
   clearWorktypeRequestSuccess,
-  setFormWorktypeColor
+  setFormWorktypeColor,
+  setFormWorktypeLabel
 } from "../../../actions/worktype/reducer.actions";
 import { updateWorktypeRequest, readWorktypeRequest } from "../../../actions/worktype/saga.actions";
 import Error from "../../Shared/Error";
@@ -20,6 +21,8 @@ class UpdateWorkTypeForm extends Component {
   componentWillUnmount = () => {
     this.props.dispatch(clearWorktypeRequestError());
     this.props.dispatch(clearWorktypeRequestSuccess());
+    this.props.dispatch(setFormWorktypeColor(""));
+    this.props.dispatch(setFormWorktypeLabel(""));
   };
 
   changeColor = color => {

src/components/User/Profile.jsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { Card, Container, Header, Label, List } from "semantic-ui-react";
 
 import ClientProfile from "./Client/ClientProfile";
+import ProviderProfile from "./Provider/ProviderProfile";
 
 class Profile extends Component {
   render() {
@@ -37,16 +38,11 @@ const ProfileView = ({ user }) => (
               "User Registration Not Completed"}
           </span>
           {user.first_name} {user.last_name}
-          {user.userinfo &&
-            <List>
-              {Object.keys(user.userinfo).map(function(key) {
-                return (
-                  <List.Item key={key}>
-                    {key}: {user.userinfo[key]}
-                  </List.Item>
-                );
-              })}
-            </List>}
+          <List>
+            <List.Item>
+              Phone Number: {user.userinfo.phone_number}
+            </List.Item>
+          </List>
         </Card.Description>
       </Card.Content>
       <Card.Content extra>
@@ -54,7 +50,7 @@ const ProfileView = ({ user }) => (
       </Card.Content>
     </Card>
     {user.client && <ClientProfile />}
-    {user.provider && <div />}
+    {user.provider && <ProviderProfile />}
   </Container>
 );
 

src/components/User/Provider/ProviderProfile.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Card } from "semantic-ui-react";
+
+class ProviderProfile extends Component {
+  render() {
+    const { selfUser } = this.props;
+    return (
+      <ProviderProfileView user={selfUser} />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.user };
+}
+
+const ProviderProfileView = ({ user }) => (
+  <div>
+    <Card fluid={true}>
+      <Card.Content>
+        <Card.Header>Provider Information</Card.Header>
+        <Card.Meta>Social Insurance Number: {user.provider.sin}</Card.Meta>
+      </Card.Content>
+    </Card>
+  </div>
+);
+
+export default connect(mapStateToProps)(ProviderProfile);

src/sagas/index.js

@@ -38,12 +38,14 @@ import {
 import {
   CREATE_WORKTYPE_REQUEST,
   READ_WORKTYPE_REQUEST,
-  UPDATE_WORKTYPE_REQUEST
+  UPDATE_WORKTYPE_REQUEST,
+  DELETE_WORKTYPE_REQUEST
 } from "../constants/worktype.constants";
 import {
   createWorktypeFlow,
   readWorktypeFlow,
-  updateWorktypeFlow
+  updateWorktypeFlow,
+  deleteWorktypeFlow
 } from "./worktype.sagas";
 
 export default function* rootSaga() {
@@ -64,4 +66,5 @@ export default function* rootSaga() {
   yield takeLatest(CREATE_WORKTYPE_REQUEST, createWorktypeFlow);
   yield takeLatest(READ_WORKTYPE_REQUEST, readWorktypeFlow);
   yield takeLatest(UPDATE_WORKTYPE_REQUEST, updateWorktypeFlow);
+  yield takeLatest(DELETE_WORKTYPE_REQUEST, deleteWorktypeFlow);
 }

src/sagas/worktype.sagas.js

@@ -55,6 +55,18 @@ function* updateWorktypeCall(payload) {
   }
 }
 
+function* deleteWorktypeCall(uuid) {
+  yield effects.put(isSendingWorktypeRequest(true));
+  try {
+    return yield effects.call(deleteWorktype, uuid);
+  } catch (exception) {
+    yield effects.put(setWorktypeRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingWorktypeRequest(false));
+  }
+}
+
 export function* createWorktypeFlow(request) {
   yield effects.put(clearWorktypeRequestSuccess());
   yield effects.put(clearWorktypeRequestError());
@@ -86,3 +98,8 @@ export function* updateWorktypeFlow(request) {
     yield effects.put(setWorktypeRequestSuccess(wasSuccessful));
   }
 }
+
+export function* deleteWorktypeFlow(request) {
+  yield effects.call(deleteWorktypeCall, request.data);
+  yield effects.put(getSelfUserRequest());
+}