From ea3ca086d434e2d5da72761f939d563ce4b88a28 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sat, 18 Feb 2017 20:23:11 -0800
Subject: [PATCH] fix topic card title character counter

---
 app/assets/stylesheets/base.scss.erb       |  5 ++
 frontend/src/components/TopicCard/Title.js | 88 +++++++++++++---------
 2 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb
index 6c6bf351..639431d2 100644
--- a/app/assets/stylesheets/base.scss.erb
+++ b/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 {
diff --git a/frontend/src/components/TopicCard/Title.js b/frontend/src/components/TopicCard/Title.js
index 77f153b4..cbc71b07 100644
--- a/frontend/src/components/TopicCard/Title.js
+++ b/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) => {
-  if (props.authorizedToEdit) {
-    return (
-      <span className="title">
-        <RIETextArea value={props.name}
-          propName="name"
-          change={props.onChange}
-          className="titleWrapper"
-          id="titleActivator"
-          classEditing="riek-editing"
-          editProps={{
-            onKeyPress: e => {
-              const ENTER = 13
-              if (e.which === ENTER) {
-                e.preventDefault()
-                props.onChange({ name: e.target.value })
-              }
-            }
-          }}
-        />
-      </span>
-    )
-  } else {
-    return (
-      <span className="title">
-        <span className="titleWrapper">
-          {props.name}
+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={this.props.name}
+            ref={textarea => { this.textarea = textarea }}
+            propName="name"
+            change={this.props.onChange}
+            className="titleWrapper"
+            id="titleActivator"
+            classEditing="riek-editing"
+            editProps={{
+              onKeyPress: e => {
+                const ENTER = 13
+                if (e.which === ENTER) {
+                  e.preventDefault()
+                  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>
-      </span>
-    )
+      )
+    } else {
+      return (
+        <span className="title">
+          <span className="titleWrapper">
+            {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