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 (
+
+ {(this.words = this.countWords(
+ this.props.text,
+ this.props.latestText
+ )) !== 0
+ ? this.words
+ : ""}
+
+ {this.words === 0 ? "" : this.words === 1 ? "word" : "words"}
+
+ );
+ }
+}
+
+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 (
- {
this.editorRef.current.focus({ preventScroll: false });
}}
@@ -208,6 +210,7 @@ class TextEditor extends Component {
}
})}
+
);
}