├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── CSSStub.js
    │   └── FileStub.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── demo.gif
├── package.json
├── public
    ├── bg.png
    ├── index.html
    ├── playfair
    │   ├── playfairdisplay-bold-webfont.woff
    │   ├── playfairdisplay-bold-webfont.woff2
    │   ├── playfairdisplay-bolditalic-webfont.woff
    │   ├── playfairdisplay-bolditalic-webfont.woff2
    │   ├── playfairdisplay-italic-webfont.woff
    │   ├── playfairdisplay-italic-webfont.woff2
    │   ├── playfairdisplay-regular-webfont.woff
    │   ├── playfairdisplay-regular-webfont.woff2
    │   └── stylesheet.css
    ├── search-alpha.png
    └── search.png
├── sample-savefile.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
└── src
    ├── About.js
    ├── Article.js
    ├── Editor.js
    ├── Menu.js
    ├── Saved.js
    ├── configure-localStore.js
    ├── index.css
    ├── index.js
    ├── localStore.js
    └── localStore.test.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # testing
 7 | coverage
 8 | 
 9 | # production
10 | build
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Write
 2 | 
 3 | A web-based writing app based on [Flowstate](http://hailoverman.com/flowstate). Built using React.
 4 | 
 5 | The premise is simple. You set a duration during which you write; within that duration, if you stop typing for more than 5 seconds, all your progress is lost.
 6 | 
 7 | The typical use case of Flowstate is to avoid writer's block and get something down in writing. Personally, I've been using it for journalling; it's been a good exercise getting all of my thoughts, latent or prominent, down in writing. The duration has also helped me keep a consistent routine; if I know it's only going to be fifteen minutes every session, it's easier to sit down and get through it.
 8 | 
 9 | ## Setup Instructions
10 | 
11 | This app was scaffolded using [create-react-app](https://github.com/facebookincubator/create-react-app) and then ejected.
12 | 
13 | In order to run it locally, clone this repository, run `npm install`, and then either:
14 | 
15 | - run `node scripts/start.js` to start a local server
16 | - run `node scripts/build.js` to create a production-optimized build
17 | 
18 | ## Roadmap
19 | 
20 | Have suggestions/ideas for improvement? Feel free to submit them in the form of an issue (pull requests also welcome).
21 | 
22 | - [x] Setting up DNS for write.itskrish.co (formerly accessible at [write.surge.sh](http://write.surge.sh))
23 | - [x] Refactoring storage from localStorage to a backwards-compatible ORM-esque system.
24 | - [x] Refactoring timekeeping with system time instead of setTimeout.
25 | - [ ] Setting up benchmarking + optimizing for speed.
26 | - [ ] Packaging as an Electron (Desktop) app.
27 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 2 | // injected into the application via DefinePlugin in Webpack configuration.
 3 | 
 4 | var REACT_APP = /^REACT_APP_/i;
 5 | 
 6 | function getClientEnvironment(publicUrl) {
 7 |   var processEnv = Object
 8 |     .keys(process.env)
 9 |     .filter(key => REACT_APP.test(key))
10 |     .reduce((env, key) => {
11 |       env[key] = JSON.stringify(process.env[key]);
12 |       return env;
13 |     }, {
14 |       // Useful for determining whether we’re running in production mode.
15 |       // Most importantly, it switches React into the correct mode.
16 |       'NODE_ENV': JSON.stringify(
17 |         process.env.NODE_ENV || 'development'
18 |       ),
19 |       // Useful for resolving the correct path to static assets in `public`.
20 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
21 |       // This should only be used as an escape hatch. Normally you would put
22 |       // images into the `src` and `import` them in code to get their paths.
23 |       'PUBLIC_URL': JSON.stringify(publicUrl)
24 |     });
25 |   return {'process.env': processEnv};
26 | }
27 | 
28 | module.exports = getClientEnvironment;
29 | 


--------------------------------------------------------------------------------
/config/jest/CSSStub.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/config/jest/FileStub.js:
--------------------------------------------------------------------------------
1 | module.exports = "test-file-stub";
2 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var fs = require('fs');
 3 | 
 4 | // Make sure any symlinks in the project folder are resolved:
 5 | // https://github.com/facebookincubator/create-react-app/issues/637
 6 | var appDirectory = fs.realpathSync(process.cwd());
 7 | function resolveApp(relativePath) {
 8 |   return path.resolve(appDirectory, relativePath);
 9 | }
10 | 
11 | // We support resolving modules according to `NODE_PATH`.
12 | // This lets you use absolute paths in imports inside large monorepos:
13 | // https://github.com/facebookincubator/create-react-app/issues/253.
14 | 
15 | // It works similar to `NODE_PATH` in Node itself:
16 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
17 | 
18 | // We will export `nodePaths` as an array of absolute paths.
19 | // It will then be used by Webpack configs.
20 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
21 | 
22 | var nodePaths = (process.env.NODE_PATH || '')
23 |   .split(process.platform === 'win32' ? ';' : ':')
24 |   .filter(Boolean)
25 |   .map(resolveApp);
26 | 
27 | // config after eject: we're in ./config/
28 | module.exports = {
29 |   appBuild: resolveApp('build'),
30 |   appPublic: resolveApp('public'),
31 |   appHtml: resolveApp('public/index.html'),
32 |   appIndexJs: resolveApp('src/index.js'),
33 |   appPackageJson: resolveApp('package.json'),
34 |   appSrc: resolveApp('src'),
35 |   testsSetup: resolveApp('src/setupTests.js'),
36 |   appNodeModules: resolveApp('node_modules'),
37 |   ownNodeModules: resolveApp('node_modules'),
38 |   nodePaths: nodePaths
39 | };
40 | 
41 | 
42 | 
43 | // config before publish: we're in ./packages/react-scripts/config/
44 | if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
45 |   module.exports = {
46 |     appBuild: resolveOwn('../../../build'),
47 |     appPublic: resolveOwn('../template/public'),
48 |     appHtml: resolveOwn('../template/public/index.html'),
49 |     appIndexJs: resolveOwn('../template/src/index.js'),
50 |     appPackageJson: resolveOwn('../package.json'),
51 |     appSrc: resolveOwn('../template/src'),
52 |     testsSetup: resolveOwn('../template/src/setupTests.js'),
53 |     appNodeModules: resolveOwn('../node_modules'),
54 |     ownNodeModules: resolveOwn('../node_modules'),
55 |     nodePaths: nodePaths
56 |   };
57 | }
58 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | var path = require('path');
  2 | var autoprefixer = require('autoprefixer');
  3 | var webpack = require('webpack');
  4 | var findCacheDir = require('find-cache-dir');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  7 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  9 | var getClientEnvironment = require('./env');
 10 | var paths = require('./paths');
 11 | 
 12 | // Webpack uses `publicPath` to determine where the app is being served from.
 13 | // In development, we always serve from the root. This makes config easier.
 14 | var publicPath = '/';
 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 18 | var publicUrl = '';
 19 | // Get environment variables to inject into our app.
 20 | var env = getClientEnvironment(publicUrl);
 21 | 
 22 | // This is the development configuration.
 23 | // It is focused on developer experience and fast rebuilds.
 24 | // The production configuration is different and lives in a separate file.
 25 | module.exports = {
 26 |   // This makes the bundle appear split into separate modules in the devtools.
 27 |   // We don't use source maps here because they can be confusing:
 28 |   // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
 29 |   // You may want 'cheap-module-source-map' instead if you prefer source maps.
 30 |   devtool: 'eval',
 31 |   // These are the "entry points" to our application.
 32 |   // This means they will be the "root" imports that are included in JS bundle.
 33 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 34 |   entry: [
 35 |     // Include an alternative client for WebpackDevServer. A client's job is to
 36 |     // connect to WebpackDevServer by a socket and get notified about changes.
 37 |     // When you save a file, the client will either apply hot updates (in case
 38 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 39 |     // make a syntax error, this client will display a syntax error overlay.
 40 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 41 |     // to bring better experience for Create React App users. You can replace
 42 |     // the line below with these two lines if you prefer the stock client:
 43 |     // require.resolve('webpack-dev-server/client') + '?/',
 44 |     // require.resolve('webpack/hot/dev-server'),
 45 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 46 |     // We ship a few polyfills by default:
 47 |     require.resolve('./polyfills'),
 48 |     // Finally, this is your app's code:
 49 |     paths.appIndexJs
 50 |     // We include the app code last so that if there is a runtime error during
 51 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 52 |     // changing JS code would still trigger a refresh.
 53 |   ],
 54 |   output: {
 55 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 56 |     path: paths.appBuild,
 57 |     // Add /* filename */ comments to generated require()s in the output.
 58 |     pathinfo: true,
 59 |     // This does not produce a real file. It's just the virtual path that is
 60 |     // served by WebpackDevServer in development. This is the JS bundle
 61 |     // containing code from all our entry points, and the Webpack runtime.
 62 |     filename: 'static/js/bundle.js',
 63 |     // This is the URL that app is served from. We use "/" in development.
 64 |     publicPath: publicPath
 65 |   },
 66 |   resolve: {
 67 |     // This allows you to set a fallback for where Webpack should look for modules.
 68 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 69 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 70 |     // if there any conflicts. This matches Node resolution mechanism.
 71 |     // https://github.com/facebookincubator/create-react-app/issues/253
 72 |     fallback: paths.nodePaths,
 73 |     // These are the reasonable defaults supported by the Node ecosystem.
 74 |     // We also include JSX as a common component filename extension to support
 75 |     // some tools, although we do not recommend using it, see:
 76 |     // https://github.com/facebookincubator/create-react-app/issues/290
 77 |     extensions: ['.js', '.json', '.jsx', ''],
 78 |     alias: {
 79 |       // Support React Native Web
 80 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 81 |       'react-native': 'react-native-web'
 82 |     }
 83 |   },
 84 |   
 85 |   module: {
 86 |     // First, run the linter.
 87 |     // It's important to do this before Babel processes the JS.
 88 |     preLoaders: [
 89 |       {
 90 |         test: /\.(js|jsx)$/,
 91 |         loader: 'eslint',
 92 |         include: paths.appSrc,
 93 |       }
 94 |     ],
 95 |     loaders: [
 96 |       // Process JS with Babel.
 97 |       {
 98 |         test: /\.(js|jsx)$/,
 99 |         include: paths.appSrc,
100 |         loader: 'babel',
101 |         query: {
102 |           
103 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
104 |           // It enables caching results in ./node_modules/.cache/react-scripts/
105 |           // directory for faster rebuilds. We use findCacheDir() because of:
106 |           // https://github.com/facebookincubator/create-react-app/issues/483
107 |           cacheDirectory: findCacheDir({
108 |             name: 'react-scripts'
109 |           })
110 |         }
111 |       },
112 |       // "postcss" loader applies autoprefixer to our CSS.
113 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
114 |       // "style" loader turns CSS into JS modules that inject <style> tags.
115 |       // In production, we use a plugin to extract that CSS to a file, but
116 |       // in development "style" loader enables hot editing of CSS.
117 |       {
118 |         test: /\.css$/,
119 |         loader: 'style!css?importLoaders=1!postcss'
120 |       },
121 |       // JSON is not enabled by default in Webpack but both Node and Browserify
122 |       // allow it implicitly so we also enable it.
123 |       {
124 |         test: /\.json$/,
125 |         loader: 'json'
126 |       },
127 |       // "file" loader makes sure those assets get served by WebpackDevServer.
128 |       // When you `import` an asset, you get its (virtual) filename.
129 |       // In production, they would get copied to the `build` folder.
130 |       {
131 |         test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
132 |         loader: 'file',
133 |         query: {
134 |           name: 'static/media/[name].[hash:8].[ext]'
135 |         }
136 |       },
137 |       // "url" loader works just like "file" loader but it also embeds
138 |       // assets smaller than specified size as data URLs to avoid requests.
139 |       {
140 |         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
141 |         loader: 'url',
142 |         query: {
143 |           limit: 10000,
144 |           name: 'static/media/[name].[hash:8].[ext]'
145 |         }
146 |       }
147 |     ]
148 |   },
149 |   
150 |   // We use PostCSS for autoprefixing only.
151 |   postcss: function() {
152 |     return [
153 |       autoprefixer({
154 |         browsers: [
155 |           '>1%',
156 |           'last 4 versions',
157 |           'Firefox ESR',
158 |           'not ie < 9', // React doesn't support IE8 anyway
159 |         ]
160 |       }),
161 |     ];
162 |   },
163 |   plugins: [
164 |     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
165 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
166 |     // In development, this will be an empty string.
167 |     new InterpolateHtmlPlugin({
168 |       PUBLIC_URL: publicUrl
169 |     }),
170 |     // Generates an `index.html` file with the <script> injected.
171 |     new HtmlWebpackPlugin({
172 |       inject: true,
173 |       template: paths.appHtml,
174 |     }),
175 |     // Makes some environment variables available to the JS code, for example:
176 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
177 |     new webpack.DefinePlugin(env),
178 |     // This is necessary to emit hot updates (currently CSS only):
179 |     new webpack.HotModuleReplacementPlugin(),
180 |     // Watcher doesn't work well if you mistype casing in a path so we use
181 |     // a plugin that prints an error when you attempt to do this.
182 |     // See https://github.com/facebookincubator/create-react-app/issues/240
183 |     new CaseSensitivePathsPlugin(),
184 |     // If you require a missing module and then `npm install` it, you still have
185 |     // to restart the development server for Webpack to discover it. This plugin
186 |     // makes the discovery automatic so you don't have to restart.
187 |     // See https://github.com/facebookincubator/create-react-app/issues/186
188 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules)
189 |   ],
190 |   // Some libraries import Node modules but don't use them in the browser.
191 |   // Tell Webpack to provide empty mocks for them so importing them works.
192 |   node: {
193 |     fs: 'empty',
194 |     net: 'empty',
195 |     tls: 'empty'
196 |   }
197 | };
198 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | var path = require('path');
  2 | var autoprefixer = require('autoprefixer');
  3 | var webpack = require('webpack');
  4 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  5 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  6 | var ManifestPlugin = require('webpack-manifest-plugin');
  7 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | var url = require('url');
  9 | var paths = require('./paths');
 10 | var getClientEnvironment = require('./env');
 11 | 
 12 | function ensureSlash(path, needsSlash) {
 13 |   var hasSlash = path.endsWith('/');
 14 |   if (hasSlash && !needsSlash) {
 15 |     return path.substr(path, path.length - 1);
 16 |   } else if (!hasSlash && needsSlash) {
 17 |     return path + '/';
 18 |   } else {
 19 |     return path;
 20 |   }
 21 | }
 22 | 
 23 | // We use "homepage" field to infer "public path" at which the app is served.
 24 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
 25 | // single-page apps that may serve index.html for nested URLs like /todos/42.
 26 | // We can't use a relative path in HTML because we don't want to load something
 27 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 28 | var homepagePath = require(paths.appPackageJson).homepage;
 29 | var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
 30 | // Webpack uses `publicPath` to determine where the app is being served from.
 31 | // It requires a trailing slash, or the file assets will get an incorrect path.
 32 | var publicPath = ensureSlash(homepagePathname, true);
 33 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 34 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 35 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 36 | var publicUrl = ensureSlash(homepagePathname, false);
 37 | // Get environment variables to inject into our app.
 38 | var env = getClientEnvironment(publicUrl);
 39 | 
 40 | // Assert this just to be safe.
 41 | // Development builds of React are slow and not intended for production.
 42 | if (env['process.env'].NODE_ENV !== '"production"') {
 43 |   throw new Error('Production builds must have NODE_ENV=production.');
 44 | }
 45 | 
 46 | // This is the production configuration.
 47 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 48 | // The development configuration is different and lives in a separate file.
 49 | module.exports = {
 50 |   // Don't attempt to continue if there are any errors.
 51 |   bail: true,
 52 |   // We generate sourcemaps in production. This is slow but gives good results.
 53 |   // You can exclude the *.map files from the build during deployment.
 54 |   devtool: 'source-map',
 55 |   // In production, we only want to load the polyfills and the app code.
 56 |   entry: [
 57 |     require.resolve('./polyfills'),
 58 |     paths.appIndexJs
 59 |   ],
 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 |   },
 71 |   resolve: {
 72 |     // This allows you to set a fallback for where Webpack should look for modules.
 73 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 74 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 75 |     // if there any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     fallback: paths.nodePaths,
 78 |     // These are the reasonable defaults supported by the Node ecosystem.
 79 |     // We also include JSX as a common component filename extension to support
 80 |     // some tools, although we do not recommend using it, see:
 81 |     // https://github.com/facebookincubator/create-react-app/issues/290
 82 |     extensions: ['.js', '.json', '.jsx', ''],
 83 |     alias: {
 84 |       // Support React Native Web
 85 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 86 |       'react-native': 'react-native-web'
 87 |     }
 88 |   },
 89 |   
 90 |   module: {
 91 |     // First, run the linter.
 92 |     // It's important to do this before Babel processes the JS.
 93 |     preLoaders: [
 94 |       {
 95 |         test: /\.(js|jsx)$/,
 96 |         loader: 'eslint',
 97 |         include: paths.appSrc
 98 |       }
 99 |     ],
100 |     loaders: [
101 |       // Process JS with Babel.
102 |       {
103 |         test: /\.(js|jsx)$/,
104 |         include: paths.appSrc,
105 |         loader: 'babel',
106 |         
107 |       },
108 |       // The notation here is somewhat confusing.
109 |       // "postcss" loader applies autoprefixer to our CSS.
110 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
111 |       // "style" loader normally turns CSS into JS modules injecting <style>,
112 |       // but unlike in development configuration, we do something different.
113 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
114 |       // (second argument), then grabs the result CSS and puts it into a
115 |       // separate file in our build process. This way we actually ship
116 |       // a single CSS file in production instead of JS code injecting <style>
117 |       // tags. If you use code splitting, however, any async bundles will still
118 |       // use the "style" loader inside the async code so CSS from them won't be
119 |       // in the main CSS file.
120 |       {
121 |         test: /\.css$/,
122 |         // "?-autoprefixer" disables autoprefixer in css-loader itself:
123 |         // https://github.com/webpack/css-loader/issues/281
124 |         // We already have it thanks to postcss. We only pass this flag in
125 |         // production because "css" loader only enables autoprefixer-powered
126 |         // removal of unnecessary prefixes when Uglify plugin is enabled.
127 |         // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
128 |         // including CSS. This is confusing and will be removed in Webpack 2:
129 |         // https://github.com/webpack/webpack/issues/283
130 |         loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&-autoprefixer!postcss')
131 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
132 |       },
133 |       // JSON is not enabled by default in Webpack but both Node and Browserify
134 |       // allow it implicitly so we also enable it.
135 |       {
136 |         test: /\.json$/,
137 |         loader: 'json'
138 |       },
139 |       // "file" loader makes sure those assets end up in the `build` folder.
140 |       // When you `import` an asset, you get its filename.
141 |       {
142 |         test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
143 |         loader: 'file',
144 |         query: {
145 |           name: 'static/media/[name].[hash:8].[ext]'
146 |         }
147 |       },
148 |       // "url" loader works just like "file" loader but it also embeds
149 |       // assets smaller than specified size as data URLs to avoid requests.
150 |       {
151 |         test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
152 |         loader: 'url',
153 |         query: {
154 |           limit: 10000,
155 |           name: 'static/media/[name].[hash:8].[ext]'
156 |         }
157 |       }
158 |     ]
159 |   },
160 |   
161 |   // We use PostCSS for autoprefixing only.
162 |   postcss: function() {
163 |     return [
164 |       autoprefixer({
165 |         browsers: [
166 |           '>1%',
167 |           'last 4 versions',
168 |           'Firefox ESR',
169 |           'not ie < 9', // React doesn't support IE8 anyway
170 |         ]
171 |       }),
172 |     ];
173 |   },
174 |   plugins: [
175 |     // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
176 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
177 |     // In production, it will be an empty string unless you specify "homepage"
178 |     // in `package.json`, in which case it will be the pathname of that URL.
179 |     new InterpolateHtmlPlugin({
180 |       PUBLIC_URL: publicUrl
181 |     }),
182 |     // Generates an `index.html` file with the <script> injected.
183 |     new HtmlWebpackPlugin({
184 |       inject: true,
185 |       template: paths.appHtml,
186 |       minify: {
187 |         removeComments: true,
188 |         collapseWhitespace: true,
189 |         removeRedundantAttributes: true,
190 |         useShortDoctype: true,
191 |         removeEmptyAttributes: true,
192 |         removeStyleLinkTypeAttributes: true,
193 |         keepClosingSlash: true,
194 |         minifyJS: true,
195 |         minifyCSS: true,
196 |         minifyURLs: true
197 |       }
198 |     }),
199 |     // Makes some environment variables available to the JS code, for example:
200 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
201 |     // It is absolutely essential that NODE_ENV was set to production here.
202 |     // Otherwise React will be compiled in the very slow development mode.
203 |     new webpack.DefinePlugin(env),
204 |     // This helps ensure the builds are consistent if source hasn't changed:
205 |     new webpack.optimize.OccurrenceOrderPlugin(),
206 |     // Try to dedupe duplicated modules, if any:
207 |     new webpack.optimize.DedupePlugin(),
208 |     // Minify the code.
209 |     new webpack.optimize.UglifyJsPlugin({
210 |       compress: {
211 |         screw_ie8: true, // React doesn't support IE8
212 |         warnings: false
213 |       },
214 |       mangle: {
215 |         screw_ie8: true
216 |       },
217 |       output: {
218 |         comments: false,
219 |         screw_ie8: true
220 |       }
221 |     }),
222 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
223 |     new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
224 |     // Generate a manifest file which contains a mapping of all asset filenames
225 |     // to their corresponding output file so that tools can pick it up without
226 |     // having to parse `index.html`.
227 |     new ManifestPlugin({
228 |       fileName: 'asset-manifest.json'
229 |     })
230 |   ],
231 |   // Some libraries import Node modules but don't use them in the browser.
232 |   // Tell Webpack to provide empty mocks for them so importing them works.
233 |   node: {
234 |     fs: 'empty',
235 |     net: 'empty',
236 |     tls: 'empty'
237 |   }
238 | };
239 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/demo.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flowstate-web",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "autoprefixer": "6.5.1",
 7 |     "babel-core": "6.17.0",
 8 |     "babel-eslint": "7.0.0",
 9 |     "babel-jest": "16.0.0",
10 |     "babel-loader": "6.2.5",
11 |     "babel-preset-react-app": "^1.0.0",
12 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
13 |     "chalk": "1.1.3",
14 |     "connect-history-api-fallback": "1.3.0",
15 |     "cross-spawn": "4.0.2",
16 |     "css-loader": "0.25.0",
17 |     "detect-port": "1.0.1",
18 |     "dotenv": "2.0.0",
19 |     "eslint": "3.8.1",
20 |     "eslint-config-react-app": "^0.3.0",
21 |     "eslint-loader": "1.6.0",
22 |     "eslint-plugin-flowtype": "2.21.0",
23 |     "eslint-plugin-import": "2.0.1",
24 |     "eslint-plugin-jsx-a11y": "2.2.3",
25 |     "eslint-plugin-react": "6.4.1",
26 |     "extract-text-webpack-plugin": "1.0.1",
27 |     "file-loader": "0.9.0",
28 |     "filesize": "3.3.0",
29 |     "find-cache-dir": "0.1.1",
30 |     "fs-extra": "0.30.0",
31 |     "gzip-size": "3.0.0",
32 |     "html-webpack-plugin": "2.24.0",
33 |     "http-proxy-middleware": "0.17.2",
34 |     "jest": "16.0.2",
35 |     "json-loader": "0.5.4",
36 |     "object-assign": "4.1.0",
37 |     "path-exists": "2.1.0",
38 |     "postcss-loader": "1.0.0",
39 |     "promise": "7.1.1",
40 |     "react-dev-utils": "^0.3.0",
41 |     "recursive-readdir": "2.1.0",
42 |     "rimraf": "2.5.4",
43 |     "strip-ansi": "3.0.1",
44 |     "style-loader": "0.13.1",
45 |     "tape": "^4.6.3",
46 |     "tape-run": "^2.1.5",
47 |     "url-loader": "0.5.7",
48 |     "webpack": "1.13.2",
49 |     "webpack-dev-server": "1.16.2",
50 |     "webpack-manifest-plugin": "1.1.0",
51 |     "whatwg-fetch": "1.0.0"
52 |   },
53 |   "dependencies": {
54 |     "nprogress": "^0.2.0",
55 |     "quill": "^1.2.6",
56 |     "react": "^15.4.0",
57 |     "react-dom": "^15.4.0",
58 |     "react-dropzone": "^3.7.3",
59 |     "react-quill": "^0.4.1",
60 |     "react-router": "^3.0.0",
61 |     "sweetalert": "^1.1.3"
62 |   },
63 |   "scripts": {
64 |     "start": "node scripts/start.js",
65 |     "build": "node scripts/build.js",
66 |     "test": "node scripts/test.js --env=jsdom"
67 |   },
68 |   "jest": {
69 |     "moduleFileExtensions": [
70 |       "jsx",
71 |       "js",
72 |       "json"
73 |     ],
74 |     "moduleNameMapper": {
75 |       "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
76 |       "^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
77 |     },
78 |     "setupFiles": [
79 |       "<rootDir>/config/polyfills.js"
80 |     ],
81 |     "testPathIgnorePatterns": [
82 |       "<rootDir>/(build|docs|node_modules)/"
83 |     ],
84 |     "testEnvironment": "node"
85 |   },
86 |   "babel": {
87 |     "presets": [
88 |       "react-app"
89 |     ]
90 |   },
91 |   "eslintConfig": {
92 |     "extends": "react-app"
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/public/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/bg.png


--------------------------------------------------------------------------------
/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">
 6 |     <!--
 7 |       Notice the use of %PUBLIC_URL% in the tag above.
 8 |       It will be replaced with the URL of the `public` folder during the build.
 9 |       Only files inside the `public` folder can be referenced from the HTML.
10 | 
11 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
12 |       work correctly both with client-side routing and a non-root public URL.
13 |       Learn how to configure a non-root public URL by running `npm run build`.
14 |     -->
15 |     <title>Write</title>
16 |   </head>
17 |   <body>
18 |     <div id="root"></div>
19 |     <!--
20 |       This HTML file is a template.
21 |       If you open it directly in the browser, you will see an empty page.
22 | 
23 |       You can add webfonts, meta tags, or analytics to this file.
24 |       The build step will place the bundled scripts into the <body> tag.
25 | 
26 |       To begin the development, run `npm start`.
27 |       To create a production bundle, use `npm run build`.
28 |     -->
29 |   </body>
30 |   <script>
31 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
32 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
33 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
34 |   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
35 | 
36 |   ga('create', 'UA-89648820-1', 'auto');
37 |   ga('send', 'pageview');
38 |   </script>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-bold-webfont.woff


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-bold-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-bold-webfont.woff2


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-bolditalic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-bolditalic-webfont.woff


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-bolditalic-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-bolditalic-webfont.woff2


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-italic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-italic-webfont.woff


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-italic-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-italic-webfont.woff2


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-regular-webfont.woff


--------------------------------------------------------------------------------
/public/playfair/playfairdisplay-regular-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/playfair/playfairdisplay-regular-webfont.woff2


--------------------------------------------------------------------------------
/public/playfair/stylesheet.css:
--------------------------------------------------------------------------------
 1 | /* Generated by Font Squirrel (https://www.fontsquirrel.com) on November 22, 2016 */
 2 | 
 3 | 
 4 | 
 5 | @font-face {
 6 |     font-family: 'Playfair Display Bold';
 7 |     src: url('playfairdisplay-bold-webfont.woff2') format('woff2'),
 8 |          url('playfairdisplay-bold-webfont.woff') format('woff');
 9 |     font-weight: 800;
10 |     font-style: normal;
11 | 
12 | }
13 | 
14 | 
15 | 
16 | 
17 | @font-face {
18 |     font-family: 'playfair_displaybold_italic';
19 |     src: url('playfairdisplay-bolditalic-webfont.woff2') format('woff2'),
20 |          url('playfairdisplay-bolditalic-webfont.woff') format('woff');
21 |     font-weight: normal;
22 |     font-style: italics;
23 | 
24 | }
25 | 
26 | 
27 | 
28 | 
29 | @font-face {
30 |     font-family: 'playfair_displayitalic';
31 |     src: url('playfairdisplay-italic-webfont.woff2') format('woff2'),
32 |          url('playfairdisplay-italic-webfont.woff') format('woff');
33 |     font-weight: normal;
34 |     font-style: italics;
35 | 
36 | }
37 | 
38 | 
39 | 
40 | 
41 | @font-face {
42 |     font-family: 'Playfair Display';
43 |     src: url('playfairdisplay-regular-webfont.woff2') format('woff2'),
44 |          url('playfairdisplay-regular-webfont.woff') format('woff');
45 |     font-weight: normal;
46 |     font-style: normal;
47 | 
48 | }


--------------------------------------------------------------------------------
/public/search-alpha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/search-alpha.png


--------------------------------------------------------------------------------
/public/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krrishd/write/3e24f74958a71c75566c71134543e31818362198/public/search.png


--------------------------------------------------------------------------------
/sample-savefile.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "slug": "2016-07-07T06:00:00.000Z",
 4 |     "date": "Thu Jul 07 2016 - 10:20:46 PM MST",
 5 |     "content": "<div>Here's some sample content written in this app.</div><div><br></div><div>I'm able to <b>bold</b>, <i>italicize</i>, <i><b>or both</b>.</i></div><div><br></div><div>Besides that though, aesthetics are irrelevant; here, I'm typing my thoughts in a stream-of-consciousness format.</div><div><br></div><div>The concept is simple but the results are awesome. Can't wait for people to use this.</div>"
 6 |   },
 7 |   {
 8 |     "date": "Mon Sep 26 2016 - 10:20:46 PM MST",
 9 |     "slug": "2016-09-26T06:00:00.000Z",
10 |     "content": "<div>Here's some sample content written in this app.</div><div><br></div><div>I'm able to <b>bold</b>, <i>italicize</i>, <i><b>or both</b>.</i></div><div><br></div><div>Besides that though, aesthetics are irrelevant; here, I'm typing my thoughts in a stream-of-consciousness format.</div><div><br></div><div>The concept is simple but the results are awesome. Can't wait for people to use this.</div>"
11 |   },
12 |   {
13 |     "slug": "2016-10-10T06:00:00.000Z",
14 |     "date": "Mon Oct 10 2016 - 10:20:46 PM MST",
15 |     "content": "<div>Here's some sample content written in this app.</div><div><br></div><div>I'm able to <b>bold</b>, <i>italicize</i>, <i><b>or both</b>.</i></div><div><br></div><div>Besides that though, aesthetics are irrelevant; here, I'm typing my thoughts in a stream-of-consciousness format.</div><div><br></div><div>The concept is simple but the results are awesome. Can't wait for people to use this.</div>"
16 |   },
17 |   {
18 |     "date": "Sat Nov 26 2016 - 10:20:46 PM MST",
19 |     "slug": "2016-11-27T05:20:46.378Z",
20 |     "content": "<div>Here's some sample content written in this app.</div><div><br></div><div>I'm able to <b>bold</b>, <i>italicize</i>, <i><b>or both</b>.</i></div><div><br></div><div>Besides that though, aesthetics are irrelevant; here, I'm typing my thoughts in a stream-of-consciousness format.</div><div><br></div><div>The concept is simple but the results are awesome. Can't wait for people to use this.</div>"
21 |   }
22 | ]


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.NODE_ENV = 'production';
  3 | 
  4 | // Load environment variables from .env file. Suppress warnings using silent
  5 | // if this file is missing. dotenv will never modify any environment variables
  6 | // that have already been set.
  7 | // https://github.com/motdotla/dotenv
  8 | require('dotenv').config({silent: true});
  9 | 
 10 | var chalk = require('chalk');
 11 | var fs = require('fs-extra');
 12 | var path = require('path');
 13 | var filesize = require('filesize');
 14 | var gzipSize = require('gzip-size').sync;
 15 | var rimrafSync = require('rimraf').sync;
 16 | var webpack = require('webpack');
 17 | var config = require('../config/webpack.config.prod');
 18 | var paths = require('../config/paths');
 19 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 20 | var recursive = require('recursive-readdir');
 21 | var stripAnsi = require('strip-ansi');
 22 | 
 23 | // Warn and crash if required files are missing
 24 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 25 |   process.exit(1);
 26 | }
 27 | 
 28 | // Input: /User/dan/app/build/static/js/main.82be8.js
 29 | // Output: /static/js/main.js
 30 | function removeFileNameHash(fileName) {
 31 |   return fileName
 32 |     .replace(paths.appBuild, '')
 33 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 34 | }
 35 | 
 36 | // Input: 1024, 2048
 37 | // Output: "(+1 KB)"
 38 | function getDifferenceLabel(currentSize, previousSize) {
 39 |   var FIFTY_KILOBYTES = 1024 * 50;
 40 |   var difference = currentSize - previousSize;
 41 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 42 |   if (difference >= FIFTY_KILOBYTES) {
 43 |     return chalk.red('+' + fileSize);
 44 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 45 |     return chalk.yellow('+' + fileSize);
 46 |   } else if (difference < 0) {
 47 |     return chalk.green(fileSize);
 48 |   } else {
 49 |     return '';
 50 |   }
 51 | }
 52 | 
 53 | // First, read the current file sizes in build directory.
 54 | // This lets us display how much they changed later.
 55 | recursive(paths.appBuild, (err, fileNames) => {
 56 |   var previousSizeMap = (fileNames || [])
 57 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 58 |     .reduce((memo, fileName) => {
 59 |       var contents = fs.readFileSync(fileName);
 60 |       var key = removeFileNameHash(fileName);
 61 |       memo[key] = gzipSize(contents);
 62 |       return memo;
 63 |     }, {});
 64 | 
 65 |   // Remove all content but keep the directory so that
 66 |   // if you're in it, you don't end up in Trash
 67 |   rimrafSync(paths.appBuild + '/*');
 68 | 
 69 |   // Start the webpack build
 70 |   build(previousSizeMap);
 71 | 
 72 |   // Merge with the public folder
 73 |   copyPublicFolder();
 74 | });
 75 | 
 76 | // Print a detailed summary of build files.
 77 | function printFileSizes(stats, previousSizeMap) {
 78 |   var assets = stats.toJson().assets
 79 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 80 |     .map(asset => {
 81 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 82 |       var size = gzipSize(fileContents);
 83 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 84 |       var difference = getDifferenceLabel(size, previousSize);
 85 |       return {
 86 |         folder: path.join('build', path.dirname(asset.name)),
 87 |         name: path.basename(asset.name),
 88 |         size: size,
 89 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 90 |       };
 91 |     });
 92 |   assets.sort((a, b) => b.size - a.size);
 93 |   var longestSizeLabelLength = Math.max.apply(null,
 94 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 95 |   );
 96 |   assets.forEach(asset => {
 97 |     var sizeLabel = asset.sizeLabel;
 98 |     var sizeLength = stripAnsi(sizeLabel).length;
 99 |     if (sizeLength < longestSizeLabelLength) {
100 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
101 |       sizeLabel += rightPadding;
102 |     }
103 |     console.log(
104 |       '  ' + sizeLabel +
105 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
106 |     );
107 |   });
108 | }
109 | 
110 | // Print out errors
111 | function printErrors(summary, errors) {
112 |   console.log(chalk.red(summary));
113 |   console.log();
114 |   errors.forEach(err => {
115 |     console.log(err.message || err);
116 |     console.log();
117 |   });
118 | }
119 | 
120 | // Create the production build and print the deployment instructions.
121 | function build(previousSizeMap) {
122 |   console.log('Creating an optimized production build...');
123 |   webpack(config).run((err, stats) => {
124 |     if (err) {
125 |       printErrors('Failed to compile.', [err]);
126 |       process.exit(1);
127 |     }
128 | 
129 |     if (stats.compilation.errors.length) {
130 |       printErrors('Failed to compile.', stats.compilation.errors);
131 |       process.exit(1);
132 |     }
133 | 
134 |     console.log(chalk.green('Compiled successfully.'));
135 |     console.log();
136 | 
137 |     console.log('File sizes after gzip:');
138 |     console.log();
139 |     printFileSizes(stats, previousSizeMap);
140 |     console.log();
141 | 
142 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
143 |     var homepagePath = require(paths.appPackageJson).homepage;
144 |     var publicPath = config.output.publicPath;
145 |     if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
146 |       // "homepage": "http://user.github.io/project"
147 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
148 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
149 |       console.log();
150 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
151 |       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
152 |       console.log();
153 |       console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
154 |       console.log();
155 |       console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
156 |       console.log();
157 |       console.log('    ' + chalk.dim('// ...'));
158 |       console.log('    ' + chalk.yellow('"scripts"') + ': {');
159 |       console.log('      ' + chalk.dim('// ...'));
160 |       console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
161 |       console.log('    }');
162 |       console.log();
163 |       console.log('Then run:');
164 |       console.log();
165 |       console.log('  ' + chalk.cyan('npm') +  ' run deploy');
166 |       console.log();
167 |     } else if (publicPath !== '/') {
168 |       // "homepage": "http://mywebsite.com/project"
169 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
170 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
171 |       console.log();
172 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
173 |       console.log();
174 |     } else {
175 |       // no homepage or "homepage": "http://mywebsite.com"
176 |       console.log('The project was built assuming it is hosted at the server root.');
177 |       if (homepagePath) {
178 |         // "homepage": "http://mywebsite.com"
179 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
180 |         console.log();
181 |       } else {
182 |         // no homepage
183 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
184 |         console.log('For example, add this to build it for GitHub Pages:')
185 |         console.log();
186 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
187 |         console.log();
188 |       }
189 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
190 |       console.log('You may also serve it locally with a static server:')
191 |       console.log();
192 |       console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
193 |       console.log('  ' + chalk.cyan('pushstate-server') + ' build');
194 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
195 |       console.log();
196 |     }
197 |   });
198 | }
199 | 
200 | function copyPublicFolder() {
201 |   fs.copySync(paths.appPublic, paths.appBuild, {
202 |     dereference: true,
203 |     filter: file => file !== paths.appHtml
204 |   });
205 | }
206 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | process.env.NODE_ENV = 'development';
  2 | 
  3 | // Load environment variables from .env file. Suppress warnings using silent
  4 | // if this file is missing. dotenv will never modify any environment variables
  5 | // that have already been set.
  6 | // https://github.com/motdotla/dotenv
  7 | require('dotenv').config({silent: true});
  8 | 
  9 | var chalk = require('chalk');
 10 | var webpack = require('webpack');
 11 | var WebpackDevServer = require('webpack-dev-server');
 12 | var historyApiFallback = require('connect-history-api-fallback');
 13 | var httpProxyMiddleware = require('http-proxy-middleware');
 14 | var detect = require('detect-port');
 15 | var clearConsole = require('react-dev-utils/clearConsole');
 16 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 17 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 18 | var openBrowser = require('react-dev-utils/openBrowser');
 19 | var prompt = require('react-dev-utils/prompt');
 20 | var config = require('../config/webpack.config.dev');
 21 | var paths = require('../config/paths');
 22 | 
 23 | // Warn and crash if required files are missing
 24 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 25 |   process.exit(1);
 26 | }
 27 | 
 28 | // Tools like Cloud9 rely on this.
 29 | var DEFAULT_PORT = process.env.PORT || 3000;
 30 | var compiler;
 31 | var handleCompile;
 32 | 
 33 | // You can safely remove this after ejecting.
 34 | // We only use this block for testing of Create React App itself:
 35 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 36 | if (isSmokeTest) {
 37 |   handleCompile = function (err, stats) {
 38 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 39 |       process.exit(1);
 40 |     } else {
 41 |       process.exit(0);
 42 |     }
 43 |   };
 44 | }
 45 | 
 46 | function setupCompiler(host, port, protocol) {
 47 |   // "Compiler" is a low-level interface to Webpack.
 48 |   // It lets us listen to some events and provide our own custom messages.
 49 |   compiler = webpack(config, handleCompile);
 50 | 
 51 |   // "invalid" event fires when you have changed a file, and Webpack is
 52 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 53 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 54 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 55 |   compiler.plugin('invalid', function() {
 56 |     clearConsole();
 57 |     console.log('Compiling...');
 58 |   });
 59 | 
 60 |   // "done" event fires when Webpack has finished recompiling the bundle.
 61 |   // Whether or not you have warnings or errors, you will get this event.
 62 |   compiler.plugin('done', function(stats) {
 63 |     clearConsole();
 64 | 
 65 |     // We have switched off the default Webpack output in WebpackDevServer
 66 |     // options so we are going to "massage" the warnings and errors and present
 67 |     // them in a readable focused way.
 68 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 69 |     if (!messages.errors.length && !messages.warnings.length) {
 70 |       console.log(chalk.green('Compiled successfully!'));
 71 |       console.log();
 72 |       console.log('The app is running at:');
 73 |       console.log();
 74 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 75 |       console.log();
 76 |       console.log('Note that the development build is not optimized.');
 77 |       console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
 78 |       console.log();
 79 |     }
 80 | 
 81 |     // If errors exist, only show errors.
 82 |     if (messages.errors.length) {
 83 |       console.log(chalk.red('Failed to compile.'));
 84 |       console.log();
 85 |       messages.errors.forEach(message => {
 86 |         console.log(message);
 87 |         console.log();
 88 |       });
 89 |       return;
 90 |     }
 91 | 
 92 |     // Show warnings if no errors were found.
 93 |     if (messages.warnings.length) {
 94 |       console.log(chalk.yellow('Compiled with warnings.'));
 95 |       console.log();
 96 |       messages.warnings.forEach(message => {
 97 |         console.log(message);
 98 |         console.log();
 99 |       });
100 |       // Teach some ESLint tricks.
101 |       console.log('You may use special comments to disable some warnings.');
102 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
103 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
104 |     }
105 |   });
106 | }
107 | 
108 | // We need to provide a custom onError function for httpProxyMiddleware.
109 | // It allows us to log custom error messages on the console.
110 | function onProxyError(proxy) {
111 |   return function(err, req, res){
112 |     var host = req.headers && req.headers.host;
113 |     console.log(
114 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
115 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
116 |     );
117 |     console.log(
118 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
119 |       chalk.cyan(err.code) + ').'
120 |     );
121 |     console.log();
122 | 
123 |     // And immediately send the proper error response to the client.
124 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
125 |     if (res.writeHead && !res.headersSent) {
126 |         res.writeHead(500);
127 |     }
128 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
129 |       host + ' to ' + proxy + ' (' + err.code + ').'
130 |     );
131 |   }
132 | }
133 | 
134 | function addMiddleware(devServer) {
135 |   // `proxy` lets you to specify a fallback server during development.
136 |   // Every unrecognized request will be forwarded to it.
137 |   var proxy = require(paths.appPackageJson).proxy;
138 |   devServer.use(historyApiFallback({
139 |     // Paths with dots should still use the history fallback.
140 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
141 |     disableDotRule: true,
142 |     // For single page apps, we generally want to fallback to /index.html.
143 |     // However we also want to respect `proxy` for API calls.
144 |     // So if `proxy` is specified, we need to decide which fallback to use.
145 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
146 |     // Modern browsers include text/html into `accept` header when navigating.
147 |     // However API calls like `fetch()` won’t generally accept text/html.
148 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
149 |     htmlAcceptHeaders: proxy ?
150 |       ['text/html'] :
151 |       ['text/html', '*/*']
152 |   }));
153 |   if (proxy) {
154 |     if (typeof proxy !== 'string') {
155 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
156 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
157 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
158 |       process.exit(1);
159 |     }
160 | 
161 |     // Otherwise, if proxy is specified, we will let it handle any request.
162 |     // There are a few exceptions which we won't send to the proxy:
163 |     // - /index.html (served as HTML5 history API fallback)
164 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
165 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
166 |     // Tip: use https://jex.im/regulex/ to visualize the regex
167 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
168 |     devServer.use(mayProxy,
169 |       // Pass the scope regex both to Express and to the middleware for proxying
170 |       // of both HTTP and WebSockets to work without false positives.
171 |       httpProxyMiddleware(pathname => mayProxy.test(pathname), {
172 |         target: proxy,
173 |         logLevel: 'silent',
174 |         onError: onProxyError(proxy),
175 |         secure: false,
176 |         changeOrigin: true
177 |       })
178 |     );
179 |   }
180 |   // Finally, by now we have certainly resolved the URL.
181 |   // It may be /index.html, so let the dev server try serving it again.
182 |   devServer.use(devServer.middleware);
183 | }
184 | 
185 | function runDevServer(host, port, protocol) {
186 |   var devServer = new WebpackDevServer(compiler, {
187 |     // Silence WebpackDevServer's own logs since they're generally not useful.
188 |     // It will still show compile warnings and errors with this setting.
189 |     clientLogLevel: 'none',
190 |     // By default WebpackDevServer serves physical files from current directory
191 |     // in addition to all the virtual build products that it serves from memory.
192 |     // This is confusing because those files won’t automatically be available in
193 |     // production build folder unless we copy them. However, copying the whole
194 |     // project directory is dangerous because we may expose sensitive files.
195 |     // Instead, we establish a convention that only files in `public` directory
196 |     // get served. Our build script will copy `public` into the `build` folder.
197 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
198 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
199 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
200 |     // Note that we only recommend to use `public` folder as an escape hatch
201 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
202 |     // for some reason broken when imported through Webpack. If you just want to
203 |     // use an image, put it in `src` and `import` it from JavaScript instead.
204 |     contentBase: paths.appPublic,
205 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
206 |     // for the WebpackDevServer client so it can learn when the files were
207 |     // updated. The WebpackDevServer client is included as an entry point
208 |     // in the Webpack development configuration. Note that only changes
209 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
210 |     hot: true,
211 |     // It is important to tell WebpackDevServer to use the same "root" path
212 |     // as we specified in the config. In development, we always serve from /.
213 |     publicPath: config.output.publicPath,
214 |     // WebpackDevServer is noisy by default so we emit custom message instead
215 |     // by listening to the compiler events with `compiler.plugin` calls above.
216 |     quiet: true,
217 |     // Reportedly, this avoids CPU overload on some systems.
218 |     // https://github.com/facebookincubator/create-react-app/issues/293
219 |     watchOptions: {
220 |       ignored: /node_modules/
221 |     },
222 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
223 |     https: protocol === "https",
224 |     host: host
225 |   });
226 | 
227 |   // Our custom middleware proxies requests to /index.html or a remote API.
228 |   addMiddleware(devServer);
229 | 
230 |   // Launch WebpackDevServer.
231 |   devServer.listen(port, (err, result) => {
232 |     if (err) {
233 |       return console.log(err);
234 |     }
235 | 
236 |     clearConsole();
237 |     console.log(chalk.cyan('Starting the development server...'));
238 |     console.log();
239 |     openBrowser(protocol + '://' + host + ':' + port + '/');
240 |   });
241 | }
242 | 
243 | function run(port) {
244 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
245 |   var host = process.env.HOST || 'localhost';
246 |   setupCompiler(host, port, protocol);
247 |   runDevServer(host, port, protocol);
248 | }
249 | 
250 | // We attempt to use the default port but if it is busy, we offer the user to
251 | // run on a different port. `detect()` Promise resolves to the next free port.
252 | detect(DEFAULT_PORT).then(port => {
253 |   if (port === DEFAULT_PORT) {
254 |     run(port);
255 |     return;
256 |   }
257 | 
258 |   clearConsole();
259 |   var question =
260 |     chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
261 |     '\n\nWould you like to run the app on another port instead?';
262 | 
263 |   prompt(question, true).then(shouldChangePort => {
264 |     if (shouldChangePort) {
265 |       run(port);
266 |     }
267 |   });
268 | });
269 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | process.env.NODE_ENV = 'test';
 2 | process.env.PUBLIC_URL = '';
 3 | 
 4 | // Load environment variables from .env file. Suppress warnings using silent
 5 | // if this file is missing. dotenv will never modify any environment variables
 6 | // that have already been set.
 7 | // https://github.com/motdotla/dotenv
 8 | require('dotenv').config({silent: true});
 9 | 
