Skip to content

Instantly share code, notes, and snippets.

@malihassan20 malihassan20/TourModal.js Secret
Last active Jan 23, 2018

Embed
What would you like to do?
nextJs-tour-diary-app\components\Tour\TourModal.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Modal, Button, Form, Input, Icon, DatePicker, Upload } from 'antd';
import { convertToRaw, ContentState, EditorState, convertFromHTML } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import moment from 'moment';
import { getCurrentDate, disabledDate } from '../../Helper/Helper';
import { toggleTourModal, addTour, updateTour } from '../../store/actions';
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const currDate = moment(getCurrentDate());
class TourModal extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
content: EditorState.createEmpty(),
featured_image: '',
start_date: currDate,
end_date: currDate,
location: '',
is_new: true,
fileList: [],
modalState: false,
tourOldData: ''
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.tourOldData !== null && this.state.is_new !== false) {
this.setState({
title: nextProps.tourOldData.title,
start_date: nextProps.tourOldData.metadata.start_date,
end_date: nextProps.tourOldData.metadata.end_date,
location: nextProps.tourOldData.metadata.location,
is_new: false,
modalState: nextProps.toggleTourModalState,
tourOldData: nextProps.tourOldData
});
const blocksFromHTML = convertFromHTML(nextProps.tourOldData.content);
const edstate = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap
);
const editorNewProps = EditorState.createWithContent(edstate);
if (this.state.content !== editorNewProps) {
this.setState({
content: editorNewProps
});
}
} else {
this.setState({
modalState: nextProps.toggleTourModalState
});
}
}
onEditorStateChange = editorState => {
this.setState({
content: editorState
});
};
onKeyPress = e => {
console.log(e.keyCode === 13);
if (e.keyCode === 13) {
this.handleSubmit(e);
} else if (e.keyCode === 27) {
this.handleClose();
}
};
handleClose = () => {
this.setState({
title: '',
content: EditorState.createEmpty(),
featured_image: '',
start_date: currDate,
end_date: currDate,
location: '',
is_new: true,
fileList: [],
modalState: this.props.toggleTourModalState,
tourOldData: ''
});
this.props.form.resetFields();
this.props.onToggleTourModal();
};
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, fieldsValue) => {
if (!err) {
const rangeValue = fieldsValue.start_end_date;
const values = {
...fieldsValue,
content: draftToHtml(convertToRaw(this.state.content.getCurrentContent())),
start_date: rangeValue[0].format('YYYY-MM-DD'),
end_date: rangeValue[1].format('YYYY-MM-DD'),
tourOldData: this.state.tourOldData
};
if (this.state.is_new === true) {
this.props.onTourFormSubmit(values);
} else {
this.props.onTourUpdateFormSubmit(values);
}
this.handleClose();
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
const rangeConfig = {
initialValue:
this.props.tourOldData != null
? [moment(this.state.start_date), moment(this.state.end_date)]
: [currDate, currDate],
rules: [
{
type: 'array',
required: true,
message: 'Please select travel start and end date'
}
]
};
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
}
};
const fileProps = {
action: '',
onRemove: file => {
this.setState(({ fileList }) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList
};
});
},
beforeUpload: file => {
if (this.state.fileList.length === 0) {
this.setState(({ fileList }) => ({
fileList: [...fileList, file]
}));
return false;
}
},
fileList: this.state.fileList,
accept: 'images/*',
supportServerRender: true,
name: 'featured_image'
};
return (
<div>
<Modal
title="Add New Tour"
width="65%"
visible={this.state.modalState}
onOk={this.handleSubmit}
okText="Add"
onCancel={this.handleClose}
onKeyPress={this.onKeyPress}
>
<Form layout="vertical">
<FormItem {...formItemLayout} label={<span>Title</span>}>
{getFieldDecorator('title', {
initialValue: this.state.title,
rules: [
{
required: true,
message: 'Please enter tour name',
whitespace: true
}
]
})(<Input name="title" />)}
</FormItem>
<FormItem {...formItemLayout} label={<span>Location</span>}>
{getFieldDecorator('location', {
initialValue: this.state.location,
rules: [
{
required: true,
message: 'Please enter location (city/state)',
whitespace: true
}
]
})(<Input name="location" />)}
</FormItem>
<FormItem {...formItemLayout} label="Travel Date">
{getFieldDecorator('start_end_date', rangeConfig)(
<RangePicker disabledDate={disabledDate} name="start_end_date" />
)}
</FormItem>
<FormItem {...formItemLayout} label="Description">
{getFieldDecorator('content', {
rules: [
{
type: 'object',
required: true,
message: 'Please enter description'
}
]
})(
<Editor
name="content"
editorState={this.state.content}
image={false}
onEditorStateChange={this.onEditorStateChange}
toolbar={{
options: [
'inline',
'blockType',
'fontSize',
'fontFamily',
'list',
'textAlign',
'colorPicker',
'link'
]
}}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
/>
)}
</FormItem>
<FormItem {...formItemLayout} label="Featured Image">
{getFieldDecorator('featured_image', {
rules: [
{
required: !!this.state.is_new,
message: 'Please select featured image'
}
]
})(
<Upload name="featured_image" {...fileProps}>
<Button>
<Icon type="upload" /> Select File
</Button>
</Upload>
)}
</FormItem>
</Form>
</Modal>
</div>
);
}
}
const mapStateToProps = state => ({
toggleTourModalState: state.toggleTourModal,
tourOldData: state.tour
});
const mapDispatchToProps = dispatch => ({
onToggleTourModal: () => dispatch(toggleTourModal()),
onTourFormSubmit: payloadData => dispatch(addTour(payloadData)),
onTourUpdateFormSubmit: payloadData => dispatch(updateTour(payloadData))
});
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(TourModal));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.