tanner/caremyway-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rudamentary mutli-post err handling

Browse Source
This commit is contained in:
Alexander Wong 2018-04-22 16:39:17 -06:00
parent 530593b721
commit dac6daa933
No known key found for this signature in database
GPG Key ID: E90E5D6448C2C663
9 changed files with 194 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/actions/cShift/reducer.actions.js
View File

@ -1,7 +1,7 @@
import {
IS_SENDING_CSHIFT_REQUEST,
SET_CSHIFT_REQUEST_ERROR,
CLEAR_CSHIFT_REQUEST_ERROR,
SET_CSHIFT_REQUEST_ERRORS,
CLEAR_CSHIFT_REQUEST_ERRORS,
SET_CSHIFT_REQUEST_SUCCESS,
CLEAR_CSHIFT_REQUEST_SUCCESS,
SET_FORM_EMPLOYEE_UUID,
@ -14,6 +14,13 @@ import {
} from "../../constants/cShift.constants";
import { parseError } from "../common.actions";
function transformError(error) {
if (error.get_price_uuid) {
error["Price"] = error.get_price_uuid;
delete error["get_price_uuid"];
}
}
export function isSendingCShiftRequest(sendingRequest) {
return {
type: IS_SENDING_CSHIFT_REQUEST,
@ -23,15 +30,25 @@ export function isSendingCShiftRequest(sendingRequest) {
export function setCShiftRequestError(exception) {
let error = parseError(exception);
transformError(error);
return {
type: SET_CSHIFT_REQUEST_ERROR,
data: error
type: SET_CSHIFT_REQUEST_ERRORS,
data: [error]
};
}
export function setCShiftRequestErrors(exceptions) {
let errors = exceptions.map(exception => parseError(exception));
errors.forEach(error => transformError(error));
return {
type: SET_CSHIFT_REQUEST_ERRORS,
data: errors
}
}
export function clearCShiftRequestError() {
return {
type: CLEAR_CSHIFT_REQUEST_ERROR
type: CLEAR_CSHIFT_REQUEST_ERRORS
};
}
@ -90,7 +107,7 @@ export function setFormShiftDates(dates) {
};
}
export function setClearCshiftState() {
export function setClearCShiftState() {
return {
type: SET_CLEAR_CSHIFT_STATE
};

12
src/actions/cShift/saga.actions.js Normal file
View File

@ -0,0 +1,12 @@
import { CREATE_MULTIPLE_CSHIFT_REQUEST } from "../../constants/cShift.constants";
/**
* Saga action for creating a list of shifts
* @param postBody[] array of post body for cshift post endpoint
*/
export function createMultipleCShiftRequest(postBodies) {
return {
type: CREATE_MULTIPLE_CSHIFT_REQUEST,
data: postBodies
};
}

4
src/api/baseApi.js
View File

@ -8,7 +8,7 @@ const localStorage = global.process && process.env.NODE_ENV === "test"
require("localStorage")
: global.window.localStorage;
function headers() {
export function headers() {
const token = localStorage.getItem("userToken") || "";
let header = {
Accept: "application/json",
@ -59,3 +59,5 @@ export function del(url) {
.then(response => response.data)
.catch(error => Promise.reject(error));
}
export default apiInstance;

19
src/api/cShift.api.js Normal file
View File

@ -0,0 +1,19 @@
import { post } from "./baseApi";
export function createCShifts(postBodies) {
const cShiftUrl = `/cshift/`;
// return Promise.all(
// postBodies.map(postBody => post(cShiftUrl, postBody).catch(() => false))
// ).then(postResponses => {
// Promise.resolve(postResponses);
// });
return Promise.all(
postBodies.map(postBody =>
post(cShiftUrl, postBody).catch(err => {
return { error: true, ...err };
})
)
).then(resp => {
return Promise.resolve(resp);
});
}

69
src/components/User/Client/ClientAddShiftForm.jsx
View File

@ -9,6 +9,7 @@ import {
Form,
Header,
Label,
Message,
TextArea
} from "semantic-ui-react";
@ -18,9 +19,11 @@ import {
setFormShiftStartTime,
setFormShiftDuration,
setFormShiftNote,
setClearCshiftState,
setClearCShiftState,
setFormShiftDates
} from "../../../actions/cShift/reducer.actions";
import { createMultipleCShiftRequest } from "../../../actions/cShift/saga.actions";
import Error from "../../Shared/Error";
import "react-datepicker/dist/react-datepicker.css";
import "./shiftStartTimeOverrides.css";
@ -41,7 +44,7 @@ for (let min = 60; min <= 480; min += 30) {
class ClientAddShiftForm extends Component {
componentWillMount = () => {
this.props.dispatch(setClearCshiftState());
this.props.dispatch(setClearCShiftState());
};
changeSelectedEmployee = (e, { value }) => {
@ -86,8 +89,36 @@ class ClientAddShiftForm extends Component {
this.props.dispatch(setFormShiftDates(shiftDatesCopy));
};
onSubmitShifts = event => {
event.preventDefault();
// change this into interable cshift post request bodies
const { priceUUID, startTime, duration, note, shiftDates } = this.props;
const postRequestBodies = [];
for (let shiftDateString in shiftDates) {
const dynamicStartTime = utc(startTime);
const startDate = shiftDates[shiftDateString];
dynamicStartTime.set({
year: startDate.get("year"),
month: startDate.get("month"),
date: startDate.get("date")
});
const dynamicEndTime = utc(dynamicStartTime);
dynamicEndTime.add(duration, "minutes");
postRequestBodies.push({
get_price_uuid: priceUUID,
set_start: dynamicStartTime.format(),
set_end: dynamicEndTime.format(),
description: note ? note : undefined
});
}
this.props.dispatch(createMultipleCShiftRequest(postRequestBodies));
};
render() {
const {
isSendingCShiftRequest,
cShiftRequestErrors,
cShiftRequestSuccess,
selfUser,
employeeUUID,
priceUUID,
@ -101,6 +132,10 @@ class ClientAddShiftForm extends Component {
return <Redirect to="/" />;
}
if (cShiftRequestSuccess) {
console.log(cShiftRequestSuccess);
}
const employeeChoices = selfUser.client.employees
.filter(employee => !employee.deleted && !!employee.approved)
.map(({ uuid, provider }) => ({
@ -120,7 +155,7 @@ class ClientAddShiftForm extends Component {
.map(({ amount, uuid, work_type }) => ({
key: uuid,
value: uuid,
text: work_type.label,
text: `${work_type.label} ($${amount}/hr)`,
content: (
<Header>
<Label
@ -147,6 +182,9 @@ class ClientAddShiftForm extends Component {
);
return (
<ClientAddShiftFormView
isSendingCShiftRequest={isSendingCShiftRequest}
cShiftRequestErrors={cShiftRequestErrors}
cShiftRequestSuccess={!!cShiftRequestSuccess.length}
user={selfUser}
employeeChoices={employeeChoices}
priceChoices={priceChoices}
@ -162,6 +200,7 @@ class ClientAddShiftForm extends Component {
changeShiftDuration={this.changeShiftDuration}
changeShiftNote={this.changeShiftNote}
handleSelectDate={this.handleSelectDate}
onSubmitShifts={this.onSubmitShifts}
/>
);
}
@ -172,6 +211,9 @@ function mapStateToProps(state) {
}
const ClientAddShiftFormView = ({
isSendingCShiftRequest,
cShiftRequestErrors,
cShiftRequestSuccess,
user,
employeeChoices,
priceChoices,
@ -186,11 +228,17 @@ const ClientAddShiftFormView = ({
changeShiftStartTime,
changeShiftDuration,
changeShiftNote,
handleSelectDate
handleSelectDate,
onSubmitShifts
}) => (
<Container>
<Header>Schedule Shifts</Header>
<Form>
<Form
loading={isSendingCShiftRequest}
onSubmit={onSubmitShifts}
error={!!cShiftRequestErrors.length}
success={!!cShiftRequestSuccess}
>
<Form.Group widths="equal">
<Form.Field>
<label>Employee</label>
@ -214,6 +262,7 @@ const ClientAddShiftFormView = ({
selection
fluid
search
disabled={!employeeUUID}
noResultsMessage="No prices for given employee."
value={priceUUID}
/>
@ -266,6 +315,16 @@ const ClientAddShiftFormView = ({
.endOf("month")}
/>
</Form.Field>
{!!cShiftRequestErrors.length && (
<Error header="" error={cShiftRequestErrors[0]} />
)}
<Message success>
<Message.Header>Add Shift successful!</Message.Header>
<p>Shifts successfully scheduled.</p>
{!!cShiftRequestSuccess && (
<Redirect to="/user/profile/client/shifts" />
)}
</Message>
<Form.Button>Schedule Shift</Form.Button>
</Form>
</Container>

4
src/constants/cShift.constants.js
View File

@ -1,7 +1,7 @@
// Reducer CShift Action Constants
export const IS_SENDING_CSHIFT_REQUEST = "IS_SENDING_CSHIFT_REQUEST";
export const SET_CSHIFT_REQUEST_ERROR = "SET_CSHIFT_REQUEST_ERROR";
export const CLEAR_CSHIFT_REQUEST_ERROR = "CLEAR_CSHIFT_REQUEST_ERROR";
export const SET_CSHIFT_REQUEST_ERRORS = "SET_CSHIFT_REQUEST_ERRORS";
export const CLEAR_CSHIFT_REQUEST_ERRORS = "CLEAR_CSHIFT_REQUEST_ERRORS";
export const SET_CSHIFT_REQUEST_SUCCESS = "SET_CSHIFT_REQUEST_SUCCESS";
export const CLEAR_CSHIFT_REQUEST_SUCCESS = "CLEAR_CSHIFT_REQUEST_SUCCESS";
export const SET_FORM_EMPLOYEE_UUID = "SET_FORM_EMPLOYEE_UUID";

14
src/reducers/cShiftReducer.js
View File

@ -1,7 +1,7 @@
import {
IS_SENDING_CSHIFT_REQUEST,
SET_CSHIFT_REQUEST_ERROR,
CLEAR_CSHIFT_REQUEST_ERROR,
SET_CSHIFT_REQUEST_ERRORS,
CLEAR_CSHIFT_REQUEST_ERRORS,
SET_CSHIFT_REQUEST_SUCCESS,
CLEAR_CSHIFT_REQUEST_SUCCESS,
SET_FORM_EMPLOYEE_UUID,
@ -15,7 +15,7 @@ import {
const initialState = {
isSendingCShiftRequest: false,
cShiftRequestError: "",
cShiftRequestErrors: [],
cShiftRequestSuccess: "",
employeeUUID: "", // Which employee
priceUUID: "", // Which price
@ -32,15 +32,15 @@ function cShiftReducer(state = initialState, action) {
...state,
isSendingCShiftRequest: action.data
};
case SET_CSHIFT_REQUEST_ERROR:
case SET_CSHIFT_REQUEST_ERRORS:
return {
...state,
cShiftRequestError: action.data
cShiftRequestErrors: action.data
};
case CLEAR_CSHIFT_REQUEST_ERROR:
case CLEAR_CSHIFT_REQUEST_ERRORS:
return {
...state,
cShiftRequestError: ""
cShiftRequestErrors: []
};
case SET_CSHIFT_REQUEST_SUCCESS:
return {

61
src/sagas/cShift.sagas.js Normal file
View File

@ -0,0 +1,61 @@
import { effects } from "redux-saga";
import {
isSendingCShiftRequest,
setCShiftRequestError,
setCShiftRequestErrors,
setCShiftRequestSuccess,
clearCShiftRequestError,
clearCShiftRequestSuccess,
setFormEmployeeUUID,
setFormPriceUUID,
setFormShiftDates,
setFormShiftDuration,
setFormShiftNote,
setFormShiftStartTime
} from "../actions/cShift/reducer.actions";
import { createCShifts } from "../api/cShift.api";
function* createCShiftsCall(postBodies) {
yield effects.put(isSendingCShiftRequest(true));
try {
if (postBodies.length > 0) {
return yield effects.call(createCShifts, postBodies);
} else {
yield effects.put(
setCShiftRequestError({
response: { data: { dates: ["No dates selected."] } }
})
);
return false;
}
} catch (exception) {
yield effects.put(setCShiftRequestError(exception));
return false;
} finally {
yield effects.put(isSendingCShiftRequest(false));
}
}
export function* createCShiftsFlow(request) {
yield effects.put(clearCShiftRequestSuccess());
yield effects.put(clearCShiftRequestError());
const arrResponses = yield effects.call(createCShiftsCall, request.data);
console.log(arrResponses);
if (arrResponses) {
const errorResps = arrResponses.filter(resp => !!resp.error);
if (errorResps.length > 0) {
console.log(arrResponses);
yield effects.put(setCShiftRequestErrors(errorResps));
}
const succResps = arrResponses.filter(resp => !resp.error);
if (succResps.length > 0) {
yield effects.put(setCShiftRequestSuccess(succResps));
yield effects.put(setFormEmployeeUUID(""));
yield effects.put(setFormPriceUUID(""));
yield effects.put(setFormShiftStartTime(null));
yield effects.put(setFormShiftDuration(""));
yield effects.put(setFormShiftNote(""));
yield effects.put(setFormShiftDates({}));
}
}
}

3
src/sagas/index.js
View File

@ -69,6 +69,8 @@ import {
updatePriceFlow,
deletePriceFlow
} from "./price.sagas";
import { CREATE_MULTIPLE_CSHIFT_REQUEST } from "../constants/cShift.constants";
import { createCShiftsFlow } from "./cShift.sagas";
export default function* rootSaga() {
yield takeLatest(SEND_REGISTER_REQUEST, registerUserFlow);
@ -96,4 +98,5 @@ export default function* rootSaga() {
yield takeLatest(CREATE_PRICE_REQUEST, createPriceFlow);
yield takeLatest(UPDATE_PRICE_REQUEST, updatePriceFlow);
yield takeLatest(DELETE_PRICE_REQUEST, deletePriceFlow);
yield takeLatest(CREATE_MULTIPLE_CSHIFT_REQUEST, createCShiftsFlow);
}