├── .gitignore
├── 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
    ├── components
        └── Pokemon
        │   ├── PokemonController.js
        │   ├── PokemonController.test.js
        │   ├── PokemonProvider.js
        │   ├── PokemonView.js
        │   ├── PokemonViewModel.js
        │   ├── PokemonViewModel.test.js
        │   └── UI
        │       ├── Button.js
        │       ├── Card.js
        │       ├── Input.js
        │       ├── PokemonForm.js
        │       ├── PokemonImage.js
        │       └── PokemonList.js
    ├── index.css
    ├── index.js
    ├── models
        ├── RootStore.js
        └── domain
        │   └── PokemonModel.js
    └── res
        ├── images
            ├── 1.gif
            ├── 10.gif
            ├── 2.gif
            ├── 3.gif
            ├── 4.gif
            ├── 5.gif
            ├── 6.gif
            ├── 7.gif
            ├── 8.gif
            └── 9.gif
        └── values
            └── colors.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | .idea/
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # next.js build output
63 | .next
64 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React with MVVM - Pokedex showcase application
 2 | 
 3 | ## Installation
 4 | 
 5 | 1. Clone repository 
 6 | ```bash
 7 | $ git clone https://github.com/davinci2015/react-mvvm-pokemon 
 8 | ```
 9 | 2. cd into project directory
