WIP: entry component state

frontend/src/main/web/src/actions/glossary.js

@@ -49,6 +49,7 @@ export const GLOSSARY_CREATE_REQUEST = 'GLOSSARY_CREATE_REQUEST'
 export const GLOSSARY_CREATE_SUCCESS = 'GLOSSARY_CREATE_SUCCESS'
 export const GLOSSARY_CREATE_FAILURE = 'GLOSSARY_CREATE_FAILURE'
 
+//TODO
 export const GLOSSARY_CLEAR_MESSAGE = 'GLOSSARY_CLEAR_MESSAGE'
 
 export const glossaryUpdateIndex = createAction(GLOSSARY_UPDATE_INDEX)

frontend/src/main/web/src/components/TextInput.jsx

@@ -2,7 +2,6 @@ import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import TextareaAutosize from 'react-textarea-autosize'
 import { flattenClasses } from 'zanata-ui'
-import { debounce } from 'lodash'
 
 const classes = {
   base: {

frontend/src/main/web/src/containers/Glossary/Entry.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react'
-import { isUndefined } from 'lodash'
+import { isUndefined, debounce, cloneDeep } from 'lodash'
 
 import {
   EditableText,
@@ -27,10 +27,13 @@ const isSameRender = () => {
 }
 
 class Entry extends Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.state = {
-      showModal: false
+      showModal: false,
+      description: props.entry.description,
+      pos: props.entry.pos,
+      handleTermFieldUpdate: debounce(this.props.handleTermFieldUpdate, 100)
     }
   }
 
@@ -40,6 +43,14 @@ class Entry extends Component {
     })
   }
 
+  onTermFieldUpdate (field, event) {
+    let state = this.state
+    const value = event.target.value || ''
+    state[field] = value
+    this.setState(state)
+    this.state.handleTermFieldUpdate(field, state[field])
+  }
+
   render () {
     const {
       handleSelectTerm,
@@ -56,6 +67,10 @@ class Entry extends Component {
       isSaving
       } = this.props
 
+    if(entry.id === 2) {
+    console.info(this.state)
+    }
+
     const transContent = entry && entry.transTerm
       ? entry.transTerm.content : ''
     const transSelected = !!selectedTransLocale
@@ -127,21 +142,21 @@ class Entry extends Component {
           <EditableText
             editable={!transSelected && editable}
             editing={selected}
-            onChange={(e) => handleTermFieldUpdate('pos', e)}
+            onChange={(e) => this.onTermFieldUpdate('pos', e)}
             placeholder='Add part of speech…'
             emptyReadOnlyText='No part of speech'>
-            {entry.pos}
+            {this.state.pos}
           </EditableText>
         </TableCell>
         {!transSelected ? (
           <TableCell hideSmall>
             <EditableText
               editable={!transSelected && editable}
               editing={selected}
-              onChange={(e) => handleTermFieldUpdate('description', e)}
+              onChange={(e) => this.onTermFieldUpdate('description', e)}
               placeholder='Add a description…'
               emptyReadOnlyText='No description'>
-              {entry.description}
+              {this.state.description}
             </EditableText>
           </TableCell>
         ) : ''
@@ -170,7 +185,7 @@ class Entry extends Component {
           <div className='Op(0) row--selected_Op(1) editable:h_Op(1) Trs(eo)'>
             {displayUpdateButton && !isSaving ? (
               <ButtonLink theme={{base: {m: 'Mstart(rh)'}}}
-                          onClick={(entryId) => handleResetTerm(entryId)}>
+                          onClick={() => handleResetTerm(entry.id)}>
                 Cancel
               </ButtonLink>
             ) : ''

frontend/src/main/web/src/containers/Glossary/index.js

@@ -162,7 +162,7 @@ const mapStateToProps = (state) => {
     transLocales: stats.transLocales,
     srcLocale: stats.srcLocale,
     filterText: filter,
-    selectedTerm: selectedTerm,
+    selectedTerm,
     selectedTransLocale: query.locale,
     scrollIndex: Number.parseInt(query.index, 10),
     permission,
@@ -177,7 +177,7 @@ const mapDispatchToProps = (dispatch) => {
     dispatch,
     handleSelectTerm: (termId) => dispatch(glossarySelectTerm(termId)),
     handleTermFieldUpdate: (field, event) => {
-      dispatch(glossaryUpdateField({ field, value: event.target.value || '' }))
+      dispatch(glossaryUpdateField({ field, value: event || '' }))
     },
     handleDeleteTerm: (termId) => dispatch(glossaryDeleteTerm(termId)),
     handleResetTerm: (termId) => dispatch(glossaryResetTerm(termId)),