10 | const jest = require('jest');
11 | const argv = process.argv.slice(2);
12 | 
13 | // Watch unless on CI
14 | if (!process.env.CI) {
15 |   argv.push('--watch');
16 | }
17 | 
18 | 
19 | jest.run(argv);
20 | 


--------------------------------------------------------------------------------
/src/About.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import {
 4 |   Link
 5 | } from 'react-router';
 6 | 
 7 | class About extends Component {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 | 
12 |   componentDidMount() {
13 |     document.title = 'About';
14 |   }
15 | 
16 |   render() {
17 |     return (
18 |       <div>
19 |         <Link to="/" className="back">Back</Link>
20 |         <div className="about">
21 |           <h1>About</h1>
22 |           <p>This is a a writing app based on <a target="_blank" href="http://www.hailoverman.com/flowstate">Flowstate</a>.</p>
23 |           <p>The purpose of this is to get the user to write for a set duration without any inhibition or distraction allowed. To achieve this, the editor lets one write for a specified duration, within which, if the user goes inactive, all that has been written is deleted completely. This forces the user to continuously write throughout the session, resulting in a rough draft of (a lot of) content that can then be revised/polished.</p>
24 |           <p>All the functionality is client-side; it's a single-page app built with React and all saved data is only saved in localStorage.</p>
25 |           <a href="https://github.com/krrishd/write" className="extLink">/github</a>
26 |           <a href="http://itskrish.co" className="extLink">/me</a> 
27 |        </div>
28 |       </div>
29 |     );
30 |   }
31 | }
32 | 
33 | export default About;
34 | 


