From 528c5715f35b1b743af7db47d45c8d793dd3ea14 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 11 Apr 2020 23:43:14 +0300 Subject: [PATCH] reusable components SelectInput and TextInput + CourseForm --- src/components/common/SelectInput.js | 49 ++++++++++++++++++++ src/components/common/TextInput.js | 37 +++++++++++++++ src/components/courses/CourseForm.js | 67 ++++++++++++++++++++++++++++ 3 files changed, 153 insertions(+) create mode 100644 src/components/common/SelectInput.js create mode 100644 src/components/common/TextInput.js create mode 100644 src/components/courses/CourseForm.js diff --git a/src/components/common/SelectInput.js b/src/components/common/SelectInput.js new file mode 100644 index 0000000..3f595c1 --- /dev/null +++ b/src/components/common/SelectInput.js @@ -0,0 +1,49 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const SelectInput = ({ + name, + label, + onChange, + defaultOption, + value, + error, + options +}) => { + return ( +
+ +
+ {/* Note, value is set here rather than on the option - docs: https://facebook.github.io/react/docs/forms.html */} + + {error &&
{error}
} +
+
+ ); +}; + +SelectInput.propTypes = { + name: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + defaultOption: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + error: PropTypes.string, + options: PropTypes.arrayOf(PropTypes.object) +}; + +export default SelectInput; diff --git a/src/components/common/TextInput.js b/src/components/common/TextInput.js new file mode 100644 index 0000000..93d50a9 --- /dev/null +++ b/src/components/common/TextInput.js @@ -0,0 +1,37 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const TextInput = ({ name, label, onChange, placeholder, value, error }) => { + let wrapperClass = "form-group"; + if (error && error.length > 0) { + wrapperClass += " " + "has-error"; + } + + return ( +
+ +
+ + {error &&
{error}
} +
+
+ ); +}; + +TextInput.propTypes = { + name: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + placeholder: PropTypes.string, + value: PropTypes.string, + error: PropTypes.string +}; + +export default TextInput; diff --git a/src/components/courses/CourseForm.js b/src/components/courses/CourseForm.js new file mode 100644 index 0000000..f0ab750 --- /dev/null +++ b/src/components/courses/CourseForm.js @@ -0,0 +1,67 @@ +import React from "react"; +import PropTypes from "prop-types"; +import TextInput from "../common/TextInput"; +import SelectInput from "../common/SelectInput"; + +const CourseForm = ({ + course, + authors, + onSave, + onChange, + saving = false, + errors = {} +}) => { + return ( +
+

{course.id ? "Edit" : "Add"} Course

+ {errors.onSave && ( +
+ {errors.onSave} +
+ )} + + + ({ + value: author.id, + text: author.name + }))} + onChange={onChange} + error={errors.author} + /> + + + + + + ); +}; + +CourseForm.propTypes = { + authors: PropTypes.array.isRequired, + course: PropTypes.object.isRequired, + errors: PropTypes.object, + onSave: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + saving: PropTypes.bool +}; + +export default CourseForm;