├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
└── src
    ├── App.js
    ├── details
        ├── Details.js
        ├── video
        │   └── Video.js
        └── wiki
        │   └── Wiki.js
    ├── header
        └── Header.js
    ├── index.css
    ├── index.js
    ├── main
        ├── Main.js
        ├── input
        │   └── Input.js
        └── options
        │   └── Options.js
    ├── registerServiceWorker.js
    └── results
        ├── Results.js
        └── item
            └── ResultItem.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .vscode
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "8"
 4 | dist: trusty
 5 | sudo: false
 6 | git:
 7 |   depth: 1
 8 | cache:
 9 |   directories:
10 |     - "node_modules"
11 |     - "$HOME/.npm"
12 | install:
13 |   - npm install
14 | script:
15 |   - npm run build
16 | notifications:
17 |   email:
18 |     recipients:
19 |       - alexperezdev@gmail.com


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018-present Alex Perez (alxpez)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">WOYE</h1>
 2 | <p align="center"><strong>W</strong>hat's <strong>O</strong>n <strong>Y</strong>our <strong>E</strong>ars</p>
 3 | <p align="center">&gt; Insert plain-text, get information &lt;</p>
 4 | 
 5 | </br>
 6 | 
 7 | <p align="center">
 8 |   <a href="https://github.com/facebook/react">
 9 |     <img src="https://img.shields.io/badge/react-%5E16.4-61dafb.svg?longCache=true" alt="reactjs">