--------------------------------------------------------------------------------
/src/Article.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import {
 4 |   Link,
 5 |   browserHistory
 6 | } from 'react-router';
 7 | 
 8 | import swal from 'sweetalert';
 9 | import '../node_modules/sweetalert/dist/sweetalert.css';
10 | 
11 | class Article extends Component {
12 |   constructor(props) {
13 |     super(props);
14 |     this.store = props.route.store;
15 |     this.article = this.store.getItemsByProperty('slug', props.params.slug)[0];
16 |   }
17 | 
18 |   delete(e, article, self) {
19 |     e.preventDefault();
20 |     swal({
21 |       title: 'Are you sure?',
22 |       text: 'There\'s no way to recover anything you delete from here, so make sure you really want to!',
23 |       type: 'warning',
24 |       showCancelButton: true,
25 |       confirmButtonText: 'Yes, delete it!',
26 |       closeOnConfirm: false
27 |     }, () => {
28 |       self.store.removeItem(article);
29 |       swal({
30 |         title:'Deleted!',
31 |         text: 'This writing no longer exists here.'
32 |       }, () => {
33 |         browserHistory.push('/saved');
34 |       });
35 |     });
36 |   }
37 | 
38 |   render() {
39 |     let article = this.article;
40 |     let content = article.content;
41 |     let date = article.date;
42 |     document.title = date;
43 |     return (
44 |       <div className="article">
45 |         <Link to="/saved" className="back">Back</Link>
46 |         <h1 className="articleTitle">{date}</h1>
47 |         <div
48 |           className="articleContent fadeIn"
49 |           dangerouslySetInnerHTML={
50 |             {__html:content}
51 |           }>
52 |         </div>
53 |         <a
54 |           href="#"
55 |           className="delete extLink"
56 |           onClick={(e) => {
57 |             e.preventDefault();
58 |             this.delete(e, article, this);
59 |           }}>/delete</a>
60 |       </div>
61 |     );
62 |   }
63 | }
64 | 
65 | export default Article;


