Merge pull request #124 from DemocraciaEnRed/develop

Develop
DemocraciaEnRed · Jul 28, 2021 · 694b830 · 694b830
2 parents 216f8d3 + a0684c8
commit 694b830
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 8 deletions.
diff --git a/components/comment-form/component.js b/components/comment-form/component.js
@@ -80,7 +80,9 @@ class CommentForm extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      value: ''
+      value: '',
+      disableSubmit : false,
+      messsage: ''
     }
 
     this.handleChange = this.handleChange.bind(this)
@@ -93,6 +95,7 @@ class CommentForm extends Component {
 
   handleSubmit (event) {
     event.preventDefault()
+    this.setState({disableSubmit: true});
     fetch(`/api/v1/documents/5bb7bab09a5ac91dffa9e884/comments`, {
       method: 'POST',
       body: {
@@ -101,17 +104,24 @@ class CommentForm extends Component {
       }
     })
       .then((res) => {
-        if (res.status === 200) {
-        }
+        let message = res.status === 200 ? "Comentario enviado con exito" : "Error al enviar el comentario";
+        this.setState({
+          disableSubmit: false,
+          message
+        });
       })
       .catch((err) => {
         console.error(err)
+        this.setState({
+          disableSubmit: false,
+          message: "Error al enviar el comentario"
+        });
       })
   }
 
   render () {
     return (
-      <CommentFormContainer onSubmit={this.handleSubmit}>
+      <CommentFormContainer>
         <CommentFormHeader>Agregar comentario</CommentFormHeader>
         <CommentFormContent>
           <UserAvatarLogged
@@ -123,8 +133,9 @@ class CommentForm extends Component {
             value={this.state.value}
             onChange={this.handleChange} />
         </CommentFormContent>
-        <CommentFormFooter onClick={this.handleSubmit}>Enviar comentario </CommentFormFooter>
-
+        <CommentFormFooter disabled={disableSubmit} onClick={this.handleSubmit}>Enviar comentario </CommentFormFooter>
+        <br/>
+        <p>{message}</p>
       </CommentFormContainer>
     )
   }

diff --git a/components/project-text-edit/icons.js b/components/project-text-edit/icons.js
@@ -80,3 +80,20 @@ export const TitleIcon = (props) => (
     </g>
   </IconSvg>
 )
+
+export const LinkIcon = (props) => (
+  <IconSvg {...props}>
+    <g fill='none' fillRule='evenodd'>
+      <path d='M0 0h24v24H0V0z' fill='none'/>
+      <path fill='#FFF' d='M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z'/>
+    </g>
+  </IconSvg>
+)
+export const UnLinkIcon = (props) => (
+  <IconSvg {...props}>
+    <g fill='none' fillRule='evenodd'>
+      <path d='M0 0h24v24H0V0z' fill='none'/>
+      <path fill='#FFF'  d='M14.39 11L16 12.61V11zM17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.27-.77 2.37-1.87 2.84l1.4 1.4C21.05 15.36 22 13.79 22 12c0-2.76-2.24-5-5-5zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73L13 15.27V17h1.73l4.01 4.01 1.41-1.41L3.41 2.86 2 4.27z'/>
+    </g>
+  </IconSvg>
+)
diff --git a/components/project-text-edit/toolbar.js b/components/project-text-edit/toolbar.js
@@ -6,7 +6,9 @@ import {
   BoldIcon,
   ItalicIcon,
   UnderlineIcon,
-  TitleIcon
+  TitleIcon,
+  LinkIcon,
+  UnLinkIcon
 } from './icons'
 
 const Container = styled.div`
@@ -31,6 +33,8 @@ export default class Toolbar extends Component {
         {this.renderMarkButton(BoldIcon, 'bold')}
         {this.renderMarkButton(ItalicIcon, 'italic')}
         {this.renderMarkButton(UnderlineIcon, 'underlined')}
+        {this.renderLinkButton(LinkIcon, 'link')}
+
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         {this.renderBlockButton(TitleIcon, 'title')}
       </Container>
@@ -42,7 +46,20 @@ export default class Toolbar extends Component {
       active={hasMark(this.props.editor.value, type)}
       onMouseDown={(evt) => this.handleMarkClick(evt, type)} />
   )
-
+  renderLinkButton = (Button, type) =>(
+    <Button 
+      onMouseDown={(evt)=> this.createLink(evt, type)}
+    />
+  )
+  createLink = (event) => {
+    event.preventDefault()
+    const url = window.prompt('Enter the URL of the link:')
+    if (!url) return
+    insertLink(url)
+  }
+  insertLink = (url) => {
+    console.log(this.props.editor.selection)
+  }
   handleMarkClick = (evt, type) => {
     evt.preventDefault()
     this.props.editor.toggleMark(type)