From 7126b68ea0052097645ed29099a4314474010971 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Mon, 2 Sep 2019 10:33:13 +0100 Subject: [PATCH 01/14] Refactors FormModal component --- packages/components/FormModal/index.js | 22 ++++++++ .../FormModal/stories/index.stories.js | 51 +++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 packages/components/FormModal/index.js create mode 100644 packages/components/FormModal/stories/index.stories.js diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js new file mode 100644 index 0000000..71b628a --- /dev/null +++ b/packages/components/FormModal/index.js @@ -0,0 +1,22 @@ +import React, { useState } from 'react'; +import Modal from 'react-bootstrap/Modal'; +// import ItemForm from '../ItemForm'; + +const ItemFormModal = ({ modalActions, modalItem }) => { + + console.log(modalItem); + const [ showModal, toggleShowModal ] = useState(modalItem.isNewItemModalShow); + + return ( + toggleShowModal(!showModal) }> + + {modalItem.modalTitle} + + +

This is a test modal body

+ + + ); +}; + +export default ItemFormModal; \ No newline at end of file diff --git a/packages/components/FormModal/stories/index.stories.js b/packages/components/FormModal/stories/index.stories.js new file mode 100644 index 0000000..697071d --- /dev/null +++ b/packages/components/FormModal/stories/index.stories.js @@ -0,0 +1,51 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { actions } from '@storybook/addon-actions'; +import StoryRouter from 'storybook-react-router'; +import FormModal from '../index.js'; + +// modalTitle = { this.state.itemId ? 'Edit Paper Edit' : 'New Paper Edit' } +// show = { this.state.isNewItemModalShow } + +export const modalItems = [ { + id: '1', + isNewItemModalShow: true, + title: 'Example Transcript Title', + description: 'This is a sample card description. This is fun!', + url: '/projects/1/transcripts/1234', + modalTitle: 'Edit Paper Edit' +}, { + id: '2', + isNewItemModalShow: true, + title: 'Example Transcript Title', + description: 'This is a sample card description. This is fun!', + url: '/projects/1/transcripts/1234', + modalTitle: 'New Paper Edit' + +} ]; + +export const modalActions = actions({ handleSaveForm: 'Form saved' }); + +storiesOf('Form Modal', module) + .addDecorator(StoryRouter()) + .add('Edit Project', () => { + return ( +
+ +
+ ); + }) + .add('New Paper Edit Project', () => { + return ( +
+ +
+ ); + }); From eabccc4bf313a79cd7ed13fd212cfbf8bb4859af Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Mon, 2 Sep 2019 11:27:54 +0100 Subject: [PATCH 02/14] Adds and hook-ifies ItemForm - first pass --- packages/components/ItemForm/index.js | 114 ++++++++++++++++++ .../ItemForm/stories/index.stories.js | 20 +++ 2 files changed, 134 insertions(+) create mode 100644 packages/components/ItemForm/index.js create mode 100644 packages/components/ItemForm/stories/index.stories.js diff --git a/packages/components/ItemForm/index.js b/packages/components/ItemForm/index.js new file mode 100644 index 0000000..b4abdac --- /dev/null +++ b/packages/components/ItemForm/index.js @@ -0,0 +1,114 @@ +import React, { useState } from 'react'; +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; + +const ItemForm = ({ modalActions, modalItem }) => { +// constructor(props) { +// super(props); +// this.state = { +// title: this.props.title, +// description: this.props.description, +// validated: false, +// id: this.props.id +// }; +// } + + const [ description, setDescription ] = useState(modalItem.description); + + const [ isValidated, setFormValidation ] = useState(false); + + const [ title, setTitle ] = useState(modalItem.title); + + const validateField = (name, value) => { + switch (name) { + case 'title': + if (value != null) { + setTitle(value); + setFormValidation(true); + } else { + setFormValidation(false); + } + break; + case 'description': + setDescription(value); + setFormValidation(true); + break; + } + }; + + // handleSubmit(event) { + // const form = event.currentTarget; + // if (!form.checkValidity()) { + // event.preventDefault(); + // event.stopPropagation(); + // this.setState({ validated: true }); + // } + + // if (form.checkValidity()) { + // event.preventDefault(); + // event.stopPropagation(); + // const tmpItem = { + // title: this.state.title, + // description: this.state.description, + // id: this.state.id + // }; + // this.props.handleSaveForm(tmpItem); + // } + + // //this.setState({ redirect: true, newProjectId: response.projectId }); + // } + + return ( + +
this.handleSubmit(e) } + > + + Title + validateField(e.target.name, e.target.value) } + /> + + Chose a title + + Looks good! + + Please chose a title + + + + + Description + validateField(e.target.name, e.target.value) } + /> + + Chose an optional description + + Looks good! + + Please chose a description + + + + + +
+ ); +}; + +export default ItemForm; \ No newline at end of file diff --git a/packages/components/ItemForm/stories/index.stories.js b/packages/components/ItemForm/stories/index.stories.js new file mode 100644 index 0000000..53ecfbd --- /dev/null +++ b/packages/components/ItemForm/stories/index.stories.js @@ -0,0 +1,20 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import StoryRouter from 'storybook-react-router'; +import ItemForm from '../index.js'; + +import { modalItems, modalActions } from '../../FormModal/stories/index.stories.js'; + +storiesOf('Item Form', module) + .addDecorator(StoryRouter()) + .add('Edit Project', () => { + return ( +
+ +
+ ); + }); \ No newline at end of file From 48d269c0e210665fadf4734bdcb6cc6d10134286 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Mon, 2 Sep 2019 13:50:15 +0100 Subject: [PATCH 03/14] Adds Item Form component to Form Modal component --- .../components/FormModal/ItemForm/index.js | 103 ++++++++++++++++ packages/components/FormModal/index.js | 29 ++++- .../FormModal/stories/index.stories.js | 30 +++-- packages/components/ItemForm/index.js | 114 ------------------ .../ItemForm/stories/index.stories.js | 20 --- 5 files changed, 147 insertions(+), 149 deletions(-) create mode 100644 packages/components/FormModal/ItemForm/index.js delete mode 100644 packages/components/ItemForm/index.js delete mode 100644 packages/components/ItemForm/stories/index.stories.js diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js new file mode 100644 index 0000000..1802702 --- /dev/null +++ b/packages/components/FormModal/ItemForm/index.js @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import Form from 'react-bootstrap/Form'; +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; + +const ItemForm = ({ modalActions, modalItem }) => { + + console.log(modalActions); + const [ description, setDescription ] = useState(modalItem.description); + + const [ isValidated, setFormValidation ] = useState(false); + + const [ title, setTitle ] = useState(modalItem.title); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + setFormValidation(true); + } else if (form.checkValidity() === true) { + event.preventDefault(); + event.stopPropagation(); + setFormValidation(true); + const editedProject = { + title: title, + description: description, + id: modalItem.id + }; + + modalActions.handleSaveForm(editedProject); + } + }; + + return ( + +
+ + Title + setTitle(e.target.value) } + /> + + Chose a title + + Looks good! + + Please chose a title + + + + + Description + setDescription(e.target.value) } + /> + + Chose an optional description + + Looks good! + + + + +
+ ); +}; + +ItemForm.propTypes = { + modalActions: PropTypes.object.isRequired, + modalItem: PropTypes.object.isRequired +}; + +ItemForm.defaultProps = { + modalActions: { + handleSaveForm: () => { + console.log('Handling a project save'); + }, + }, + modalItem: { + id: '1', + title: 'Default Title String', + description: 'This is a default description string', + isNewItemModalShow: false, + modalTitle: 'New Project', + } +}; + +export default ItemForm; \ No newline at end of file diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js index 71b628a..eefd112 100644 --- a/packages/components/FormModal/index.js +++ b/packages/components/FormModal/index.js @@ -1,10 +1,10 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import Modal from 'react-bootstrap/Modal'; -// import ItemForm from '../ItemForm'; +import ItemForm from './ItemForm/index.js'; const ItemFormModal = ({ modalActions, modalItem }) => { - console.log(modalItem); const [ showModal, toggleShowModal ] = useState(modalItem.isNewItemModalShow); return ( @@ -13,10 +13,33 @@ const ItemFormModal = ({ modalActions, modalItem }) => { {modalItem.modalTitle} -

