Adds transcript form

packages/components/FormModal/index.js

@@ -1,22 +1,36 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-bootstrap/Modal';
-import ItemForm from './ItemForm/index.js';
+import ItemForm from '../ItemForm/index.js';
+import TranscriptForm from '../TranscriptForm/index.js';
 
 const ItemFormModal = (props) => {
 
-
   const [ showModal, toggleShowModal ] = useState(props.showModal);
 
+  const form = () => {
+    if (props.type === 'transcript') {
+      return (
+        <TranscriptForm
+          { ...props }
+        />
+      );
+    } else {
+      return (
+        <ItemForm
+          { ...props }
+        />
+      );
+    }
+  };
+
   return (
     <Modal show={ showModal } onHide={ () => toggleShowModal(!showModal) }>
       <Modal.Header closeButton>
         <Modal.Title>{props.modalTitle}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <ItemForm
-          { ...props }
-        />
+        {form()}
       </Modal.Body>
     </Modal>
   );

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

@@ -1,22 +1,30 @@
 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,
+  itemType: 'project',
   showModal: true,
-  title: 'Example Transcript Title',
+  title: 'Example Project 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
+}, {
+  projectId: 123,
+  title: '',
+  description: '',
+  uploadCompleted: true,
+  showModal: true,
+  modalTitle: 'New Transcript',
+  id: 3,
+  type: 'transcript'
 } ];
 
 export const modalActions = actions({ handleSaveForm: 'Form saved' });
@@ -42,16 +50,13 @@ storiesOf('Form Modal', module)
         />
       </section>
     );
