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