fix topic card title character counter

app/assets/stylesheets/base.scss.erb

@@ -6,6 +6,11 @@
   font-family: helvetica;
   color: #727272;
   line-height: 11px;
+  display: none;
+}
+
+.riek-editing + .nameCounter {
+  display: block;
 }
 
 .nameCounter.forMap {

frontend/src/components/TopicCard/Title.js

@@ -1,13 +1,20 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 import { RIETextArea } from 'riek'
 
-const Title = (props) => {
-  if (props.authorizedToEdit) {
+class Title extends Component {
+  nameCounterText() {
+    // for some reason, there's an error if this isn't inside a function
+    return `${this.props.name.length}/140`
+  }
+
+  render() {
+    if (this.props.authorizedToEdit) {
       return (
         <span className="title">
-        <RIETextArea value={props.name}
+          <RIETextArea value={this.props.name}
+            ref={textarea => { this.textarea = textarea }}
             propName="name"
-          change={props.onChange}
+            change={this.props.onChange}
             className="titleWrapper"
             id="titleActivator"
             classEditing="riek-editing"
@@ -16,30 +23,37 @@ const Title = (props) => {
                 const ENTER = 13
                 if (e.which === ENTER) {
                   e.preventDefault()
-                props.onChange({ name: e.target.value })
+                  this.props.onChange({ name: e.target.value })
                 }
+              },
+              onChange: e => {
+                if (!this.nameCounter) return
+                this.nameCounter.innerHTML = `${e.target.value.length}/140`
                }
             }}
           />
+          <span className="nameCounter" ref={span => { this.nameCounter = span }}>
+            {this.nameCounterText()}
+          </span>
         </span>
       )
     } else {
       return (
         <span className="title">
           <span className="titleWrapper">
-          {props.name}
+            {this.props.name}
           </span>
         </span>
       )
     }
   }
+}
 
-/*
- * Title.propTypes = {
- *   name: PropTypes.string,
- *   onChange: PropTypes.func,
- *   authorizedToEdit: PropTypes.bool
- * }
- */
+
+Title.propTypes = {
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  authorizedToEdit: PropTypes.bool
+}
 
 export default Title