--------------------------------------------------------------------------------
/src/Editor.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | import {
  4 |   Link,
  5 |   browserHistory
  6 | } from 'react-router';
  7 | 
  8 | import ReactQuill from 'react-quill';
  9 | import '../node_modules/quill/dist/quill.core.css';
 10 | import '../node_modules/quill/dist/quill.snow.css';
 11 | 
 12 | import NProgress from 'nprogress';
 13 | import '../node_modules/nprogress/nprogress.css';
 14 | 
 15 | import swal from 'sweetalert';
 16 | import '../node_modules/sweetalert/dist/sweetalert.css';
 17 | 
 18 | let numberTextToInt = {
 19 |   "one": 1,
 20 |   "fifteen": 15,
 21 |   "thirty": 30,
 22 |   "sixty": 60
 23 | };
 24 | 
 25 | // Taken from http://stackoverflow.com/questions/5539028/converting-seconds-into-hhmmss
 26 | let secondsToHms = (d) => {
 27 |   d = Number(d);
 28 |   var h = Math.floor(d / 3600);
 29 |   var m = Math.floor(d % 3600 / 60);
 30 |   var s = Math.floor(d % 3600 % 60);
 31 |   return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s); 
 32 | }
 33 | 
 34 | class Editor extends Component {
 35 |   
 36 |   constructor(props) {
 37 |     super(props);
 38 | 
 39 |     this.store = props.route.store;
 40 | 
 41 |     this.state = {
 42 |       timeSinceLastEdit: 0,
 43 |       timeSinceStarted: 0,
 44 |       content: ''
 45 |     };
 46 | 
 47 |     this.duration = ((numberTextToInt[
 48 |       this.props.params.duration
 49 |     ]) * 60) + 5;
 50 | 
 51 |     this.timerCleared = false;
 52 |   }
 53 | 
 54 |   onTextChange = (value) => {
 55 |     this.setState({
 56 |       timeSinceLastEdit: 0,
 57 |       content: value
 58 |     });
 59 |   }
 60 | 
 61 |   generateSavedArticle(content) {
 62 |     let savedArticle = {};
 63 |     let savedDate = new Date();
 64 |     savedArticle.slug = savedDate.toISOString();
 65 |     savedArticle.date = 
 66 |       savedDate.toDateString() + ' - ' + 
 67 |       savedDate.toLocaleTimeString();
 68 |     savedArticle.content = content;
 69 |     return savedArticle;
 70 |   }
 71 | 
 72 |   clearTimer(self) {
 73 |     if (this.state.content.length == 0) {
 74 |       swal({
 75 |         title: 'Nice attempt!',
 76 |         text: 'Next time, make sure to write until your time is up so you have content to leave with.'
 77 |       }, () => {
 78 |         browserHistory.push('/saved');
 79 |       });
 80 |     }
 81 |     else if (!self.timerCleared) {
 82 |       this.store.addItem(
 83 |         this.generateSavedArticle(
 84 |           this.state.content
 85 |         )
 86 |       );
 87 |       swal({
 88 |         title:'You\'re done!',
 89 |         text: 'You can access your writing at /saved. Happy editing!'
 90 |       }, () => {
 91 |         browserHistory.push('/saved');
 92 |       });
 93 |     }
 94 |     let quillEditor = document.querySelector('.ql-editor');
 95 |     quillEditor.classList.remove('disappearing');
 96 |     NProgress.done();
 97 |     clearInterval(self.loadInterval);
 98 |     self.loadInterval = false;
 99 |     self.timerCleared = true;
100 |   }
101 | 
102 |   componentDidMount() {
103 |     let quillEditor = document.querySelector('.ql-editor');
104 |     quillEditor.setAttribute('spellcheck', false);
105 |     quillEditor.focus();
106 | 
107 |     NProgress.configure({
108 |       showSpinner: false,
109 |       trickle: false,
110 |       minimum: 0
111 |     });
112 | 
113 |     NProgress.done();
114 |     NProgress.start();
115 | 
116 |     let startTime = new Date();
117 | 
118 |     this.loadInterval = setInterval(() => {
119 | 
120 |       document.title = secondsToHms(
121 |         this.duration - this.state.timeSinceStarted - 1
122 |       );
123 | 
124 |       NProgress.set(this.state.timeSinceStarted/this.duration);
125 | 
126 |       if (this.state.timeSinceLastEdit > 4) {
127 |         quillEditor.classList.add('disappearing');
128 |       } else {
129 |         if (quillEditor.classList.contains('disappearing')) {
130 |           quillEditor.classList.remove('disappearing');
131 |         }
132 |       }
133 | 
134 |       if (this.state.timeSinceLastEdit > 7) {
135 |         if (this.state.timeSinceStarted > (this.duration - 2)) {
136 |           this.clearTimer(this);
137 |         }
138 |         this.setState({
139 |           content: '',
140 |           timeSinceLastEdit: 0
141 |         });
142 |       }
143 | 
144 |       if (this.state.timeSinceStarted > (this.duration - 2)) {
145 |         this.clearTimer(this);
146 |       }
147 | 
148 |       this.setState({
149 |         timeSinceLastEdit: (this.state.timeSinceLastEdit + 1),
150 |         timeSinceStarted: ((new Date() - startTime)/1000)
151 |       });
152 |     }, 1000)
153 |   }
154 | 
155 |   componentWillUnmount() {
156 |     this.loadInterval && clearInterval(this.loadInterval);
157 |     this.loadInterval = false;
158 |   }
159 | 
160 |   render() {
161 |     return (
162 |       <div className="editorContainer fadeIn">
163 |         <Link to="/" className="back">Back</Link>
164 |         <ReactQuill
165 |           className="reactQuill"
166 |           theme="snow"
167 |           toolbar={false}
168 |           value={this.state.content}
169 |           onChange={this.onTextChange}/>
170 |         <div className="timer">
171 |           <h1>{
172 |             secondsToHms(
173 |               this.duration - this.state.timeSinceStarted
174 |             )
175 |           }</h1>
176 |         </div>
177 |       </div>
178 |     )
179 |   }
180 | }
181 | 
182 | export default Editor;
183 | 


