Merge pull request #7 from WarFox/feature/word-count-plus

The big rewrite in React and Redux 💥 💪 💪 ✈️
WarFox · Feb 26, 2018 · e43159f · e43159f
2 parents 2a5ffcf + 60c649b
commit e43159f
Show file tree

Hide file tree

Showing 24 changed files with 7,362 additions and 161 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,12 +1,10 @@
 language: node_js
 node_js:
-- '0.12'
-before_script:
-- npm install -g gulp
+  - '6.11.0'
 branches:
   only:
   - master
-script: gulp && ls dist
+script: yarn build
 deploy:
   provider: s3
   skip_cleanup: true
@@ -15,8 +13,8 @@ deploy:
     secure: WfWoAWzOpISW88V0ym6qCtw8wG4w8ej/owS8ai7SbeGj1PeCD9CNRRGMzjH4oUq0dPBJWJEAPAWjTLDRelX/ekO1+KaHaR88qqwBuvM0Jp+UO5n9U5ArMCgHrOsA1Y67fMY+qwgibyV199rZNou9XXtg6PYKLcoe1ZEFZl3Tf3k=
   bucket: deepumohan.com
   region: eu-west-1
-  local-dir: dist/
-  upload-dir: "/projects/word-count/"
+  local-dir: build/
+  upload-dir: "/projects/word-count-plus/"
   on:
     repo: WarFox/word-count
 env:

diff --git a/README.md b/README.md
@@ -9,3 +9,5 @@ Capabilities include:
 Demo : https://deepumohan.com/projects/word-count/
 
 jsFiddle: https://jsfiddle.net/deepumohanp/jZeKu/
+
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
diff --git a/package.json b/package.json
@@ -1,24 +1,22 @@
 {
-    "private": true,
-    "author": "Deepu Mohan Puthrote",
-    "engines": {
-        "node": ">= 0.12",
-        "npm": ">= 2.1"
-    },
-    "scripts": {
-        "build": "gulp"
-    },
-    "devDependencies": {
-        "babelify": "^6.2.0",
-        "browserify": "^11.0.0",
-        "del": "^1.2.0",
-        "gulp": "^3.9.0",
-        "gulp-clean-css": "^2.3.2",
-        "gulp-plumber": "^1.0.1",
-        "gulp-rename": "^1.2.2",
-        "gulp-uglify": "1.2.0",
-        "gulp-util": "^3.0.6",
-        "vinyl-buffer": "^1.0.0",
-        "vinyl-source-stream": "^1.1.0"
-    }
+  "name": "word-count-plus",
+  "version": "2.0.0",
+  "author": "Deepu Mohan Puthrote",
+  "homepage": "https://deepumohan.com/projects/word-count-plus",
+  "private": true,
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.7",
+    "react-scripts": "1.1.0",
+    "recharts": "^1.0.0-beta.10",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
 }
diff --git a/public/css/style.css b/public/css/style.css
diff --git a/public/images/logo.svg b/public/images/logo.svg
diff --git a/public/images/redux-spaces-avatar.png b/public/images/redux-spaces-avatar.png
diff --git a/public/index.html b/public/index.html
@@ -1,62 +1,40 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Copy &amp; Paste, Word &amp; Character counter using Javascript, JQuery</title>
-        <meta charset="utf-8" />
-        <meta name="description" content="Copy &amp; Paste Words and Character counter using Javascript, JQuery" />
-        <meta name="keywords" content="Javascript,JQuery,Word Count,Counter,Character counter,Character count,Word Counter,Deepu,Mohan,Puthrote,Deepu Mohan, Deepu Puthrote, Mohan Puthrote, Deepu Mohan Puthrote" />
-        <meta name="author" content="Deepu Mohan Puthrote" />
-        <meta name="copyright" content="Deepu Mohan Puthrote" />
-        <meta name="classification" content="public" />
-        <meta name="resource-type" content="document" />
+<html lang="en">
 
