173: Removed default props from components

Author: tuj

.eslintrc

@@ -13,6 +13,7 @@
     "allowImportExportEverywhere": true
   },
   "rules": {
+    "react/require-default-props": "off",
     "react/jsx-filename-extension": [
       "warn",
       {

src/components/util/forms/form-checkbox.jsx

@@ -8,20 +8,19 @@ import { FormCheck, FormGroup } from "react-bootstrap";
  * @param {string} props The props.
  * @param {string} props.name The name of the checkbox
  * @param {string} props.label The label for the checkbox
- * @param {string} props.helpText The helptext for the checkbox, if it is needed.
+ * @param {string} props.helpText The help text for the checkbox, if it is needed.
  * @param {string} props.value The value of the checkbox
  * @param {Function} props.onChange The callback for changes in the checkbox
- * @param {string} props.formGroupClasses Classes for the formgroup
- * @param {boolean} props.required Whether the checkbox is required.
+ * @param {string} props.formGroupClasses Classes for the form group
  * @returns {object} A checkbox.
  */
 function FormCheckbox({
   name,
   label,
-  helpText,
   onChange,
-  value,
-  formGroupClasses,
+  helpText = "",
+  formGroupClasses = "",
+  value = false,
 }) {
   /**
    * Transforms the target to something the form-components understand.
@@ -49,12 +48,6 @@ function FormCheckbox({
   );
 }
 
-FormCheckbox.defaultProps = {
-  helpText: "",
-  formGroupClasses: "",
-  value: false,
-};
-
 FormCheckbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([

src/components/util/forms/multiselect-dropdown/screens/screens-dropdown.jsx

@@ -15,9 +15,9 @@ import MultiSelectComponent from "../multi-dropdown";
  */
 function ScreensDropdown({
   handleScreenSelection,
-  selected,
+  errors = null,
+  selected = [],
   name,
-  errors,
   data,
   filterCallback,
 }) {
@@ -44,11 +44,6 @@ function ScreensDropdown({
   );
 }
 
-ScreensDropdown.defaultProps = {
-  errors: null,
-  selected: [],
-};
-
 ScreensDropdown.propTypes = {
   handleScreenSelection: PropTypes.func.isRequired,
   selected: PropTypes.arrayOf(

src/components/util/forms/multiselect-dropdown/tenants/tenants-dropdown.jsx

@@ -13,9 +13,9 @@ import MultiSelectComponent from "../multi-dropdown";
  */
 function TenantsDropdown({
   handleTenantSelection,
-  selected,
+  selected = [],
   name,
-  errors,
+  errors = null,
   data,
 }) {
   const { t } = useTranslation("common");
@@ -34,11 +34,6 @@ function TenantsDropdown({
   );
 }
 
-TenantsDropdown.defaultProps = {
-  errors: null,
-  selected: [],
-};
-
 TenantsDropdown.propTypes = {
   handleTenantSelection: PropTypes.func.isRequired,
   selected: PropTypes.arrayOf(

src/components/util/forms/rich-text/rich-text.jsx

@@ -12,21 +12,21 @@ import "./rich-text.scss";
  * @param {string} props The props.
  * @param {string} props.name The name of the rich text field
  * @param {string} props.label The label for the rich text field
- * @param {string} props.helpText The helptext for the rich text field, if it is needed.
+ * @param {string} props.helpText The help text for the rich text field, if it is needed.
  * @param {string} props.value The value of the rich text field
  * @param {Function} props.onChange The callback for changes in the rich text field
- * @param {string} props.formGroupClasses Classes for the formgroup
+ * @param {string} props.formGroupClasses Classes for the form group
  * @param {boolean} props.required Whether the rich text field is required.
  * @returns {object} A rich text field.
  */
 function RichText({
   name,
-  label,
-  helpText,
-  value,
   onChange,
-  formGroupClasses,
-  required,
+  label = "",
+  helpText = "",
+  value = "",
+  formGroupClasses = "",
+  required = false,
 }) {
   /**
    * Transforms the target to something the form-components understand.
@@ -85,14 +85,6 @@ function RichText({
   );
 }
 
-RichText.defaultProps = {
-  label: "",
-  helpText: "",
-  value: "",
-  formGroupClasses: "",
-  required: false,
-};
-
 RichText.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string,

src/components/util/list/checkbox-for-list.jsx

@@ -8,13 +8,18 @@ import "./checkbox-for-list.scss";
  * A checkbox for the list.
  *
  * @param {object} props Props.
- * @param {Function} props.onSelected The callback for onselected.
+ * @param {Function} props.onSelected The callback for on selected.
  * @param {boolean} props.selected Whether the checkbox should display selected.
  * @param {boolean} props.disabled Whether the checkbox is disabled
  * @param {string} props.title The title for the aria label
  * @returns {object} A checkbox for the list.
  */
-function CheckboxForList({ selected, onSelected, disabled, title }) {
+function CheckboxForList({
+  selected = false,
+  onSelected,
+  disabled = false,
+  title,
+}) {
   const { t } = useTranslation("common", { keyPrefix: "checkbox-for-list" });
 
   return (
@@ -33,11 +38,6 @@ function CheckboxForList({ selected, onSelected, disabled, title }) {
   );
 }
 
-CheckboxForList.defaultProps = {
-  selected: false,
-  disabled: false,
-};
-
 CheckboxForList.propTypes = {
   onSelected: PropTypes.func.isRequired,
   selected: PropTypes.bool,

src/components/util/list/link-for-list.jsx

@@ -13,7 +13,7 @@ import idFromUrl from "../helpers/id-from-url";
  * @param {boolean} props.targetBlank Whether to open in a new tab.
  * @returns {object} A link for the list.
  */
-function LinkForList({ id, param, targetBlank }) {
+function LinkForList({ id, param, targetBlank = false }) {
   const { t } = useTranslation("common", { keyPrefix: "link-for-list" });
   const newId = idFromUrl(id);
 
@@ -29,10 +29,6 @@ function LinkForList({ id, param, targetBlank }) {
   );
 }
 
-LinkForList.defaultProps = {
-  targetBlank: false,
-};
-
 LinkForList.propTypes = {
   id: PropTypes.string.isRequired,
   param: PropTypes.string.isRequired,

src/components/util/list/list-button.jsx

@@ -13,7 +13,13 @@ import useModal from "../../../context/modal-context/modal-context-hook";
  * @param {string} props.dataKey The data key for mapping the data.
  * @returns {object} - The list button.
  */
-function ListButton({ apiCall, redirectTo, displayData, modalTitle, dataKey }) {
+function ListButton({
+  apiCall = () => {},
+  dataKey = "",
+  redirectTo,
+  displayData,
+  modalTitle,
+}) {
   const { setModal } = useModal();
   const [label, setLabel] = useState("");
   let data;
@@ -81,11 +87,6 @@ function ListButton({ apiCall, redirectTo, displayData, modalTitle, dataKey }) {
   );
 }
 
-ListButton.defaultProps = {
-  apiCall: () => {},
-  dataKey: "",
-};
-
 ListButton.propTypes = {
   displayData: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.any).isRequired,

src/context/modal-context/info-modal.jsx

@@ -22,9 +22,9 @@ import idFromUrl from "../../components/util/helpers/id-from-url";
 function InfoModal({
   unSetModal,
   apiCall,
-  displayData,
+  displayData = [],
   modalTitle,
-  dataKey,
+  dataKey = "",
   redirectTo,
 }) {
   const { t } = useTranslation("common");
@@ -83,10 +83,6 @@ function InfoModal({
     </Modal>
   );
 }
-InfoModal.defaultProps = {
-  displayData: [],
-  dataKey: "",
-};
 
 InfoModal.propTypes = {
   displayData: PropTypes.oneOfType([

src/error-boundary.jsx

@@ -14,7 +14,7 @@ class ErrorBoundary extends Component {
   }
 
   componentDidCatch(error, errorInfo) {
-    const { errorHandler } = this.props;
+    const { errorHandler = null } = this.props;
 
     if (errorHandler) {
       errorHandler(error, errorInfo);
@@ -38,10 +38,6 @@ class ErrorBoundary extends Component {
   }
 }
 
-ErrorBoundary.defaultProps = {
-  errorHandler: null,
-};
-
 ErrorBoundary.propTypes = {
   children: PropTypes.node.isRequired,
   errorText: PropTypes.string.isRequired,