--------------------------------------------------------------------------------
/src/Menu.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | import {
  4 |   Link,
  5 |   browserHistory
  6 | } from 'react-router';
  7 | 
  8 | import NProgress from 'nprogress';
  9 | 
 10 | class Menu extends Component {
 11 |   constructor(props) {
 12 |     super(props);
 13 |     this.indexToURL = [
 14 |       'fifteen',
 15 |       'one',
 16 |       'thirty',
 17 |       'sixty'
 18 |     ];
 19 |     this.state = {
 20 |       menuIndex: 0
 21 |     }
 22 |   }
 23 | 
 24 |   menuEventHandler(e, self) {
 25 |     let def = document.querySelectorAll('.default');
 26 |     for(var i = 0; i < def.length; i++) {
 27 |       def[i].className = def[i].className.replace('default', '');
 28 |     }
 29 |     switch (e.keyCode) {
 30 |       case 13:
 31 |         e.preventDefault();
 32 |         browserHistory.push(`/write/${self.indexToURL[self.state.menuIndex]}`)
 33 |       case 40:
 34 |         //down
 35 |         e.preventDefault();
 36 |         if (self.state.menuIndex < 3) {
 37 |           self.setState({
 38 |             menuIndex: (self.state.menuIndex + 1)
 39 |           });
 40 |         } else if (self.state.menuIndex == 3) {
 41 |           self.setState({
 42 |             menuIndex: 0
 43 |           });
 44 |         }
 45 |         break;
 46 |       case 38:
 47 |         //up
 48 |         e.preventDefault();
 49 |         if (self.state.menuIndex == 0) {
 50 |           self.setState({
 51 |             menuIndex: 3
 52 |           });
 53 |         } else {
 54 |           self.setState({
 55 |             menuIndex: (self.state.menuIndex - 1)
 56 |           });
 57 |         }
 58 |         break;
 59 |     }
 60 |   }
 61 | 
 62 |   componentDidMount(init = true) {
 63 |     document.title = "Write";
 64 |     NProgress.done();
 65 |     document.querySelector(
 66 |       `.${this.indexToURL[this.state.menuIndex]}`
 67 |     ).className += ' default';
 68 |     document.querySelector('.menu').focus();
 69 |   }
 70 | 
 71 |   componentDidUpdate() {
 72 |     this.componentDidMount();
 73 |   }
 74 | 
 75 |   componentWillUnmount() {
 76 |     const self = this;
 77 |     window.removeEventListener('keydown', e => {
 78 |       self.menuEventHandler(e, self);
 79 |     });
 80 |   }
 81 | 
 82 |   render() {
 83 |     return (
 84 |       <div
 85 |         tabIndex="0"
 86 |         className="menu fadeIn"
 87 |         onKeyDown={
 88 |           (e) => {
 89 |             this.menuEventHandler(e, this);
 90 |           }
 91 |         }
 92 |         onBlur={(e) => {
 93 |           document.querySelector('.menu').focus();
 94 |         }}>
 95 |         <h1>Write for:</h1>
 96 |         <Link className="menuItem fifteen" to="/write/fifteen">15 Minutes</Link>
 97 |         <Link className="menuItem one" to="/write/one">1 Minute</Link>
 98 |         <Link className="menuItem thirty" to="/write/thirty">30 Minutes</Link>
 99 |         <Link className="menuItem sixty" to="/write/sixty">60 Minutes</Link>
100 |         <Link className="extLink" to="/saved">/saved</Link>
101 |         <Link className="extLink" to="/about">/about</Link>
102 |       </div>
103 |     );
104 |   }
105 | }
106 | 
107 | export default Menu;
108 | 