-        <link href="css/style.min.css" rel="stylesheet" type="text/css"/>
+<head>
+  <title>Copy &amp; Paste, Word &amp; Character counter and Statistics app React and Redux</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="Copy &amp; Paste Words and Character counter using Javascript, React" />
+  <meta name="keywords" content="Javascript,React,Word Count,Counter,Character counter,Character count,Word Counter,Deepu,Mohan,Puthrote,Deepu Mohan, Deepu Puthrote, Mohan Puthrote, Deepu Mohan Puthrote" />
+  <meta name="author" content="Deepu Mohan Puthrote" />
+  <meta name="copyright" content="Deepu Mohan Puthrote" />
+  <meta name="classification" content="public" />
+  <meta name="resource-type" content="document" />
+  <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+</head>
+
+<body>
+  <noscript>
+      You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.0/dist/semantic.min.css" />
+</body>
 
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
-        <script type="text/javascript" src="js/script.min.js"></script>
-    </head>
-    <body>
-        <h1>Word Counter using Javascript, jQuery</h1>
-        <div class="sleek">
-            <h1>Paste or type your text to the textbox below to get the word and character count</h1>
-            <div class="sleek-body">
-                <ul>
-                    <li>
-                        <div class="result"><h2><span id="wordCount">0</span></h2></div>
-                        <div class="desc"><h2>Words</h2></div>
-                    </li>
-                    <li>
-                        <div class="result"><h2><span id="totalChars">0</span></h2></div>
-                        <div class="desc"><h2>Characters<br/>(including trails)</h2></div>
-                    </li>
-                    <li>
-                        <div class="result"><h2><span id="charCount">0</span></h2></div>
-                        <div class="desc"><h2>Characters<br/>(excluding trails)</h2></div>
-                    </li>
-                    <li>
-                        <div class="result"><h2><span id="charCountNoSpace">0</span></h2></div>
-                        <div class="desc"><h2>Characters<br/>(excluding all spaces)</h2></div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <div id="container">
-            <textarea id='text'></textarea>
-        </div>
-        <br/>
-        <footer>
-            <ul>
-                <li>
-                    <a href="http://www.w3.org/html/logo/">
-                        <img src="images/HTML5_Badge_32.png" width="32" height="32" alt="HTML5 Powered" title="HTML5 Powered"/>
-                    </a>
-                </li>
-                <li>
-                    <a href="https://github.com/WarFox/word-count/">
-                        <img src="images/github.png" alt="Word count @ github" title="Word Count @ github"/>
-                    </a>
-                </li>
-            </ul>
-       </footer>
-    </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Word Count Plus",
+  "name": "Word Count and Statistics app",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,70 @@
+import React from "react";
+import {
+  Footer,
+  Header,
+  TextArea,
+  TinyLineChart,
+  DisplayStatistic
+} from "./components";
+import { connect } from "react-redux";
+
+class App extends React.Component {
+  render() {
+    const { counts } = this.props;
+
+    return (
+      <div className="ui container">
+        <Header />
+
+        <div className="ui mini statistics">
+          <DisplayStatistic value={counts.wordCount}>Words</DisplayStatistic>
+          <DisplayStatistic value={counts.totalChars}>
+            Chars <br />(including trails)
+          </DisplayStatistic>
+          <DisplayStatistic value={counts.charCount}>
+            Chars <br />(excluding trails)
+          </DisplayStatistic>
+          <DisplayStatistic value={counts.charCountNoSpace}>
+            Chars <br />(no spaces)
+          </DisplayStatistic>
+          <DisplayStatistic value={counts.alphabetsCount}>
+            Alpbahets
+          </DisplayStatistic>
+          <DisplayStatistic value={counts.numbersCount}>
+            Numbers
+          </DisplayStatistic>
+          <DisplayStatistic value={counts.nonAlphaNumeric}>
+            Non AlphaNumeric
+          </DisplayStatistic>
+          <DisplayStatistic value={280 - counts.charCount}>
+            Tweet - 280 max
+          </DisplayStatistic>
+        </div>
+
+        <TinyLineChart
+          width={1100}
+          height={100}
+          data={counts.chartData}
+          dataKey="word"
+        />
+
+        <div className="ui divider" />
+        <TextArea />
+        <div className="ui divider" />
+        <Footer />
+
+        <ul className="ui list">
+          <li className="item">Word density</li>
+          <li className="item">Average word length</li>
+          <li className="item">Longest word</li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return state;
+};
+
+export default connect(mapStateToProps)(App);
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,8 @@
+
+export const refrestCount = (text, changeType) => {
+  return {
+    type: "REFRESH_COUNT",
+    text,
+    changeType
+  };
+};
diff --git a/src/components/DisplayStatistic.jsx b/src/components/DisplayStatistic.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const DisplayStatistic = ({value, children}) => {
+  return (
+    <div className="statistic">
+      <div className="value">{value}</div>
+      <div className="label">{children}</div>
+    </div>
+  );
+};
+
+export default DisplayStatistic;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,5 @@ Capabilities include:
		Demo : https://deepumohan.com/projects/word-count/

		jsFiddle: https://jsfiddle.net/deepumohanp/jZeKu/

		[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)