Added delete worktype functionality, separated client/provider subprofiles

master
Alexander Wong 7 years ago
parent 0e6fb475b7
commit 0ae0a92187
  1. 90
      src/components/User/Client/ClientProfile.jsx
  2. 2
      src/components/User/Client/CreateWorkTypeForm.jsx
  3. 5
      src/components/User/Client/UpdateWorkTypeForm.jsx
  4. 18
      src/components/User/Profile.jsx
  5. 29
      src/components/User/Provider/ProviderProfile.jsx
  6. 7
      src/sagas/index.js
  7. 17
      src/sagas/worktype.sagas.js

@ -3,10 +3,18 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Card, Button, Label } from "semantic-ui-react"; import { Card, Button, Label } from "semantic-ui-react";
import { deleteWorktypeRequest } from "../../../actions/worktype/saga.actions";
class ClientProfile extends Component { class ClientProfile extends Component {
deleteWorkType = uuid => {
this.props.dispatch(deleteWorktypeRequest(uuid));
};
render() { render() {
const { selfUser } = this.props; 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 }; return { ...state.user };
} }
const ClientProfileView = ({ user }) => ( const ClientProfileView = ({ user, deleteWorkType }) => (
<div> <div>
<Card fluid={true}> <Card fluid={true}>
<Card.Content> <Card.Content>
@ -33,41 +41,51 @@ const ClientProfileView = ({ user }) => (
</Card.Description> </Card.Description>
</Card.Content> </Card.Content>
</Card> </Card>
{(user.client.work_types || []).length && {(user.client.work_types || []).filter(worktype => !worktype.deleted)
.length > 0 &&
<Card.Group> <Card.Group>
{user.client.work_types.map((worktype, index) => ( {user.client.work_types
<Card key={index}> .filter(worktype => !worktype.deleted)
<Card.Content> .map((worktype, index) => (
<Card.Header as="h4"> <Card key={index}>
<Label <Card.Content>
circular <Card.Header as="h4">
empty <Label
style={{ circular
backgroundColor: worktype.color, empty
borderColor: worktype.color style={{
}} backgroundColor: worktype.color,
/>{" " + worktype.label} borderColor: worktype.color
</Card.Header> }}
<Card.Meta> />{" " + worktype.label}
Worktype </Card.Header>
</Card.Meta> <Card.Meta>
</Card.Content> Worktype
<Card.Content extra> </Card.Meta>
<Button.Group> </Card.Content>
<Button <Card.Content extra>
basic <Button.Group>
color="yellow" <Button
size="small" basic
as={Link} color="yellow"
to={`/user/profile/client/update-worktype/${worktype.uuid}`} size="small"
> as={Link}
Edit to={`/user/profile/client/update-worktype/${worktype.uuid}`}
</Button> >
<Button basic color="red" size="small">Delete</Button> Edit
</Button.Group> </Button>
</Card.Content> <Button
</Card> basic
))} color="red"
size="small"
onClick={() => deleteWorkType(worktype.uuid)}
>
Delete
</Button>
</Button.Group>
</Card.Content>
</Card>
))}
</Card.Group>} </Card.Group>}
</div> </div>
); );

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

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

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

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

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

@ -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) { export function* createWorktypeFlow(request) {
yield effects.put(clearWorktypeRequestSuccess()); yield effects.put(clearWorktypeRequestSuccess());
yield effects.put(clearWorktypeRequestError()); yield effects.put(clearWorktypeRequestError());
@ -86,3 +98,8 @@ export function* updateWorktypeFlow(request) {
yield effects.put(setWorktypeRequestSuccess(wasSuccessful)); yield effects.put(setWorktypeRequestSuccess(wasSuccessful));
} }
} }
export function* deleteWorktypeFlow(request) {
yield effects.call(deleteWorktypeCall, request.data);
yield effects.put(getSelfUserRequest());
}

Loading…
Cancel
Save