From 4a36f61d3d70a2c064a4ea0cf7fcc073ac89bf37 Mon Sep 17 00:00:00 2001
From: Pavel <paveliv@gmail.com>
Date: Tue, 2 Jul 2019 20:44:30 +0300
Subject: [PATCH] Wordcount statistics added

---
 src/components/Statistics.js | 62 ++++++++++++++++++++++++++++++++++++
 src/components/TextEditor.js |  7 ++--
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Statistics.js

diff --git a/src/components/Statistics.js b/src/components/Statistics.js
new file mode 100644
index 0000000..ee18e1d
--- /dev/null
+++ b/src/components/Statistics.js
@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import styled from "styled-components";
+import { Button } from "rebass";
+
+function mapStateToProps(state) {
+	return {
+		text: state.text,
+		latestText: state.latestText
+	};
+}
+
+const StatisticsButton = styled(Button)`
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	padding-left: 100%;
+	opacity: 0;
+	&:hover {
+		opacity: 0.25;
+	}
+`;
+
+class Statistics extends Component {
+	words = 0;
+	countWords = (text, latestText) => {
+		return (
+			text
+				.replace(/\n/g, " ")
+				.replace(/ +/g, " ")
+				.split(" ").length -
+			1 +
+			(latestText ? 1 : 0)
+		);
+	};
+	render() {
+		return (
+			<StatisticsButton
+				disabled
+				bg="inherit"
+				color="black"
+				border="0"
+				borderRadius={0}
+				fontSize={1}
+			>
+				{(this.words = this.countWords(
+					this.props.text,
+					this.props.latestText
+				)) !== 0
+					? this.words
+					: ""}
+				&nbsp;
+				{this.words === 0 ? "" : this.words === 1 ? "word" : "words"}
+			</StatisticsButton>
+		);
+	}
+}
+
+export default connect(
+	mapStateToProps,
+	null
+)(Statistics);
diff --git a/src/components/TextEditor.js b/src/components/TextEditor.js
index 625b374..cabd833 100644
--- a/src/components/TextEditor.js
+++ b/src/components/TextEditor.js
@@ -5,6 +5,7 @@ import styled from "styled-components";
 import AutosizeInput from "./AutosizeInput";
 
 import Clipboard from "../includes/Clipboard";
+import Statistics from "./Statistics";
 
 import { updateText, updateLatestText, updateTitle } from "../store/actions";
 
@@ -141,7 +142,7 @@ class TextEditor extends Component {
 			}
 
 			if (keyPressed === 13) {
-				latestText += "\n";
+				latestText = latestText.trimRight() + "\n";
 				paragpraphIncerement++;
 			}
 
@@ -160,7 +161,8 @@ class TextEditor extends Component {
 
 	render() {
 		return (
-			<Wrapper id="TextEditor"
+			<Wrapper
+				id="TextEditor"
 				onClick={() => {
 					this.editorRef.current.focus({ preventScroll: false });
 				}}
@@ -208,6 +210,7 @@ class TextEditor extends Component {
 						}
 					})}
 				</PreviewWrapper>
+				<Statistics />
 			</Wrapper>
 		);
 	}