Skip to content

Commit e8c64c4

Browse files
priscila-moneopriscila-moneo
committed
fix: feedback from PR
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
1 parent 8bef1b3 commit e8c64c4

6 files changed

Lines changed: 197 additions & 229 deletions

File tree

‎src/actions/tax-actions.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const getTaxTypes =
8989
createAction(RECEIVE_TAX_TYPES),
9090
`${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
9191
authErrorHandler,
92-
{ order: normalizedOrder, orderDir, page, perPage, term }
92+
{ order, orderDir, page, perPage, term }
9393
)(params)(dispatch).then(() => {
9494
dispatch(stopLoading());
9595
});
@@ -146,21 +146,18 @@ export const saveTaxType = (entity) => async (dispatch, getState) => {
146146
dispatch(showSuccessMessage(T.translate("edit_tax_type.tax_type_saved")));
147147
return payload;
148148
});
149-
}
150-
return postRequest(
151-
createAction(UPDATE_TAX_TYPE),
152-
createAction(TAX_TYPE_ADDED),
153-
`${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
154-
normalizedEntity,
155-
authErrorHandler,
156-
entity
157-
)(params)(dispatch).then((payload) => {
158-
dispatch(
159-
showSuccessMessage(T.translate("edit_tax_type.tax_type_created"))
160-
);
161-
return payload;
162-
});
163-
149+
}
150+
return postRequest(
151+
createAction(UPDATE_TAX_TYPE),
152+
createAction(TAX_TYPE_ADDED),
153+
`${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
154+
normalizedEntity,
155+
authErrorHandler,
156+
entity
157+
)(params)(dispatch).then((payload) => {
158+
dispatch(showSuccessMessage(T.translate("edit_tax_type.tax_type_created")));
159+
return payload;
160+
});
164161
};
165162

166163
export const deleteTaxType = (taxTypeId) => async (dispatch, getState) => {

‎src/components/forms/tax-type-form.js‎

Lines changed: 73 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,16 @@
1111
* limitations under the License.
1212
* */
1313

14-
import React, { useCallback, useEffect, useRef, useState } from "react";
14+
import React, { useCallback, useEffect, useState } from "react";
1515
import T from "i18n-react/dist/i18n-react";
16-
import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
17-
import Input from "openstack-uicore-foundation/lib/components/inputs/text-input";
16+
import TextField from "@mui/material/TextField";
17+
import Button from "@mui/material/Button";
18+
import Grid2 from "@mui/material/Grid2";
19+
import Box from "@mui/material/Box";
20+
import Stack from "@mui/material/Stack";
1821
import SimpleLinkList from "openstack-uicore-foundation/lib/components/simple-link-list";
1922
import { queryTicketTypes } from "openstack-uicore-foundation/lib/utils/query-actions";
20-
import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
21-
import { MILLISECONDS_TO_SECONDS } from "../../utils/constants";
23+
import { scrollToError, shallowEqual } from "../../utils/methods";
2224

2325
const TaxTypeForm = ({
2426
entity: entityProp,
@@ -30,52 +32,38 @@ const TaxTypeForm = ({
3032
}) => {
3133
const [entity, setEntity] = useState({ ...entityProp });
3234
const [errors, setErrors] = useState(errorsProp);
33-
const prevEntityRef = useRef(entityProp);
34-
const prevErrorsRef = useRef(errorsProp);
3535

3636
useEffect(() => {
37-
scrollToError(errorsProp);
37+
setEntity({ ...entityProp });
38+
setErrors({});
39+
}, [entityProp.id]);
3840

39-
const state = {};
41+
useEffect(() => {
42+
const nextTicketTypes = entityProp.ticket_types ?? [];
4043

41-
if (!shallowEqual(prevEntityRef.current, entityProp)) {
42-
state.entity = { ...entityProp };
43-
state.errors = {};
44-
}
44+
setEntity((prev) => {
45+
if (prev.id !== entityProp.id) return prev;
46+
if (shallowEqual(prev.ticket_types ?? [], nextTicketTypes)) return prev;
4547

46-
if (!shallowEqual(prevErrorsRef.current, errorsProp)) {
47-
state.errors = { ...errorsProp };
48-
}
48+
return {
49+
...prev,
50+
ticket_types: [...nextTicketTypes]
51+
};
52+
});
53+
}, [entityProp.id, entityProp.ticket_types]);
4954

50-
if (!isEmpty(state)) {
51-
if (state.entity) {
52-
setEntity(state.entity);
53-
}
54-
if (state.errors) {
55-
setErrors(state.errors);
56-
}
55+
useEffect(() => {
56+
scrollToError(errorsProp);
57+
if (!shallowEqual(errors, errorsProp)) {
58+
setErrors({ ...errorsProp });
5759
}
58-
59-
prevEntityRef.current = entityProp;
60-
prevErrorsRef.current = errorsProp;
61-
}, [entityProp, errorsProp]);
60+
}, [errorsProp]);
6261

6362
const handleChange = useCallback(
6463
(ev) => {
65-
const newEntity = { ...entity };
66-
const newErrors = { ...errors };
67-
let { value, id } = ev.target;
68-
69-
if (ev.target.type === "checkbox") {
70-
value = ev.target.checked;
71-
}
72-
73-
if (ev.target.type === "datetime") {
74-
value = value.valueOf() / MILLISECONDS_TO_SECONDS;
75-
}
76-
77-
newErrors[id] = "";
78-
newEntity[id] = value;
64+
const { value, id } = ev.target;
65+
const newEntity = { ...entity, [id]: value };
66+
const newErrors = { ...errors, [id]: "" };
7967
setEntity(newEntity);
8068
setErrors(newErrors);
8169
},
@@ -137,64 +125,66 @@ const TaxTypeForm = ({
137125
};
138126

139127
return (
140-
<form className="tax-type-form">
128+
<Box component="form">
141129
<input type="hidden" id="id" value={entity.id} />
142-
<div className="row form-group">
143-
<div className="col-md-4">
144-
<label> {T.translate("edit_tax_type.name")} *</label>
145-
<Input
130+
131+
<Grid2 container spacing={2} sx={{ mb: 2 }}>
132+
<Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
133+
<TextField
146134
id="name"
147-
className="form-control"
148-
error={hasErrors("name")}
149-
onChange={handleChange}
135+
label={T.translate("edit_tax_type.name")}
150136
value={entity.name}
137+
onChange={handleChange}
138+
error={!!hasErrors("name")}
139+
helperText={hasErrors("name")}
140+
fullWidth
141+
required
151142
/>
152-
</div>
153-
</div>
154-
<div className="row form-group">
155-
<div className="col-md-4">
156-
<label> {T.translate("edit_tax_type.rate")}</label>
157-
<Input
158-
className="form-control"
159-
type="number"
160-
error={hasErrors("rate")}
143+
</Grid2>
144+
</Grid2>
145+
146+
<Grid2 container spacing={2} sx={{ mb: 3 }}>
147+
<Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
148+
<TextField
161149
id="rate"
150+
label={T.translate("edit_tax_type.rate")}
151+
type="number"
162152
value={entity.rate}
163153
onChange={handleChange}
154+
error={!!hasErrors("rate")}
155+
helperText={hasErrors("rate")}
156+
fullWidth
164157
/>
165-
</div>
166-
<div className="col-md-4">
167-
<label> {T.translate("edit_tax_type.tax_id")}</label>
168-
<Input
169-
className="form-control"
170-
error={hasErrors("tax_id")}
158+
</Grid2>
159+
<Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
160+
<TextField
171161
id="tax_id"
162+
label={T.translate("edit_tax_type.tax_id")}
172163
value={entity.tax_id}
173164
onChange={handleChange}
165+
error={!!hasErrors("tax_id")}
166+
helperText={hasErrors("tax_id")}
167+
fullWidth
174168
/>
175-
</div>
176-
</div>
169+
</Grid2>
170+
</Grid2>
177171

178-
<hr />
179172
{entity.id !== 0 && (
180-
<SimpleLinkList
181-
values={entity.ticket_types}
182-
columns={ticketColumns}
183-
options={ticketOptions}
184-
/>
173+
<Box sx={{ mb: 3 }}>
174+
<SimpleLinkList
175+
values={entity.ticket_types}
176+
columns={ticketColumns}
177+
options={ticketOptions}
178+
/>
179+
</Box>
185180
)}
186181

187-
<div className="row">
188-
<div className="col-md-12 submit-buttons">
189-
<input
190-
type="button"
191-
onClick={handleSubmit}
192-
className="btn btn-primary pull-right"
193-
value={T.translate("general.save")}
194-
/>
195-
</div>
196-
</div>
197-
</form>
182+
<Stack direction="row" justifyContent="flex-end">
183+
<Button variant="contained" onClick={handleSubmit} type="submit">
184+
{T.translate("general.save")}
185+
</Button>
186+
</Stack>
187+
</Box>
198188
);
199189
};
200190

‎src/layouts/summit-id-layout.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ const LocationLayout = React.lazy(() => import("./location-layout"));
4848
const SignagePage = React.lazy(() => import("../pages/signage"));
4949
const RsvpTemplateLayout = React.lazy(() => import("./rsvp-template-layout"));
5050
const TicketTypeLayout = React.lazy(() => import("./ticket-type-layout"));
51-
const TaxTypeLayout = React.lazy(() => import("./tax-type-layout"));
51+
const TaxTypeListPage = React.lazy(() =>
52+
import("../pages/taxes/tax-type-list-page")
53+
);
5254
const RefundPolicyListPage = React.lazy(() =>
5355
import("../pages/tickets/refund-policy-list-page")
5456
);
@@ -205,7 +207,12 @@ const SummitIdLayout = ({ currentSummit, loading, match, ...props }) => {
205207
path={`${match.url}/ticket-types`}
206208
component={TicketTypeLayout}
207209
/>
208-
<Route path={`${match.url}/tax-types`} component={TaxTypeLayout} />
210+
<Route
211+
strict
212+
exact
213+
path={`${match.url}/tax-types`}
214+
component={TaxTypeListPage}
215+
/>
209216
<Route
210217
path={`${match.url}/refund-policies`}
211218
component={RefundPolicyListPage}

‎src/layouts/tax-type-layout.js‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/pages/taxes/popup/tax-type-popup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const TaxTypePopup = ({
3030
<Typography fontSize="1.8rem">
3131
{title} {T.translate("edit_tax_type.tax_type")}
3232
</Typography>
33-
<IconButton size="small" onClick={onClose} sx={{ mr: 1 }}>
33+
<IconButton size="small" onClick={onClose}>
3434
<CloseIcon fontSize="small" />
3535
</IconButton>
3636
</DialogTitle>

0 commit comments

Comments
 (0)