From f1d5e665671c43787854f30daad68c1cfcf2d925 Mon Sep 17 00:00:00 2001 From: Remilekun Salami Date: Tue, 30 Oct 2018 10:51:26 +0100 Subject: [PATCH] fix: typewriter --- .eslintrc | 3 +- package-lock.json | 178 ++------------------------------------ package.json | 2 +- src/App.js | 43 ++++++--- src/components/nav.js | 4 +- src/constants/index.js | 91 ++++++++++++++----- src/scss/main.css | 7 +- src/scss/pages/_home.scss | 12 ++- src/serviceWorker.js | 28 +++--- 9 files changed, 136 insertions(+), 232 deletions(-) diff --git a/.eslintrc b/.eslintrc index e377d8a..a66aa23 100644 --- a/.eslintrc +++ b/.eslintrc @@ -38,6 +38,7 @@ "consistent-return": "off", "react/jsx-filename-extension": "off", "guard-for-in": "off", - "import/no-unresolved": "off" + "import/no-unresolved": "off", + "no-return-assign": "off" } } diff --git a/package-lock.json b/package-lock.json index c466ff1..f461666 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1754,11 +1754,6 @@ "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=" }, - "ast-types": { - "version": "0.9.6", - "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz", - "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=" - }, "ast-types-flow": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", @@ -2244,11 +2239,6 @@ } } }, - "base62": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.8.tgz", - "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==" - }, "base64-js": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz", @@ -2988,36 +2978,6 @@ "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" }, - "commoner": { - "version": "0.10.8", - "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz", - "integrity": "sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=", - "requires": { - "commander": "^2.5.0", - "detective": "^4.3.1", - "glob": "^5.0.15", - "graceful-fs": "^4.1.2", - "iconv-lite": "^0.4.5", - "mkdirp": "^0.5.0", - "private": "^0.1.6", - "q": "^1.1.2", - "recast": "^0.11.17" - }, - "dependencies": { - "glob": { - "version": "5.0.15", - "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz", - "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=", - "requires": { - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "2 || 3", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - } - } - }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", @@ -3667,11 +3627,6 @@ "isobject": "^3.0.1" } }, - "defined": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", - "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=" - }, "del": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz", @@ -3742,22 +3697,6 @@ "debug": "^2.6.0" } }, - "detective": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz", - "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==", - "requires": { - "acorn": "^5.2.1", - "defined": "^1.0.0" - }, - "dependencies": { - "acorn": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", - "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==" - } - } - }, "diff": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", @@ -3994,15 +3933,6 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" }, - "envify": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz", - "integrity": "sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=", - "requires": { - "jstransform": "^11.0.3", - "through": "~2.3.4" - } - }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -4684,38 +4614,6 @@ "bser": "^2.0.0" } }, - "fbjs": { - "version": "0.6.1", - "resolved": "http://registry.npmjs.org/fbjs/-/fbjs-0.6.1.tgz", - "integrity": "sha1-lja3cF9bqWhNRLcveDISVK/IYPc=", - "requires": { - "core-js": "^1.0.0", - "loose-envify": "^1.0.0", - "promise": "^7.0.3", - "ua-parser-js": "^0.7.9", - "whatwg-fetch": "^0.9.0" - }, - "dependencies": { - "core-js": { - "version": "1.2.7", - "resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" - }, - "promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "requires": { - "asap": "~2.0.3" - } - }, - "whatwg-fetch": { - "version": "0.9.0", - "resolved": "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz", - "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA=" - } - } - }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -7883,38 +7781,6 @@ "verror": "1.10.0" } }, - "jstransform": { - "version": "11.0.3", - "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz", - "integrity": "sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=", - "requires": { - "base62": "^1.1.0", - "commoner": "^0.10.1", - "esprima-fb": "^15001.1.0-dev-harmony-fb", - "object-assign": "^2.0.0", - "source-map": "^0.4.2" - }, - "dependencies": { - "esprima-fb": { - "version": "15001.1.0-dev-harmony-fb", - "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz", - "integrity": "sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=" - }, - "object-assign": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz", - "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=" - }, - "source-map": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", - "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", - "requires": { - "amdefine": ">=0.0.4" - } - } - } - }, "jsx-ast-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz", @@ -11815,23 +11681,12 @@ "react-lifecycles-compat": "^3.0.4" } }, - "react-typewriter": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/react-typewriter/-/react-typewriter-0.4.1.tgz", - "integrity": "sha1-1BDs+NXKrmLApiWCpubNIbOh+Tw=", + "react-typist": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-typist/-/react-typist-2.0.4.tgz", + "integrity": "sha512-2sCW7BcEQJILdPtG4tItCPv3RKVXWEDnfiIWhmbkAf4733kEkrvc9KkOCyZ/J8BeATNYF5wQSrSUY93ACA9Bjg==", "requires": { - "react": "^0.14.7" - }, - "dependencies": { - "react": { - "version": "0.14.9", - "resolved": "https://registry.npmjs.org/react/-/react-0.14.9.tgz", - "integrity": "sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=", - "requires": { - "envify": "^3.0.0", - "fbjs": "^0.6.1" - } - } + "prop-types": "^15.5.10" } }, "read-pkg": { @@ -12047,24 +11902,6 @@ "util.promisify": "^1.0.0" } }, - "recast": { - "version": "0.11.23", - "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz", - "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=", - "requires": { - "ast-types": "0.9.6", - "esprima": "~3.1.0", - "private": "~0.1.5", - "source-map": "~0.5.0" - }, - "dependencies": { - "esprima": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", - "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=" - } - } - }, "recursive-readdir": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz", @@ -14052,11 +13889,6 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, - "ua-parser-js": { - "version": "0.7.19", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", - "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" - }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", diff --git a/package.json b/package.json index ee8a5cb..36e672d 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "react-dom": "^16.6.0", "react-scripts": "2.0.5", "react-select": "^2.1.1", - "react-typewriter": "^0.4.1" + "react-typist": "^2.0.4" }, "scripts": { "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", diff --git a/src/App.js b/src/App.js index bf97226..0073e92 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { Footer, Nav } from 'components'; -import TypeWriter from 'react-typewriter'; +import Typist from 'react-typist'; import { optionsFirst, optionsSecond, optionsThird } from 'constants/index'; import Select from 'react-select'; import classnames from 'classnames'; @@ -51,12 +51,14 @@ class App extends Component { onSecondChange = (selectedOption) => { if (selectedOption.output) { - this.setState({ - secondOption: selectedOption, - showThird: false, - output: selectedOption.output, - usage: selectedOption.usage, - thirdOption: null + this.setState({ output: '', usage: '' }, () => { + this.setState({ + secondOption: selectedOption, + showThird: false, + output: selectedOption.output, + usage: selectedOption.usage, + thirdOption: null + }); }); } else { this.setState({ @@ -70,10 +72,12 @@ class App extends Component { }; onThirdChange = (selectedOption) => { - this.setState({ - thirdOption: selectedOption, - output: selectedOption.output, - usage: selectedOption.usage + this.setState({ output: '', usage: '' }, () => { + this.setState({ + thirdOption: selectedOption, + output: selectedOption.output, + usage: selectedOption.usage + }); }); }; @@ -143,14 +147,27 @@ class App extends Component {

Usage

- {usage} +

git config --global user.name "Sam Smith"

+

git config --global user.name "Sam Smith"

+ + 
+                    {usage.length ? (
+                      
+                        {usage}
+                      
+                    ) : null}
+
{output.length ? (

Output

- {output} + 
+                        
+                          {output}
+                        
+
) : null} diff --git a/src/components/nav.js b/src/components/nav.js index 2f40329..0e4d78a 100644 --- a/src/components/nav.js +++ b/src/components/nav.js @@ -16,7 +16,7 @@ class Nav extends React.Component { const { selectedOption } = this.state; return (