-  });
-
-storiesOf('Form Modal / Item Form', module)
-  .addDecorator(StoryRouter())
-  .add('Edit Project', () => {
+  })
+  .add('New Transcript', () => {
     return (
       <section style={ { height: '90vh', overflow: 'scroll' } }>
-        <ItemForm
+        <FormModal
           { ...modalActions }
-          { ...modalItems[0] }
+          { ...modalItems[2] }
         />
       </section>
     );

packages/components/ItemForm/stories/index.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import StoryRouter from 'storybook-react-router';
+import ItemForm from '../index.js';
+import { modalActions, modalItems } from '../../FormModal/stories/index.stories.js';
+
+storiesOf('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

@@ -6,7 +6,6 @@ import TranscriptCard from '../TranscriptCard';
 
 const List = ({ projectItems, handleEdit, handleDelete }) => {
 
-  console.log(projectItems);
   const [ items, setItems ] = useState(projectItems);
 
   const includesText = (text, subsetText) => {

packages/components/TranscriptForm/CustomAlert/index.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Alert from 'react-bootstrap/Alert';
+
+const CustomAlert = ({ ...props } ) => {
+
+  const [ showAlert, toggleShowAlert ] = useState(props.show);
+
+  const handleDismiss = () => {
+    toggleShowAlert(false);
+  };
+
+  const setAlertHeading = () => {
+    return props.heading ? <Alert.Heading>{props.heading}</Alert.Heading> : null;
+  };
+
+  const setAlert = () => {
+    if (showAlert) {
+      return (
+        <Alert
+          variant={ props.variant }
+          onClose={ handleDismiss }
+          dismissible
+        >
+          {setAlertHeading()}
+          {props.message}
+        </Alert>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  return setAlert();
+};
+
+CustomAlert.propTypes = {
+  show: PropTypes.bool.isRequired,
+  heading: PropTypes.string,
+  message: PropTypes.string,
+  vatiant: PropTypes.string,
+};
+
+CustomAlert.defaultProps = {
+  show: true,
+};
+
+export default CustomAlert;

packages/components/TranscriptForm/index.js

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } 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';
+import CustomAlert from './CustomAlert';
+
+const TranscriptForm = ({ ...props }) => {
+
+  const [ title, setTitle ] = useState(props.title);
+  const [ description, setDescription ] = useState(props.description);
+  const [ isValidated, setValidationStatus ] = useState(false);
+  const [ formData, setFormData ] = useState({});
+  const [ uploadCompleted, setUploadCompletion ] = useState(props.uploadCompleted);
+  const [ notificationMessage, updateNotificationMessage ] = useState(props.notification);
+
+  useEffect(() => {
+    if (!props.uploadCompleted) {
+      const alert = <CustomAlert
+        show={ true }
+        dismissable={ true }
+        variant={ 'danger' }
+        heading={ 'Error could not contact the server' }
+        message={ <p>There was an error trying to create this transcript on the server</p> }
+      />;
+      updateNotificationMessage(alert);
+    }
+  }, [ uploadCompleted ]);
+
+  const handleFileUpload = e => {
+    const file = e.target.files[0];
+
+    if (!title) {
+      setTitle(file.name);
+    }
+
+    const fileObj = {
+      title: title,
+      description: description,
+      file: file,
+      type: file.type
+    };
+
+    if (file.path) {
+      fileObj.path = file.path;
+    }
+    setFormData(fileObj);
+  };
+
+  const sendRequest = () => {
+    const tmpObj = {
+      ...formData,
+      title: title,
+      description: description
+    };
+
+    setFormData(tmpObj);
+
+    props.handleSaveForm(tmpObj);
+  };
+
+  const handleSubmit = (event) => {
+    const form = event.currentTarget;
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!form.checkValidity()) {
+      setValidationStatus(true);
+    }
+    else {
+      setValidationStatus(true);
+
+      sendRequest();
+    }
+  };
+
+  return (<>
+    { notificationMessage }
+    <Form
+      noValidate
+      validated={ isValidated }
+      onSubmit={ e => handleSubmit(e) }
+    >
+      <Form.Group controlId="formTranscriptTitle">
+        <Form.Label>Title</Form.Label>
+        <Form.Control
+          required
+          type="text"
+          placeholder="Enter a transcript title"
+          value={ title }
+          onChange={ e => setTitle(e.target.value) }
+        />
+        <Form.Text className="text-muted">
+            Chose a title for your Transcript
+        </Form.Text>
+        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+        <Form.Control.Feedback type="invalid">
+            Please chose a title for your transcript
+        </Form.Control.Feedback>
+      </Form.Group>
+
+      <Form.Group controlId="formTranscriptDescription">
+        <Form.Label>Description</Form.Label>
+        <Form.Control
+          type="text"
+          placeholder="Enter a Transcript description"
+          value={ description }
+          onChange={ e => setDescription(e.target.value) }
+        />
+        <Form.Text className="text-muted">
+                Chose an optional description for your Transcript
+        </Form.Text>
+        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+        <Form.Control.Feedback type="invalid">
+            Please chose a description for your transcript
+        </Form.Control.Feedback>
+      </Form.Group>
+      <Form.Group controlId="formTranscriptMediaFile">
+        <Form.Control
+          required
+          type="file"
+          label="Upload"
+          accept="audio/*,video/*"
+          onChange={ e => handleFileUpload(e) }
+        />
+        <Form.Text className="text-muted">
+            Select an audio or video file to upload
+        </Form.Text>
+        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
+        <Form.Control.Feedback type="invalid">
+            Please chose a audio or video file to upload
+        </Form.Control.Feedback>
+      </Form.Group>
+      <Modal.Footer>
+        <Button variant="primary" type="submit">
+            Save
+        </Button>
+      </Modal.Footer>
+    </Form>
+  </>
+  );
+};
+
+TranscriptForm.propTypes = {
+  id: PropTypes.number.isRequired,
+  projectId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  uploadCompleted: PropTypes.bool.isRequired,
+  handleSubmitForm: PropTypes.func.isRequired,
+};
+
+TranscriptForm.defaultProps = {
+  id: 456,
+  projectId: 123,
+  title: 'Sample Transcript Title',
+  description: 'Sample Transcript Description',
+  uploadCompleted: true,
+  handleSaveForm: () => {
+    console.log('Form saved');
+  },
+};
+
+export default TranscriptForm;