10 |   </a>
11 |   <a href="https://github.com/alxpez/woye/blob/master/LICENSE">
12 |     <img src="https://img.shields.io/badge/license-MIT-green.svg?longCache=true" alt="MIT">
13 |   </a>
14 |   <a href="https://travis-ci.com/alxpez/woye">
15 |     <img src="https://travis-ci.com/alxpez/woye.svg?branch=master" alt="travis-ci">
16 |   </a>
17 |   <a href="https://www.codacy.com/app/alxpez/woye">
18 |     <img src="https://api.codacy.com/project/badge/Grade/09572d9c827940f5a31e418e09ef33a5" alt="codacy">
19 |   </a>
20 | </p>
21 | 
22 | <p align="center">
23 |   <a href="https://github.com/alxpez/woye#donate">
24 |     <img src="https://img.shields.io/badge/%E2%9D%A4%EF%B8%8Fdonate-red.svg?longCache=true" alt="donate">
25 |   </a>
26 | </p>
27 | 
28 | 
29 | ## Why?
30 | During my trips, I tend to ask everyone I meet to share their favourite bands/artists... it happens that usually I don't have an Internet connection, and also happens that by the time I go to check out the list of suggestions, people had added stuff in their own way (aka. there's no one single format for the information gathered).
31 | 
32 | After some years, I came across one of these lists with hundreds of items, so I decided to build something to help me with the task of sorting all of it.
33 | 
34 | And here we are.
35 | 
36 | ## What?
37 | Simple. Insert plain text (could be a list of items or a single one) and get information from Wikipedia and the most relevant video from Youtube from each item.
38 | 
39 | Originally it was thought for music, but it's usefull for any other kind of information: Movies, plants, animals, places, TV-shows, games, products... even mixed lists of elements.
40 | 
41 | ## Roadmap
42 | 
43 | - [x] Parse plain text into an array of elements
44 | - [x] Display Wikipedia page (if available)
45 | - [x] Fetch most relevant video from Youtube (based on the searched item)
46 | - [x] Allow delimiters edition/customization (for parsing plain text input)
47 | - [ ] Implement locale selection (for more specific results by country/language)
48 | - [ ] Add category selection (more accurate search when input items from same category)
49 | - [x] Improve user interface and usability (provide more info about WOYE)
50 | 
51 | ## Donate
52 | 
53 | Do you like what I do?
54 | 
55 | I develop projects like this one (checkout [@vuegg](https://github.com/vuegg/vuegg) my other child) on my spare time, after work hours, homie weekends... or during summer holidays like in this case.
56 | 
57 | Contribution is the most desirable help always, but for those with no much time in hands that still want contribute somehow...
58 | 
59 | <a href="https://www.patreon.com/bePatron?u=10700791" target="_blank"><img src="https://raw.githubusercontent.com/vuegg/vuegg-assets/master/patreon.png" alt="Become a Patron" style="height:35px;width:auto"/></a> OR <a href="https://www.buymeacoffee.com/alxpez" target="_blank"><img src="https://raw.githubusercontent.com/vuegg/vuegg-assets/master/buymeacoffee.png" alt="Buy Me A Coffee" style="height:35px;width:auto"></a>
60 | 
61 | Your donation will help me to stay awake during those hours I should be sleeping. And make me really happy in general.
62 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const path = require('path');
 3 | const paths = require('./paths');
 4 | 
 5 | // Make sure that including paths.js after env.js will read .env variables.
 6 | delete require.cache[require.resolve('./paths')];
 7 | 
 8 | const NODE_ENV = process.env.NODE_ENV;
 9 | if (!NODE_ENV) {
10 |   throw new Error(
11 |     'The NODE_ENV environment variable is required but was not specified.'
12 |   );
13 | }
14 | 
15 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
16 | var dotenvFiles = [
17 |   `${paths.dotenv}.${NODE_ENV}.local`,
18 |   `${paths.dotenv}.${NODE_ENV}`,
19 |   // Don't include `.env.local` for `test` environment
20 |   // since normally you expect tests to produce the same
21 |   // results for everyone
22 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
23 |   paths.dotenv,
24 | ].filter(Boolean);
25 | 
26 | // Load environment variables from .env* files. Suppress warnings using silent
27 | // if this file is missing. dotenv will never modify any environment variables
28 | // that have already been set.  Variable expansion is supported in .env files.
29 | // https://github.com/motdotla/dotenv
30 | // https://github.com/motdotla/dotenv-expand
31 | dotenvFiles.forEach(dotenvFile => {
32 |   if (fs.existsSync(dotenvFile)) {
33 |     require('dotenv-expand')(
34 |       require('dotenv').config({
35 |         path: dotenvFile,
36 |       })
37 |     );
38 |   }
39 | });
40 | 
41 | // We support resolving modules according to `NODE_PATH`.
42 | // This lets you use absolute paths in imports inside large monorepos:
43 | // https://github.com/facebookincubator/create-react-app/issues/253.
44 | // It works similar to `NODE_PATH` in Node itself:
45 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
46 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
47 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
48 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
49 | // We also resolve them to make sure all tools using them work consistently.
50 | const appDirectory = fs.realpathSync(process.cwd());
51 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
52 |   .split(path.delimiter)
53 |   .filter(folder => folder && !path.isAbsolute(folder))
54 |   .map(folder => path.resolve(appDirectory, folder))
55 |   .join(path.delimiter);
56 | 
57 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
58 | // injected into the application via DefinePlugin in Webpack configuration.
59 | const REACT_APP = /^REACT_APP_/i;
60 | 
61 | function getClientEnvironment(publicUrl) {
62 |   const raw = Object.keys(process.env)
63 |     .filter(key => REACT_APP.test(key))
64 |     .reduce(
65 |       (env, key) => {
66 |         env[key] = process.env[key];
67 |         return env;
68 |       },
69 |       {
70 |         // Useful for determining whether we’re running in production mode.
71 |         // Most importantly, it switches React into the correct mode.
72 |         NODE_ENV: process.env.NODE_ENV || 'development',
73 |         // Useful for resolving the correct path to static assets in `public`.
74 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
75 |         // This should only be used as an escape hatch. Normally you would put
76 |         // images into the `src` and `import` them in code to get their paths.
77 |         PUBLIC_URL: publicUrl,
78 |       }
79 |     );
80 |   // Stringify all values so we can feed into Webpack DefinePlugin
81 |   const stringified = {
82 |     'process.env': Object.keys(raw).reduce((env, key) => {
83 |       env[key] = JSON.stringify(raw[key]);
84 |       return env;
85 |     }, {}),
86 |   };
87 | 
88 |   return { raw, stringified };
89 | }
90 | 
91 | module.exports = getClientEnvironment;
92 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | // This is a custom Jest transformer turning style imports into empty objects.
 2 | // http://facebook.github.io/jest/docs/en/webpack.html
 3 | 
 4 | module.exports = {
 5 |   process() {
 6 |     return 'module.exports = {};';
 7 |   },
 8 |   getCacheKey() {
 9 |     // The output is always the same.
10 |     return 'cssTransform';
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | // This is a custom Jest transformer turning file imports into filenames.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process(src, filename) {
 8 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | const url = require('url');
 4 | 
 5 | // Make sure any symlinks in the project folder are resolved:
 6 | // https://github.com/facebookincubator/create-react-app/issues/637
 7 | const appDirectory = fs.realpathSync(process.cwd());
 8 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 9 | 
10 | const envPublicUrl = process.env.PUBLIC_URL;
11 | 
12 | function ensureSlash(path, needsSlash) {
13 |   const hasSlash = path.endsWith('/');
14 |   if (hasSlash && !needsSlash) {
15 |     return path.substr(path, path.length - 1);
16 |   } else if (!hasSlash && needsSlash) {
17 |     return `${path}/`;
18 |   } else {
19 |     return path;
20 |   }
21 | }
22 | 
23 | const getPublicUrl = appPackageJson =>
24 |   envPublicUrl || require(appPackageJson).homepage;
25 | 
26 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
27 | // "public path" at which the app is served.
28 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
29 | // single-page apps that may serve index.html for nested URLs like /todos/42.
30 | // We can't use a relative path in HTML because we don't want to load something
31 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
32 | function getServedPath(appPackageJson) {
33 |   const publicUrl = getPublicUrl(appPackageJson);
34 |   const servedUrl =
35 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
36 |   return ensureSlash(servedUrl, true);
37 | }
38 | 
39 | // config after eject: we're in ./config/
40 | module.exports = {
41 |   dotenv: resolveApp('.env'),
42 |   appBuild: resolveApp('build'),
43 |   appPublic: resolveApp('public'),
44 |   appHtml: resolveApp('public/index.html'),
45 |   appIndexJs: resolveApp('src/index.js'),
46 |   appPackageJson: resolveApp('package.json'),
47 |   appSrc: resolveApp('src'),
48 |   yarnLockFile: resolveApp('yarn.lock'),
49 |   testsSetup: resolveApp('src/setupTests.js'),
50 |   appNodeModules: resolveApp('node_modules'),
51 |   publicUrl: getPublicUrl(resolveApp('package.json')),
52 |   servedPath: getServedPath(resolveApp('package.json')),
53 | };
54 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 
16 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
17 | // We don't polyfill it in the browser--this is user's responsibility.
18 | if (process.env.NODE_ENV === 'test') {
19 |   require('raf').polyfill(global);
20 | }
21 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | const autoprefixer = require('autoprefixer');
  2 | const path = require('path');
  3 | const webpack = require('webpack');
  4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  5 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  6 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  7 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  8 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
  9 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 10 | const getClientEnvironment = require('./env');
 11 | const paths = require('./paths');
 12 | 
 13 | // Webpack uses `publicPath` to determine where the app is being served from.
 14 | // In development, we always serve from the root. This makes config easier.
 15 | const publicPath = '/';
 16 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 17 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 18 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 19 | const publicUrl = '';
 20 | // Get environment variables to inject into our app.
 21 | const env = getClientEnvironment(publicUrl);
 22 | 
 23 | // This is the development configuration.
 24 | // It is focused on developer experience and fast rebuilds.
 25 | // The production configuration is different and lives in a separate file.
 26 | module.exports = {
 27 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 28 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 29 |   devtool: 'cheap-module-source-map',
 30 |   // These are the "entry points" to our application.
 31 |   // This means they will be the "root" imports that are included in JS bundle.
 32 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 33 |   entry: [
 34 |     // We ship a few polyfills by default:
 35 |     require.resolve('./polyfills'),
 36 |     // Include an alternative client for WebpackDevServer. A client's job is to
 37 |     // connect to WebpackDevServer by a socket and get notified about changes.
 38 |     // When you save a file, the client will either apply hot updates (in case
 39 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 40 |     // make a syntax error, this client will display a syntax error overlay.
 41 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 42 |     // to bring better experience for Create React App users. You can replace
 43 |     // the line below with these two lines if you prefer the stock client:
 44 |     // require.resolve('webpack-dev-server/client') + '?/',
 45 |     // require.resolve('webpack/hot/dev-server'),
 46 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 47 |     // Finally, this is your app's code:
 48 |     paths.appIndexJs,
 49 |     // We include the app code last so that if there is a runtime error during
 50 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 51 |     // changing JS code would still trigger a refresh.
 52 |   ],
 53 |   output: {
 54 |     // Add /* filename */ comments to generated require()s in the output.
 55 |     pathinfo: true,
 56 |     // This does not produce a real file. It's just the virtual path that is
 57 |     // served by WebpackDevServer in development. This is the JS bundle
 58 |     // containing code from all our entry points, and the Webpack runtime.
 59 |     filename: 'static/js/bundle.js',
 60 |     // There are also additional JS chunk files if you use code splitting.
 61 |     chunkFilename: 'static/js/[name].chunk.js',
 62 |     // This is the URL that app is served from. We use "/" in development.
 63 |     publicPath: publicPath,
 64 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 65 |     devtoolModuleFilenameTemplate: info =>
 66 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 67 |   },
 68 |   resolve: {
 69 |     // This allows you to set a fallback for where Webpack should look for modules.
 70 |     // We placed these paths second because we want `node_modules` to "win"
 71 |     // if there are any conflicts. This matches Node resolution mechanism.
 72 |     // https://github.com/facebookincubator/create-react-app/issues/253
 73 |     modules: ['node_modules', paths.appNodeModules].concat(
 74 |       // It is guaranteed to exist because we tweak it in `env.js`
 75 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 76 |     ),
 77 |     // These are the reasonable defaults supported by the Node ecosystem.
 78 |     // We also include JSX as a common component filename extension to support
 79 |     // some tools, although we do not recommend using it, see:
 80 |     // https://github.com/facebookincubator/create-react-app/issues/290
 81 |     // `web` extension prefixes have been added for better support
 82 |     // for React Native Web.
 83 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 84 |     alias: {
 85 |       
 86 |       // Support React Native Web
 87 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 88 |       'react-native': 'react-native-web',
 89 |     },
 90 |     plugins: [
 91 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 92 |       // This often causes confusion because we only process files within src/ with babel.
 93 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 94 |       // please link the files into your node_modules/ and let module-resolution kick in.
 95 |       // Make sure your source files are compiled, as they will not be processed in any way.
 96 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
 97 |     ],
 98 |   },
 99 |   module: {
100 |     strictExportPresence: true,
101 |     rules: [
102 |       // TODO: Disable require.ensure as it's not a standard language feature.
103 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
104 |       // { parser: { requireEnsure: false } },
105 | 
106 |       // First, run the linter.
107 |       // It's important to do this before Babel processes the JS.
108 |       {
109 |         test: /\.(js|jsx|mjs)$/,
110 |         enforce: 'pre',
111 |         use: [
112 |           {
113 |             options: {
114 |               formatter: eslintFormatter,
115 |               eslintPath: require.resolve('eslint'),
116 |               
117 |             },
118 |             loader: require.resolve('eslint-loader'),
119 |           },
120 |         ],
121 |         include: paths.appSrc,
122 |       },
123 |       {
124 |         // "oneOf" will traverse all following loaders until one will
125 |         // match the requirements. When no loader matches it will fall
126 |         // back to the "file" loader at the end of the loader list.
127 |         oneOf: [
128 |           // "url" loader works like "file" loader except that it embeds assets
129 |           // smaller than specified limit in bytes as data URLs to avoid requests.
130 |           // A missing `test` is equivalent to a match.
131 |           {
132 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
133 |             loader: require.resolve('url-loader'),
134 |             options: {
135 |               limit: 10000,
136 |               name: 'static/media/[name].[hash:8].[ext]',
137 |             },
138 |           },
139 |           // Process JS with Babel.
140 |           {
141 |             test: /\.(js|jsx|mjs)$/,
142 |             include: paths.appSrc,
143 |             loader: require.resolve('babel-loader'),
144 |             options: {
145 |               
146 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
147 |               // It enables caching results in ./node_modules/.cache/babel-loader/
148 |               // directory for faster rebuilds.
149 |               cacheDirectory: true,
150 |             },
151 |           },
152 |           // "postcss" loader applies autoprefixer to our CSS.
153 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
154 |           // "style" loader turns CSS into JS modules that inject <style> tags.
155 |           // In production, we use a plugin to extract that CSS to a file, but
156 |           // in development "style" loader enables hot editing of CSS.
157 |           {
158 |             test: /\.css$/,
159 |             use: [
160 |               require.resolve('style-loader'),
161 |               {
162 |                 loader: require.resolve('css-loader'),
163 |                 options: {
164 |                   importLoaders: 1,
165 |                 },
166 |               },
167 |               {
168 |                 loader: require.resolve('postcss-loader'),
169 |                 options: {
170 |                   // Necessary for external CSS imports to work
171 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
172 |                   ident: 'postcss',
173 |                   plugins: () => [
174 |                     require('postcss-flexbugs-fixes'),
175 |                     autoprefixer({
176 |                       browsers: [
177 |                         '>1%',
178 |                         'last 4 versions',
179 |                         'Firefox ESR',
180 |                         'not ie < 9', // React doesn't support IE8 anyway
181 |                       ],
182 |                       flexbox: 'no-2009',
183 |                     }),
184 |                   ],
185 |                 },
186 |               },
187 |             ],
188 |           },
189 |           // "file" loader makes sure those assets get served by WebpackDevServer.
190 |           // When you `import` an asset, you get its (virtual) filename.
191 |           // In production, they would get copied to the `build` folder.
192 |           // This loader doesn't use a "test" so it will catch all modules
193 |           // that fall through the other loaders.
194 |           {
195 |             // Exclude `js` files to keep "css" loader working as it injects
196 |             // its runtime that would otherwise processed through "file" loader.
197 |             // Also exclude `html` and `json` extensions so they get processed
198 |             // by webpacks internal loaders.
199 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
200 |             loader: require.resolve('file-loader'),
201 |             options: {
202 |               name: 'static/media/[name].[hash:8].[ext]',
203 |             },
204 |           },
205 |         ],
206 |       },
207 |       // ** STOP ** Are you adding a new loader?
208 |       // Make sure to add the new loader(s) before the "file" loader.
209 |     ],
210 |   },
211 |   plugins: [
212 |     // Makes some environment variables available in index.html.
213 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
214 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
215 |     // In development, this will be an empty string.
216 |     new InterpolateHtmlPlugin(env.raw),
217 |     // Generates an `index.html` file with the <script> injected.
218 |     new HtmlWebpackPlugin({
219 |       inject: true,
220 |       template: paths.appHtml,
221 |     }),
222 |     // Add module names to factory functions so they appear in browser profiler.
223 |     new webpack.NamedModulesPlugin(),
224 |     // Makes some environment variables available to the JS code, for example:
225 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
226 |     new webpack.DefinePlugin(env.stringified),
227 |     // This is necessary to emit hot updates (currently CSS only):
228 |     new webpack.HotModuleReplacementPlugin(),
229 |     // Watcher doesn't work well if you mistype casing in a path so we use
230 |     // a plugin that prints an error when you attempt to do this.
231 |     // See https://github.com/facebookincubator/create-react-app/issues/240
232 |     new CaseSensitivePathsPlugin(),
233 |     // If you require a missing module and then `npm install` it, you still have
234 |     // to restart the development server for Webpack to discover it. This plugin
235 |     // makes the discovery automatic so you don't have to restart.
236 |     // See https://github.com/facebookincubator/create-react-app/issues/186
237 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
238 |     // Moment.js is an extremely popular library that bundles large locale files
239 |     // by default due to how Webpack interprets its code. This is a practical
240 |     // solution that requires the user to opt into importing specific locales.
241 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
242 |     // You can remove this if you don't use Moment.js:
243 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
244 |   ],
245 |   // Some libraries import Node modules but don't use them in the browser.
246 |   // Tell Webpack to provide empty mocks for them so importing them works.
247 |   node: {
248 |     dgram: 'empty',
249 |     fs: 'empty',
250 |     net: 'empty',
251 |     tls: 'empty',
252 |     child_process: 'empty',
253 |   },
254 |   // Turn off performance hints during development because we don't do any
255 |   // splitting or minification in interest of speed. These warnings become
256 |   // cumbersome.
257 |   performance: {
258 |     hints: false,
259 |   },
260 | };
261 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | const autoprefixer = require('autoprefixer');
  2 | const path = require('path');
  3 | const webpack = require('webpack');
  4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  5 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  6 | const ManifestPlugin = require('webpack-manifest-plugin');
  7 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
  9 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 10 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 11 | const paths = require('./paths');
 12 | const getClientEnvironment = require('./env');
 13 | 
 14 | // Webpack uses `publicPath` to determine where the app is being served from.
 15 | // It requires a trailing slash, or the file assets will get an incorrect path.
 16 | const publicPath = paths.servedPath;
 17 | // Some apps do not use client-side routing with pushState.
 18 | // For these, "homepage" can be set to "." to enable relative asset paths.
 19 | const shouldUseRelativeAssetPaths = publicPath === './';
 20 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 21 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 22 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 23 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 24 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 25 | const publicUrl = publicPath.slice(0, -1);
 26 | // Get environment variables to inject into our app.
 27 | const env = getClientEnvironment(publicUrl);
 28 | 
 29 | // Assert this just to be safe.
 30 | // Development builds of React are slow and not intended for production.
 31 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 32 |   throw new Error('Production builds must have NODE_ENV=production.');
 33 | }
 34 | 
 35 | // Note: defined here because it will be used more than once.
 36 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 37 | 
 38 | // ExtractTextPlugin expects the build output to be flat.
 39 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 40 | // However, our output is structured with css, js and media folders.
 41 | // To have this structure working with relative paths, we have to use custom options.
 42 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 43 |   ? // Making sure that the publicPath goes back to to build folder.
 44 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 45 |   : {};
 46 | 
 47 | // This is the production configuration.
 48 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 49 | // The development configuration is different and lives in a separate file.
 50 | module.exports = {
 51 |   // Don't attempt to continue if there are any errors.
 52 |   bail: true,
 53 |   // We generate sourcemaps in production. This is slow but gives good results.
 54 |   // You can exclude the *.map files from the build during deployment.
 55 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 56 |   // In production, we only want to load the polyfills and the app code.
 57 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path
 71 |         .relative(paths.appSrc, info.absoluteResourcePath)
 72 |         .replace(/\\/g, '/'),
 73 |   },
 74 |   resolve: {
 75 |     // This allows you to set a fallback for where Webpack should look for modules.
 76 |     // We placed these paths second because we want `node_modules` to "win"
 77 |     // if there are any conflicts. This matches Node resolution mechanism.
 78 |     // https://github.com/facebookincubator/create-react-app/issues/253
 79 |     modules: ['node_modules', paths.appNodeModules].concat(
 80 |       // It is guaranteed to exist because we tweak it in `env.js`
 81 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 82 |     ),
 83 |     // These are the reasonable defaults supported by the Node ecosystem.
 84 |     // We also include JSX as a common component filename extension to support
 85 |     // some tools, although we do not recommend using it, see:
 86 |     // https://github.com/facebookincubator/create-react-app/issues/290
 87 |     // `web` extension prefixes have been added for better support
 88 |     // for React Native Web.
 89 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 90 |     alias: {
 91 |       
 92 |       // Support React Native Web
 93 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 94 |       'react-native': 'react-native-web',
 95 |     },
 96 |     plugins: [
 97 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 98 |       // This often causes confusion because we only process files within src/ with babel.
 99 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
100 |       // please link the files into your node_modules/ and let module-resolution kick in.
101 |       // Make sure your source files are compiled, as they will not be processed in any way.
102 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
103 |     ],
104 |   },
105 |   module: {
106 |     strictExportPresence: true,
107 |     rules: [
108 |       // TODO: Disable require.ensure as it's not a standard language feature.
109 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
110 |       // { parser: { requireEnsure: false } },
111 | 
112 |       // First, run the linter.
113 |       // It's important to do this before Babel processes the JS.
114 |       {
115 |         test: /\.(js|jsx|mjs)$/,
116 |         enforce: 'pre',
117 |         use: [
118 |           {
119 |             options: {
120 |               formatter: eslintFormatter,
121 |               eslintPath: require.resolve('eslint'),
122 |               
123 |             },
124 |             loader: require.resolve('eslint-loader'),
125 |           },
126 |         ],
127 |         include: paths.appSrc,
128 |       },
129 |       {
130 |         // "oneOf" will traverse all following loaders until one will
131 |         // match the requirements. When no loader matches it will fall
132 |         // back to the "file" loader at the end of the loader list.
133 |         oneOf: [
134 |           // "url" loader works just like "file" loader but it also embeds
135 |           // assets smaller than specified size as data URLs to avoid requests.
136 |           {
137 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
138 |             loader: require.resolve('url-loader'),
139 |             options: {
140 |               limit: 10000,
141 |               name: 'static/media/[name].[hash:8].[ext]',
142 |             },
143 |           },
144 |           // Process JS with Babel.
145 |           {
146 |             test: /\.(js|jsx|mjs)$/,
147 |             include: paths.appSrc,
148 |             loader: require.resolve('babel-loader'),
149 |             options: {
150 |               
151 |               compact: true,
152 |             },
153 |           },
154 |           // The notation here is somewhat confusing.
155 |           // "postcss" loader applies autoprefixer to our CSS.
156 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
157 |           // "style" loader normally turns CSS into JS modules injecting <style>,
158 |           // but unlike in development configuration, we do something different.
159 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
160 |           // (second argument), then grabs the result CSS and puts it into a
161 |           // separate file in our build process. This way we actually ship
162 |           // a single CSS file in production instead of JS code injecting <style>
163 |           // tags. If you use code splitting, however, any async bundles will still
164 |           // use the "style" loader inside the async code so CSS from them won't be
165 |           // in the main CSS file.
166 |           {
167 |             test: /\.css$/,
168 |             loader: ExtractTextPlugin.extract(
169 |               Object.assign(
170 |                 {
171 |                   fallback: {
172 |                     loader: require.resolve('style-loader'),
173 |                     options: {
174 |                       hmr: false,
175 |                     },
176 |                   },
177 |                   use: [
178 |                     {
179 |                       loader: require.resolve('css-loader'),
180 |                       options: {
181 |                         importLoaders: 1,
182 |                         minimize: true,
183 |                         sourceMap: shouldUseSourceMap,
184 |                       },
185 |                     },
186 |                     {
187 |                       loader: require.resolve('postcss-loader'),
188 |                       options: {
189 |                         // Necessary for external CSS imports to work
190 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
191 |                         ident: 'postcss',
192 |                         plugins: () => [
193 |                           require('postcss-flexbugs-fixes'),
194 |                           autoprefixer({
195 |                             browsers: [
196 |                               '>1%',
197 |                               'last 4 versions',
198 |                               'Firefox ESR',
199 |                               'not ie < 9', // React doesn't support IE8 anyway
200 |                             ],
201 |                             flexbox: 'no-2009',
202 |                           }),
203 |                         ],
204 |                       },
205 |                     },
206 |                   ],
207 |                 },
208 |                 extractTextPluginOptions
209 |               )
210 |             ),
211 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
212 |           },
213 |           // "file" loader makes sure assets end up in the `build` folder.
214 |           // When you `import` an asset, you get its filename.
215 |           // This loader doesn't use a "test" so it will catch all modules
216 |           // that fall through the other loaders.
217 |           {
218 |             loader: require.resolve('file-loader'),
219 |             // Exclude `js` files to keep "css" loader working as it injects
220 |             // it's runtime that would otherwise processed through "file" loader.
221 |             // Also exclude `html` and `json` extensions so they get processed
222 |             // by webpacks internal loaders.
223 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
224 |             options: {
225 |               name: 'static/media/[name].[hash:8].[ext]',
226 |             },
227 |           },
228 |           // ** STOP ** Are you adding a new loader?
229 |           // Make sure to add the new loader(s) before the "file" loader.
230 |         ],
231 |       },
232 |     ],
233 |   },
234 |   plugins: [
235 |     // Makes some environment variables available in index.html.
236 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
237 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
238 |     // In production, it will be an empty string unless you specify "homepage"
239 |     // in `package.json`, in which case it will be the pathname of that URL.
240 |     new InterpolateHtmlPlugin(env.raw),
241 |     // Generates an `index.html` file with the <script> injected.
242 |     new HtmlWebpackPlugin({
243 |       inject: true,
244 |       template: paths.appHtml,
245 |       minify: {
246 |         removeComments: true,
247 |         collapseWhitespace: true,
248 |         removeRedundantAttributes: true,
249 |         useShortDoctype: true,
250 |         removeEmptyAttributes: true,
251 |         removeStyleLinkTypeAttributes: true,
252 |         keepClosingSlash: true,
253 |         minifyJS: true,
254 |         minifyCSS: true,
255 |         minifyURLs: true,
256 |       },
257 |     }),
258 |     // Makes some environment variables available to the JS code, for example:
259 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
260 |     // It is absolutely essential that NODE_ENV was set to production here.
261 |     // Otherwise React will be compiled in the very slow development mode.
262 |     new webpack.DefinePlugin(env.stringified),
263 |     // Minify the code.
264 |     new webpack.optimize.UglifyJsPlugin({
265 |       compress: {
266 |         warnings: false,
267 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
268 |         // https://github.com/facebookincubator/create-react-app/issues/2376
269 |         // Pending further investigation:
270 |         // https://github.com/mishoo/UglifyJS2/issues/2011
271 |         comparisons: false,
272 |       },
273 |       mangle: {
274 |         safari10: true,
275 |       },
276 |       output: {
277 |         comments: false,
278 |         // Turned on because emoji and regex is not minified properly using default
279 |         // https://github.com/facebookincubator/create-react-app/issues/2488
280 |         ascii_only: true,
281 |       },
282 |       sourceMap: shouldUseSourceMap,
283 |     }),
284 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
285 |     new ExtractTextPlugin({
286 |       filename: cssFilename,
287 |     }),
288 |     // Generate a manifest file which contains a mapping of all asset filenames
289 |     // to their corresponding output file so that tools can pick it up without
290 |     // having to parse `index.html`.
291 |     new ManifestPlugin({
292 |       fileName: 'asset-manifest.json',
293 |     }),
294 |     // Generate a service worker script that will precache, and keep up to date,
295 |     // the HTML & assets that are part of the Webpack build.
296 |     new SWPrecacheWebpackPlugin({
297 |       // By default, a cache-busting query parameter is appended to requests
298 |       // used to populate the caches, to ensure the responses are fresh.
299 |       // If a URL is already hashed by Webpack, then there is no concern
300 |       // about it being stale, and the cache-busting can be skipped.
301 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
302 |       filename: 'service-worker.js',
303 |       logger(message) {
304 |         if (message.indexOf('Total precache size is') === 0) {
305 |           // This message occurs for every build and is a bit too noisy.
306 |           return;
307 |         }
308 |         if (message.indexOf('Skipping static resource') === 0) {
309 |           // This message obscures real errors so we ignore it.
310 |           // https://github.com/facebookincubator/create-react-app/issues/2612
311 |           return;
312 |         }
313 |         console.log(message);
314 |       },
315 |       minify: true,
316 |       // For unknown URLs, fallback to the index page
317 |       navigateFallback: publicUrl + '/index.html',
318 |       // Ignores URLs starting from /__ (useful for Firebase):
319 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
320 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
321 |       // Don't precache sourcemaps (they're large) and build asset manifest:
322 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
323 |     }),
324 |     // Moment.js is an extremely popular library that bundles large locale files
325 |     // by default due to how Webpack interprets its code. This is a practical
326 |     // solution that requires the user to opt into importing specific locales.
327 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
328 |     // You can remove this if you don't use Moment.js:
329 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
330 |   ],
331 |   // Some libraries import Node modules but don't use them in the browser.
332 |   // Tell Webpack to provide empty mocks for them so importing them works.
333 |   node: {
334 |     dgram: 'empty',
335 |     fs: 'empty',
336 |     net: 'empty',
337 |     tls: 'empty',
338 |     child_process: 'empty',
339 |   },
340 | };
341 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 2 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 3 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
 4 | const config = require('./webpack.config.dev');
 5 | const paths = require('./paths');
 6 | 
 7 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 8 | const host = process.env.HOST || '0.0.0.0';
 9 | 
10 | module.exports = function(proxy, allowedHost) {
11 |   return {
12 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
13 |     // websites from potentially accessing local content through DNS rebinding:
14 |     // https://github.com/webpack/webpack-dev-server/issues/887
15 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
16 |     // However, it made several existing use cases such as development in cloud
17 |     // environment or subdomains in development significantly more complicated:
18 |     // https://github.com/facebookincubator/create-react-app/issues/2271
19 |     // https://github.com/facebookincubator/create-react-app/issues/2233
20 |     // While we're investigating better solutions, for now we will take a
21 |     // compromise. Since our WDS configuration only serves files in the `public`
22 |     // folder we won't consider accessing them a vulnerability. However, if you
23 |     // use the `proxy` feature, it gets more dangerous because it can expose
24 |     // remote code execution vulnerabilities in backends like Django and Rails.
25 |     // So we will disable the host check normally, but enable it if you have
26 |     // specified the `proxy` setting. Finally, we let you override it if you
27 |     // really know what you're doing with a special environment variable.
28 |     disableHostCheck:
29 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
30 |     // Enable gzip compression of generated files.
31 |     compress: true,
32 |     // Silence WebpackDevServer's own logs since they're generally not useful.
33 |     // It will still show compile warnings and errors with this setting.
34 |     clientLogLevel: 'none',
35 |     // By default WebpackDevServer serves physical files from current directory
36 |     // in addition to all the virtual build products that it serves from memory.
37 |     // This is confusing because those files won’t automatically be available in
38 |     // production build folder unless we copy them. However, copying the whole
39 |     // project directory is dangerous because we may expose sensitive files.
40 |     // Instead, we establish a convention that only files in `public` directory
41 |     // get served. Our build script will copy `public` into the `build` folder.
42 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
43 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
44 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
45 |     // Note that we only recommend to use `public` folder as an escape hatch
46 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
47 |     // for some reason broken when imported through Webpack. If you just want to
48 |     // use an image, put it in `src` and `import` it from JavaScript instead.
49 |     contentBase: paths.appPublic,
50 |     // By default files from `contentBase` will not trigger a page reload.
51 |     watchContentBase: true,
52 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
53 |     // for the WebpackDevServer client so it can learn when the files were
54 |     // updated. The WebpackDevServer client is included as an entry point
55 |     // in the Webpack development configuration. Note that only changes
56 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
57 |     hot: true,
58 |     // It is important to tell WebpackDevServer to use the same "root" path
59 |     // as we specified in the config. In development, we always serve from /.
60 |     publicPath: config.output.publicPath,
61 |     // WebpackDevServer is noisy by default so we emit custom message instead
62 |     // by listening to the compiler events with `compiler.plugin` calls above.
63 |     quiet: true,
64 |     // Reportedly, this avoids CPU overload on some systems.
65 |     // https://github.com/facebookincubator/create-react-app/issues/293
66 |     // src/node_modules is not ignored to support absolute imports
67 |     // https://github.com/facebookincubator/create-react-app/issues/1065
68 |     watchOptions: {
69 |       ignored: ignoredFiles(paths.appSrc),
70 |     },
71 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
72 |     https: protocol === 'https',
73 |     host: host,
74 |     overlay: false,
75 |     historyApiFallback: {
76 |       // Paths with dots should still use the history fallback.
77 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
78 |       disableDotRule: true,
79 |     },
80 |     public: allowedHost,
81 |     proxy,
82 |     before(app) {
83 |       // This lets us open files from the runtime error overlay.
84 |       app.use(errorOverlayMiddleware());
85 |       // This service worker file is effectively a 'no-op' that will reset any
86 |       // previous service worker registered for the same host:port combination.
87 |       // We do this in development to avoid hitting the production cache if
88 |       // it used the same host and port.
89 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
90 |       app.use(noopServiceWorkerMiddleware());
91 |     },
92 |   };
93 | };
94 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "woye",
 3 |   "version": "0.2.1",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^1.4.1",
 7 |     "@material-ui/icons": "^2.0.0",
 8 |     "autoprefixer": "7.1.6",
 9 |     "babel-core": "6.26.0",
10 |     "babel-eslint": "7.2.3",
11 |     "babel-jest": "20.0.3",
12 |     "babel-loader": "7.1.2",
13 |     "babel-preset-react-app": "^3.1.1",
14 |     "babel-runtime": "6.26.0",
15 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
16 |     "chalk": "1.1.3",
17 |     "css-loader": "0.28.7",
18 |     "dotenv": "4.0.0",
19 |     "dotenv-expand": "4.2.0",
20 |     "eslint": "4.10.0",
21 |     "eslint-config-react-app": "^2.1.0",
22 |     "eslint-loader": "1.9.0",
23 |     "eslint-plugin-flowtype": "2.39.1",
24 |     "eslint-plugin-import": "2.8.0",
25 |     "eslint-plugin-jsx-a11y": "5.1.1",
26 |     "eslint-plugin-react": "7.4.0",
27 |     "extract-text-webpack-plugin": "3.0.2",
28 |     "file-loader": "1.1.5",
29 |     "fs-extra": "3.0.1",
30 |     "html-webpack-plugin": "2.29.0",
31 |     "jest": "20.0.4",
32 |     "object-assign": "4.1.1",
33 |     "parsist": "^1.0.6",
34 |     "postcss-flexbugs-fixes": "3.2.0",
35 |     "postcss-loader": "2.0.8",
36 |     "promise": "8.0.1",
37 |     "raf": "3.4.0",
38 |     "react": "^16.4.1",
39 |     "react-dev-utils": "^5.0.1",
40 |     "react-dom": "^16.4.1",
41 |     "resolve": "1.6.0",
42 |     "style-loader": "0.19.0",
43 |     "sw-precache-webpack-plugin": "0.11.4",
44 |     "url-loader": "0.6.2",
45 |     "webpack": "3.8.1",
46 |     "webpack-dev-server": "2.9.4",
47 |     "webpack-manifest-plugin": "1.3.2",
48 |     "whatwg-fetch": "2.0.3"
49 |   },
50 |   "scripts": {
51 |     "start": "node scripts/start.js",
52 |     "build": "node scripts/build.js",
53 |     "test": "node scripts/test.js --env=jsdom"
54 |   },
55 |   "jest": {
56 |     "collectCoverageFrom": [
57 |       "src/**/*.{js,jsx,mjs}"
58 |     ],
59 |     "setupFiles": [
60 |       "<rootDir>/config/polyfills.js"
61 |     ],
62 |     "testMatch": [
63 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
64 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
65 |     ],
66 |     "testEnvironment": "node",
67 |     "testURL": "http://localhost",
68 |     "transform": {
69 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
70 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
71 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
72 |     },
73 |     "transformIgnorePatterns": [
74 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
75 |     ],
76 |     "moduleNameMapper": {
77 |       "^react-native$": "react-native-web"
78 |     },
79 |     "moduleFileExtensions": [
80 |       "web.js",
81 |       "js",
82 |       "json",
83 |       "web.jsx",
84 |       "jsx",
85 |       "node",
86 |       "mjs"
87 |     ]
88 |   },
89 |   "babel": {
90 |     "presets": [
91 |       "react-app"
92 |     ]
93 |   },
94 |   "eslintConfig": {
95 |     "extends": "react-app"
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alxpez/woye/d07763d74c7ff26456568167dcfee65dcb020aa1/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
14 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
15 |     <!--
16 |       Notice the use of %PUBLIC_URL% in the tags above.
17 |       It will be replaced with the URL of the `public` folder during the build.
18 |       Only files inside the `public` folder can be referenced from the HTML.
19 | 
20 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21 |       work correctly both with client-side routing and a non-root public URL.
22 |       Learn how to configure a non-root public URL by running `npm run build`.
23 |     -->
24 |     <title>WOYE</title>
25 |   </head>
26 |   <body>
27 |     <noscript>
28 |       You need to enable JavaScript to run this app.
29 |     </noscript>
30 |     <div id="root"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.BABEL_ENV = 'production';
  3 | process.env.NODE_ENV = 'production';
  4 | 
  5 | // Makes the script crash on unhandled rejections instead of silently
  6 | // ignoring them. In the future, promise rejections that are not handled will
  7 | // terminate the Node.js process with a non-zero exit code.
  8 | process.on('unhandledRejection', err => {
  9 |   throw err;
 10 | });
 11 | 
 12 | // Ensure environment variables are read.
 13 | require('../config/env');
 14 | 
 15 | const path = require('path');
 16 | const chalk = require('chalk');
 17 | const fs = require('fs-extra');
 18 | const webpack = require('webpack');
 19 | const config = require('../config/webpack.config.prod');
 20 | const paths = require('../config/paths');
 21 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 22 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 23 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 24 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 25 | const printBuildError = require('react-dev-utils/printBuildError');
 26 | 
 27 | const measureFileSizesBeforeBuild =
 28 |   FileSizeReporter.measureFileSizesBeforeBuild;
 29 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 30 | const useYarn = fs.existsSync(paths.yarnLockFile);
 31 | 
 32 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 33 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 34 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 35 | 
 36 | // Warn and crash if required files are missing
 37 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 38 |   process.exit(1);
 39 | }
 40 | 
 41 | // First, read the current file sizes in build directory.
 42 | // This lets us display how much they changed later.
 43 | measureFileSizesBeforeBuild(paths.appBuild)
 44 |   .then(previousFileSizes => {
 45 |     // Remove all content but keep the directory so that
 46 |     // if you're in it, you don't end up in Trash
 47 |     fs.emptyDirSync(paths.appBuild);
 48 |     // Merge with the public folder
 49 |     copyPublicFolder();
 50 |     // Start the webpack build
 51 |     return build(previousFileSizes);
 52 |   })
 53 |   .then(
 54 |     ({ stats, previousFileSizes, warnings }) => {
 55 |       if (warnings.length) {
 56 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 57 |         console.log(warnings.join('\n\n'));
 58 |         console.log(
 59 |           '\nSearch for the ' +
 60 |             chalk.underline(chalk.yellow('keywords')) +
 61 |             ' to learn more about each warning.'
 62 |         );
 63 |         console.log(
 64 |           'To ignore, add ' +
 65 |             chalk.cyan('// eslint-disable-next-line') +
 66 |             ' to the line before.\n'
 67 |         );
 68 |       } else {
 69 |         console.log(chalk.green('Compiled successfully.\n'));
 70 |       }
 71 | 
 72 |       console.log('File sizes after gzip:\n');
 73 |       printFileSizesAfterBuild(
 74 |         stats,
 75 |         previousFileSizes,
 76 |         paths.appBuild,
 77 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 78 |         WARN_AFTER_CHUNK_GZIP_SIZE
 79 |       );
 80 |       console.log();
 81 | 
 82 |       const appPackage = require(paths.appPackageJson);
 83 |       const publicUrl = paths.publicUrl;
 84 |       const publicPath = config.output.publicPath;
 85 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 86 |       printHostingInstructions(
 87 |         appPackage,
 88 |         publicUrl,
 89 |         publicPath,
 90 |         buildFolder,
 91 |         useYarn
 92 |       );
 93 |     },
 94 |     err => {
 95 |       console.log(chalk.red('Failed to compile.\n'));
 96 |       printBuildError(err);
 97 |       process.exit(1);
 98 |     }
 99 |   );
100 | 
101 | // Create the production build and print the deployment instructions.
102 | function build(previousFileSizes) {
103 |   console.log('Creating an optimized production build...');
104 | 
105 |   let compiler = webpack(config);
106 |   return new Promise((resolve, reject) => {
107 |     compiler.run((err, stats) => {
108 |       if (err) {
109 |         return reject(err);
110 |       }
111 |       const messages = formatWebpackMessages(stats.toJson({}, true));
112 |       if (messages.errors.length) {
113 |         // Only keep the first error. Others are often indicative
114 |         // of the same problem, but confuse the reader with noise.
115 |         if (messages.errors.length > 1) {
116 |           messages.errors.length = 1;
117 |         }
118 |         return reject(new Error(messages.errors.join('\n\n')));
119 |       }
120 |       if (
121 |         process.env.CI &&
122 |         (typeof process.env.CI !== 'string' ||
123 |           process.env.CI.toLowerCase() !== 'false') &&
124 |         messages.warnings.length
125 |       ) {
126 |         console.log(
127 |           chalk.yellow(
128 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
129 |               'Most CI servers set it automatically.\n'
130 |           )
131 |         );
132 |         return reject(new Error(messages.warnings.join('\n\n')));
133 |       }
134 |       return resolve({
135 |         stats,
136 |         previousFileSizes,
137 |         warnings: messages.warnings,
138 |       });
139 |     });
140 |   });
141 | }
142 | 
143 | function copyPublicFolder() {
144 |   fs.copySync(paths.appPublic, paths.appBuild, {
145 |     dereference: true,
146 |     filter: file => file !== paths.appHtml,
147 |   });
148 | }
149 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.BABEL_ENV = 'development';
  3 | process.env.NODE_ENV = 'development';
  4 | 
  5 | // Makes the script crash on unhandled rejections instead of silently
  6 | // ignoring them. In the future, promise rejections that are not handled will
  7 | // terminate the Node.js process with a non-zero exit code.
  8 | process.on('unhandledRejection', err => {
  9 |   throw err;
 10 | });
 11 | 
 12 | // Ensure environment variables are read.
 13 | require('../config/env');
 14 | 
 15 | const fs = require('fs');
 16 | const chalk = require('chalk');
 17 | const webpack = require('webpack');
 18 | const WebpackDevServer = require('webpack-dev-server');
 19 | const clearConsole = require('react-dev-utils/clearConsole');
 20 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 21 | const {
 22 |   choosePort,
 23 |   createCompiler,
 24 |   prepareProxy,
 25 |   prepareUrls,
 26 | } = require('react-dev-utils/WebpackDevServerUtils');
 27 | const openBrowser = require('react-dev-utils/openBrowser');
 28 | const paths = require('../config/paths');
 29 | const config = require('../config/webpack.config.dev');
 30 | const createDevServerConfig = require('../config/webpackDevServer.config');
 31 | 
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | const isInteractive = process.stdout.isTTY;
 34 | 
 35 | // Warn and crash if required files are missing
 36 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 37 |   process.exit(1);
 38 | }
 39 | 
 40 | // Tools like Cloud9 rely on this.
 41 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 42 | const HOST = process.env.HOST || '0.0.0.0';
 43 | 
 44 | if (process.env.HOST) {
 45 |   console.log(
 46 |     chalk.cyan(
 47 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 48 |         chalk.bold(process.env.HOST)
 49 |       )}`
 50 |     )
 51 |   );
 52 |   console.log(
 53 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 54 |   );
 55 |   console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
 56 |   console.log();
 57 | }
 58 | 
 59 | // We attempt to use the default port but if it is busy, we offer the user to
 60 | // run on a different port. `choosePort()` Promise resolves to the next free port.
 61 | choosePort(HOST, DEFAULT_PORT)
 62 |   .then(port => {
 63 |     if (port == null) {
 64 |       // We have not found a port.
 65 |       return;
 66 |     }
 67 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 68 |     const appName = require(paths.appPackageJson).name;
 69 |     const urls = prepareUrls(protocol, HOST, port);
 70 |     // Create a webpack compiler that is configured with custom messages.
 71 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 72 |     // Load proxy config
 73 |     const proxySetting = require(paths.appPackageJson).proxy;
 74 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 75 |     // Serve webpack assets generated by the compiler over a web sever.
 76 |     const serverConfig = createDevServerConfig(
 77 |       proxyConfig,
 78 |       urls.lanUrlForConfig
 79 |     );
 80 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 81 |     // Launch WebpackDevServer.
 82 |     devServer.listen(port, HOST, err => {
 83 |       if (err) {
 84 |         return console.log(err);
 85 |       }
 86 |       if (isInteractive) {
 87 |         clearConsole();
 88 |       }
 89 |       console.log(chalk.cyan('Starting the development server...\n'));
 90 |       openBrowser(urls.localUrlForBrowser);
 91 |     });
 92 | 
 93 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
 94 |       process.on(sig, function() {
 95 |         devServer.close();
 96 |         process.exit();
 97 |       });
 98 |     });
 99 |   })
100 |   .catch(err => {
101 |     if (err && err.message) {
102 |       console.log(err.message);
103 |     }
104 |     process.exit(1);
105 |   });
106 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | // Do this as the first thing so that any code reading it knows the right env.
 2 | process.env.BABEL_ENV = 'test';
 3 | process.env.NODE_ENV = 'test';
 4 | process.env.PUBLIC_URL = '';
 5 | 
 6 | // Makes the script crash on unhandled rejections instead of silently
 7 | // ignoring them. In the future, promise rejections that are not handled will
 8 | // terminate the Node.js process with a non-zero exit code.
 9 | process.on('unhandledRejection', err => {
10 |   throw err;
11 | });
12 | 
13 | // Ensure environment variables are read.
14 | require('../config/env');
15 | 
16 | const jest = require('jest');
17 | let argv = process.argv.slice(2);
18 | 
19 | // Watch unless on CI or in coverage mode
20 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
21 |   argv.push('--watch');
22 | }
23 | 
24 | 
25 | jest.run(argv);
26 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
  4 | import CssBaseline from '@material-ui/core/CssBaseline'
  5 | import parser from 'parsist';
  6 | import Main from './main/Main';
  7 | import Details from './details/Details';
  8 | import Header from './header/Header';
  9 | import Results from './results/Results';
 10 | 
 11 | 
 12 | class App extends Component {
 13 | 
 14 |   static props = {
 15 |     classes: PropTypes.object.isRequired,
 16 |   }
 17 | 
 18 |   state = {
 19 |     isMobile: false,
 20 |     isDrawerOpen: false,
 21 |     resultArray: [],
 22 |     resultSelectedIndex: 0,
 23 |     raw: '',
 24 |     delimiters: '[\\.\\,\\n\\*\\#\\@\\<\\>\\;]',
 25 |     category: '',
 26 |     locale: 'en',
 27 |   }
 28 | 
 29 |   componentDidMount() {
 30 |     this.checkViewport();
 31 |     window.addEventListener('resize', this.checkViewport.bind(this));
 32 |   }
 33 | 
 34 |   componentWillUnmount() {
 35 |     window.removeEventListener('resize', this.checkViewport.bind(this));
 36 |   }
 37 | 
 38 |   render() {
 39 |     const { isMobile, raw, delimiters, category, locale, resultArray, isDrawerOpen, resultSelectedIndex } = this.state
 40 |     const { classes } = this.props
 41 | 
 42 |     const theme = createMuiTheme({
 43 |       palette: {
 44 |         type: 'dark',
 45 |         primary: {
 46 |           light: '#4b4b4b',
 47 |           main: '#232323',
 48 |           dark: '#000000',
 49 |           contrastText: '#fff',
 50 |         },
 51 |         secondary: {
 52 |           light: '#ff5a36',
 53 |           main: '#ff0000',
 54 |           dark: '#c20000',
 55 |           contrastText: '#fff',
 56 |         },
 57 |       },
 58 |     });
 59 | 
 60 |     const header = (
 61 |       <Header isMobile={isMobile && (resultArray.length > 0)}
 62 |         onMenuClick={() => this.toggleDrawerHandler(!isDrawerOpen)} />
 63 |     )
 64 | 
 65 |     const detailsView = (
 66 |       <Details resultSelected={resultArray[resultSelectedIndex]}
 67 |         onClear={() => this.clearHandler()}
 68 |         isMobile={isMobile} />
 69 |     )
 70 | 
 71 |     const mainView = (
 72 |       <Main isMobile={isMobile}
 73 |         inputValue={raw}
 74 |         delimitersValue={delimiters}
 75 |         categoryValue={category}
 76 |         localeValue={locale}
 77 |         onSearch={() => this.searchHandler()}
 78 |         onInputChange={(e) => this.inputChangeHandler(e)}
 79 |         onDelimitersChange={(e) => this.delimitersChangeHandler(e)}
 80 |         onCategoryChange={(e) => this.categoryChangeHandler(e)}
 81 |         onLocaleChange={(e) => this.localeChangeHandler(e)} />
 82 |     )
 83 | 
 84 |     const drawer = (
 85 |       <Results isOpen={isDrawerOpen}
 86 |         isMobile={isMobile}
 87 |         resultArray={resultArray}
 88 |         resultSelectedIndex={resultSelectedIndex}
 89 |         onResultSelect={(index) => this.resultSelectHandler(index)}
 90 |         onToggleDrawer={(status) => this.toggleDrawerHandler(status)} />
 91 |     )
 92 | 
 93 |     return (
 94 |       <React.Fragment>
 95 |         <CssBaseline />
 96 |         <MuiThemeProvider theme={theme}>
 97 |           <div className={classes.root}>
 98 |             {header}
 99 |             {(resultArray.length > 0) ? drawer : null}
100 |             {(resultArray.length === 0) ? mainView : detailsView}
101 |           </div>
102 |         </MuiThemeProvider>
103 |       </React.Fragment>
104 |     )
105 |   }
106 | 
107 |   toggleDrawerHandler(newStatus) {
108 |     this.setState({ isDrawerOpen: newStatus })
109 |   }
110 | 
111 |   resultSelectHandler(index) {
112 |     this.setState({ resultSelectedIndex: index })
113 |   }
114 | 
115 |   searchHandler() {
116 |     this.setState({ resultArray: this.processResults(this.state.raw, this.state.delimiters) })
117 |   }
118 | 
119 |   inputChangeHandler(value) {
120 |     this.setState({ raw: value })
121 |   }
122 | 
123 |   delimitersChangeHandler(value) {
124 |     this.setState({ delimiters: value })
125 |   }
126 | 
127 |   categoryChangeHandler(value) {
128 |     this.setState({ category: value })
129 |   }
130 | 
131 |   localeChangeHandler(value) {
132 |     this.setState({ locale: value })
133 |   }
134 | 
135 |   clearHandler() {
136 |     this.setState({
137 |       resultArray: [],
138 |       resultSelectedIndex: 0,
139 |     })
140 |   }
141 | 
142 |   checkViewport(e) {
143 |     this.setState({ isMobile: (window.innerWidth <= 960) });
144 |   }
145 | 
146 |   isSearchClear() {
147 |     return (this.state.resultArray.length === 0)
148 |   }
149 | 
150 |   processResults(raw, delimiters) {
151 |     return parser(raw, delimiters).map((i, index) => {
152 |       return {
153 |         index: index,
154 |         value: i,
155 |         visited: false
156 |       }
157 |     })
158 |   }
159 | }
160 | 
161 | 
162 | const styles = theme => ({
163 |   root: {
164 |     minHeight: '100%',
165 |     backgroundColor: '#000',
166 |   },
167 | })
168 | 
169 | 
170 | export default withStyles(styles)(App);
171 | 


--------------------------------------------------------------------------------
/src/details/Details.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles } from '@material-ui/core/styles';
 4 | import Button from '@material-ui/core/Button';
 5 | import ClearAllIcon from '@material-ui/icons/ClearAll';
 6 | import Video from './video/Video';
 7 | import Wiki from './wiki/Wiki';
 8 | 
 9 | 
10 | class Details extends Component {
11 | 
12 |   static propTypes = {
13 |     classes: PropTypes.object.isRequired,
14 |     isMobile: PropTypes.bool.isRequired,
15 |     resultSelected: PropTypes.object.isRequired,
16 |   }
17 | 
18 |   render() {
19 |     const { classes, isMobile, resultSelected } = this.props
20 | 
21 |     return (
22 |       <main className={isMobile ? classes.mobile : classes.desktop}>
23 |         <div className={classes.toolbar} />
24 |         <div className={classes.paper}>
25 |           <Wiki isMobile={isMobile} searchString={resultSelected.value} />
26 |           <Video isMobile={isMobile} searchString={resultSelected.value} />
27 |         </div>
28 |         <Button variant="fab"
29 |           color="secondary"
30 |           aria-label="Search"
31 |           className={classes.fab}
32 |           onClick={() => this.props.onClear()}
33 |         >
34 |           <ClearAllIcon />
35 |         </Button>
36 |       </main>
37 |     )
38 |   }
39 | }
40 | 
41 | const styles = theme => ({
42 |   desktop: {
43 |     marginLeft: 255,
44 |     width: 'calc(100% - 255px)',
45 |     top: 0,
46 |     bottom: 0,
47 |     position: 'absolute'
48 |   },
49 |   mobile: {
50 |     width: '100%',
51 |     top: 0,
52 |     bottom: 0,
53 |     position: 'absolute'
54 |   },
55 |   paper: {
56 |     padding: theme.spacing.unit * 2,
57 |     textAlign: 'center',
58 |     width: '100%',
59 |     top: 0,
60 |     bottom: 0,
61 |     position: 'absolute',
62 |     zIndex: 0,
63 |   },
64 |   fab: {
65 |     position: 'fixed',
66 |     bottom: theme.spacing.unit * 3,
67 |     right: theme.spacing.unit * 3,
68 |   },
69 |   toolbar: theme.mixins.toolbar,
70 | });
71 | 
72 | export default withStyles(styles)(Details);
73 | 


--------------------------------------------------------------------------------
/src/details/video/Video.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles } from '@material-ui/core/styles';
 4 | 
 5 | const API = 'AIzaSyAOYG1Ai4mZy6L-ifZgQ8bzS87vA6v3JdA'
 6 | const finalURL = `https://www.googleapis.com/youtube/v3/search?key=${API}&part=id&type=video&maxResults=1&videoEmbeddable=true&q=`
 7 | 
 8 | class Video extends Component {
 9 | 
10 |   static props = {
11 |     classes: PropTypes.object.isRequired,
12 |     searchString: PropTypes.string.isRequired,
13 |     isMobile: PropTypes.bool.isRequired,
14 |   }
15 | 
16 |   state = {
17 |     videoLink: ''
18 |   }
19 | 
20 |   componentWillReceiveProps() {
21 |     fetch(finalURL + encodeURI(this.props.searchString))
22 |       .then((response) => response.json())
23 |       .then((responseJson) => {
24 |         const results = responseJson.items.map(obj => "https://www.youtube.com/embed/" + obj.id.videoId);
25 |         this.setState({ videoLink: results[0] });
26 |       })
27 |       .catch((error) => {
28 |         console.error(error);
29 |       });
30 |   }
31 | 
32 | 
33 | 
34 |   render() {
35 |     const { videoLink } = this.state
36 |     const { searchString, classes, isMobile } = this.props
37 | 
38 |     return (
39 |       <div className={isMobile ? classes.rootMobile : classes.rootDesktop}>
40 |         <iframe className={classes.videoFrame}
41 |           title={"Result for " + searchString}
42 |           src={videoLink}
43 |           allowFullScreen>
44 |         </iframe>
45 |       </div>
46 |     );
47 |   }
48 | }
49 | 
50 | const styles = theme => ({
51 |   rootDesktop: {
52 |     zIndex: 1,
53 |     position: 'fixed',
54 |     height: 180,
55 |     width: 320,
56 |     bottom: theme.spacing.unit * 3,
57 |     left: 255 + (theme.spacing.unit * 3),
58 |   },
59 |   rootMobile: {
60 |     zIndex: 1,
61 |     position: 'fixed',
62 |     height: 90,
63 |     width: 160,
64 |     bottom: theme.spacing.unit * 3,
65 |     left: theme.spacing.unit * 3,
66 |   },
67 |   videoFrame: {
68 |     height: '100%',
69 |     width: '100%',
70 |     border: 'none',
71 |   },
72 | });
73 | 
74 | export default withStyles(styles)(Video);


--------------------------------------------------------------------------------
/src/details/wiki/Wiki.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles } from '@material-ui/core/styles';
 4 | 
 5 | const wikiURL = 'https://en.m.wikipedia.org/wiki/Special:Search?search='
 6 | 
 7 | 
 8 | class Wiki extends Component {
 9 | 
10 |   static props = {
11 |     classes: PropTypes.object.isRequired,
12 |     searchString: PropTypes.string.isRequired,
13 |     isMobile: PropTypes.bool.isRequired,
14 |   }
15 | 
16 | 
17 |   render() {
18 |     const { searchString, classes } = this.props
19 | 
20 |     return (
21 |       <div className={classes.root}>
22 |         <iframe id="wikiFrame"
23 |           className={classes.wikiframe}
24 |           title={"Result for " + searchString}
25 |           width="100%"
26 |           height="100%"
27 |           src={wikiURL + encodeURI(searchString)}>
28 |         </iframe>
29 |       </div>
30 |     );
31 |   }
32 | }
33 | 
34 | const styles = theme => ({
35 |   root: {
36 |     height: '100%',
37 |     width: '100%',
38 |     position: 'relative',
39 |     top: 0,
40 |   },
41 |   wikiframe: {
42 |     border: 'none',
43 |     height: '100%',
44 |     width: '100%',
45 |   },
46 | });
47 | 
48 | export default withStyles(styles)(Wiki);


