Skip to content

Commit

Permalink
Merge pull request #63 from Code-the-Dream-School/error_handling_for_…
Browse files Browse the repository at this point in the history 
…add_edit

add edit for error handling and validation
  • Loading branch information
@devandres-tech
devandres-tech authored Dec 30, 2024
2 parents 56bb27d + ef668a6 commit 6194d21
Show file tree
Hide file tree
Showing 4 changed files with 380 additions and 207 deletions.
2 changes: 1 addition & 1 deletion src/components/AddMedicineForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => {
<StyleInput
type={
id === 'expirationDate'
? 'date'
? 'datetime-local'
: ['quantity', 'minAmount'].includes(id)
? 'number'
: 'text'
Expand Down
52 changes: 31 additions & 21 deletions src/components/EditMedicineForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,41 @@ const EditMedicineForm = ({ id, value, handleInputChange, placeholder }) => {
const inputRef = useRef();

useEffect(() => {
if (inputRef.current) {
if (id === 'name' && inputRef.current) {
inputRef.current.focus();
}
}, []);
}, [id]);

const formatForDatetimeLocal = (isoDate) => {
if (!isoDate) return '';
const date = new Date(isoDate);
if (isNaN(date.getTime())) {
console.warn(`Invalid ISO date provided: ${isoDate}`);
return '';
}
const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
return offsetDate.toISOString().slice(0, 16);
};

// Format value for datetime-local if it's for expirationDate
const formattedValue = id === 'expirationDate' ? formatForDatetimeLocal(value) : value;

return (
<>
<StyleInput
type={
id === 'expirationDate'
? 'date'
: ['quantity', 'minAmount'].includes(id)
? 'number'
: 'text'
}
key={id}
id={id}
value={value || ''}
onChange={handleInputChange}
placeholder={placeholder}
ref={inputRef}
/>
</>
<StyleInput
type={
id === 'expirationDate'
? 'datetime-local'
: ['quantity', 'minAmount'].includes(id)
? 'number'
: 'text'
}
key={id}
id={id}
value={formattedValue || ''} // Ensure empty string for falsy values
onChange={handleInputChange}
placeholder={placeholder}
ref={inputRef}
/>
);
};

Expand All @@ -53,11 +65,9 @@ export const StyleInput = styled.input`
border: 1px solid var(--grey-300);
color: black;
height: 35px;
margin-bottom: 15px;
/* Placeholder text color */
&::placeholder {
color: black; /* Set placeholder text to black */
margin-bottom: 0px;
}
`;
189 changes: 134 additions & 55 deletions src/pages/AddDrug.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,15 @@ export default function AddDrug({ addDrugs }) {
lot: '',
});

const formatForDatetimeLocal = (isoDate) => {
const date = new Date(isoDate);
const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
return offsetDate.toISOString().slice(0, 16);
};

const formatDate = (date) => {
if (!date) return '';
return new Date(date).toISOString().split('T')[0];
return formatForDatetimeLocal(date);
};

