common components

src/components/common/CheckBoxInput.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function CheckBoxInput(props) {
+  let wrapperClass = "form-group";
+  if (props.error.length > 0) {
+    wrapperClass += "has-error";
+  }
+  return (
+    <div className={wrapperClass}>
+      <label htmlFor={props.id}>{props.label}</label>
+      <div className="field">
+        <input
+          id={props.id}
+          type="checkbox"
+          onChange={props.onChange}
+          name={props.name}
+          className="form-control"
+          checked={props.value}
+        />
+      </div>
+      {props.error && <div className="alert alert-danger">{props.error}</div>}
+    </div>
+  );
+}
+
+CheckBoxInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.string,
+  error: PropTypes.string,
+};
+
+CheckBoxInput.defaultProps = {
+  error: "",
+};
+
+export default CheckBoxInput;

src/components/common/Header.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Header() {
+  const activeStyle = { color: "orange" };
+  return (
+    <nav>
+      <NavLink activeStyle={activeStyle} exact to="/">
+        Home
+      </NavLink>{" "}
+      |
+      <NavLink activeStyle={activeStyle} to="/courses">
+        Courses
+      </NavLink>{" "}
+      |
+      <NavLink activeStyle={activeStyle} to="/about">
+        About
+      </NavLink>{" "}
+      |
+      <NavLink activeStyle={activeStyle} to="/users">
+        Uers
+      </NavLink>{" "}
+      {/** TODO
+       * Add new NavLink tags above for each object in whatever order your like */}
+    </nav>
+  );
+}
+
+export default Header;

src/components/common/TableCellCheckbox.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function TableCellCheckbox(props) {
+  let wrapperClass = "form-group";
+  if (props.error.length > 0) {
+    wrapperClass += "has-error";
+  }
+  return (
+    <td className={wrapperClass}>
+      <div className="field">
+        <input
+          id={props.id}
+          type="checkbox"
+          onChange={props.onChange}
+          name={props.name}
+          className="form-control"
+          checked={props.checked}
+        />
+      </div>
+      {props.error && <div className="alert alert-danger">{props.error}</div>}
+    </td>
+  );
+}
+
+TableCellCheckbox.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.bool,
+  error: PropTypes.string,
+};
+
+TableCellCheckbox.defaultProps = {
+  error: "",
+};
+
+export default TableCellCheckbox;

src/components/common/TextInput.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function TextInput(props) {
+    let wrapperClass = "form-group";
+    if(props.error.length > 0){
+        wrapperClass += "has-error";
+    }
+    return (
+        <div className={wrapperClass}>
+        <label htmlFor={props.id}>{props.label}</label>
+        <div className="field">
+          <input
+            id={props.id}
+            type="text"
+            onChange={props.onChange}
+            name={props.name}
+            className="form-control"
+            value={props.value}
+          />
+        </div>
+        { props.error && <div className="alert alert-danger">{props.error}</div>}
+      </div>
+    )
+}
+
+TextInput.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    error: PropTypes.string
+};
+
+TextInput.defaultProps = {
+    error: ""
+};
+
+export default TextInput;