Show remain chars counter for tweet

src/actions/texts.js

@@ -1,6 +1,8 @@
 export const CLEAR_TEXT = 'CLEAR_TEXT';
 export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
 export const SET_TEXT = 'SET_TEXT';
+export const FOCUS_EDITOR = 'FOCUS_EDITOR';
+export const BLUR_EDITOR = 'BLUR_EDITOR';
 
 export const clearText = () => {
   return { type: CLEAR_TEXT }
@@ -13,3 +15,11 @@ export const setSearchQuery = (query, account) => {
 export const setText = (text) => {
   return { type: SET_TEXT, text }
 }
+
+export const focusEditor = () => {
+  return { type: FOCUS_EDITOR }
+}
+
+export const blurEditor = () => {
+  return { type: BLUR_EDITOR }
+}

src/components/editor.js

@@ -3,9 +3,12 @@ import IconContainer        from '../containers/icon-container';
 
 export default class Editor extends React.Component {
   static propTypes = {
+    active:            PropTypes.bool.isRequired,
     activeAccount:     PropTypes.object,
     text:              PropTypes.string.isRequired,
     inReplyTo:         PropTypes.string,
+    onBlur:            PropTypes.func.isRequired,
+    onFocus:           PropTypes.func.isRequired,
     onTextareaChanged: PropTypes.func.isRequired,
     onTextareaKeyDown: PropTypes.func.isRequired,
   }
@@ -23,8 +26,13 @@ export default class Editor extends React.Component {
             onChange={this.props.onTextareaChanged}
             onKeyDown={this.props.onTextareaKeyDown}
             value={this.props.text}
+            onFocus={this.props.onFocus}
+            onBlur={this.props.onBlur}
           />
           <div className='in_reply_to' id='0' />
+          <span className={`tweet_counter ${this.props.active ? 'active' : ''} ${this.props.text.length > 140 ? 'minus' : ''}`}>
+            {140 - this.props.text.length}
+          </span>
         </form>
       </div>
     );

src/containers/editor-container.js

@@ -7,6 +7,7 @@ import { connect }   from 'react-redux';
 
 const mapStateToProps = (state) => {
   return {
+    active:        state.editorFocused,
     activeAccount: state.accounts[state.activeAccountIndex],
     text:          state.text,
     inReplyTo:     state.inReplyTo,
@@ -24,16 +25,20 @@ const mapDispatchToProps = (dispatch, props) => {
     onTextareaChanged: (event) => {
       dispatch(Actions.setText(event.target.value));
     },
+    onFocus: () => {
+      dispatch(Actions.focusEditor());
+    },
+    onBlur: () => {
+      dispatch(Actions.blurEditor());
+    }
   }
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { onTextareaChanged } = dispatchProps;
-
   return {
     ...ownProps,
     ...stateProps,
-    onTextareaChanged,
+    ...dispatchProps,
     onTextareaKeyDown: (event) => {
       if (event.keyCode === Keycode.ENTER && !event.altKey && !event.shiftKey) {
         event.preventDefault();

src/index.scss

@@ -12,6 +12,7 @@ $retweeted_icon_size: 34px;
 $icon_overlay_size: 8px;
 $icon_column: $icon_size + $tweet_padding * 2;
 $tweets_header_height: 34px;
+$red: #d40d12;
 $grey: #999;
 $dark_grey: #555;
 $white: #fff;
@@ -88,15 +89,32 @@ body {
     box-shadow: 0 1px 3px 1px rgba(0,0,0,0.06);
 
     .tweet_editor {
-      width: 100%;
-      height: 100%;
+      width: calc(100% - 28px);
+      height: $editor_height;
       resize: none;
       border: 0;
       outline: 0;
-      padding: 4px 8px 4px 41px;
+      padding: 4px 0 4px 41px;
       font-size: 13px;
     }
 
+    .tweet_counter {
+      position: absolute;
+      top: 2px;
+      right: 4px;
+      color: $grey;
+      font-weight: bold;
+      display: none;
+
+      &.active {
+        display: inline-block;
+      }
+
+      &.minus {
+        color: $red;
+      }
+    }
+
     .account_wrapper {
       position: relative;
     }

src/reducers/editor-focused.js

@@ -0,0 +1,12 @@
+import Actions from '../actions';
+
+export const editorFocused = (state = false, action) => {
+  switch (action.type) {
+    case Actions.FOCUS_EDITOR:
+      return true;
+    case Actions.BLUR_EDITOR:
+      return false;
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -2,26 +2,28 @@ import { combineReducers } from 'redux';
 import { accounts } from './accounts';
 import { activeAccountIndex } from './active-account-index';
 import { activeListIdByUserId } from './active-list-id-by-user-id';
+import { editorFocused } from './editor-focused';
 import { inReplyTo } from './in-reply-to';
 import { listsByUserId } from './lists-by-user-id';
 import { searchQueryByUserId } from './search-query-by-user-id';
-import { selectedTweetIdsByUserId } from './selected-tweet-ids-by-user-id';
 import { selectedTabByUserId } from './selected-tab-by-user-id';
-import { text } from './text';
+import { selectedTweetIdsByUserId } from './selected-tweet-ids-by-user-id';
 import { tabsByUserId } from './tabs-by-user-id';
+import { text } from './text';
 import { userByUserId } from './user-by-user-id';
 
 const rootReducer = combineReducers({
   accounts,
   activeAccountIndex,
   activeListIdByUserId,
+  editorFocused,
   inReplyTo,
   listsByUserId,
   searchQueryByUserId,
   selectedTabByUserId,
   selectedTweetIdsByUserId,
-  text,
   tabsByUserId,
+  text,
   userByUserId,
 });