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;