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