Merge pull request #17 from bbc/item-form-modal

Item form modal

packages/components/FormModal/ItemForm/index.js

@@ -0,0 +1,101 @@
+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 = (props) => {
+
+  const [ description, setDescription ] = useState(props.description);
+
+  const [ isValidated, setIsValidated ] = useState(false);
+
+  const [ title, setTitle ] = useState(props.title);
+
+  const handleSubmit = (event) => {
+    const form = event.currentTarget;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const formIsValid = form.checkValidity();
+
+    if (!formIsValid) {
+      setIsValidated(true);
+    } else if (formIsValid) {
+      setIsValidated(true);
+      const editedProject = {
+        title: title,
+        description: description,
+        id: props.id
+      };
+
+      props.handleSaveForm(editedProject);
+    }
+  };
+
+  return (
+
+    <Form noValidate validated={ isValidated }
+      onSubmit={ handleSubmit }
+    >
+      <Form.Group controlId="formBasicEmail">
+        <Form.Label>Title</Form.Label>
+        <Form.Control
+          required
+          type="text"
+          name="title"
+          placeholder="Enter a project title"
+          value={ title }
+          onChange={ (e) => setTitle(e.target.value) }
+        />
+        <Form.Text className="text-muted">
+            Choose a title
+        </Form.Text>
+        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+        <Form.Control.Feedback type="invalid">
+            Please choose a title
+        </Form.Control.Feedback>
+      </Form.Group>
+
+      <Form.Group controlId="formBasicEmail">
+        <Form.Label>Description</Form.Label>
+        <Form.Control
+          type="text"
+          placeholder="Enter a project description"
+          value={ description }
+          name="description"
+          onChange={ (e) => setDescription(e.target.value) }
+        />
+        <Form.Text className="text-muted">
+            Choose an optional description
+        </Form.Text>
+        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+      </Form.Group>
+      <Modal.Footer>
+        <Button variant="primary" type="submit">
+            Save
+        </Button>
+      </Modal.Footer>
+    </Form>
+  );
+};
+
+ItemForm.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isNewItemModalShow: PropTypes.bool.isRequired,
+  modalTitle: PropTypes.string.isRequired,
+  handleSaveForm: PropTypes.func.isRequired,
+};
+
+ItemForm.defaultProps = {
+  handleSaveForm: () => {
+    console.log('Handling a project save');
+  },
+  id: 1,
+  isNewItemModalShow: false,
+  modalTitle: 'New Project',
+};
+
+export default ItemForm;

packages/components/FormModal/index.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'react-bootstrap/Modal';
+import ItemForm from './ItemForm/index.js';
+
+const ItemFormModal = (props) => {
+
+
+  const [ showModal, toggleShowModal ] = useState(props.showModal);
+
+  return (
+    <Modal show={ showModal } onHide={ () => toggleShowModal(!showModal) }>
+      <Modal.Header closeButton>
+        <Modal.Title>{props.modalTitle}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <ItemForm
+          { ...props }
+        />
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+ItemFormModal.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  showModal: PropTypes.bool.isRequired,
+  modalTitle: PropTypes.string.isRequired,
+  handleSaveForm: PropTypes.func.isRequired,
+};
+
+ItemFormModal.defaultProps = {
+  handleSaveForm: () => {
+    console.log('Handling a project save');
+  },
+  id: 1,
+  isNewItemModalShow: false,
+  modalTitle: 'New Project',
+};
+
+export default ItemFormModal;

packages/components/FormModal/stories/index.stories.js

@@ -0,0 +1,58 @@
+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';
+import ItemForm from '../ItemForm';
+
+export const modalItems = [ {
+  id: 1,
+  showModal: true,
+  title: 'Example Transcript Title',
+  description: 'This is a sample card description. This is fun!',
+  url: '/projects/1/transcripts/1234',
+  modalTitle: 'Edit Project',
+}, {
+  showModal: true,
+  modalTitle: 'New Project',
+  id: 2
+} ];
+
+export const modalActions = actions({ handleSaveForm: 'Form saved' });
+
+storiesOf('Form Modal', module)
+  .addDecorator(StoryRouter())
+  .add('Edit project', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <FormModal
+          { ...modalActions }
+          { ...modalItems[0] }
+        />
+      </section>
+    );
+  })
+  .add('New project', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <FormModal
+          { ...modalActions }
+          { ...modalItems[1] }
+        />
+      </section>
+    );
+  });
+
+storiesOf('Form Modal / Item Form', module)
+  .addDecorator(StoryRouter())
+  .add('Edit Project', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <ItemForm
+          { ...modalActions }
+          { ...modalItems[0] }
+        />
+      </section>
+    );
+  });

packages/components/List/index.js

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import SimpleCard from '../SimpleCard';
-import SearchBar from '../SearchBar';
-import TranscriptCard from '../TranscriptCard';
+import SearchBar from './SearchBar';
 
 const List = ({ projectItems, handleEdit, handleDelete }) => {
 

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';
 import { transcriptItems } from '../../TranscriptCard/stories/index.stories.js';