This is a test modal body

+ ); }; +ItemFormModal.propTypes = { + modalActions: PropTypes.object.isRequired, + modalItem: PropTypes.object.isRequired +}; + +ItemFormModal.defaultProps = { + modalActions: { + handleSaveForm: () => { + console.log('Handling a project save'); + }, + }, + modalItem: { + id: '1', + title: 'Default Title String', + description: 'This is a default description string', + isNewItemModalShow: false, + modalTitle: 'New Project', + } +}; + export default ItemFormModal; \ No newline at end of file diff --git a/packages/components/FormModal/stories/index.stories.js b/packages/components/FormModal/stories/index.stories.js index 697071d..ec3f044 100644 --- a/packages/components/FormModal/stories/index.stories.js +++ b/packages/components/FormModal/stories/index.stories.js @@ -4,9 +4,7 @@ import { storiesOf } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import StoryRouter from 'storybook-react-router'; import FormModal from '../index.js'; - -// modalTitle = { this.state.itemId ? 'Edit Paper Edit' : 'New Paper Edit' } -// show = { this.state.isNewItemModalShow } +import ItemForm from '../ItemForm'; export const modalItems = [ { id: '1', @@ -14,22 +12,17 @@ export const modalItems = [ { title: 'Example Transcript Title', description: 'This is a sample card description. This is fun!', url: '/projects/1/transcripts/1234', - modalTitle: 'Edit Paper Edit' + modalTitle: 'Edit Project', }, { - id: '2', isNewItemModalShow: true, - title: 'Example Transcript Title', - description: 'This is a sample card description. This is fun!', - url: '/projects/1/transcripts/1234', - modalTitle: 'New Paper Edit' - + modalTitle: 'New Project', } ]; export const modalActions = actions({ handleSaveForm: 'Form saved' }); storiesOf('Form Modal', module) .addDecorator(StoryRouter()) - .add('Edit Project', () => { + .add('Edit project', () => { return (
); }) - .add('New Paper Edit Project', () => { + .add('New project', () => { return (
); }); + +storiesOf('Form Modal / Item Form', module) + .addDecorator(StoryRouter()) + .add('Edit Project', () => { + return ( +
+ +
+ ); + }); diff --git a/packages/components/ItemForm/index.js b/packages/components/ItemForm/index.js deleted file mode 100644 index b4abdac..0000000 --- a/packages/components/ItemForm/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, { useState } from 'react'; -import Form from 'react-bootstrap/Form'; -import Button from 'react-bootstrap/Button'; -import Modal from 'react-bootstrap/Modal'; - -const ItemForm = ({ modalActions, modalItem }) => { -// constructor(props) { -// super(props); -// this.state = { -// title: this.props.title, -// description: this.props.description, -// validated: false, -// id: this.props.id -// }; -// } - - const [ description, setDescription ] = useState(modalItem.description); - - const [ isValidated, setFormValidation ] = useState(false); - - const [ title, setTitle ] = useState(modalItem.title); - - const validateField = (name, value) => { - switch (name) { - case 'title': - if (value != null) { - setTitle(value); - setFormValidation(true); - } else { - setFormValidation(false); - } - break; - case 'description': - setDescription(value); - setFormValidation(true); - break; - } - }; - - // handleSubmit(event) { - // const form = event.currentTarget; - // if (!form.checkValidity()) { - // event.preventDefault(); - // event.stopPropagation(); - // this.setState({ validated: true }); - // } - - // if (form.checkValidity()) { - // event.preventDefault(); - // event.stopPropagation(); - // const tmpItem = { - // title: this.state.title, - // description: this.state.description, - // id: this.state.id - // }; - // this.props.handleSaveForm(tmpItem); - // } - - // //this.setState({ redirect: true, newProjectId: response.projectId }); - // } - - return ( - -
this.handleSubmit(e) } - > - - Title - validateField(e.target.name, e.target.value) } - /> - - Chose a title - - Looks good! - - Please chose a title - - - - - Description - validateField(e.target.name, e.target.value) } - /> - - Chose an optional description - - Looks good! - - Please chose a description - - - - - -
- ); -}; - -export default ItemForm; \ No newline at end of file diff --git a/packages/components/ItemForm/stories/index.stories.js b/packages/components/ItemForm/stories/index.stories.js deleted file mode 100644 index 53ecfbd..0000000 --- a/packages/components/ItemForm/stories/index.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import { storiesOf } from '@storybook/react'; -import StoryRouter from 'storybook-react-router'; -import ItemForm from '../index.js'; - -import { modalItems, modalActions } from '../../FormModal/stories/index.stories.js'; - -storiesOf('Item Form', module) - .addDecorator(StoryRouter()) - .add('Edit Project', () => { - return ( -
- -
- ); - }); \ No newline at end of file From e02bc6c596a38017ff1cb4b65f484104cf10944b Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Mon, 2 Sep 2019 13:51:19 +0100 Subject: [PATCH 04/14] Refactors file structure of List compponent for consistency --- packages/components/{ => List}/SearchBar/index.js | 0 packages/components/List/index.js | 2 +- packages/components/List/stories/index.stories.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/components/{ => List}/SearchBar/index.js (100%) diff --git a/packages/components/SearchBar/index.js b/packages/components/List/SearchBar/index.js similarity index 100% rename from packages/components/SearchBar/index.js rename to packages/components/List/SearchBar/index.js diff --git a/packages/components/List/index.js b/packages/components/List/index.js index f1c9083..53affc4 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import SimpleCard from '../SimpleCard'; -import SearchBar from '../SearchBar'; +import SearchBar from './SearchBar'; const List = ({ projectItems, handleEdit, handleDelete }) => { diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js index 28c2670..8088619 100644 --- a/packages/components/List/stories/index.stories.js +++ b/packages/components/List/stories/index.stories.js @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import StoryRouter from 'storybook-react-router'; import List from '../index.js'; -import SearchBar from '../../SearchBar'; +import SearchBar from '../SearchBar'; import { item, cardActions } from '../../SimpleCard/stories/index.stories.js'; From 0b981f7bcb7a0b69047e1dc12b44c798f10d05f0 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Mon, 2 Sep 2019 14:09:07 +0100 Subject: [PATCH 05/14] Adds forgotten id to new project (would be passed in from parent component) --- packages/components/FormModal/index.js | 2 +- packages/components/FormModal/stories/index.stories.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js index eefd112..111de9c 100644 --- a/packages/components/FormModal/index.js +++ b/packages/components/FormModal/index.js @@ -34,7 +34,7 @@ ItemFormModal.defaultProps = { }, }, modalItem: { - id: '1', + id: 1, title: 'Default Title String', description: 'This is a default description string', isNewItemModalShow: false, diff --git a/packages/components/FormModal/stories/index.stories.js b/packages/components/FormModal/stories/index.stories.js index ec3f044..b9538f7 100644 --- a/packages/components/FormModal/stories/index.stories.js +++ b/packages/components/FormModal/stories/index.stories.js @@ -7,7 +7,7 @@ import FormModal from '../index.js'; import ItemForm from '../ItemForm'; export const modalItems = [ { - id: '1', + id: 1, isNewItemModalShow: true, title: 'Example Transcript Title', description: 'This is a sample card description. This is fun!', @@ -16,6 +16,7 @@ export const modalItems = [ { }, { isNewItemModalShow: true, modalTitle: 'New Project', + id: 2 } ]; export const modalActions = actions({ handleSaveForm: 'Form saved' }); From 8e3a144310c6112c972ee4d23317dd453748e5a1 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Mon, 2 Sep 2019 15:30:07 +0100 Subject: [PATCH 06/14] Refactors props passed into FormModal and ItemForm --- .../components/FormModal/ItemForm/index.js | 37 +++++++++---------- packages/components/FormModal/index.js | 33 ++++++++--------- .../FormModal/stories/index.stories.js | 12 +++--- 3 files changed, 38 insertions(+), 44 deletions(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index 1802702..1c215bf 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -4,14 +4,13 @@ import Form from 'react-bootstrap/Form'; import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; -const ItemForm = ({ modalActions, modalItem }) => { +const ItemForm = (props) => { - console.log(modalActions); - const [ description, setDescription ] = useState(modalItem.description); + const [ description, setDescription ] = useState(props.description); const [ isValidated, setFormValidation ] = useState(false); - const [ title, setTitle ] = useState(modalItem.title); + const [ title, setTitle ] = useState(props.title); const handleSubmit = (event) => { const form = event.currentTarget; @@ -26,10 +25,10 @@ const ItemForm = ({ modalActions, modalItem }) => { const editedProject = { title: title, description: description, - id: modalItem.id + id: props.id }; - modalActions.handleSaveForm(editedProject); + props.handleSaveForm(editedProject); } }; @@ -58,7 +57,7 @@ const ItemForm = ({ modalActions, modalItem }) => { - Description + Description { }; ItemForm.propTypes = { - modalActions: PropTypes.object.isRequired, - modalItem: PropTypes.object.isRequired + id: PropTypes.number.isRequired, + title: PropTypes.string, + description: PropTypes.string, + isNewItemModalShow: PropTypes.bool.isRequired, + modalTitle: PropTypes.string.isRequired, + handleSaveForm: PropTypes.func.isRequired, }; ItemForm.defaultProps = { - modalActions: { - handleSaveForm: () => { - console.log('Handling a project save'); - }, + handleSaveForm: () => { + console.log('Handling a project save'); }, - modalItem: { - id: '1', - title: 'Default Title String', - description: 'This is a default description string', - isNewItemModalShow: false, - modalTitle: 'New Project', - } + id: 1, + isNewItemModalShow: false, + modalTitle: 'New Project', }; export default ItemForm; \ No newline at end of file diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js index 111de9c..8c9879f 100644 --- a/packages/components/FormModal/index.js +++ b/packages/components/FormModal/index.js @@ -3,19 +3,18 @@ import PropTypes from 'prop-types'; import Modal from 'react-bootstrap/Modal'; import ItemForm from './ItemForm/index.js'; -const ItemFormModal = ({ modalActions, modalItem }) => { +const ItemFormModal = (props) => { - const [ showModal, toggleShowModal ] = useState(modalItem.isNewItemModalShow); + const [ showModal, toggleShowModal ] = useState(props.isNewItemModalShow); return ( toggleShowModal(!showModal) }> - {modalItem.modalTitle} + {props.modalTitle} @@ -23,23 +22,21 @@ const ItemFormModal = ({ modalActions, modalItem }) => { }; ItemFormModal.propTypes = { - modalActions: PropTypes.object.isRequired, - modalItem: PropTypes.object.isRequired + id: PropTypes.number.isRequired, + title: PropTypes.string, + description: PropTypes.string, + isNewItemModalShow: PropTypes.bool.isRequired, + modalTitle: PropTypes.string.isRequired, + handleSaveForm: PropTypes.func.isRequired, }; ItemFormModal.defaultProps = { - modalActions: { - handleSaveForm: () => { - console.log('Handling a project save'); - }, + handleSaveForm: () => { + console.log('Handling a project save'); }, - modalItem: { - id: 1, - title: 'Default Title String', - description: 'This is a default description string', - isNewItemModalShow: false, - modalTitle: 'New Project', - } + id: 1, + isNewItemModalShow: false, + modalTitle: 'New Project', }; export default ItemFormModal; \ No newline at end of file diff --git a/packages/components/FormModal/stories/index.stories.js b/packages/components/FormModal/stories/index.stories.js index b9538f7..43e6de5 100644 --- a/packages/components/FormModal/stories/index.stories.js +++ b/packages/components/FormModal/stories/index.stories.js @@ -27,8 +27,8 @@ storiesOf('Form Modal', module) return (
); @@ -37,8 +37,8 @@ storiesOf('Form Modal', module) return (
); @@ -50,8 +50,8 @@ storiesOf('Form Modal / Item Form', module) return (
); From 4364c8a9760c645909df67387fe4dcec7c9b3cbc Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Fri, 6 Sep 2019 17:41:43 +0100 Subject: [PATCH 07/14] Update packages/components/FormModal/ItemForm/index.js Co-Authored-By: Eimi Okuno --- packages/components/FormModal/ItemForm/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index 1c215bf..ee3b811 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -52,7 +52,7 @@ const ItemForm = (props) => { Looks good! - Please chose a title + Please choose a title @@ -97,4 +97,4 @@ ItemForm.defaultProps = { modalTitle: 'New Project', }; -export default ItemForm; \ No newline at end of file +export default ItemForm; From db488da27f86c8515aab1dfb0541f1eb4bc42dd8 Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Fri, 6 Sep 2019 17:41:50 +0100 Subject: [PATCH 08/14] Update packages/components/FormModal/ItemForm/index.js Co-Authored-By: Eimi Okuno --- packages/components/FormModal/ItemForm/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index ee3b811..4a16472 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -48,7 +48,7 @@ const ItemForm = (props) => { onChange={ (e) => setTitle(e.target.value) } /> - Chose a title + Choose a title Looks good! From a9b6c791495b3f97a3a84036289dda9239451272 Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Fri, 6 Sep 2019 17:41:58 +0100 Subject: [PATCH 09/14] Update packages/components/FormModal/ItemForm/index.js Co-Authored-By: Eimi Okuno --- packages/components/FormModal/ItemForm/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index 4a16472..cf32079 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -66,7 +66,7 @@ const ItemForm = (props) => { onChange={ (e) => setDescription(e.target.value) } /> - Chose an optional description + Choose an optional description Looks good! From 9aefc2f77c10ad7aa9e6e43665b53de382d117e0 Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Fri, 6 Sep 2019 17:42:33 +0100 Subject: [PATCH 10/14] Update packages/components/FormModal/ItemForm/index.js Co-Authored-By: Eimi Okuno --- packages/components/FormModal/ItemForm/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index cf32079..49955f5 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -8,7 +8,7 @@ const ItemForm = (props) => { const [ description, setDescription ] = useState(props.description); - const [ isValidated, setFormValidation ] = useState(false); + const [ isValidated, setIsValidated ] = useState(false); const [ title, setTitle ] = useState(props.title); From a84b231d4f2082800b3bf3649be9ec1c99035683 Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Fri, 6 Sep 2019 17:43:33 +0100 Subject: [PATCH 11/14] Update packages/components/FormModal/index.js Co-Authored-By: Eimi Okuno --- packages/components/FormModal/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js index 8c9879f..eb6e1d2 100644 --- a/packages/components/FormModal/index.js +++ b/packages/components/FormModal/index.js @@ -5,7 +5,7 @@ import ItemForm from './ItemForm/index.js'; const ItemFormModal = (props) => { - const [ showModal, toggleShowModal ] = useState(props.isNewItemModalShow); + const [ showModal, setShowModal ] = useState(props.showModal); return ( toggleShowModal(!showModal) }> @@ -39,4 +39,4 @@ ItemFormModal.defaultProps = { modalTitle: 'New Project', }; -export default ItemFormModal; \ No newline at end of file +export default ItemFormModal; From d7a4b3a236d6d6d0d59d575daae0dc02e48e0ff3 Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Mon, 9 Sep 2019 11:05:43 +0100 Subject: [PATCH 12/14] Refactors names, conditionals --- .../components/FormModal/ItemForm/index.js | 19 ++++++++----------- packages/components/FormModal/index.js | 6 ++++-- .../FormModal/stories/index.stories.js | 4 ++-- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index 49955f5..653f28f 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -13,15 +13,10 @@ const ItemForm = (props) => { const [ title, setTitle ] = useState(props.title); const handleSubmit = (event) => { - const form = event.currentTarget; - if (form.checkValidity() === false) { - event.preventDefault(); - event.stopPropagation(); - setFormValidation(true); - } else if (form.checkValidity() === true) { - event.preventDefault(); - event.stopPropagation(); - setFormValidation(true); + event.preventDefault(); + event.stopPropagation(); + + if (isValidated) { const editedProject = { title: title, description: description, @@ -29,7 +24,9 @@ const ItemForm = (props) => { }; props.handleSaveForm(editedProject); - } + } else if (!isValidated) { + setIsValidated(true); + }; }; return ( @@ -83,7 +80,7 @@ ItemForm.propTypes = { id: PropTypes.number.isRequired, title: PropTypes.string, description: PropTypes.string, - isNewItemModalShow: PropTypes.bool.isRequired, + showModal: PropTypes.bool.isRequired, modalTitle: PropTypes.string.isRequired, handleSaveForm: PropTypes.func.isRequired, }; diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js index eb6e1d2..c56a85d 100644 --- a/packages/components/FormModal/index.js +++ b/packages/components/FormModal/index.js @@ -5,7 +5,9 @@ import ItemForm from './ItemForm/index.js'; const ItemFormModal = (props) => { - const [ showModal, setShowModal ] = useState(props.showModal); + console.log('modal props', props); + + const [ showModal, toggleShowModal ] = useState(props.showModal); return ( toggleShowModal(!showModal) }> @@ -25,7 +27,7 @@ ItemFormModal.propTypes = { id: PropTypes.number.isRequired, title: PropTypes.string, description: PropTypes.string, - isNewItemModalShow: PropTypes.bool.isRequired, + showModal: PropTypes.bool.isRequired, modalTitle: PropTypes.string.isRequired, handleSaveForm: PropTypes.func.isRequired, }; diff --git a/packages/components/FormModal/stories/index.stories.js b/packages/components/FormModal/stories/index.stories.js index 43e6de5..bde4f7b 100644 --- a/packages/components/FormModal/stories/index.stories.js +++ b/packages/components/FormModal/stories/index.stories.js @@ -8,13 +8,13 @@ import ItemForm from '../ItemForm'; export const modalItems = [ { id: 1, - isNewItemModalShow: true, + showModal: true, title: 'Example Transcript Title', description: 'This is a sample card description. This is fun!', url: '/projects/1/transcripts/1234', modalTitle: 'Edit Project', }, { - isNewItemModalShow: true, + showModal: true, modalTitle: 'New Project', id: 2 } ]; From a3da609d1feb5f372cd88269e5358d8aa76a42df Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Mon, 9 Sep 2019 12:07:03 +0100 Subject: [PATCH 13/14] Update packages/components/FormModal/index.js Co-Authored-By: Eimi Okuno --- packages/components/FormModal/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/FormModal/index.js b/packages/components/FormModal/index.js index c56a85d..d8adb07 100644 --- a/packages/components/FormModal/index.js +++ b/packages/components/FormModal/index.js @@ -5,7 +5,6 @@ import ItemForm from './ItemForm/index.js'; const ItemFormModal = (props) => { - console.log('modal props', props); const [ showModal, toggleShowModal ] = useState(props.showModal); From b765718f028aa3d241f034cd898982a2a254c121 Mon Sep 17 00:00:00 2001 From: Alli Shultes Date: Mon, 9 Sep 2019 12:24:38 +0100 Subject: [PATCH 14/14] Refactors the handleSubmit function --- packages/components/FormModal/ItemForm/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/components/FormModal/ItemForm/index.js b/packages/components/FormModal/ItemForm/index.js index 653f28f..bffa75c 100644 --- a/packages/components/FormModal/ItemForm/index.js +++ b/packages/components/FormModal/ItemForm/index.js @@ -13,10 +13,13 @@ const ItemForm = (props) => { const [ title, setTitle ] = useState(props.title); const handleSubmit = (event) => { + const form = event.currentTarget; event.preventDefault(); event.stopPropagation(); - - if (isValidated) { + if (!form.checkValidity()) { + setIsValidated(true); + } else if (form.checkValidity()) { + setIsValidated(true); const editedProject = { title: title, description: description, @@ -24,9 +27,7 @@ const ItemForm = (props) => { }; props.handleSaveForm(editedProject); - } else if (!isValidated) { - setIsValidated(true); - }; + } }; return ( @@ -80,7 +81,7 @@ ItemForm.propTypes = { id: PropTypes.number.isRequired, title: PropTypes.string, description: PropTypes.string, - showModal: PropTypes.bool.isRequired, + isNewItemModalShow: PropTypes.bool.isRequired, modalTitle: PropTypes.string.isRequired, handleSaveForm: PropTypes.func.isRequired, };