const drugClasses = [
Expand All @@ -42,6 +48,82 @@ export default function AddDrug({ addDrugs }) {
];

const handleMedChange = ({ target: { id, value } }) => {
if (id === 'name') {
if (value.length <= 0) {
setErrorsForm((prevErrors) => ({
...prevErrors,
name: 'Please provide Medication Name',
}));
} else {
setErrorsForm({});
}
}

if (id === 'genericName') {
if (value.length <= 0) {
setErrorsForm((prevErrors) => ({
...prevErrors,
genericName: 'Please provide Generic Medication Name',
}));
} else {
setErrorsForm({});
}
}

if (id === 'quantity') {
if (parseInt(value) < 0) {
setErrorsForm((prevErrors) => ({
...prevErrors,
quantity: 'Please provide Quantity must be a non-negative number',
}));
} else {
setErrorsForm({});
}
}

if (id === 'threshold') {
if (parseInt(value) < 10) {
setErrorsForm((prevErrors) => ({
...prevErrors,
threshold: 'Please provide threshold quantity greater than 10',
}));
} else {
setErrorsForm({});
}
}

if (id === 'expirationDate') {
if (value.length <= 0) {
setErrorsForm((prevErrors) => ({
...prevErrors,
expirationDate: 'Please provide Expiration Date',
}));
} else {
setErrorsForm({});
}
}

if (id === 'ndcNumber') {
if (value.length <= 0) {
setErrorsForm((prevErrors) => ({
...prevErrors,
ndcNumber: 'Please provide NDC Number',
}));
} else {
setErrorsForm({});
}
}

if (id === 'lot') {
if (value.length <= 0) {
setErrorsForm((prevErrors) => ({
...prevErrors,
lot: 'Please provide LOT Number',
}));
} else {
setErrorsForm({});
}
}
setFormData((prev) => ({
...prev,
[id]:
Expand Down Expand Up @@ -81,40 +163,39 @@ export default function AddDrug({ addDrugs }) {
return errors;
};
const isEmpty = (obj) => Object.keys(obj).length === 0;

const handleAddMed = (event) => {
event.preventDefault();

const errors = validate(formData);

setErrorsForm(errors);

addDrugs = {
...formData,
};

const token = localStorage.getItem('token');
if (formData.threshold > 10) {
fetch('http://localhost:8000/api/v1/inventory', {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(addDrugs),

fetch('http://localhost:8000/api/v1/inventory', {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(addDrugs),
})
.then((response) => {
return response.json();
})
.then((response) => {
if (!response.ok) {
throw new Error('Failed to add drug, please try again.');
}
return response.json();
})
.then(() => {
.then((data) => {
if (data.success) {
toast.success('Registration Successful');
})
.catch((error) => {
console.error(error);
});
}
} else {
toast.error(data.error);
}
})
.catch((error) => {
console.error(error);
});

if (isEmpty(errors)) {
console.log('this are errors', errors);
Expand Down Expand Up @@ -217,7 +298,6 @@ export default function AddDrug({ addDrugs }) {
</div>
))}
</div>

<AddButton type="submit">SAVE DRUG </AddButton>
</AddForm>
</div>
Expand All @@ -227,23 +307,22 @@ export default function AddDrug({ addDrugs }) {

AddDrug.propTypes = {
addDrugs: PropTypes.func.isRequired,
drugs: PropTypes.arrayOf(PropTypes.object),
};

export const Wrapper = styled.section`
min-height: 100vh;
display: grid;
align-items: center;
h4 {
text - align: center;
margin-bottom: 1.38rem;
}
.logo {
display: block;
margin: 0 auto;
margin-bottom: 1.38rem;
}
`;
min-height: 100vh;
display: grid;
align-items: center;
h4 {
text - align: center;
margin-bottom: 1.38rem;
}
.logo {
display: block;
margin: 0 auto;
margin-bottom: 1.38rem;
}
`;

export const FormField = styled.div``;

Expand Down Expand Up @@ -277,23 +356,23 @@ export const FormSection = styled.div`
`;

export const Fieldwrapper = styled.div`
.form-row {
margin - bottom: 0.5rem;
}
input {
width: 100%;
padding: 0.375rem 0.75rem;
border-radius: var(--border-radius);
border: 1px solid var(--grey-300);
color: var(--text-color);
height: 35px;
background-color: white;
}
label {
font - size: 0.9rem;
text-transform: lowercase;
}
`;
.form-row {
margin - bottom: 0.5rem;
}
input {
width: 100%;
padding: 0.375rem 0.75rem;
border-radius: var(--border-radius);
border: 1px solid var(--grey-300);
color: var(--text-color);
height: 35px;
background-color: white;
}
label {
font - size: 0.9rem;
text-transform: lowercase;
}
`;

export const AddButton = styled.button`
margin-top: 1rem;
Expand Down
Loading

0 comments on commit 6194d21

Please sign in to comment.