--------------------------------------------------------------------------------
/src/header/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles } from '@material-ui/core/styles';
 4 | import AppBar from '@material-ui/core/AppBar';
 5 | import Toolbar from '@material-ui/core/Toolbar';
 6 | import Typography from '@material-ui/core/Typography';
 7 | import IconButton from '@material-ui/core/IconButton';
 8 | import MenuIcon from '@material-ui/icons/Menu';
 9 | 
10 | 
11 | class Header extends Component {
12 | 
13 |   static propTypes = {
14 |     classes: PropTypes.object.isRequired,
15 |     isMobile: PropTypes.bool.isRequired,
16 |     onMenuClick: PropTypes.func.isRequired,
17 |   }
18 | 
19 |   render() {
20 |     const { classes, isMobile, onMenuClick } = this.props
21 | 
22 |     const menuButton = (
23 |       <IconButton className={classes.menuButton}
24 |         onClick={() => onMenuClick()}
25 |         color="inherit"
26 |         aria-label="Menu"
27 |       >
28 |         <MenuIcon />
29 |       </IconButton>
30 |     )
31 | 
32 |     return (
33 |       <AppBar position="fixed" className={classes.appBar}>
34 |         <Toolbar>
35 |           {isMobile ? menuButton : null}
36 |           <Typography variant="title"
37 |             color="inherit"
38 |             className={classes.flex}
39 |           >
40 |             WOYE
41 |              </Typography>
42 |         </Toolbar>
43 |       </AppBar>
44 |     )
45 |   }
46 | }
47 | 
48 | 
49 | const styles = theme => ({
50 |   appBar: {
51 |     zIndex: theme.zIndex.drawer + 1,
52 |   },
53 |   flex: {
54 |     flexGrow: 1,
55 |   },
56 |   menuButton: {
57 |     marginLeft: -12,
58 |     marginRight: 20,
59 |   },
60 | })
61 | 
62 | export default withStyles(styles)(Header);
63 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html, body, #root {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   font-family: sans-serif;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'));
8 | registerServiceWorker();
9 | 