--------------------------------------------------------------------------------
/src/Saved.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | import {
  4 |   Link,
  5 |   browserHistory
  6 | } from 'react-router';
  7 | 
  8 | import Dropzone from 'react-dropzone';
  9 | 
 10 | import swal from 'sweetalert';
 11 | import '../node_modules/sweetalert/dist/sweetalert.css';
 12 | 
 13 | class Saved extends Component {
 14 |   constructor(props) {
 15 |     super(props);
 16 |     this.store = props.route.store;
 17 |     let savedWriting = props.route.store.getAll();
 18 |     this.state = {
 19 |       savedWritingAll: savedWriting,
 20 |       savedWriting
 21 |     }
 22 |   }
 23 | 
 24 |   // taken from http://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript
 25 |   stringToColour = (str) => {
 26 |     str = btoa(str);
 27 |     var hash = 0;
 28 |     for (var i = 0; i < str.length; i++) {
 29 |       hash = str.charCodeAt(i) + ((hash << 5) - hash);
 30 |     }
 31 |     var colour = '#';
 32 |     for (var i = 0; i < 3; i++) {
 33 |       var value = (hash >> (i * 8)) & 0xFF;
 34 |       colour += ('00' + value.toString(16)).substr(-2);
 35 |     }
 36 |     return colour;
 37 |   }
 38 |   
 39 |   calculateFileSize = (str) => {
 40 |     if (str.length < 8) {
 41 |       return '';
 42 |     }
 43 |     let m = encodeURIComponent(str).match(/%[89ABab]/g);
 44 |     let sizeInBytes = str.length + (m ? m.length : 0);
 45 |     let sizeInKilobytes = Math.ceil(sizeInBytes / 1024);
 46 |     if (sizeInKilobytes > 1024) {
 47 |       return `~ ${sizeInKilobytes / 1024} mb being used.`;
 48 |     } else {
 49 |       return `~${sizeInKilobytes} kb being used.`;
 50 |     }
 51 |   }
 52 | 
 53 |   filterSavedWriting = (query) => {
 54 |     let matchingItems = this.state.savedWritingAll
 55 |       .filter(item => {
 56 |         let itemWithoutHTML = item.content
 57 |           .replace(/<[^>]*>/g, ' ').toLowerCase();
 58 |         return itemWithoutHTML.includes(query.toLowerCase());
 59 |       });
 60 |     this.setState({
 61 |       savedWriting: matchingItems
 62 |     });
 63 |   }
 64 | 
 65 |   genDownloadURI = (text) => {
 66 |     return ('data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 67 |   }
 68 | 
 69 |   deleteAll(e, self) {
 70 |     e.preventDefault();
 71 |     swal({
 72 |       title: 'Are you sure?',
 73 |       text: 'There\'s no way to recover anything you delete from here, so make sure you really want to!',
 74 |       type: 'warning',
 75 |       showCancelButton: true,
 76 |       confirmButtonText: 'Yes, delete it all!',
 77 |       closeOnConfirm: false
 78 |     }, () => {
 79 |       self.store.reset();
 80 |       swal({
 81 |         title:'All writing deleted!',
 82 |         text: 'Hope you backed up the stuff you cared about.'
 83 |       }, () => {
 84 |         browserHistory.push('/');
 85 |         browserHistory.push('/saved');
 86 |       })
 87 |     })
 88 |   }
 89 | 
 90 |   onDrop(acceptedFiles, rejectedFiles, self) {
 91 |     let reader = new FileReader();
 92 |     if (rejectedFiles.length > 0 ||
 93 |       acceptedFiles.length == 0) {
 94 |       swal({
 95 |         title: 'You tried to upload an invalid savefile!',
 96 |         text: 'Your savefile should have been downloaded from here.'
 97 |       });
 98 |     } else {
 99 |       reader.readAsText(acceptedFiles[0]);
100 |       let content;
101 |       reader.onload = (e) => {
102 |         content = reader.result;
103 |         swal({
104 |           title: 'Are you sure you\'d like to upload this?',
105 |           text: 'Your existing content will be overwritten by the contents of the savefile.',
106 |           type: 'warning',
107 |           showCancelButton: true,
108 |           confirmButtonText: 'Yes, upload!',
109 |           closeOnConfirm: false
110 |         }, () => {
111 |           let contentJSON = JSON.parse(content);
112 |           if (contentJSON.length == 0 ||
113 |             !contentJSON[0] ||
114 |             !contentJSON[0].date ||
115 |             !contentJSON[0].slug ||
116 |             !contentJSON[0].content) {
117 |             return swal({
118 |               title: 'Invalid savefile!',
119 |               text: 'Looks like you uploaded JSON that isn\'t a savefile.',
120 |               type: 'error'
121 |             });
122 |           }
123 |           self.store.setAll(contentJSON);
124 |           swal({
125 |             title: 'Uploaded!',
126 |             text: 'The contents of your savefile can now be viewed locally at /saved.'
127 |           }, () => {
128 |             browserHistory.push('/');
129 |             browserHistory.push('/saved');
130 |           });
131 |         });
132 |       }
133 |     }
134 |   }
135 | 
136 |   componentDidMount() {
137 |     document.title = "Saved Writing";
138 |   }
139 | 
140 |   render() {
141 |     let self = this;
142 |     let savedWritingItems = this.state
143 |       .savedWriting.map(item => {
144 |         return (
145 |           <div key={item.slug} className="savedWritingItem">
146 |             <Link
147 |               to={'/saved/' + item.slug}
148 |               style={{
149 |                 borderColor: this.stringToColour(
150 |                   (new Date(item.slug)).toDateString().split(' ')[1])
151 |               }}>{item.date}</Link>
152 |           </div>
153 |         )
154 |       }).reverse();
155 |     
156 |     if (savedWritingItems.length == 0) {
157 |       savedWritingItems = (<p>Nothing here yet!</p>);
158 |     }
159 |     
160 |     return (
161 |       <div className="saved fadeIn">
162 |         <Link to="/" className="back">Back</Link>
163 |         <h1>Saved</h1>
164 |         <div className="search">
165 |           <input
166 |             type="text"
167 |             onChange={
168 |               (e) => {
169 |                 this.filterSavedWriting(
170 |                   e.target.value
171 |                 );
172 |               }
173 |             }
174 |             placeholder="Search"/>
175 |         </div>
176 |         <div className="savedItems">
177 |           {savedWritingItems}
178 |         </div>
179 |         <a
180 |           href="#"
181 |           className="delete extLink"
182 |           onClick={(e) => {
183 |             this.deleteAll(e, this)
184 |           }}>/delete-all</a>
185 |         <a
186 |           href={
187 |             this.genDownloadURI(JSON.stringify(
188 |               self.store.getAll()
189 |             ))
190 |           }
191 |           download="savefile.json"
192 |           className="download extLink">/download</a>
193 |         <Dropzone
194 |           className="dropzone"
195 |           accept="application/json"
196 |           onDrop={(a, r) => {
197 |             this.onDrop(a, r, this);
198 |           }}>
199 |           <a
200 |             className="drop extLink"
201 |             href="#"
202 |             onClick={(e) => {
203 |               e.preventDefault()
204 |             }}
205 |             >/upload</a>
206 |         </Dropzone>
207 |         <span className="filesize extLink">{
208 |           this.calculateFileSize(JSON.stringify(
209 |             self.store.getAll()                
210 |           ))
211 |         }</span>
212 |       </div>
213 |     );
214 |   }
215 | }
216 | 
217 | export default Saved;
218 | 


--------------------------------------------------------------------------------
/src/configure-localStore.js:
--------------------------------------------------------------------------------
 1 | import LocalStore from './localStore';
 2 | import swal from 'sweetalert';
 3 | import '../node_modules/sweetalert/dist/sweetalert.css';
 4 | 
 5 | let store = (name, existing) => {
 6 |   return new LocalStore(name, existing, (e) => {
 7 |     swal({
 8 |       title: 'Browser not supported.',
 9 |       text: 'Unfortunately, due to either your browser being out-of-date or being in private browsing mode, it is currently not supported. Please try again with a more up-to-date browser (not in incognito or private browsing mode).'
10 |     });
11 |   });
12 | };
13 | 
14 | export default store;


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @keyframes fadein {
  2 |     from { opacity: 0; }
  3 |     to   { opacity: 1; }
  4 | }
  5 | 
  6 | /* Firefox < 16 */
  7 | @-moz-keyframes fadein {
  8 |     from { opacity: 0; }
  9 |     to   { opacity: 1; }
 10 | }
 11 | 
 12 | /* Safari, Chrome and Opera > 12.1 */
 13 | @-webkit-keyframes fadein {
 14 |     from { opacity: 0; }
 15 |     to   { opacity: 1; }
 16 | }
 17 | 
 18 | /* Internet Explorer */
 19 | @-ms-keyframes fadein {
 20 |     from { opacity: 0; }
 21 |     to   { opacity: 1; }
 22 | }
 23 | 
 24 | /* Opera < 12.1 */
 25 | @-o-keyframes fadein {
 26 |     from { opacity: 0; }
 27 |     to   { opacity: 1; }
 28 | }
 29 | 
 30 | .fadeIn {
 31 |   -webkit-animation: fadein .25s; /* Safari, Chrome and Opera > 12.1 */
 32 |   -moz-animation: fadein .25s; /* Firefox < 16 */
 33 |   -ms-animation: fadein .25s; /* Internet Explorer */
 34 |   -o-animation: fadein .25s; /* Opera < 12.1 */
 35 |   animation: fadein .25s;
 36 | }
 37 | 
 38 | body {
 39 |   margin: 0;
 40 |   padding: 0;
 41 |   background: url('/bg.png');
 42 |   background: #fdfdfd;
 43 |   background-size: cover;
 44 |   background-attachment: fixed;
 45 |   font-family: Playfair Display, serif;
 46 |   -webkit-font-smoothing: antialiased;
 47 | }
 48 | 
 49 | .menu,
 50 | .saved,
 51 | .article,
 52 | .about {
 53 |   margin: 10px auto;
 54 |   width: 30%;
 55 |   min-width: 300px;
 56 | }
 57 | 
 58 | .menu:focus {
 59 |   outline: none;
 60 | }
 61 | 
 62 | .about {
 63 |   font-size: 1.3em;
 64 | }
 65 | 
 66 | .about a {
 67 |   color: rgba(0,0,0,.8);
 68 | }
 69 | 
 70 | h1, h2 , h3 {
 71 |   font-family: Playfair Display Bold, serif;
 72 |   font-weight: 800;
 73 |   color: rgba(0,0,0,.65);
 74 |   font-size: 3em;
 75 | }
 76 | 
 77 | .menuItem {
 78 |   display: block;
 79 |   font-size: 1.5em;
 80 |   text-align: center;
 81 |   text-decoration: none;
 82 |   margin: 15px auto;
 83 |   padding: 10px 20px;
 84 |   color: rgba(0,0,0,.8);
 85 |   text-align: left;
 86 |   border-radius:10px;
 87 | }
 88 | 
 89 | .menuItem.default:after {
 90 |   content: 'Hit Enter to start...';
 91 |   font-family: inherit;
 92 |   font-size: .7em;
 93 |   color: rgba(0,0,0,.2);
 94 |   margin-left: 20px;
 95 | }
 96 | 
 97 | .menuItem.default,
 98 | .menuItem:hover {
 99 |   background: #fff;
100 |   box-shadow: 1px 1px 3px 1px rgba(0,0,0,.05);
101 | }
102 | 
103 | .quill, .articleContent {
104 |   width: 50%;
105 |   padding: 10px;
106 |   background: #fff;
107 |   margin: 10px auto;
108 |   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .07);
109 |   min-height: 900px;
110 | }
111 | 
112 | .ql-editor, .articleContent {
113 |   transition: .1s;
114 |   -webkit-transition: .1s;
115 |   -moz-transition: .1s;
116 |   color: rgba(0,0,0,.85);
117 |   opacity: 1;
118 |   font-size: 1.7em;
119 |   font-family: Playfair Display, serif;
120 | }
121 | 
122 | .article {
123 |   width: 50%;
124 |   margin-bottom: 100px;
125 | }
126 | 
127 | .articleContent {
128 |   padding: 35px;
129 |   margin-top: 50px;
130 |   height: auto;
131 |   min-height: 0;
132 |   font-size: 1.2em;
133 |   width: 100%;
134 | }
135 | 
136 | .articleTitle {
137 |   font-size:2em;
138 |   text-align: center;
139 |   margin-bottom:0;
140 |   position: relative;
141 |   top: 25px;
142 | }
143 | 
144 | .ql-editor.disappearing {
145 |   transition: 3s;
146 |   -webkit-transition: 3s;
147 |   -moz-transition: 3s;
148 |   opacity: 0;
149 | }
150 | 
151 | .ql-editor b, .articleContent b {
152 |   font-family: Playfair Display Bold, serif;
153 |   font-weight: 800;
154 | }
155 | 
156 | .reactQuill {
157 |   margin-top: 35px;
158 | }
159 | 
160 | .back {
161 |   transition: .1s;
162 |   -webkit-transition: .1s;
163 |   -moz-transition: .1s;
164 |   display:block;
165 |   position:fixed;
166 |   top:30px;
167 |   left: 30px;
168 |   font-size:1.2em;
169 |   color:inherit;
170 |   text-decoration: none;
171 |   background:#fff;
172 |   padding:10px 30px;
173 |   box-shadow:1px 1px 3px 1px rgba(0,0,0,.03);
174 |   z-index: 999;
175 | }
176 | 
177 | .back:hover {
178 |   transition: .1s;
179 |   -webkit-transition: .1s;
180 |   -moz-transition: .1s;
181 |   padding-left: 60px;
182 |   left: 15px;
183 |   margin-left: -15px;
184 |   width: calc(auto + 15px);;
185 | }
186 | 
187 | .timer {
188 |   position: fixed;
189 |   right: 30px;
190 |   top: 0px;
191 | }
192 | 
193 | .extLink {
194 |   transition: .1s;
195 |   -webkit-transition: .1s;
196 |   -moz-transition: .1s;
197 |   font-size: 1.6em !important;
198 |   display: inline-block;
199 |   margin: 10px 20px 10px 0;
200 |   color: rgba(0,0,0,0.3) !important;
201 |   text-decoration: none;
202 | }
203 | 
204 | .extLink:hover {
205 |   transition: .1s;
206 |   -webkit-transition: .1s;
207 |   -moz-transition: .1s;
208 |   color: rgba(0,0,0,.8) !important;
209 | }
210 | 
211 | .savedWritingItem a {
212 |   display: block;
213 |   font-size: 1.2em;
214 |   margin: 20px -5px;
215 |   padding: 7px;
216 |   padding-left: 12px;
217 |   border-left: 5px solid;
218 |   background: #fff;
219 |   box-shadow: 1px 1px 3px 1px rgba(0,0,0,.03);
220 |   color: rgba(0,0,0,.8) !important;
221 |   text-decoration: none;
222 | }
223 | 
224 | .savedWritingItem a:hover {
225 |   transition: .1s;
226 |   -webkit-transition: .1s;
227 |   -moz-transition: .1s;
228 |   border-left: 0px solid;
229 | }
230 | 
231 | .search {
232 |   margin-top:-30px;
233 | }
234 | 
235 | .search:before {
236 |   content: " ";
237 |   background: url('/search-alpha.png');
238 |   width: 25px;
239 |   height: 25px;
240 |   background-size: cover;
241 |   position: relative;
242 |   top: 35px;
243 |   display: block;
244 |   right: -10px;
245 |   font-family: serif;
246 | }
247 | 
248 | .search input {
249 |   -webkit-appearance: none;
250 |   border: none;
251 |   padding: 10px;
252 |   padding-left:45px;
253 |   width: calc(100% - 50px);
254 |   box-shadow: 1px 1px 3px 1px rgba(0,0,0,.05);
255 |   font-family: inherit;
256 |   font-size: 1.2em;
257 | }
258 | 
259 | .search input:focus {
260 |   outline: none;
261 | }
262 | 
263 | .dropzone {
264 |   display: inline-block;
265 | }
266 | 
267 | .filesize.extLink {
268 |   font-size: 1em !important;
269 |   position: fixed;
270 |   bottom: 10px;
271 |   left: 20px;
272 | }
273 | 
274 | @media(max-width: 400px) {
275 |   .back, .timer {
276 |     display: none;
277 |   }
278 |   .quill {
279 |     width: 90%;
280 |   }
281 | 
282 |   .articleContent {
283 |     width: 70%;
284 |     font-size: 1em;
285 |   }
286 | }
287 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import Menu from './Menu';
 4 | import Editor from './Editor';
 5 | import Saved from './Saved';
 6 | import Article from './Article';
 7 | import About from './About';
 8 | import './index.css';
 9 | import '../public/playfair/stylesheet.css';
10 | 
11 | import { 
12 |   Router,
13 |   Route,
14 |   browserHistory
15 | } from 'react-router';
16 | 
17 | import store from './configure-localStore';
18 | 
19 | let appStore = store(
20 |   'savedWriting',
21 |   localStorage.getItem('savedWriting')
22 | );
23 | 
24 | ReactDOM.render(
25 |   (
26 |     <Router history={browserHistory}>
27 |       <Route path='/' component={Menu} />
28 |       <Route
29 |         path='/write/:duration'
30 |         store={appStore}
31 |         component={Editor} />
32 |       <Route
33 |         path='/saved'
34 |         store={appStore}
35 |         component={Saved} />
36 |       <Route
37 |         path='/saved/:slug'
38 |         store={appStore}
39 |         component={Article} />
40 |       <Route
41 |         path='/about'
42 |         component={About} />
43 |     </Router>
44 |   ),
45 |   document.getElementById('root')
46 | );
47 | 


--------------------------------------------------------------------------------
/src/localStore.js:
--------------------------------------------------------------------------------
  1 | export default class LocalStore {
  2 |   constructor(storeName, existingStore, errorCallback) {
  3 |     this.storeName = storeName;
  4 |     if (existingStore) {
  5 |       try {
  6 |         localStorage[storeName] = existingStore;
  7 |       }
  8 |       catch(error) {
  9 |         if (error) {
 10 |           errorCallback(error);
 11 |         }
 12 |       }
 13 |     } else {
 14 |       try {
 15 |         localStorage[storeName] = JSON.stringify([]);
 16 |       }
 17 |       catch(error) {
 18 |         if (error) {
 19 |           errorCallback(error);
 20 |         }
 21 |       }
 22 |     }
 23 |   }
 24 | 
 25 |   getAll() {
 26 |     return JSON.parse(
 27 |       localStorage[this.storeName]
 28 |     );
 29 |   }
 30 | 
 31 |   setAll(mutatedStore) {
 32 |     localStorage[this.storeName] = JSON.stringify(mutatedStore);
 33 |   }
 34 | 
 35 |   addItem(item) {
 36 |     let storeObject = this.getAll();
 37 |     storeObject.push(item);
 38 |     this.setAll(storeObject);
 39 |   }
 40 | 
 41 |   removeItem(item) {
 42 |     let storeObject = this.getAll();
 43 |     let index;
 44 |     if (typeof item === 'object') {
 45 |       index = indexOfWithObject(storeObject, item);
 46 |     } else {
 47 |       index = storeObject.indexOf(item);
 48 |     }
 49 |     storeObject.splice(
 50 |       index,
 51 |       1
 52 |     );
 53 |     this.setAll(storeObject);
 54 |   }
 55 | 
 56 |   getItemByIndex(index) {
 57 |     let storeObject = this.getAll();
 58 |     return storeObject[index];
 59 |   }
 60 | 
 61 |   setItemByIndex(index, mutatedItem) {
 62 |     let storeObject = this.getAll();
 63 |     let mutatedStoreObject = storeObject;
 64 |     mutatedStoreObject[index] = mutatedItem;
 65 |     this.setAll(mutatedStoreObject);
 66 |   }
 67 | 
 68 |   getItemsByProperty(propertyKey, matchingValue) {
 69 |     let storeObject = this.getAll();
 70 |     let results = storeObject.filter(item => {
 71 |       return item[propertyKey] === matchingValue;
 72 |     });
 73 |     return results;
 74 |   }
 75 | 
 76 |   setItemByProperty(propertyKey, matchingValue, modifiedItem) {
 77 |     let storeObject = this.getAll();
 78 |     let indexOfitemToModify = storeObject.findIndex(item => {
 79 |       return item[propertyKey] == matchingValue;
 80 |     });
 81 |     storeObject[indexOfitemToModify] = modifiedItem;
 82 |     this.setAll(storeObject);
 83 |   }
 84 | 
 85 |   delete() {
 86 |     localStorage.removeItem(this.storeName);
 87 |   }
 88 | 
 89 |   reset() {
 90 |     localStorage[this.storeName] = JSON.stringify([]);
 91 |   }
 92 | }
 93 | 
 94 | // http://stackoverflow.com/questions/12604062/javascript-array-indexof-doesnt-search-objects
 95 | function indexOfWithObject(arr, value) {
 96 |   var a;
 97 |   for (var i=0, iLen=arr.length; i<iLen; i++) {
 98 |     a = arr[i];
 99 |     if (a === value) return i;
100 |     if (typeof a == 'object') {
101 |       if (compareObj(arr[i], value)) {
102 |         return i;
103 |       }
104 |     } else {
105 |       // deal with other types
106 |     }
107 |   }
108 |   return -1;
109 |   // Extremely simple function, expects the values of all 
110 |   // enumerable properties of both objects to be primitives.
111 |   function compareObj(o1, o2, cease) {
112 |     var p;
113 |     if (typeof o1 == 'object' && typeof o2 == 'object') {
114 |       for (p in o1) {
115 |         if (o1[p] != o2[p]) return false; 
116 |       }
117 |       if (cease !== true) {
118 |         compareObj(o2, o1, true);
119 |       }
120 |       return true;
121 |     }
122 |   }
123 | }


--------------------------------------------------------------------------------
/src/localStore.test.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Not functional yet due to reliance upon 
 3 |   browser-specific localStorage implementation.
 4 | */
 5 | 
 6 | 'use strict';
 7 | 
 8 | let test = require('tape');
 9 | let LocalStore = require('./localStore');
10 | 
11 | test('getAll() test', t => {
12 |   t.plan(1);
13 |   let store = new LocalStore('test');
14 |   t.equal(store.getAll(), []);
15 | });
16 | 
17 | test('setAll() test', t => {
18 |   t.plan(1);
19 |   let store = new LocalStore('test');
20 |   store.setAll([1,2,3]);
21 |   t.equal(store.getAll(), [1,2,3]);
22 | });
23 | 
24 | test('addItem(item) test', t => {
25 |   t.plan(1);
26 |   let store = new LocalStore('test');
27 |   store.addItem({});
28 |   t.equal(store.getAll(), [{}]);
29 | });
30 | 
31 | test('removeItem(item) test', t => {
32 |   t.plan(1);
33 |   let store = new LocalStore('test');
34 |   store.addItem({});
35 |   store.removeItem({});
36 |   t.equal(store.removeItem({}), []);
37 | });


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