10 | ```bash
11 | $ cd react-mvvm-pokemon/
12 | ```
13 | 3. Install all npm packages
14 | ```bash
15 | $ npm install
16 | ```
17 | 4. Run npm development script
18 | ```bash
19 | $ npm start
20 | ```
21 | 5. Browse to http://localhost:3000
22 | 


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


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


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


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


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


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


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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-mvvm-pokemon",
  3 |   "author": "Danijel Vincijanović",
  4 |   "version": "0.1.0",
  5 |   "private": true,
  6 |   "dependencies": {
  7 |     "autoprefixer": "7.1.6",
  8 |     "babel-core": "^6.26.3",
  9 |     "babel-eslint": "7.2.3",
 10 |     "babel-jest": "20.0.3",
 11 |     "babel-loader": "7.1.2",
 12 |     "babel-preset-react-app": "^3.1.1",
 13 |     "babel-runtime": "6.26.0",
 14 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 15 |     "chalk": "1.1.3",
 16 |     "css-loader": "0.28.7",
 17 |     "dotenv": "4.0.0",
 18 |     "dotenv-expand": "4.2.0",
 19 |     "eslint": "4.10.0",
 20 |     "eslint-config-react-app": "^2.1.0",
 21 |     "eslint-loader": "1.9.0",
 22 |     "eslint-plugin-flowtype": "2.39.1",
 23 |     "eslint-plugin-import": "2.8.0",
 24 |     "eslint-plugin-jsx-a11y": "5.1.1",
 25 |     "eslint-plugin-react": "7.4.0",
 26 |     "extract-text-webpack-plugin": "3.0.2",
 27 |     "file-loader": "1.1.5",
 28 |     "fs-extra": "3.0.1",
 29 |     "html-webpack-plugin": "2.29.0",
 30 |     "mobx": "^5.9.0",
 31 |     "mobx-react": "^5.4.3",
 32 |     "object-assign": "4.1.1",
 33 |     "postcss-flexbugs-fixes": "3.2.0",
 34 |     "postcss-loader": "2.0.8",
 35 |     "promise": "8.0.1",
 36 |     "raf": "3.4.0",
 37 |     "react": "^16.8.5",
 38 |     "react-dev-utils": "^5.0.3",
 39 |     "react-dom": "^16.8.5",
 40 |     "resolve": "1.6.0",
 41 |     "style-loader": "0.19.0",
 42 |     "sw-precache-webpack-plugin": "0.11.4",
 43 |     "url-loader": "0.6.2",
 44 |     "uuid": "^3.3.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 |   "devDependencies": {
 51 |     "babel-plugin-transform-decorators-legacy": "^1.3.5",
 52 |     "enzyme": "^3.9.0",
 53 |     "enzyme-adapter-react-16": "^1.11.2",
 54 |     "faker": "^4.1.0",
 55 |     "jest": "^23.6.0"
 56 |   },
 57 |   "scripts": {
 58 |     "start": "node scripts/start.js",
 59 |     "build": "node scripts/build.js",
 60 |     "test": "node scripts/test.js test --env=jsdom",
 61 |     "test-coverage": "jest --coverage"
 62 |   },
 63 |   "jest": {
 64 |     "collectCoverageFrom": [
 65 |       "src/**/*.{js,jsx,mjs}"
 66 |     ],
 67 |     "setupFiles": [
 68 |       "<rootDir>/config/polyfills.js"
 69 |     ],
 70 |     "testMatch": [
 71 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
 72 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
 73 |     ],
 74 |     "testEnvironment": "node",
 75 |     "testURL": "http://localhost",
 76 |     "transform": {
 77 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 78 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 79 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 80 |     },
 81 |     "transformIgnorePatterns": [
 82 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
 83 |     ],
 84 |     "moduleNameMapper": {
 85 |       "^react-native$": "react-native-web"
 86 |     },
 87 |     "moduleFileExtensions": [
 88 |       "web.js",
 89 |       "js",
 90 |       "json",
 91 |       "web.jsx",
 92 |       "jsx",
 93 |       "node",
 94 |       "mjs"
 95 |     ]
 96 |   },
 97 |   "babel": {
 98 |     "plugins": [
 99 |       "transform-decorators-legacy"
100 |     ],
101 |     "presets": [
102 |       "react-app"
103 |     ]
104 |   },
105 |   "eslintConfig": {
106 |     "extends": "react-app"
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/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 href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 | 
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>React App</title>
25 |   </head>
26 |   <body>
27 |     <div id="root"></div>
28 |     <!--
29 |       This HTML file is a template.
30 |       If you open it directly in the browser, you will see an empty page.
31 | 
32 |       You can add webfonts, meta tags, or analytics to this file.
33 |       The build step will place the bundled scripts into the <body> tag.
34 | 
35 |       To begin the development, run `npm start` or `yarn start`.
36 |       To create a production bundle, use `npm run build` or `yarn build`.
37 |     -->
38 |   </body>
39 | </html>
40 | 


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


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


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


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Provider } from 'mobx-react'
 3 | import PokemonProvider from './components/Pokemon/PokemonProvider'
 4 | import RootStore from './models/RootStore'
 5 | 
 6 | const rootStore = new RootStore()
 7 | 
 8 | class App extends Component {
 9 |     render() {
10 |         return (
11 |             <Provider {...rootStore.getStores()}>
12 |                 <PokemonProvider/>
13 |             </Provider>
14 |         )
15 |     }
16 | }
17 | 
18 | export default App
19 | 


--------------------------------------------------------------------------------
/src/components/Pokemon/PokemonController.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PokemonView from './PokemonView'
 3 | 
 4 | class PokemonController extends React.Component {
 5 |     state = {
 6 |         pokemonImage: '1.gif',
 7 |         pokemonName: ''
 8 |     }
 9 | 
10 |     setRandomPokemonImage = () => {
11 |         const rand = Math.ceil(Math.random() * 10)
12 |         this.setState({ pokemonImage: `${rand}.gif` })
13 |     }
14 | 
15 |     setPokemonName = (e) => {
16 |         this.setState({ pokemonName: e.target.value })
17 |     }
18 | 
19 |     clearPokemonName() {
20 |         this.setState({ pokemonName: '' })
21 |     }
22 | 
23 |     savePokemon = () => {
24 |         this.props.viewModel.addPokemon({
25 |             image: this.state.pokemonImage,
26 |             name: this.state.pokemonName
27 |         })
28 |     }
29 | 
30 |     addPokemon = () => {
31 |         this.savePokemon()
32 |         this.clearPokemonName()
33 |     }
34 | 
35 |     removePokemon = (pokemon) => {
36 |         this.props.viewModel.removePokemon(pokemon)
37 |     }
38 | 
39 |     render() {
40 |         const { viewModel } = this.props
41 | 
42 |         return (
43 |             <PokemonView
44 |                 pokemons={viewModel.getPokemons()}
45 |                 pokemonImage={this.state.pokemonImage}
46 |                 randomizePokemon={this.setRandomPokemonImage}
47 |                 setPokemonName={this.setPokemonName}
48 |                 addPokemon={this.addPokemon}
49 |                 removePokemon={this.removePokemon}
50 |                 pokemonName={this.state.pokemonName}
51 |                 shouldDisableSubmit={!this.state.pokemonName}
52 |             />
53 |         )
54 |     }
55 | }
56 | 
57 | export default PokemonController


