11import React , { useState } from "react" ;
2- import { Button , Modal , Form , Col } from "react-bootstrap" ;
2+ import { Button , Modal , Form , Col , Tabs , Tab } from "react-bootstrap" ;
33import PropTypes from "prop-types" ;
4- import { connect } from 'react-redux' ;
5- import { createPost } from '../../../../actions/dashboardAction'
4+ import { connect } from "react-redux" ;
5+ import { createPost } from "../../../../actions/dashboardAction" ;
6+ import { Editor } from "@tinymce/tinymce-react" ;
7+ import showdown from "showdown" ;
8+ import { CREATE_PROPOSAL } from "../../../../actions/types" ;
69
710const AddPostModal = ( props ) => {
811 const [ content , setContent ] = useState ( "" ) ;
12+ const [ editorText , setText ] = useState ( "" ) ;
913
1014 const onChange = ( event ) => {
1115 setContent ( event . target . value ) ;
1216 } ;
1317
18+ let converter = new showdown . Converter ( ) ;
19+
1420 const createPostClick = async ( content ) => {
1521 console . log ( "Creating the post " , content ) ;
1622 const obj = {
17- content : content
18- }
19- props . createPost ( obj )
20- props . onHide ( )
23+ content : content ,
24+ } ;
25+ props . createPost ( obj ) ;
26+ props . onHide ( ) ;
27+ } ;
28+
29+ const handleEditorChange = ( content , editor ) => {
30+ setContent ( content ) ;
31+ } ;
32+
33+ const handleEditorClose = ( ) => {
34+ setContent ( "" ) ;
35+ props . onHide ( ) ;
2136 } ;
2237
2338 return (
2439 < Modal
2540 show = { props . show }
26- onHide = { props . onHide }
41+ onHide = { handleEditorClose }
2742 animation = { true }
2843 className = "modal"
2944 centered
45+ size = "lg"
3046 >
31- < Modal . Header
32- closeButton
33- className = "modal__header"
34- style = { props . borderStyle }
35- >
47+ < Modal . Header closeButton className = "modal__header" >
3648 < Modal . Title className = "modal__title" style = { props . borderStyle } >
3749 < div className = "modal__main-title" > New Post</ div >
3850 < div className = "modal__mini-title" > POST DETAILS</ div >
3951 </ Modal . Title >
4052 </ Modal . Header >
41- < Modal . Body className = "modal__body" style = { props . borderStyle } >
42- < Form className = "modal__form" style = { props . borderStyle } >
43- < Form . Row className = "modal__row" >
44- < Form . Group
45- as = { Col }
46- controlId = "formGridEmail"
47- className = "modal__group"
48- >
49- < Form . Label className = "modal__label" > Post Description</ Form . Label >
50- < Form . Control
51- as = "textarea"
52- className = "modal__post"
53- placeholder = "What do you want to tell people about?"
54- rows = { 5 }
55- defaultValue = { content }
56- onChange = { onChange }
57- />
58- </ Form . Group >
59- </ Form . Row >
60- </ Form >
61- </ Modal . Body >
53+ < Tabs defaultActiveKey = "write" style = { { marginTop : "10px" } } >
54+ < Tab eventKey = "write" title = "Write" >
55+ < Modal . Body className = "modal__body" style = { props . borderStyle } >
56+ < Form className = "modal__form" style = { props . borderStyle } >
57+ < Form . Row className = "modal__row" >
58+ < Form . Group
59+ as = { Col }
60+ controlId = "formGridEmail"
61+ className = "modal__group"
62+ >
63+ < Editor
64+ apiKey = "lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
65+ initialValue = "Write a post..."
66+ init = { {
67+ height : 300 ,
68+ width : "100%" ,
69+ menubar : false ,
70+ plugins : [
71+ "advlist autolink lists link image charmap print preview anchor" ,
72+ "searchreplace visualblocks code fullscreen" ,
73+ "insertdatetime media table paste code help wordcount" ,
74+ "textpattern" ,
75+ ] ,
76+ textpattern_patterns : [
77+ { start : "#" , format : "h1" } ,
78+ { start : "##" , format : "h2" } ,
79+ { start : "###" , format : "h3" } ,
80+ { start : "####" , format : "h4" } ,
81+ { start : "#####" , format : "h5" } ,
82+ { start : "######" , format : "h6" } ,
83+ { start : "* " , cmd : "InsertUnorderedList" } ,
84+ { start : "- " , cmd : "InsertUnorderedList" } ,
85+ {
86+ start : "1. " ,
87+ cmd : "InsertOrderedList" ,
88+ value : { "list-style-type" : "decimal" } ,
89+ } ,
90+ {
91+ start : "1) " ,
92+ cmd : "InsertOrderedList" ,
93+ value : { "list-style-type" : "decimal" } ,
94+ } ,
95+ {
96+ start : "a. " ,
97+ cmd : "InsertOrderedList" ,
98+ value : { "list-style-type" : "lower-alpha" } ,
99+ } ,
100+ {
101+ start : "a) " ,
102+ cmd : "InsertOrderedList" ,
103+ value : { "list-style-type" : "lower-alpha" } ,
104+ } ,
105+ {
106+ start : "i. " ,
107+ cmd : "InsertOrderedList" ,
108+ value : { "list-style-type" : "lower-roman" } ,
109+ } ,
110+ {
111+ start : "i) " ,
112+ cmd : "InsertOrderedList" ,
113+ value : { "list-style-type" : "lower-roman" } ,
114+ } ,
115+ ] ,
116+ toolbar :
117+ "undo redo | formatselect | bold italic backcolor | \
118+ alignleft aligncenter alignright alignjustify | \
119+ bullist numlist outdent indent | removeformat | help" ,
120+ } }
121+ onEditorChange = { handleEditorChange }
122+ />
123+ </ Form . Group >
124+ </ Form . Row >
125+ </ Form >
126+ </ Modal . Body >
127+ </ Tab >
128+ < Tab eventKey = "preview" title = "Preview" >
129+ < Modal . Body className = "modal__body" style = { props . borderStyle } >
130+ < Form className = "modal__form" style = { props . borderStyle } >
131+ < Form . Row className = "modal__row" >
132+ < Form . Group
133+ as = { Col }
134+ controlId = "formGridEmail"
135+ className = "modal__group"
136+ >
137+ < Editor
138+ disabled = { true }
139+ value = { converter . makeHtml ( content ) }
140+ apiKey = "lvp9xf6bvvm3nkaupm67ffzf50ve8femuaztgg7rkgkmsws3"
141+ init = { {
142+ height : 300 ,
143+ width : "100%" ,
144+ menubar : false ,
145+ plugins : [
146+ "advlist autolink lists link image charmap print preview anchor" ,
147+ "searchreplace visualblocks code fullscreen" ,
148+ "insertdatetime media table paste code help wordcount" ,
149+ ] ,
150+ toolbar : false ,
151+ } }
152+ />
153+ </ Form . Group >
154+ </ Form . Row >
155+ </ Form >
156+ </ Modal . Body >
157+ </ Tab >
158+ </ Tabs >
62159 < div className = "modal__buttons" >
63- < Button onClick = { createPostClick . bind ( this , content ) } className = "modal__save" >
160+ < Button
161+ onClick = { createPostClick . bind ( this , content ) }
162+ className = "modal__save"
163+ >
64164 < span className = "modal__buttontext" > Post</ span >
65165 </ Button >
66166 < Button onClick = { props . onHide } className = "modal__cancel" >
@@ -77,11 +177,11 @@ AddPostModal.propTypes = {
77177 style : PropTypes . object ,
78178} ;
79179
80- // map state to props
180+ // map state to props
81181const mapStateToProps = ( state ) => ( {
82182 auth : state . auth ,
83183 error : state . error ,
84- dashboard : state . dashboard
85- } )
184+ dashboard : state . dashboard ,
185+ } ) ;
86186
87187export default connect ( mapStateToProps , { createPost } ) ( AddPostModal ) ;
0 commit comments