-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds transcript form #25
Merged
+438
−30
Merged
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
c11bea4
First pass: Adds transcript form component
allishultes ba47377
Refactor TranscriptForm and Stories
allishultes 3e60f94
Adds TranscriptForm with helper API Wrapper
allishultes 610cfda
Refactors TranscriptItemForm to remove API, reduce props
allishultes 6dfa8ba
Merge branch 'master' into adds-transcript-form
allishultes 3a310d8
Merge with master, file reordering
allishultes 4c5202b
Update packages/components/TranscriptForm/index.js
allishultes ee4b0c5
Update packages/components/TranscriptForm/index.js
allishultes fc2610f
Update packages/components/TranscriptForm/index.js
allishultes a2404cc
Update packages/components/TranscriptForm/index.js
allishultes e1cc19d
Update packages/components/TranscriptForm/index.js
allishultes 0a424c8
Refactors CustomAlert, TranscriptForm
allishultes 3df2645
Merges with master and fixes errors in console
allishultes File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next
Next commit
First pass: Adds transcript form component
- v2.0.0
- v1.29.0
- v1.28.2
- v1.28.1
- v1.28.0
- v1.27.0
- v1.23.2
- v1.23.1
- v1.23.0
- v1.22.3
- v1.22.0
- v1.17.0
- v1.16.0
- v1.15.0
- v1.14.0
- v1.13.0
- v1.12.0
- v1.11.0
- v1.10.0
- v1.9.0
- v1.8.0
- v1.7.0
- v1.6.0
- v1.5.0
- v1.4.0
- v1.3.2
- v1.3.1
- v1.3.0
- v1.2.20
- v1.2.19
- v1.2.18
- v1.2.17
- v1.2.16
- v1.2.15
- v1.2.14
- v1.2.13
- v1.2.12
- v1.2.11
- v1.2.10
- v1.2.9
- v1.2.8
- v1.2.7
- v1.2.6
- v1.2.5
- v1.2.4
- v1.2.3
- v1.2.2
- v1.2.1
- v1.2.0
- v1.1.2
- v1.1.1
- v1.1.0
commit c11bea41e664f59a1607bbd4a0e16f80357965db
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
import React, { useState } from 'react'; | ||
import Form from 'react-bootstrap/Form'; | ||
import Button from 'react-bootstrap/Button'; | ||
import Modal from 'react-bootstrap/Modal'; | ||
// import ApiWrapper from '../../Helpers/DemoAPIWrapper/index.js'; | ||
// import CustomAlert from './CustomAlert/index.js'; | ||
// import './index.module.css'; | ||
// import whichJsEnv from '../../Util/which-js-env'; | ||
|
||
const TranscriptForm = ({ ...props }) => { | ||
|
||
const [ title, setTitle ] = useState(props.title); | ||
const [ description, setDescription ] = useState(props.description); | ||
const [ isValidated, setValidationStatus ] = useState(false); | ||
const [ shouldRedirect, toggleRedirectStatus ] = useState(false); | ||
var [ formData, setFormData ] = useState({}); | ||
const [ notification, setNotification ] = useState(null); | ||
const [ isUploading, setIsUploadingStatus ] = useState(false); | ||
const [ uploadCompleted, setIsUploadComplete ] = useState(false); | ||
|
||
const handleTitleChange = event => { | ||
setTitle(event.target.value); | ||
}; | ||
|
||
const handleDescriptionChange = event => { | ||
setDescription(event.target.value); | ||
}; | ||
|
||
// const updateFormData = (file) => { | ||
// setFormData( | ||
// formData = file, | ||
// formData.type = file.type | ||
// ); | ||
|
||
// if (file.path) { | ||
// setFormData(formData.path = file.path); | ||
// } | ||
// }; | ||
|
||
const handleFileUpload = e => { | ||
const files = Array.from(e.target.files); | ||
const file = files[0]; | ||
console.log(file.name); | ||
const tmpObj = { | ||
title: title, | ||
description: description, | ||
file: file, | ||
type: file.type | ||
}; | ||
if (file.path) { | ||
allishultes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
tmpObj.path = file.path; | ||
} | ||
setFormData(tmpObj); | ||
|
||
if (!title) { | ||
setTitle(file.name); | ||
} | ||
}; | ||
|
||
const sendRequest = () => { | ||
setIsUploadingStatus(true); | ||
|
||
const tmpObj = { | ||
...formData, | ||
title: title, | ||
description: description | ||
}; | ||
|
||
setFormData(tmpObj); | ||
|
||
return props.handleSaveForm(formData); | ||
}; | ||
|
||
// const electronData = {}; | ||
// if (whichJsEnv() === 'electron') { | ||
// // if client run inside of electron | ||
// // is easier to pass another object with title, description | ||
// // as well as the additional path to the file | ||
// // rather then parsing a formData object in node etc.. | ||
// electronData = { | ||
// title: formData.title, | ||
// description: formData.description, | ||
// path: formData.path | ||
// }; | ||
// } | ||
// try { | ||
// ApiWrapper.createTranscript(props.projectId, formData, data) | ||
// .then(response => { | ||
// console.log('ApiWrapper.createTranscript-response ', response); | ||
// setIsUploadingStatus(false); | ||
// setIsUploadComplete(true); | ||
|
||
// props.handleSaveForm(response.transcript); | ||
|
||
// this.setState({ | ||
// uploading: false, | ||
// uploadCompleted: true, | ||
// redirect: true, | ||
// newTranscriptId: response.transcriptId | ||
// }); | ||
// props.handleSaveForm(response.transcript); | ||
|
||
// }).catch(() => { | ||
// const alert = <CustomAlert | ||
// 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> } | ||
// />; | ||
|
||
// setNotification(alert); | ||
// setIsUploadingStatus(false); | ||
// toggleRedirectStatus(false); | ||
// }); | ||
|
||
// } catch (e) { | ||
// console.error('error submitting:::', e); | ||
// } | ||
// }; | ||
|
||
const handleSubmit = (event) => { | ||
const form = event.currentTarget; | ||
event.preventDefault(); | ||
event.stopPropagation(); | ||
|
||
return (!form.checkValidity()) ? setValidationStatus(true) : sendRequest(); | ||
}; | ||
|
||
return ( | ||
<> | ||
{notification} | ||
|
||
<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 => handleTitleChange(e) } | ||
/> | ||
<Form.Text className="text-muted"> | ||
Chose a title for your Transcript | ||
allishultes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</Form.Text> | ||
<Form.Control.Feedback>Looks good!</Form.Control.Feedback> | ||
<Form.Control.Feedback type="invalid"> | ||
Please chose a title for your transcript | ||
allishultes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</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 => handleDescriptionChange(e) } | ||
/> | ||
<Form.Text className="text-muted"> | ||
Chose an optional description for your Transcript | ||
allishultes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</Form.Text> | ||
<Form.Control.Feedback>Looks good!</Form.Control.Feedback> | ||
<Form.Control.Feedback type="invalid"> | ||
Please chose a description for your transcript | ||
allishultes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</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 | ||
allishultes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</Form.Control.Feedback> | ||
</Form.Group> | ||
<Modal.Footer> | ||
<Button variant="primary" type="submit"> | ||
Save | ||
</Button> | ||
</Modal.Footer> | ||
</Form> | ||
</> | ||
); | ||
}; | ||
|
||
export default TranscriptForm; |
47 changes: 47 additions & 0 deletions
47
packages/components/TranscriptForm/stories/index.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { actions } from '@storybook/addon-actions'; | ||
import StoryRouter from 'storybook-react-router'; | ||
import CustomAlert from '../CustomAlert/index.js'; | ||
import TranscriptForm from '../index.js'; | ||
|
||
export const alertProps = { | ||
variant: 'danger', | ||
heading: 'Error could not contact the server', | ||
message: 'There was an error trying to create this transcript on the server', | ||
show: true | ||
}; | ||
|
||
export const transcriptFormProps = { | ||
projectId: 123, | ||
title: 'Sample Transcript Title', | ||
description: 'Sample Transcript Description', | ||
id: 456 | ||
}; | ||
|
||
export const transcriptFormActions = actions({ handleSaveForm: 'Form saved', handleCloseModal: 'Modal closed' }); | ||
|
||
storiesOf('Custom Alert', module) | ||
.addDecorator(StoryRouter()) | ||
.add('Transcript Error', () => { | ||
return ( | ||
<section style={ { height: '90vh', overflow: 'scroll' } }> | ||
<CustomAlert | ||
props={ alertProps } | ||
/> | ||
</section> | ||
); | ||
}); | ||
|
||
storiesOf('Transcript Form', module) | ||
.addDecorator(StoryRouter()) | ||
.add('Default', () => { | ||
return ( | ||
<section style={ { height: '90vh', overflow: 'scroll' } }> | ||
<TranscriptForm | ||
{ ...transcriptFormActions } | ||
{ ...transcriptFormProps } | ||
/> | ||
</section> | ||
); | ||
}); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this logic of
showAlert
should be in the place where it's importing this CustomAlert. I wonder if in storybooks you can add a button to toggle the alert to come up?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ooh yeah - I think that's the knobs. I'll try and add one :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So I'm not sure knobs work as expected with functional components — I've managed to allow users to toggle a button to turn the alert on and off, but the component doesn't re-render when the props change using the add-on.
I have separated the CustomAlert from the TranscriptCard; I think you're right in that that will be handled by the parent component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The showAlert should probably be a state of the parent component 🤔 which also implies that maybe the actual handling functions should also be in the parent component.