--------------------------------------------------------------------------------
/src/components/Pokemon/PokemonController.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Enzyme from 'enzyme'
 3 | import Adapter from 'enzyme-adapter-react-16'
 4 | import faker from 'faker'
 5 | import PokemonController from './PokemonController'
 6 | 
 7 | Enzyme.configure({ adapter: new Adapter() })
 8 | 
 9 | describe('PokemonController', () => {
10 |     let viewModel = null
11 |     let wrapper = null
12 |     let randNumber = null
13 |     let pokemonMock = {
14 |         name: faker.name.firstName()
15 |     }
16 | 
17 |     beforeEach(() => {
18 |         viewModel = {
19 |             addPokemon(pokemon) {},
20 |             removePokemon(pokemon) {},
21 |             getPokemons() {}
22 |         }
23 |         
24 |         randNumber = faker.random.number()
25 |         global.Math.random = jest.fn().mockImplementation(() => randNumber)
26 |         global.Math.ceil = jest.fn().mockImplementation(n => n)
27 | 
28 |         wrapper = Enzyme.shallow(<PokemonController viewModel={viewModel}/>)
29 |     })
30 | 
31 |     afterEach(() => {
32 |         jest.resetAllMocks()
33 |     }) 
34 | 
35 |     it('should set random pokemon image in the component state', () => {
36 |         wrapper.instance().setRandomPokemonImage()
37 |         expect(wrapper.state().pokemonImage).toBe(`${randNumber * 10}.gif`)
38 |     })
39 | 
40 |     it('should set pokemon name in the component state', () => {
41 |         const mock = faker.lorem.word()
42 |         const e = { target: { value: mock }}
43 | 
44 |         wrapper.instance().setPokemonName(e)
45 |         expect(wrapper.state().pokemonName).toBe(mock)
46 |     })
47 | 
48 |     it('should clear pokemon name in the component state', () => {
49 |         wrapper.instance().clearPokemonName()
50 |         expect(wrapper.state().pokemonName).toBe('')
51 |     })
52 | 
53 |     it('should call addPokemon method from the viewModel with valid params', () => {
54 |         const spy = jest.spyOn(viewModel, 'addPokemon')
55 |         wrapper.instance().savePokemon()
56 | 
57 |         expect(spy).toHaveBeenCalledWith({
58 |             image: wrapper.state().pokemonImage,
59 |             name: wrapper.state().pokemonName
60 |         })
61 |     })
62 | 
63 |     it('should save Pokemon and clear Pokemon name from state', () => {
64 |         const spySave = jest.spyOn(wrapper.instance(), 'savePokemon')
65 |         const spyClear = jest.spyOn(wrapper.instance(), 'clearPokemonName')
66 | 
67 |         wrapper.instance().addPokemon()
68 | 
69 |         expect(spySave).toHaveBeenCalled()
70 |         expect(spyClear).toHaveBeenCalled()
71 |     })
72 | 
73 |     it('should remove Pokemon', () => {
74 |         const spy = jest.spyOn(viewModel, 'removePokemon')
75 |         wrapper.instance().removePokemon(pokemonMock)
76 | 
77 |         expect(spy).toHaveBeenCalled()
78 |         expect(spy).toHaveBeenCalledWith(pokemonMock)
79 |     })
80 | })


