diff --git a/app/components/RunSectionForm.tsx b/app/components/RunSectionForm.tsx index 15a950b..bff6880 100644 --- a/app/components/RunSectionForm.tsx +++ b/app/components/RunSectionForm.tsx @@ -3,6 +3,7 @@ import { observer } from "mobx-react"; import * as React from "react"; import { DropdownItemProps, DropdownProps, Form, Header, Segment } from "semantic-ui-react"; +import log from "@common/logger"; import { Duration, Section } from "@common/sprinklers"; import DurationInput from "./DurationInput"; @@ -65,10 +66,11 @@ export default class RunSectionForm extends React.Component<{ return; } const section: Section = this.props.sections[this.state.section]; - console.log(`running section ${section} for ${this.state.duration}`); - section.run(this.state.duration) - .then((a) => console.log("ran section", a)) - .catch((err) => console.error("error running section", err)); + const { duration } = this.state; + log.debug({ section, duration }, "running section"); + section.run(duration) + .then((a) => log.debug("ran section", a)) + .catch((err) => log.error(err, "error running section")); } private get isValid(): boolean { diff --git a/app/polyfills.js b/app/polyfills.js new file mode 100644 index 0000000..49df7d6 --- /dev/null +++ b/app/polyfills.js @@ -0,0 +1,16 @@ +'use strict'; + +if (typeof Promise === 'undefined') { + // Rejection tracking prevents a common issue where React gets into an + // inconsistent state due to an error, but it gets swallowed by a Promise, + // and the user has no idea what causes React's erratic future behavior. + require('promise/lib/rejection-tracking').enable(); + window.Promise = require('promise/lib/es6-extensions.js'); +} + +// fetch() polyfill for making API calls. +// require('whatwg-fetch'); + +// Object.assign() is commonly used with React. +// It will use the native implementation if it's present and isn't buggy. +Object.assign = require('object-assign'); diff --git a/app/webpack.config.js b/app/webpack.config.js new file mode 100644 index 0000000..89d14e5 --- /dev/null +++ b/app/webpack.config.js @@ -0,0 +1,234 @@ +const autoprefixer = require("autoprefixer"); +const path = require("path"); +const webpack = require("webpack"); + +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); +const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin"); +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); + +const { getClientEnvironment } = require("../env"); +const paths = require("../paths"); + +// Webpack uses `publicPath` to determine where the app is being served from. +// It requires a trailing slash, or the file assets will get an incorrect path. +const publicPath = paths.publicPath; +// `publicUrl` is just like `publicPath`, but we will provide it to our app +// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. +// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. +const publicUrl = paths.publicUrl.slice(0, -1); +// Source maps are resource heavy and can cause out of memory issue for large source files. +const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; +// Some apps do not use client-side routing with pushState. +// For these, "homepage" can be set to "." to enable relative asset paths. +const shouldUseRelativeAssetPaths = publicPath === "./"; +// Get environment variables to inject into our app. +const environ = getClientEnvironment(publicUrl); + +// Note: defined here because it will be used more than once. +const cssFilename = "static/css/[name].[contenthash:8].css"; + +const postCssConfig = { + loader: require.resolve("postcss-loader"), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: "postcss", + plugins: () => [ + require("postcss-flexbugs-fixes"), + autoprefixer({ + browsers: [ + ">1%", + "last 4 versions", + "Firefox ESR", + "not ie < 9", // React doesn"t support IE8 anyway + ], + flexbox: "no-2009", + }), + ], + }, +}; + +const rules = (env) => { + // "postcss" loader applies autoprefixer to our CSS. + // "css" loader resolves paths in CSS and adds assets as dependencies. + // "style" loader turns CSS into JS modules that inject