--------------------------------------------------------------------------------
/src/main/Main.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { withStyles } from '@material-ui/core/styles';
  4 | import Button from '@material-ui/core/Button';
  5 | import SearchIcon from '@material-ui/icons/Search';
  6 | import Options from './options/Options';
  7 | import Input from './input/Input';
  8 | import Icon from '@material-ui/core/Icon';
  9 | import Typography from '@material-ui/core/Typography';
 10 | import Divider from '@material-ui/core/Divider';
 11 | 
 12 | class Main extends Component {
 13 | 
 14 |   static propTypes = {
 15 |     classes: PropTypes.object.isRequired,
 16 |     onSearch: PropTypes.func.isRequired,
 17 |     isMobile: PropTypes.bool.isRequired,
 18 |     inputValue: PropTypes.string.isRequired,
 19 |     localeValue: PropTypes.string.isRequired,
 20 |     categoryValue: PropTypes.string.isRequired,
 21 |     delimitersValue: PropTypes.string.isRequired,
 22 |     onInputChange: PropTypes.func.isRequired,
 23 |     onDelimitersChange: PropTypes.func.isRequired,
 24 |     onCategoryChange: PropTypes.func.isRequired,
 25 |     onLocaleChange: PropTypes.func.isRequired,
 26 |   }
 27 | 
 28 |   state = {
 29 |     showAdvanced: false,
 30 |   }
 31 | 
 32 |   render() {
 33 |     const { classes, isMobile, inputValue, localeValue, categoryValue, delimitersValue } = this.props
 34 |     const { onSearch, onInputChange, onDelimitersChange, onCategoryChange, onLocaleChange } = this.props
 35 |     const { showAdvanced } = this.state
 36 | 
 37 |     const options = (
 38 |       <Options isMobile={isMobile}
 39 |         localeValue={localeValue}
 40 |         categoryValue={categoryValue}
 41 |         delimitersValue={delimitersValue}
 42 |         onDelimitersChange={(e) => onDelimitersChange(e)}
 43 |         onCategoryChange={(e) => onCategoryChange(e)}
 44 |         onLocaleChange={(e) => onLocaleChange(e)} />
 45 |     )
 46 | 
 47 |     const showAdvancedButton = (
 48 |       <Button color="secondary"
 49 |         className={classes.optsButton}
 50 |         onClick={this.toggleAdvancedOptions.bind(this, showAdvanced)}
 51 |       >
 52 |         {showAdvanced ? "Hide advanced options" : "Show advanced options"}
 53 |         <Icon>{showAdvanced ? 'arrow_drop_up' : 'arrow_drop_down'}</Icon>
 54 |       </Button>
 55 |     )
 56 | 
 57 |     const introduction = (
 58 |       <div>
 59 |         <Typography variant="display1" align={isMobile ? "center" : "left"} gutterBottom>
 60 |           What's this for?
 61 |         </Typography>
 62 |         <Typography align="justify" paragraph>
 63 |           Insert plain text and get information from Wikipedia and the most relevant video from Youtube, for each keyword. Try the following example and see the results:
 64 |         </Typography>
 65 |         <Typography className={classes.quoteText} align="justify" color="textSecondary" paragraph>
 66 |           Fortnite.. ,#Plato . ;@Rihanna  , the silence of the lambs#  #*meme *Michael Jackson . white shark >;. > sequoia
 67 |         </Typography>
 68 |         <Divider />
 69 |       </div>
 70 |     )
 71 | 
 72 |     return (
 73 |       <main className={classes.root}>
 74 |         <div className={classes.mainContainer}>
 75 |           <div className={classes.toolbar} />
 76 |           {introduction}
 77 |           <Input isMobile={isMobile}
 78 |             value={inputValue}
 79 |             onChange={(e) => onInputChange(e)} />
 80 |           {showAdvancedButton}
 81 |           {showAdvanced ? options : null}
 82 |           <Button variant="fab"
 83 |             color="secondary"
 84 |             aria-label="Search"
 85 |             className={classes.fab}
 86 |             onClick={() => onSearch()}
 87 |           >
 88 |             <SearchIcon />
 89 |           </Button>
 90 |         </div>
 91 |       </main>
 92 |     )
 93 |   }
 94 | 
 95 |   toggleAdvancedOptions(currentState) {
 96 |     this.setState({ showAdvanced: !currentState })
 97 |   }
 98 | }
 99 | 