--------------------------------------------------------------------------------
/src/components/Pokemon/PokemonProvider.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { inject } from 'mobx-react'
 3 | import PokemonController from './PokemonController'
 4 | import PokemonViewModel from './PokemonViewModel'
 5 | import RootStore from '../../models/RootStore'
 6 | 
 7 | @inject(RootStore.type.POKEMON_MODEL)
 8 | class PokemonProvider extends React.Component {
 9 |     constructor(props) {
10 |         super(props)
11 |         const pokemonModel = props[RootStore.type.POKEMON_MODEL]
12 |         this.viewModel = new PokemonViewModel(pokemonModel)
13 |     }
14 | 
15 |     render() {
16 |         return (
17 |             <PokemonController viewModel={this.viewModel}/>
18 |         )
19 |     }
20 | }
21 | 
22 | export default PokemonProvider


--------------------------------------------------------------------------------
/src/components/Pokemon/PokemonView.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PokemonList from './UI/PokemonList'
 3 | import PokemonForm from './UI/PokemonForm'
 4 | 
 5 | class PokemonView extends React.Component {
 6 |     render() {
 7 |         const {
 8 |             pokemons,
 9 |             pokemonImage,
10 |             pokemonName,
11 |             randomizePokemon,
12 |             setPokemonName,
13 |             addPokemon,
14 |             removePokemon,
15 |             shouldDisableSubmit
16 |         } = this.props
17 | 
18 |         return (
19 |             <React.Fragment>
20 |                 <PokemonForm
21 |                     image={pokemonImage}
22 |                     onInputChange={setPokemonName}
23 |                     inputValue={pokemonName}
24 |                     randomize={randomizePokemon}
25 |                     onSubmit={addPokemon}
26 |                     shouldDisableSubmit={shouldDisableSubmit}
27 |                 />
28 |                 <PokemonList
29 |                     removePokemon={removePokemon}
30 |                     pokemons={pokemons}
31 |                 />
32 |             </React.Fragment>
33 |         )
34 |     }
35 | }
36 | 
37 | export default PokemonView


--------------------------------------------------------------------------------
/src/components/Pokemon/PokemonViewModel.js:
--------------------------------------------------------------------------------
 1 | class PokemonViewModel {
 2 |     constructor(pokemonStore) {
 3 |         this.store = pokemonStore
 4 |     }
 5 | 
 6 |     getPokemons() {
 7 |         return this.store.getPokemons()
 8 |     }
 9 | 
10 |     addPokemon(pokemon) {
11 |         this.store.addPokemon(pokemon)
12 |     }
13 | 
14 |     removePokemon(pokemon) {
15 |         this.store.removePokemon(pokemon)
16 |     }
17 | }
18 | 
19 | export default PokemonViewModel


