Upgraded all the dependencies. Removed some uneccesary imports and libs. Rewrote the webpack config to webpack 2. Adjusted some pages and components to make them work with React v16

Author: steffeli

Diff for: .babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["env", "react"],
+    "plugins": ["transform-react-require", "transform-object-assign"]
+}

Diff for: app/components/block.js

@@ -1,7 +1,7 @@
-import className from 'classname';
+import classNames from 'classnames';
 
 export const Block = (props) => {
-    const c = className('block', props.className);
+    const c = classNames('block', props.className);
 
     return (
         <div className={c}>

Diff for: app/components/centeredblock.js

@@ -1,8 +1,8 @@
-import className from 'classname';
+import classNames from 'classnames';
 
 export const CBlock = (props) => {
     const fullWidth = typeof props.fullWidth !== 'undefined' ? props.fullWidth : false;
-    const c = className('block block--center', props.className, {
+    const c = classNames('block block--center', props.className, {
         'block--center' : !fullWidth,
         'block--center-full-width': fullWidth
     });

Diff for: app/components/page.js

@@ -1,4 +1,4 @@
-import className from 'classname';
+import classNames from 'classnames';
 import logo from '../assets/neon-logo2.svg';
 import { Link } from './link';
 import Footer from './footer';
@@ -119,7 +119,7 @@ export const PageBody = (props) => (
 );
 
 export const Container = (props) => {
-    const c = className('page__container', props.className);
+    const c = classNames('page__container', props.className);
     return (
         <div className={c}>
             {props.children}

Diff for: app/pages/printprogram.js

@@ -101,13 +101,13 @@ const HasProgram = (sessions) => (
     </div>
 );
 
-const PrintProgram = React.createClass({
+class PrintProgram extends React.Component {
 
     componentWillMount() {
         if (this.props.sessions.length === 0) {
             this.props.getSessions();
         }
-    },
+    }
 
     render() {
         const content = this.props.isFetching
@@ -122,6 +122,6 @@ const PrintProgram = React.createClass({
             </Page>
         );
     }
-});
+};
 
 export default connect(mapStateToProps, { getSessions })(PrintProgram);

Diff for: app/pages/program.js

@@ -206,10 +206,10 @@ const Loading = () => (
 );
 
 const Failure = () => (
-  <div className='program__loading'>
-      <h2 className='program__loading-header'>Woooops!</h2>
-      It seems something is seriously wrong here. We are most likely informed and working on it, so just try again in a while.
-  </div>
+    <div className='program__loading'>
+        <h2 className='program__loading-header'>Woooops!</h2>
+        It seems something is seriously wrong here. We are most likely informed and working on it, so just try again in a while.
+    </div>
 );
 
 function showEmptyMyProgram(state) {
@@ -253,33 +253,40 @@ const HasProgram = (sessions, state, toggleFavorite, setAll, setNorwegian, setEn
     </div>
 );
 
-const Program = React.createClass({
+class Program extends React.Component {
 
-    getInitialState() {
-        return getDefaultSettings();
-    },
+    constructor(props) {
+        super(props);
+        this.state = getDefaultSettings();
+        this.setAll = this.setAll.bind(this);
+        this.setNorwegian = this.setNorwegian.bind(this);
+        this.setEnglish = this.setEnglish.bind(this);
+        this.setMyProgram = this.setMyProgram.bind(this);
+        this.toggleFavorite = this.toggleFavorite.bind(this);
+    }
 
     componentWillMount() {
         if (this.props.sessions.length === 0) {
             this.props.getSessions();
         }
-    },
+    }
 
     setAll() {
         this.setState({show: 'all'});
-    },
+    }
 
     setNorwegian() {
+        console.log(this.state);
         this.setState({show: 'no'});
-    },
+    }
 
     setEnglish() {
         this.setState({show: 'en'});
-    },
+    }
 
     setMyProgram() {
         this.setState({show: 'my'});
-    },
+    }
 
     toggleFavorite(id) {
         if (includes(id, this.state.myprogram)) {
@@ -288,7 +295,7 @@ const Program = React.createClass({
             const prev = this.state.myprogram || [];
             this.setState({myprogram: prev.concat(id)});
         }
-    },
+    }
 
     render() {
         const content = this.props.failure
@@ -307,6 +314,6 @@ const Program = React.createClass({
             </Page>
         );
     }
-});
+};
 
 export default connect(mapStateToProps, { getSessions })(Program);

Diff for: app/pages/speakers.js

@@ -245,7 +245,7 @@ const Speakers = () => (
             </CBlock>
 
             <CBlock>
-                    <CHeader>We hope to see you at JavaZone 2017 – please feel free to spread the word to your local community!</CHeader>
+                <CHeader>We hope to see you at JavaZone 2017 – please feel free to spread the word to your local community!</CHeader>
                 <CContent>
                     <P className='speakers__regards'>
                         <br />

Diff for: app/pages/workshops.js

@@ -44,8 +44,7 @@ const groupByFormat = reduce((acc, session) => {
     return acc;
 }, []);
 
-const isJzWorkshop = workshopTitles => workshop =>
-      includes(workshop.title, workshopTitles);
+const isJzWorkshop = workshopTitles => workshop => includes(workshop.title, workshopTitles);
 
 function workshopUrl(workshop) {
     if (!workshop) {
@@ -110,10 +109,10 @@ function mapStateToProps(state) {
 }
 
 const Failure = () => (
-  <div className='program__loading'>
-      <h2 className='program__loading-header'>Woooops!</h2>
-      It seems something is seriously wrong here. We are most likely informed and working on it, so just try again in a while.
-  </div>
+    <div className='program__loading'>
+        <h2 className='program__loading-header'>Woooops!</h2>
+        It seems something is seriously wrong here. We are most likely informed and working on it, so just try again in a while.
+    </div>
 );
 
 function merge(workshops, sessions) {
@@ -137,11 +136,11 @@ const WorkshopList = ({ workshops }) =>
         </ul>
     </div>;
 
-const Workshops = React.createClass({
+class Workshops extends React.Component {
     componentWillMount() {
         this.props.getWorkshops();
         this.props.getSessions();
-    },
+    }
 
     render() {
         const workshops = filter(s => s.format === 'workshop')(this.props.sessions);
@@ -168,6 +167,6 @@ const Workshops = React.createClass({
             </Page>
         );
     }
-});
+};
 
 export default connect(mapStateToProps, { getWorkshops, getSessions })(Workshops);

Diff for: package.json

@@ -6,50 +6,49 @@
   "scripts": {
     "lint": "eslint app",
     "clean": "rm -rf ./dist && mkdir dist",
-    "build": "npm run lint && npm run clean && NODE_ENV=production webpack -p --progress --colors",
-    "watch": "NODE_ENV=development webpack-dev-server --inline --host 0.0.0.0",
+    "build": "npm run lint && npm run clean && NODE_ENV=production webpack --env=prod -p --progress --colors",
+    "watch": "NODE_ENV=development webpack-dev-server --env=dev --inline --host 0.0.0.0",
     "start": "npm run watch"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.0",
-    "babel-core": "^6.16.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-transform-object-assign": "^6.8.0",
+    "autoprefixer": "^7.1.6",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-react-require": "^1.0.1",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
-    "classname": "0.0.0",
-    "css-loader": "^0.25.0",
-    "es6-promise": "^4.0.5",
-    "eslint": "^3.3.0",
-    "eslint-plugin-lodash-fp": "^2.0.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "es6-promise": "^4.1.1",
+    "eslint": "^4.10.0",
+    "eslint-plugin-lodash-fp": "^2.1.3",
+    "extract-text-webpack-plugin": "^3.0.2",
     "fetch": "^1.1.0",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.22.0",
-    "indexhtml-webpack-plugin": "^0.1.9",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
-    "normalize.css": "^5.0.0",
-    "postcss-loader": "^0.13.0",
-    "q": "^1.4.1",
-    "react": "15.3.2",
-    "react-dom": "15.3.2",
-    "react-redux": "^4.4.5",
-    "redux": "^3.6.0",
-    "redux-thunk": "^2.1.0",
-    "reset-css": "^2.2.0",
-    "shelljs": "^0.7.4",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.16.2"
+    "file-loader": "^1.1.5",
+    "html-webpack-plugin": "^2.30.1",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "normalize.css": "^7.0.0",
+    "postcss-loader": "^2.0.8",
+    "q": "^1.5.1",
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
+    "reset-css": "^2.2.1",
+    "shelljs": "^0.7.8",
+    "style-loader": "^0.19.0",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.3",
+    "webpack-merge": "^4.1.0"
   },
   "author": "",
   "license": "ISC",
   "private": true,
   "dependencies": {
     "classnames": "^2.2.5",
-    "lodash": "^4.16.4",
-    "moment": "^2.15.1"
+    "lodash": "^4.17.4",
+    "moment": "^2.19.1"
   }
 }

Diff for: postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = () => ({
+    plugins: [
+        require('autoprefixer')
+    ]
+})

Diff for: webpack.common.js

@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const path = require('path');
+const exclude = '/node_modules';
+
+module.exports = {
+    entry: './app/app.js',
+    output: {
+        filename: '[hash].js',
+        path: path.join(__dirname, 'dist'),
+        publicPath: '/'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/, 
+                exclude: exclude, 
+                use: 'babel-loader'
+            },
+            {
+                test: /\.less$/,
+                exclude: exclude,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: [
+                        'css-loader?sourceMap',
+                        'postcss-loader?sourceMap',
+                        'less-loader?sourceMap'
+                    ]
+                })
+            },
+            {
+                test: /\.(svg|jpg|jpeg|png|pdf|xml|ico|json|txt)$/,
+                exclude: exclude,
+                use: 'file-loader'
+            },
+            {
+                test: /\.(eot|ttf|woff|woff2)$/,
+                exclude: exclude,
+                use: 'file-loader'
+            }
+        ]
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
+        }),
+        new ExtractTextPlugin({
+            filename: 'app.css',
+            disable: false,
+            allChunks: true
+        }),
+        new HtmlWebpackPlugin({
+            template: './app/index.html'
+        })
+    ]
+};