100 | const styles = theme => ({
101 |   root: {
102 |     width: '100%',
103 |     position: 'relative',
104 |   },
105 |   mainContainer: {
106 |     minHeight: '100%',
107 |     width: '100%',
108 |     padding: theme.spacing.unit * 2,
109 |     paddingTop: theme.spacing.unit,
110 |   },
111 |   fab: {
112 |     position: 'fixed',
113 |     bottom: theme.spacing.unit * 3,
114 |     right: theme.spacing.unit * 3,
115 |   },
116 |   textField: {
117 |     width: '100%',
118 |     height: '100%',
119 |     marginBottom: theme.spacing.unit * 2,
120 |   },
121 |   quoteText: {
122 |     borderLeft: '3px solid rgba(255, 255, 255, 0.7)',
123 |     paddingLeft: theme.spacing.unit,
124 |     marginLeft: theme.spacing.unit
125 |   },
126 |   optsButton: {
127 |     width: '100%',
128 |   },
129 |   toolbar: theme.mixins.toolbar,
130 | });
131 | 
132 | export default withStyles(styles)(Main);
133 | 


--------------------------------------------------------------------------------
/src/main/input/Input.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 4 | import TextField from '@material-ui/core/TextField';
 5 | 
 6 | class Input extends Component {
 7 | 
 8 |   static propTypes = {
 9 |     classes: PropTypes.object.isRequired,
10 |     onChange: PropTypes.func.isRequired,
11 |     isMobile: PropTypes.bool.isRequired,
12 |     value: PropTypes.string.isRequired,
13 |   }
14 | 
15 |   render() {
16 |     const { classes, onChange, value } = this.props;
17 | 
18 |     const theme = createMuiTheme({
19 |       palette: {
20 |         type: 'dark',
21 |         primary: {
22 |           light: '#ff5a36',
23 |           main: '#ff0000',
24 |           dark: '#c20000',
25 |           contrastText: '#fff',
26 |         },
27 |       },
28 |     })
29 | 
30 |     return (
31 |       <div>
32 |         <MuiThemeProvider theme={theme}>
33 |           <TextField className={classes.textField}
34 |             onChange={(e) => onChange(e.target.value)}
35 |             label="Insert plain text"
36 |             value={value}
37 |             multiline/>
38 |         </MuiThemeProvider>
39 |       </div>
40 |     )
41 |   }
42 | }
43 | 
44 | const styles = theme => ({
45 |   textField: {
46 |     width: '100%',
47 |     height: '100%',
48 |     marginBottom: theme.spacing.unit * 2,
49 |     marginTop: theme.spacing.unit * 2,
50 |   },
51 |   toolbar: theme.mixins.toolbar,
52 | });
53 | 
54 | export default withStyles(styles)(Input);
55 | 


--------------------------------------------------------------------------------
/src/main/options/Options.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
  4 | import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  5 | import ExpansionPanel from '@material-ui/core/ExpansionPanel';
  6 | import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
  7 | import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
  8 | import Typography from '@material-ui/core/Typography';
  9 | import TextField from '@material-ui/core/TextField';
 10 | import IconButton from '@material-ui/core/IconButton';
 11 | import InputAdornment from '@material-ui/core/InputAdornment';
 12 | import InfoIcon from '@material-ui/icons/Info'
 13 | 
 14 | 
 15 | class Options extends Component {
 16 | 
 17 |   static propTypes = {
 18 |     classes: PropTypes.object.isRequired,
 19 |     isMobile: PropTypes.bool.isRequired,
 20 |     localeValue: PropTypes.string.isRequired,
 21 |     categoryValue: PropTypes.string.isRequired,
 22 |     delimitersValue: PropTypes.string.isRequired,
 23 |     onDelimitersChange: PropTypes.func.isRequired,
 24 |     onCategoryChange: PropTypes.func.isRequired,
 25 |     onLocaleChange: PropTypes.func.isRequired,
 26 |   }
 27 | 
 28 |   render() {
 29 |     const { classes, isMobile, onDelimitersChange, delimitersValue } = this.props;
 30 | 
 31 |     const theme = createMuiTheme({
 32 |       palette: {
 33 |         type: 'dark',
 34 |         primary: {
 35 |           light: '#ff5a36',
 36 |           main: '#ff0000',
 37 |           dark: '#c20000',
 38 |           contrastText: '#fff',
 39 |         },
 40 |       },
 41 |     })
 42 | 
 43 |     const localeDetails = (
 44 |       <Typography>
 45 |         (TODO)
 46 |       </Typography>
 47 |     )
 48 | 
 49 |     const categoryDetails = (
 50 |       <Typography>
 51 |         (TODO)
 52 |       </Typography>
 53 |     )
 54 | 
 55 |     const infoButton = (
 56 |       <InputAdornment position="end">
 57 |         <IconButton aria-label="Info about regular expressions"
 58 |           href='https://regexr.com/3ta3s'
 59 |           target='_blank'
 60 |         >
 61 |           <InfoIcon />
 62 |         </IconButton>
 63 |       </InputAdornment>
 64 |     )
 65 | 
 66 |     const delimitersDetails = (
 67 |       <MuiThemeProvider theme={theme}>
 68 |         <TextField className={classes.textField}
 69 |           label=" "
 70 |           onChange={(e) => onDelimitersChange(e.target.value)}
 71 |           value={delimitersValue}
 72 |           InputProps={{ endAdornment: infoButton, }} />
 73 |       </MuiThemeProvider>
 74 |     )
 75 | 
 76 |     const panel = (disabled, heading, subheading, content) => {
 77 |       return (
 78 |         <ExpansionPanel disabled={disabled}>
 79 |           <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
 80 |             <Typography className={classes.heading}>{heading}</Typography>
 81 |             {isMobile ? null : <Typography className={classes.secondaryHeading}>{subheading}</Typography>}
 82 |           </ExpansionPanelSummary>
 83 |           <ExpansionPanelDetails className={classes.root}>
 84 |             {isMobile ? <Typography className={classes.secondaryHeading}>{subheading}</Typography> : null}
 85 |             {content}
 86 |           </ExpansionPanelDetails>
 87 |         </ExpansionPanel>
 88 |       )
 89 |     }
 90 | 
 91 |     return (
 92 |       <div className={classes.root}>
 93 |         {panel(false, 'Delimiters', 'Breaking characters for the introduced plain-text (regular expression)', delimitersDetails)}
 94 |         {panel(true, 'Language', '(TODO) Change to get the best results for your search', localeDetails)}
 95 |         {panel(true, 'Category', '(TODO) For more accurate results (leave blank for a mixed search)', categoryDetails)}
 96 |       </div>
 97 |     )
 98 |   }
 99 | 
100 |   onTextFieldChange(e) {
101 |     this.setState({ raw: e.target.value })
102 |   }
103 | 
104 |   onSearch(raw) {
105 |     this.props.onSearch({ rawText: raw })
106 |   }
107 | }
108 | 
109 | const styles = theme => ({
110 |   root: {
111 |     width: '100%',
112 |     display: 'block'
113 |   },
114 |   heading: {
115 |     fontSize: theme.typography.pxToRem(15),
116 |     flexBasis: '33.33%',
117 |     flexShrink: 0,
118 |   },
119 |   secondaryHeading: {
120 |     fontSize: theme.typography.pxToRem(15),
121 |     color: theme.palette.text.secondary,
122 |   },
123 |   textField: {
124 |     width: '100%',
125 |   },
126 | })
127 | 
128 | export default withStyles(styles)(Options);
129 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/results/Results.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles } from '@material-ui/core/styles';
 4 | import Drawer from '@material-ui/core/Drawer';
 5 | import List from '@material-ui/core/List';
 6 | import ResultItem from './item/ResultItem';
 7 | 
 8 | 
 9 | class Result extends Component {
10 | 
11 |   static propTypes = {
12 |     classes: PropTypes.object.isRequired,
13 |     isOpen: PropTypes.bool.isRequired,
14 |     isMobile: PropTypes.bool.isRequired,
15 |     onToggleDrawer: PropTypes.func.isRequired,
16 |     resultArray: PropTypes.array.isRequired,
17 |     onResultSelect: PropTypes.func.isRequired,
18 |     resultSelectedIndex: PropTypes.number.isRequired,
19 |   }
20 | 
21 |   render() {
22 |     const { classes, resultArray, isOpen, isMobile, onToggleDrawer, resultSelectedIndex, onResultSelect } = this.props
23 | 
24 |     const resultList = (
25 |       <div className={classes.list}>
26 |         <List component="nav">
27 |           {resultArray.map((i) =>
28 |             <ResultItem key={i.index}
29 |               item={i}
30 |               selected={i.index === resultSelectedIndex}
31 |               onSelect={() => onResultSelect(i.index)}
32 |             >
33 |             </ResultItem>
34 |           )}
35 |         </List>
36 |       </div>
37 |     )
38 | 
39 |     const temporaryDrawer = (
40 |       <div tabIndex={0}
41 |         role="button"
42 |         onClick={() => onToggleDrawer(false)}
43 |         onKeyDown={() => onToggleDrawer(false)}
44 |       >
45 |         {resultList}
46 |       </div>
47 |     )
48 | 
49 |     const clippedDrawer = (
50 |       <div>
51 |         <div className={classes.toolbar} />
52 |         {resultList}
53 |       </div>
54 |     )
55 | 
56 |     return (
57 |       <Drawer open={isOpen}
58 |         variant={isMobile ? 'temporary' : 'permanent'}
59 |         onClose={() => onToggleDrawer(false)}
60 |       >
61 |         {isMobile ? temporaryDrawer : clippedDrawer}
62 |       </Drawer>
63 |     )
64 |   }
65 | }
66 | 
67 | const styles = theme => ({
68 |   list: {
69 |     width: 250,
70 |   },
71 |   toolbar: theme.mixins.toolbar,
72 | })
73 | 
74 | export default withStyles(styles)(Result);
75 | 


--------------------------------------------------------------------------------
/src/results/item/ResultItem.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { withStyles } from '@material-ui/core/styles';
 4 | import ListItem from '@material-ui/core/ListItem';
 5 | import ListItemText from '@material-ui/core/ListItemText';
 6 | import ListItemIcon from '@material-ui/core/ListItemIcon';
 7 | import EyeIcon from '@material-ui/icons/RemoveRedEye';
 8 | import EyeOutlinedIcon from '@material-ui/icons/RemoveRedEyeOutlined';
 9 | 
10 | 
11 | class ResultItem extends Component {
12 | 
13 |   static propTypes = {
14 |     classes: PropTypes.object.isRequired,
15 |     item: PropTypes.object.isRequired,
16 |     selected: PropTypes.bool.isRequired,
17 |     onSelect: PropTypes.func.isRequired,
18 |   }
19 | 
20 |   render() {
21 |     const { item, onSelect, selected, classes } = this.props
22 | 
23 |     return (
24 |       <div className={selected ? classes.selected : classes.default}>
25 |         <ListItem button
26 |           divider
27 |           onClick={() => onSelect()}
28 |         >
29 |           <ListItemIcon>
30 |             {item.visited ? <EyeOutlinedIcon /> : <EyeIcon />}
31 |           </ListItemIcon>
32 |           <ListItemText primary={item.value} />
33 |         </ListItem>
34 |       </div>
35 |     )
36 |   }
37 | }
38 | 
39 | const styles = {
40 |   default: {
41 |     backgroundColor: 'rgba(0,0,0,0)'
42 |   },
43 |   selected: {
44 |     backgroundColor: 'rgba(0,0,0,0.12)'
45 |   },
46 | }
47 | 
48 | export default withStyles(styles)(ResultItem);


--------------------------------------------------------------------------------