--------------------------------------------------------------------------------
/src/components/Pokemon/PokemonViewModel.test.js:
--------------------------------------------------------------------------------
 1 | import faker from 'faker'
 2 | import PokemonViewModel from './PokemonViewModel'
 3 | 
 4 | describe('PokemonViewModel', () => {
 5 |     let storeMock = null
 6 |     let viewModel = null
 7 |     let pokemonMock = {
 8 |         name: faker.name.firstName
 9 |     }
10 | 
11 |     beforeEach(() => {
12 |         storeMock = {
13 |             getPokemons() {},
14 |             addPokemon() {},
15 |             removePokemon() {}
16 |         }
17 | 
18 |         viewModel = new PokemonViewModel(storeMock)
19 |     })
20 | 
21 |     afterEach(() => {
22 |         jest.resetAllMocks()
23 |     })
24 | 
25 |     it('should call getPokemons()', () => {
26 |         const spy = jest.spyOn(storeMock, 'getPokemons')
27 |         viewModel.getPokemons()
28 | 
29 |         expect(spy).toHaveBeenCalled()
30 |         expect(spy).toHaveReturned()
31 |     })
32 | 
33 |     it('should call addPokemon() with passed param', () => {
34 |         const spy = jest.spyOn(storeMock, 'addPokemon')
35 |         viewModel.addPokemon(pokemonMock)
36 | 
37 |         expect(spy).toHaveBeenCalled()
38 |         expect(spy).toHaveBeenCalledWith(pokemonMock)
39 |     })
40 | 
41 |     it('should call removePokemon() with passed param', () => {
42 |         const spy = jest.spyOn(storeMock, 'removePokemon')
43 |         viewModel.removePokemon(pokemonMock)
44 | 
45 |         expect(spy).toHaveBeenCalled()
46 |         expect(spy).toHaveBeenCalledWith(pokemonMock)
47 |     })
48 | })


--------------------------------------------------------------------------------
/src/components/Pokemon/UI/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class Button extends React.Component {
 4 |     render() {
 5 |         const { onClick, disabled, style } = this.props
 6 | 
 7 |         return (
 8 |             <button
 9 |                 className="btn"
10 |                 type="button"
11 |                 style={style}
12 |                 onClick={onClick}
13 |                 disabled={disabled}>
14 |                 {this.props.children}
15 |             </button>
16 |         )
17 |     }
18 | }
19 | 
20 | export default Button


--------------------------------------------------------------------------------
/src/components/Pokemon/UI/Card.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PokemonImage from './PokemonImage'
 3 | 
 4 | class Card extends React.Component {
 5 |     render() {
 6 |         const { image, title, style, onRemove } = this.props
 7 | 
 8 |         return (
 9 |             <div className="card" style={style}>
10 |                 <div className="card__content">
11 |                     <PokemonImage style={{height: 80}} image={image}/>
12 |                     <span className="card__title">{title}</span>
13 |                     <button onClick={onRemove} className="card__btn">✕</button>
14 |                 </div>
15 |             </div>
16 |         )
17 |     }
18 | }
19 | 
20 | export default Card


--------------------------------------------------------------------------------
/src/components/Pokemon/UI/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class Input extends React.Component {
 4 |     render() {
 5 |         const { placeholder, value, onChange, style } = this.props
 6 | 
 7 |         return (
 8 |             <input
 9 |                 className="input"
10 |                 style={style}
11 |                 type="text"
12 |                 placeholder={placeholder}
13 |                 value={value}
14 |                 onChange={onChange}/>
15 |         )
16 |     }
17 | }
18 | 
19 | export default Input


--------------------------------------------------------------------------------
/src/components/Pokemon/UI/PokemonForm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PokemonImage from './PokemonImage'
 3 | import Button from './Button'
 4 | import Input from './Input'
 5 | 
 6 | const styles = {
 7 |     input: {
 8 |         margin: '12px 0'
 9 |     },
10 |     button: {
11 |         margin: '12px 0'
12 |     },
13 |     buttonSmall: {
14 |         width: 'auto'
15 |     },
16 |     image: {
17 |         height: 84,
18 |         width: 'auto',
19 |         margin: '24px 0'
20 |     }
21 | }
22 | 
23 | class PokemonForm extends React.Component {
24 |     render() {
25 |         const {
26 |             randomize,
27 |             onInputChange,
28 |             image,
29 |             onSubmit,
30 |             inputValue,
31 |             shouldDisableSubmit
32 |         } = this.props
33 | 
34 |         return (
35 |             <form className="pokemon-form">
36 |                 <PokemonImage style={styles.image} image={image}/>
37 | 
38 |                 <Button
39 |                     style={{...styles.button, ...styles.buttonSmall}}
40 |                     onClick={randomize}>
41 |                     Show random
42 |                 </Button>
43 | 
44 |                 <Input
45 |                     style={styles.input}
46 |                     type="text"
47 |                     placeholder="Enter Pokemon name"
48 |                     value={inputValue}
49 |                     onChange={onInputChange}/>
50 | 
51 |                 <Button
52 |                     style={styles.button}
53 |                     onClick={onSubmit}
54 |                     disabled={shouldDisableSubmit}>
55 |                     Add to Pokedex
56 |                 </Button>
57 |             </form>
58 |         )
59 |     }
60 | }
61 | 
62 | export default PokemonForm


