Skip to content
Snippets Groups Projects
Commit 7364882a authored by James Calfee's avatar James Calfee
Browse files

Remove redux from from Medium Editor.

parent d6ee6e08
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/components/cards/CategorySelector.jsx
+ 1
− 1
View file @ 7364882a
...@@ -10,7 +10,7 @@ class CategorySelector extends React.Component { ...@@ -10,7 +10,7 @@ class CategorySelector extends React.Component {
autoComplete: React.PropTypes.string, autoComplete: React.PropTypes.string,
placeholder: React.PropTypes.string, placeholder: React.PropTypes.string,
onChange: React.PropTypes.func.isRequired, onChange: React.PropTypes.func.isRequired,
onBlur: React.PropTypes.func.isRequired, onBlur: React.PropTypes.func,
isEdit: React.PropTypes.bool, isEdit: React.PropTypes.bool,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
value: React.PropTypes.string, value: React.PropTypes.string,
......
app/components/elements/MediumEditor.jsx
+ 75
− 74
View file @ 7364882a
/* eslint react/prop-types: 0 */
import React from 'react'; import React from 'react';
import {reduxForm} from 'redux-form' import reactForm from 'app/utils/ReactForm'
import transaction from 'app/redux/Transaction'; import transaction from 'app/redux/Transaction';
import MarkdownViewer from 'app/components/cards/MarkdownViewer' import MarkdownViewer from 'app/components/cards/MarkdownViewer'
import CategorySelector from 'app/components/cards/CategorySelector' import CategorySelector from 'app/components/cards/CategorySelector'
...@@ -12,7 +13,6 @@ import sanitize from 'sanitize-html' ...@@ -12,7 +13,6 @@ import sanitize from 'sanitize-html'
import HtmlReady from 'shared/HtmlReady' import HtmlReady from 'shared/HtmlReady'
import g from 'app/redux/GlobalReducer' import g from 'app/redux/GlobalReducer'
import {Map, Set} from 'immutable' import {Map, Set} from 'immutable'
import {cleanReduxInput} from 'app/utils/ReduxForms'
let RichTextEditor let RichTextEditor
if(process.env.BROWSER) { if(process.env.BROWSER) {
...@@ -48,23 +48,6 @@ class MediumEditor extends React.Component { ...@@ -48,23 +48,6 @@ class MediumEditor extends React.Component {
title: React.PropTypes.string, // initial value title: React.PropTypes.string, // initial value
body: React.PropTypes.string, // initial value body: React.PropTypes.string, // initial value
//redux connect
reply: React.PropTypes.func.isRequired,
setMetaLink: React.PropTypes.func.isRequired,
clearMetaData: React.PropTypes.func.isRequired,
setMetaData: React.PropTypes.func.isRequired,
metaLinkData: React.PropTypes.object,
state: React.PropTypes.object.isRequired,
hasCategory: React.PropTypes.bool.isRequired,
isStory: React.PropTypes.bool.isRequired,
username: React.PropTypes.string,
// redux-form
fields: React.PropTypes.object.isRequired,
handleSubmit: React.PropTypes.func.isRequired,
resetForm: React.PropTypes.func.isRequired,
submitting: React.PropTypes.bool.isRequired,
invalid: React.PropTypes.bool.isRequired,
} }
static defaultProps = { static defaultProps = {
...@@ -76,21 +59,23 @@ class MediumEditor extends React.Component { ...@@ -76,21 +59,23 @@ class MediumEditor extends React.Component {
metaLinkData: Map(), metaLinkData: Map(),
} }
constructor() { constructor(props) {
super() super()
this.state = { rteRef: Date.now() } this.state = { rteRef: Date.now() }
this.initForm(props)
this.shouldComponentUpdate = shouldComponentUpdate(this, 'MediumEditor') this.shouldComponentUpdate = shouldComponentUpdate(this, 'MediumEditor')
this.onTitleChange = e => { this.onTitleChange = e => {
const value = e.target.value const value = e.target.value
// TODO block links in title (the do not make good permlinks) // TODO block links in title (the do not make good permlinks)
const hasMarkdown = /(?:\*[\w\s]*\*|\#[\w\s]*\#|_[\w\s]*_|~[\w\s]*~|\]\s*\(|\]\s*\[)/.test(value) const hasMarkdown = /(?:\*[\w\s]*\*|\#[\w\s]*\#|_[\w\s]*_|~[\w\s]*~|\]\s*\(|\]\s*\[)/.test(value)
this.setState({ titleWarn: hasMarkdown ? 'Markdown is not supported here' : '' }) this.setState({ titleWarn: hasMarkdown ? 'Markdown is not supported here' : '' })
this.props.fields.title.onChange(e) this.state.title.props.onChange(e)
} }
this.onCancel = e => { this.onCancel = e => {
if(e) e.preventDefault() if(e) e.preventDefault()
const {onCancel, resetForm} = this.props const {onCancel} = this.props
resetForm() const {mediumForm} = this.state
mediumForm.clearForm()
this.setAutoVote() this.setAutoVote()
this.setState({rte_value: RichTextEditor ? '' : null, rteRef: Date.now()}) this.setState({rte_value: RichTextEditor ? '' : null, rteRef: Date.now()})
if(onCancel) onCancel(e) if(onCancel) onCancel(e)
...@@ -110,10 +95,10 @@ class MediumEditor extends React.Component { ...@@ -110,10 +95,10 @@ class MediumEditor extends React.Component {
} }
} }
this.autoVoteOnChange = () => { this.autoVoteOnChange = () => {
const {autoVote} = this.props.fields const {autoVote} = this.state
const key = 'replyEditorData-autoVote-story' const key = 'replyEditorData-autoVote-story'
localStorage.setItem(key, !autoVote.value) localStorage.setItem(key, !autoVote.value)
autoVote.onChange(!autoVote.value) autoVote.props.onChange(!autoVote.value)
} }
} }
componentWillMount() { componentWillMount() {
...@@ -125,20 +110,20 @@ class MediumEditor extends React.Component { ...@@ -125,20 +110,20 @@ class MediumEditor extends React.Component {
if(editorData) { if(editorData) {
editorData = JSON.parse(editorData) editorData = JSON.parse(editorData)
if(editorData.formId === formId) { if(editorData.formId === formId) {
const {fields: {category, title, body}} = this.props const {category, title, body} = this.state
if(category) category.onChange(editorData.category) if(category) category.props.onChange(editorData.category)
if(title) title.onChange(editorData.title) if(title) title.props.onChange(editorData.title)
if (editorData.body) { if (editorData.body) {
const html = getHtml(editorData.body) const html = getHtml(editorData.body)
if(html) { if(html) {
rte_value = editorData.body rte_value = editorData.body
rte = true rte = true
} else } else
body.onChange(editorData.body) body.props.onChange(editorData.body)
} }
} }
} else { } else {
const {body} = this.props.fields const {body} = this.state
// const {isStory} = this.props // const {isStory} = this.props
// if(isStory) // if(isStory)
rte = true //JSON.parse(localStorage.getItem('replyEditorData-rte') || RTE_DEFAULT); rte = true //JSON.parse(localStorage.getItem('replyEditorData-rte') || RTE_DEFAULT);
...@@ -165,21 +150,21 @@ class MediumEditor extends React.Component { ...@@ -165,21 +150,21 @@ class MediumEditor extends React.Component {
}, 300) }, 300)
} }
componentWillUpdate(nextProps, nextState) { componentWillUpdate(nextProps, nextState) {
const {fields: {body}} = nextProps const ts = this.state
const tp = this.props.fields const ns = nextState
const np = nextProps.fields
if( if(
tp.body.value !== np.body.value || ts.body.value !== ns.body.value ||
this.state.rte_value !== nextState.rte_value || ts.rte_value !== ns.rte_value ||
(np.category && tp.category.value !== np.category.value) || (ns.category && ts.category.value !== ns.category.value) ||
(np.title && tp.title.value !== np.title.value) (ns.title && ts.title.value !== ns.title.value)
) { // also prevents saving after parent deletes this information ) { // also prevents saving after parent deletes this information
const {fields: {category, title}, formId} = nextProps const {formId} = nextProps
const {category, title} = ns
const {rte, rte_value} = ns
const data = {formId} const data = {formId}
const {rte, rte_value} = nextState
data.title = title ? title.value : undefined data.title = title ? title.value : undefined
data.category = category ? category.value : undefined data.category = category ? category.value : undefined
data.body = rte ? rte_value : body.value data.body = rte ? rte_value : ns.body.value
clearTimeout(saveEditorTimeout) clearTimeout(saveEditorTimeout)
saveEditorTimeout = setTimeout(() => { saveEditorTimeout = setTimeout(() => {
// console.log('save formId', formId) // console.log('save formId', formId)
...@@ -191,33 +176,57 @@ class MediumEditor extends React.Component { ...@@ -191,33 +176,57 @@ class MediumEditor extends React.Component {
const {clearMetaData, formId} = this.props const {clearMetaData, formId} = this.props
clearMetaData(formId) clearMetaData(formId)
} }
initForm(props) {
const {isStory, type, hasCategory, fields} = props
const isEdit = type === 'edit'
const maxKb = isStory ? MAX_STORY_KB : MAX_COMMENT_KB
reactForm({
fields,
instance: this,
name: 'mediumForm',
initialValues: props.initialValues,
validation: values => ({
title: isStory && (
!values.title || values.title.trim() === '' ? 'Required' :
values.title.length > 255 ? 'Shorten title' :
null
),
category: hasCategory && validateCategory(values.category, !isEdit),
body: isBodyEmpty(this.state, values.body) ? 'Required' :
values.body.replace(/data:image\/.+?("|quot)/g, '"').length > maxKb * 1024 ? 'Exceeds maximum length ('+maxKb+'KB)' :
null
})
})
}
onChange(value, rte_serialize) { onChange(value, rte_serialize) {
// Serilize can be expensive.. Only use it for a small body or when submitting the post... // Serilize can be expensive.. Only use it for a small body or when submitting the post...
let rte_value let rte_value
if(value === '') { if(value === '') {
rte_value = EMPTY_MEDIUM_HTML rte_value = EMPTY_MEDIUM_HTML
this.props.fields.body.onChange('') this.state.body.props.onChange('')
} else if(value.length < 1000) { } else if(value.length < 1000) {
// Allow valid tags which have no body but can show something. Sanitize will strip out all other html but leave text which indicates the user is looking at something... // Allow valid tags which have no body but can show something. Sanitize will strip out all other html but leave text which indicates the user is looking at something...
const ser = sanitize(value, {allowedTags: ['img', 'iframe']}).trim() const ser = sanitize(value, {allowedTags: ['img', 'iframe']}).trim()
if(ser === '' || ser === '+'/*insert plugin*/) { if(ser === '' || ser === '+'/*insert plugin*/) {
rte_value = EMPTY_MEDIUM_HTML rte_value = EMPTY_MEDIUM_HTML
this.props.fields.body.onChange('') this.state.body.props.onChange('')
} }
} }
if(!rte_value) { if(!rte_value) {
rte_value = `<html>${value}</html>` rte_value = `<html>${value}</html>`
this.props.fields.body.onChange(rte_value) this.state.body.props.onChange(rte_value)
} }
this.setState({rte_value, rte_serialize}) this.setState({rte_value, rte_serialize})
} }
setAutoVote() { setAutoVote() {
const {isStory} = this.props const {isStory} = this.props
if(isStory) { if(isStory) {
const {autoVote} = this.props.fields const {autoVote} = this.state
const key = 'replyEditorData-autoVote-story' const key = 'replyEditorData-autoVote-story'
const autoVoteDefault = JSON.parse(localStorage.getItem(key) || true) const autoVoteDefault = JSON.parse(localStorage.getItem(key) || true)
autoVote.onChange(autoVoteDefault) autoVote.props.onChange(autoVoteDefault)
} }
} }
toggleRte(e) { toggleRte(e) {
...@@ -234,13 +243,15 @@ class MediumEditor extends React.Component { ...@@ -234,13 +243,15 @@ class MediumEditor extends React.Component {
body: this.props.body, body: this.props.body,
} }
const {onCancel, autoVoteOnChange} = this const {onCancel, autoVoteOnChange} = this
const {title, category, body, autoVote} = this.props.fields const {title, category, body, autoVote} = this.state
const { const {
reply, username, hasCategory, isStory, formId, noImage, reply, username, hasCategory, isStory, formId, noImage,
author, permlink, parent_author, parent_permlink, type, jsonMetadata, metaLinkData, author, permlink, parent_author, parent_permlink, type, jsonMetadata, metaLinkData,
state, successCallback, handleSubmit, submitting, invalid, //lastComment, state, successCallback,
} = this.props } = this.props
const {postError, loading, titleWarn, rte, rte_serialize} = this.state const {submitting, valid, handleSubmit} = this.state.mediumForm
const {postError, titleWarn, rte, rte_serialize} = this.state
const loading = submitting // tmp
const {onTitleChange} = this const {onTitleChange} = this
const errorCallback = estr => { this.setState({ postError: estr, loading: false }) } const errorCallback = estr => { this.setState({ postError: estr, loading: false }) }
const successCallbackWrapper = (...args) => { const successCallbackWrapper = (...args) => {
...@@ -282,7 +293,7 @@ class MediumEditor extends React.Component { ...@@ -282,7 +293,7 @@ class MediumEditor extends React.Component {
> >
<div className={vframe_section_shrink_class}> <div className={vframe_section_shrink_class}>
{isStory && <span> {isStory && <span>
<input type="text" {...cleanReduxInput(title)} onChange={onTitleChange} disabled={loading} <input type="text" {...title.props} onChange={onTitleChange} disabled={loading}
placeholder="Title" autoComplete="off" ref="titleRef" tabIndex={1} /> placeholder="Title" autoComplete="off" ref="titleRef" tabIndex={1} />
{titleError} {titleError}
</span>} </span>}
...@@ -301,7 +312,7 @@ class MediumEditor extends React.Component { ...@@ -301,7 +312,7 @@ class MediumEditor extends React.Component {
options={EditorOptions} options={EditorOptions}
readOnly={loading} /> readOnly={loading} />
: :
<textarea {...cleanReduxInput(body)} disabled={loading} rows={isStory ? 10 : 3} placeholder={isStory ? 'Write your story...' : 'Reply'} autoComplete="off" ref="postRef" tabIndex={2} /> <textarea {...body.props} disabled={loading} rows={isStory ? 10 : 3} placeholder={isStory ? 'Write your story...' : 'Reply'} autoComplete="off" ref="postRef" tabIndex={2} />
} }
</div> </div>
<div className={vframe_section_shrink_class}> <div className={vframe_section_shrink_class}>
...@@ -310,7 +321,7 @@ class MediumEditor extends React.Component { ...@@ -310,7 +321,7 @@ class MediumEditor extends React.Component {
<div className={vframe_section_shrink_class} style={{marginTop: '0.5rem'}}> <div className={vframe_section_shrink_class} style={{marginTop: '0.5rem'}}>
{hasCategory && <span> {hasCategory && <span>
<CategorySelector {...category} disabled={loading} isEdit={isEdit} tabIndex={3} /> <CategorySelector {...category.props} disabled={loading} isEdit={isEdit} tabIndex={3} />
<div className="error">{category.touched && category.error && category.error}&nbsp;</div> <div className="error">{category.touched && category.error && category.error}&nbsp;</div>
</span>} </span>}
</div> </div>
...@@ -318,16 +329,20 @@ class MediumEditor extends React.Component { ...@@ -318,16 +329,20 @@ class MediumEditor extends React.Component {
{postError && <div className="error">{postError}</div>} {postError && <div className="error">{postError}</div>}
</div> </div>
<div className={vframe_section_shrink_class}> <div className={vframe_section_shrink_class}>
{!loading && <button type="submit" className="button" disabled={submitting || invalid} tabIndex={4}>{isEdit ? 'Update Post' : postLabel}</button>} {!loading &&
<button type="submit" className="button" disabled={submitting}
tabIndex={4}>{isEdit ? 'Update Post' : postLabel}</button>
}
{loading && <span><br /><LoadingIndicator type="circle" /></span>} {loading && <span><br /><LoadingIndicator type="circle" /></span>}
&nbsp; {!loading && this.props.onCancel && &nbsp; {!loading && this.props.onCancel &&
<button type="button" className="secondary hollow button no-border" tabIndex={5} onClick={(e) => {e.preventDefault(); onCancel()}}>Cancel</button> <button type="button" className="secondary hollow button no-border" tabIndex={5}
onClick={(e) => {e.preventDefault(); onCancel()}}>Cancel</button>
} }
{!loading && !this.props.onCancel && <button className="button hollow no-border" tabIndex={5} disabled={submitting} onClick={onCancel}>Clear</button>} {!loading && !this.props.onCancel && <button className="button hollow no-border" tabIndex={5} disabled={submitting} onClick={onCancel}>Clear</button>}
{isStory && !isEdit && <div className="float-right"> {isStory && !isEdit && <div className="float-right">
<small onClick={autoVoteOnChange}>Upvote post</small> <small onClick={autoVoteOnChange}>Upvote post</small>
&nbsp;&nbsp; &nbsp;&nbsp;
<input type="checkbox" {...cleanReduxInput(autoVote)} onChange={autoVoteOnChange} /> <input type="checkbox" {...autoVote.props} onChange={autoVoteOnChange} />
</div>} </div>}
</div> </div>
{!loading && !rte && <div className={'Preview ' + vframe_section_shrink_class}> {!loading && !rte && <div className={'Preview ' + vframe_section_shrink_class}>
...@@ -355,17 +370,14 @@ function isBodyEmpty(state, body) { ...@@ -355,17 +370,14 @@ function isBodyEmpty(state, body) {
return false return false
} }
export default formId => reduxForm( import {connect} from 'react-redux'
// config
{form: formId},
// https://github.com/erikras/redux-form/issues/949
// Warning: Failed propType: Required prop `form` was not specified in `ReduxFormConnector(ReplyEditor)`. Check the render method of `ConnectedForm`.
export default formId => connect(
// mapStateToProps // mapStateToProps
(state, ownProps) => { (state, ownProps) => {
// const current = state.user.get('current')||Map() // const current = state.user.get('current')||Map()
const username = state.user.getIn(['current', 'username']) const username = state.user.getIn(['current', 'username'])
const fields = ['body', 'autoVote'] const fields = ['body', 'autoVote:bool']
const {type, parent_author, jsonMetadata} = ownProps const {type, parent_author, jsonMetadata} = ownProps
const isStory = /submit_story/.test(type) || ( const isStory = /submit_story/.test(type) || (
/edit/.test(type) && parent_author === '' /edit/.test(type) && parent_author === ''
...@@ -375,19 +387,6 @@ export default formId => reduxForm( ...@@ -375,19 +387,6 @@ export default formId => reduxForm(
fields.push('title') fields.push('title')
} }
if (hasCategory) fields.push('category') if (hasCategory) fields.push('category')
const isEdit = type === 'edit'
const maxKb = isStory ? MAX_STORY_KB : MAX_COMMENT_KB
const validate = values => ({
title: isStory && (
!values.title || values.title.trim() === '' ? 'Required' :
values.title.length > 255 ? 'Shorten title' :
null
),
category: hasCategory && validateCategory(values.category, !isEdit),
body: isBodyEmpty(state, values.body) ? 'Required' :
values.body.replace(/data:image\/.+?("|quot)/g, '"').length > maxKb * 1024 ? 'Exceeds maximum length ('+maxKb+'KB)' :
null
})
let {category, title, body} = ownProps let {category, title, body} = ownProps
if (/submit_/.test(type)) title = body = '' if (/submit_/.test(type)) title = body = ''
...@@ -398,7 +397,7 @@ export default formId => reduxForm( ...@@ -398,7 +397,7 @@ export default formId => reduxForm(
const metaLinkData = state.global.getIn(['metaLinkData', formId]) const metaLinkData = state.global.getIn(['metaLinkData', formId])
const ret = { const ret = {
...ownProps, ...ownProps,
fields, validate, isStory, hasCategory, username, fields, isStory, hasCategory, username,
initialValues: {title, body, category}, state, initialValues: {title, body, category}, state,
// lastComment: current.get('lastComment'), // lastComment: current.get('lastComment'),
formId, formId,
...@@ -444,6 +443,8 @@ export default formId => reduxForm( ...@@ -444,6 +443,8 @@ export default formId => reduxForm(
originalPost.category : formCategories.first() originalPost.category : formCategories.first()
const rootTag = /^[-a-z\d]+$/.test(rootCategory) ? rootCategory : null const rootTag = /^[-a-z\d]+$/.test(rootCategory) ? rootCategory : null
// if(rte_serialize) console.log('body', body)
// if(rte_serialize) console.log('body ser', rte_serialize())
if(rte_serialize) body = rte_serialize() if(rte_serialize) body = rte_serialize()
const rtags = HtmlReady(body, {mutate: false}) const rtags = HtmlReady(body, {mutate: false})
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment