From 32e83840000c492520e89c44a71e85e0564cf9a5 Mon Sep 17 00:00:00 2001 From: Trillium Smith Date: Sun, 27 Aug 2023 11:56:39 -0700 Subject: [PATCH 1/4] feat: Create ValidatedTextField component --- client/src/components/ProjectForm.js | 78 +++-------------- .../parts/medium/ValidatedTextField.js | 84 +++++++++++++++++++ 2 files changed, 95 insertions(+), 67 deletions(-) create mode 100644 client/src/components/parts/medium/ValidatedTextField.js diff --git a/client/src/components/ProjectForm.js b/client/src/components/ProjectForm.js index dc0c5491f..4b0f66d47 100644 --- a/client/src/components/ProjectForm.js +++ b/client/src/components/ProjectForm.js @@ -21,6 +21,7 @@ import { } from '@mui/material'; import { styled } from '@mui/material/styles'; import useAuth from '../hooks/useAuth'; +import ValidatedTextField from './parts/medium/ValidatedTextField'; /** STYLES * -most TextField and InputLabel styles are controlled by the theme @@ -236,73 +237,16 @@ export default function ProjectForm({ })} > {arr.map((input) => ( - - - - - {input.label} - - - {input.name === 'location' && locationRadios} - - {/* Sets text field and data (if needed) based on the whether it is as add or edit form page. */} - {isEdit ? ( - /** - * Edit textfield. - * Includes - * - handleChange - to update the input fields based on users input. - * - value - formData that is passed from the DB to fill the input fields. - * */ - - ) : ( - // Add new project textfield. - - )} - + ))} diff --git a/client/src/components/parts/medium/ValidatedTextField.js b/client/src/components/parts/medium/ValidatedTextField.js new file mode 100644 index 000000000..87c9af4d1 --- /dev/null +++ b/client/src/components/parts/medium/ValidatedTextField.js @@ -0,0 +1,84 @@ +import React from 'react'; +import { Box, Grid, InputLabel, TextField } from "@mui/material"; + +function ValidatedTextField({ + register, + errors, + isEdit, + editMode, + locationType, + locationRadios, + input, +}) { + return ( + + + + + {input.label} + + + {input.name === 'location' && locationRadios} + + {/* Sets text field and data (if needed) based on the whether it is as add or edit form page. */} + {isEdit ? ( + /** + * Edit textfield. + * Includes + * - handleChange - to update the input fields based on users input. + * - value - formData that is passed from the DB to fill the input fields. + * */ + + ) : ( + // Add new project textfield. + + )} + + ) +} + +export default ValidatedTextField; \ No newline at end of file From 32c79adb58260287828d82a0276ed9cc119e194e Mon Sep 17 00:00:00 2001 From: Trillium Smith Date: Sun, 27 Aug 2023 12:16:10 -0700 Subject: [PATCH 2/4] feat: Refactor ValidatedTextField Handle isEdit without a ternary operator --- client/src/components/ProjectForm.js | 2 +- .../parts/form/ValidatedTextField.js | 56 +++++++++++++ .../parts/medium/ValidatedTextField.js | 84 ------------------- 3 files changed, 57 insertions(+), 85 deletions(-) create mode 100644 client/src/components/parts/form/ValidatedTextField.js delete mode 100644 client/src/components/parts/medium/ValidatedTextField.js diff --git a/client/src/components/ProjectForm.js b/client/src/components/ProjectForm.js index 4b0f66d47..be0fb125c 100644 --- a/client/src/components/ProjectForm.js +++ b/client/src/components/ProjectForm.js @@ -21,7 +21,7 @@ import { } from '@mui/material'; import { styled } from '@mui/material/styles'; import useAuth from '../hooks/useAuth'; -import ValidatedTextField from './parts/medium/ValidatedTextField'; +import ValidatedTextField from './parts/form/ValidatedTextField'; /** STYLES * -most TextField and InputLabel styles are controlled by the theme diff --git a/client/src/components/parts/form/ValidatedTextField.js b/client/src/components/parts/form/ValidatedTextField.js new file mode 100644 index 000000000..ad4e236c3 --- /dev/null +++ b/client/src/components/parts/form/ValidatedTextField.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Box, Grid, InputLabel, TextField } from "@mui/material"; + +function ValidatedTextField({ + register, + errors, + isEdit, + editMode, + locationType, + locationRadios, + input, +}) { + const registerObj = { + ...register(input.name, { + required: `${input.name} is required`, + pattern: + input.name === 'location' + ? locationType === 'remote' + ? { + value: input.value, + message: input.errorMessage, + } + : { + value: input.addressValue, + message: input.addressError, + } + : { value: input.value, message: input.errorMessage }, + } + )} + + return ( + + + + + {input.label} + + + {input.name === 'location' && locationRadios} + + + + ); +}; + +export default ValidatedTextField; \ No newline at end of file diff --git a/client/src/components/parts/medium/ValidatedTextField.js b/client/src/components/parts/medium/ValidatedTextField.js deleted file mode 100644 index 87c9af4d1..000000000 --- a/client/src/components/parts/medium/ValidatedTextField.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import { Box, Grid, InputLabel, TextField } from "@mui/material"; - -function ValidatedTextField({ - register, - errors, - isEdit, - editMode, - locationType, - locationRadios, - input, -}) { - return ( - - - - - {input.label} - - - {input.name === 'location' && locationRadios} - - {/* Sets text field and data (if needed) based on the whether it is as add or edit form page. */} - {isEdit ? ( - /** - * Edit textfield. - * Includes - * - handleChange - to update the input fields based on users input. - * - value - formData that is passed from the DB to fill the input fields. - * */ - - ) : ( - // Add new project textfield. - - )} - - ) -} - -export default ValidatedTextField; \ No newline at end of file From 338c6832576afb7ae02ba08a66b270e7350ee6e6 Mon Sep 17 00:00:00 2001 From: Trillium Smith Date: Sun, 27 Aug 2023 21:22:41 -0700 Subject: [PATCH 3/4] fix: Remove unused imports, reorder imports Library imports first, local imports second separated by line break --- client/src/components/ProjectForm.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/src/components/ProjectForm.js b/client/src/components/ProjectForm.js index be0fb125c..b24537c0c 100644 --- a/client/src/components/ProjectForm.js +++ b/client/src/components/ProjectForm.js @@ -1,17 +1,11 @@ import React, { useState } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { useForm } from 'react-hook-form'; -import ProjectApiService from '../api/ProjectApiService'; - -import { ReactComponent as EditIcon } from '../svg/Icon_Edit.svg'; -import { ReactComponent as PlusIcon } from '../svg/PlusIcon.svg'; import { Redirect } from 'react-router-dom'; import { Typography, Box, Divider, - TextField, - InputLabel, Button, Grid, Radio, @@ -20,7 +14,11 @@ import { RadioGroup, } from '@mui/material'; import { styled } from '@mui/material/styles'; + import useAuth from '../hooks/useAuth'; +import ProjectApiService from '../api/ProjectApiService'; +import { ReactComponent as EditIcon } from '../svg/Icon_Edit.svg'; +import { ReactComponent as PlusIcon } from '../svg/PlusIcon.svg'; import ValidatedTextField from './parts/form/ValidatedTextField'; /** STYLES From aa6d7e8bd6d60bab0e769b72cd4f86a3a58e068f Mon Sep 17 00:00:00 2001 From: Trillium Smith Date: Sun, 27 Aug 2023 21:04:14 -0700 Subject: [PATCH 4/4] asset: Add JSDoc description to ValidatedTextField --- .../components/parts/form/ValidatedTextField.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/src/components/parts/form/ValidatedTextField.js b/client/src/components/parts/form/ValidatedTextField.js index ad4e236c3..b6fc6c5b2 100644 --- a/client/src/components/parts/form/ValidatedTextField.js +++ b/client/src/components/parts/form/ValidatedTextField.js @@ -1,6 +1,20 @@ import React from 'react'; import { Box, Grid, InputLabel, TextField } from "@mui/material"; +/** + * A validated text field component for forms. + * + * @component + * @param {Object} props - The component props. + * @param {Function} props.register - Function used for registering the input field with react-hook-form. + * @param {Object} props.errors - Object containing form validation errors. + * @param {boolean} props.isEdit - Boolean indicating if the form is in edit mode. + * @param {boolean} props.editMode - Boolean indicating if the component is in edit mode. + * @param {string} props.locationType - The type of location. + * @param {ReactNode} props.locationRadios - Radio Buttons for selecting location type. + * @param {Object} props.input - The input configuration for the text field. + * @returns {ReactElement} The rendered component. + */ function ValidatedTextField({ register, errors,