--------------------------------------------------------------------------------
/src/components/Pokemon/UI/PokemonImage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class PokemonImage extends React.Component {
 4 |     render() {
 5 |         return this.props.image
 6 |             ? <img
 7 |                 style={this.props.style}
 8 |                 src={require(`../../../res/images/${this.props.image}`)}
 9 |                 alt="Pokemon"/>
10 |             : null
11 |     }
12 | }
13 | 
14 | export default PokemonImage


--------------------------------------------------------------------------------
/src/components/Pokemon/UI/PokemonList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {observer} from 'mobx-react'
 3 | import Card from './Card'
 4 | 
 5 | @observer
 6 | class PokemonList extends React.Component {
 7 |     render() {
 8 |         return (
 9 |             <div className="pokemon-list">
10 |                 {
11 |                     this.props.pokemons.map(pokemon => (
12 |                         <Card
13 |                             key={pokemon.id}
14 |                             image={pokemon.image}
15 |                             title={pokemon.name}
16 |                             onRemove={() => this.props.removePokemon(pokemon)}
17 |                         />
18 |                     ))
19 |                 }
20 |             </div>
21 |         )
22 |     }
23 | }
24 | 
25 | export default PokemonList


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   font-family: sans-serif;
  5 |   background: white;
  6 | }
  7 | 
  8 | *, body, html {
  9 |   font-family: 'Karla', sans-serif;
 10 | }
 11 | 
 12 | button:focus,
 13 | input:focus {
 14 |   outline: 0;
 15 | }
 16 | 
 17 | .btn {
 18 |   background-color: #DF807E;
 19 |   border: 0;
 20 |   border-radius: 4px;
 21 |   color: #fff;
 22 |   width: 100%;
 23 |   padding: 8px 12px;
 24 |   font-size: 16px;
 25 |   cursor: pointer;
 26 |   transition: all 240ms linear;
 27 | }
 28 | 
 29 | .btn:hover {
 30 |   background-color: #ee8c8a;
 31 | }
 32 | 
 33 | .btn:disabled {
 34 |   opacity: 0.4;
 35 | }
 36 | 
 37 | .input {
 38 |   width: 100%;
 39 |   box-sizing: border-box;
 40 |   border: 0;
 41 |   border-radius: 4px;
 42 |   padding: 8px 16px;
 43 |   background-color: #fff;
 44 |   font-size: 16px;
 45 | }
 46 | 
 47 | .card {
 48 |   position: relative;
 49 |   background-color: #55A3AB;
 50 |   min-height: 80px;
 51 |   border-radius: 4px;
 52 |   padding: 12px;
 53 | }
 54 | 
 55 | .card:hover .card__btn {
 56 |   opacity: 1;
 57 | }
 58 | 
 59 | .card__content {
 60 |   display: flex;
 61 |   flex-direction: row;
 62 |   align-items: center;
 63 | }
 64 | 
 65 | .card__title {
 66 |   margin-left: 8px;
 67 |   font-size: 22px;
 68 |   font-weight: bold;
 69 |   color: #fff;
 70 | }
 71 | 
 72 | .card__btn {
 73 |   cursor: pointer;
 74 |   position: absolute;
 75 |   display: flex;
 76 |   align-items: center;
 77 |   justify-content: center;
 78 |   font-size: 10px;
 79 |   right: -6px;
 80 |   top: -6px;
 81 |   height: 26px;
 82 |   width: 26px;
 83 |   color: #fff;
 84 |   background-color: #ff5039;
 85 |   border-radius: 50%;
 86 |   opacity: 0;
 87 |   transition: opacity 150ms ease-in;
 88 | }
 89 | 
 90 | .pokemon-list {
 91 |   display: flex;
 92 |   align-items: center;
 93 |   justify-content: center;
 94 |   flex-wrap: wrap;
 95 | }
 96 | 
 97 | .pokemon-list .card {
 98 |   margin: 8px;
 99 | }
100 | 
101 | .pokemon-form {
102 |   display: flex;
103 |   flex-direction: column;
104 |   align-items: center;
105 |   width: 240px;
106 |   border-radius: 2px;
107 |   padding: 24px 32px 18px 32px;
108 |   margin: 12px auto;
109 |   background: #A2D7D5;
110 |   box-shadow: 4px 4px 8px 0px #f1e4e4;
111 | }


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


--------------------------------------------------------------------------------
/src/models/RootStore.js:
--------------------------------------------------------------------------------
 1 | import PokemonModel from './domain/PokemonModel'
 2 | 
 3 | class RootStore {
 4 |     static type = {
 5 |         POKEMON_MODEL: 'pokemonModel'
 6 |     }
 7 | 
 8 |     constructor() {
 9 |         this.pokemonModel = new PokemonModel()
10 |     }
11 | 
12 |     getStores = () => ({
13 |         [RootStore.type.POKEMON_MODEL]: this.pokemonModel
14 |     })
15 | }
16 | 
17 | export default RootStore


--------------------------------------------------------------------------------
/src/models/domain/PokemonModel.js:
--------------------------------------------------------------------------------
 1 | import { observable, action } from 'mobx'
 2 | import uuid from 'uuid/v4'
 3 | 
 4 | class PokemonModel {
 5 |     @observable pokemons = []
 6 | 
 7 |     @action addPokemon(pokemon) {
 8 |         this.pokemons.push({
 9 |             id: uuid(),
10 |             ...pokemon
11 |         })
12 |     }
13 | 
14 |     @action removePokemon(pokemon) {
15 |         this.pokemons.remove(pokemon)
16 |     }
17 | 
18 |     @action clearAll() {
19 |         this.pokemons.clear()
20 |     }
21 | 
22 |     getPokemons() {
23 |         return this.pokemons
24 |     }
25 | }
26 | 
27 | export default PokemonModel


--------------------------------------------------------------------------------
/src/res/images/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/1.gif


--------------------------------------------------------------------------------
/src/res/images/10.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/10.gif


--------------------------------------------------------------------------------
/src/res/images/2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/2.gif


--------------------------------------------------------------------------------
/src/res/images/3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/3.gif


--------------------------------------------------------------------------------
/src/res/images/4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/4.gif


--------------------------------------------------------------------------------
/src/res/images/5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/5.gif


--------------------------------------------------------------------------------
/src/res/images/6.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/6.gif


--------------------------------------------------------------------------------
/src/res/images/7.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/7.gif


--------------------------------------------------------------------------------
/src/res/images/8.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/8.gif


--------------------------------------------------------------------------------
/src/res/images/9.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davinci2015/react-mvvm-pokemon/a336567ec5f7f0a4a7e198d43e8d4775e31f43dc/src/res/images/9.gif


--------------------------------------------------------------------------------
/src/res/values/colors.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     WHITE: '#fff',
3 |     CADET_BLUE: '#55A3AB',
4 |     CRYSTAL_BLUE: '#A2D7D5',
5 |     NEW_YORK_PINK: '#DF807E',
6 |     CRAYOLA_YELLOW: '#F5E97E',
7 |     AYOLLA_ORANGE: '#CC6310'
8 | }


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