Update Next.js and React/Redux

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["next/babel", "env"],
+  "presets": ["next/babel"],
   "plugins": [["styled-components", { "ssr": true, "displayName": true, "preprocess": false }]]
 }

client/pages/_app.js

@@ -0,0 +1,19 @@
+import App, { Container } from 'next/app';
+import React from 'react';
+import { Provider } from 'react-redux';
+import withReduxStore from '../with-redux-store';
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps, reduxStore } = this.props;
+    return (
+      <Container>
+        <Provider store={reduxStore}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    );
+  }
+}
+
+export default withReduxStore(MyApp);

client/pages/banned.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import Link from 'next/link';
 import styled from 'styled-components';
-import withRedux from 'next-redux-wrapper';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import Footer from '../components/Footer';
 import { authUser } from '../actions';
@@ -41,9 +39,9 @@ const Subtitle = styled.h3`
 `;
 
 class BannedPage extends Component {
-  static getInitialProps({ req, store }) {
+  static getInitialProps({ req, reduxStore }) {
     const token = req && req.cookies && req.cookies.token;
-    if (token && store) store.dispatch(authUser(token));
+    if (token && reduxStore) reduxStore.dispatch(authUser(token));
     return {};
   }
 
@@ -69,4 +67,4 @@ class BannedPage extends Component {
   }
 }
 
-export default withRedux(initialState)(BannedPage);
+export default BannedPage;

client/pages/index.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import withRedux from 'next-redux-wrapper';
+import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import Shortener from '../components/Shortener';
 import Features from '../components/Features';
@@ -12,9 +11,10 @@ import Footer from '../components/Footer/Footer';
 import { authUser, getUrlsList } from '../actions';
 
 class Homepage extends Component {
-  static getInitialProps({ req, store }) {
+  static getInitialProps({ req, reduxStore }) {
     const token = req && req.cookies && req.cookies.token;
-    if (token && store) store.dispatch(authUser(token));
+    if (token && reduxStore) reduxStore.dispatch(authUser(token));
+    return {};
   }
 
   componentDidMount() {
@@ -52,4 +52,4 @@ const mapDispatchToProps = dispatch => ({
   getUrlsList: bindActionCreators(getUrlsList, dispatch),
 });
 
-export default withRedux(initialState, mapStateToProps, mapDispatchToProps)(Homepage);
+export default connect(mapStateToProps, mapDispatchToProps)(Homepage);

client/pages/login.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import withRedux from 'next-redux-wrapper';
+import { connect } from 'react-redux';
 import Router from 'next/router';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import Login from '../components/Login';
 import { authUser } from '../actions';
@@ -25,9 +24,10 @@ class LoginPage extends Component {
   }
 }
 
-LoginPage.getInitialProps = ({ req, store }) => {
+LoginPage.getInitialProps = ({ req, reduxStore }) => {
   const token = req && req.cookies && req.cookies.token;
-  if (token && store) store.dispatch(authUser(token));
+  if (token && reduxStore) reduxStore.dispatch(authUser(token));
+  return {};
 };
 
 LoginPage.propTypes = {
@@ -36,4 +36,4 @@ LoginPage.propTypes = {
 
 const mapStateToProps = ({ auth: { isAuthenticated } }) => ({ isAuthenticated });
 
-export default withRedux(initialState, mapStateToProps)(LoginPage);
+export default connect(mapStateToProps)(LoginPage);

client/pages/logout.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-import withRedux from 'next-redux-wrapper';
-import initialState from '../store';
+import { connect } from 'react-redux';
 import { logoutUser } from '../actions';
 
 class LogoutPage extends Component {
@@ -20,4 +19,4 @@ LogoutPage.propTypes = {
 
 const mapDispatchToProps = dispatch => ({ logoutUser: bindActionCreators(logoutUser, dispatch) });
 
-export default withRedux(initialState, null, mapDispatchToProps)(LogoutPage);
+export default connect(null, mapDispatchToProps)(LogoutPage);

client/pages/report.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import withRedux from 'next-redux-wrapper';
 import styled from 'styled-components';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import { authUser } from '../actions';
 import { REPORT_EMAIL } from '../config';
@@ -27,9 +25,10 @@ const ReportPage = () => (
   </BodyWrapper>
 );
 
-ReportPage.getInitialProps = ({ req, store }) => {
+ReportPage.getInitialProps = ({ req, reduxStore }) => {
   const token = req && req.cookies && req.cookies.token;
-  if (token && store) store.dispatch(authUser(token));
+  if (token && reduxStore) reduxStore.dispatch(authUser(token));
+  return {};
 };
 
-export default withRedux(initialState)(ReportPage);
+export default ReportPage;

client/pages/reset-password.js

@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
-import withRedux from 'next-redux-wrapper';
 import styled, { css } from 'styled-components';
 import cookie from 'js-cookie';
 import axios from 'axios';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import TextInput from '../components/TextInput';
 import Button from '../components/Button';
@@ -109,12 +107,12 @@ class ResetPassword extends Component {
   }
 }
 
-ResetPassword.getInitialProps = ({ store, query }) => {
+ResetPassword.getInitialProps = ({ reduxStore, query }) => {
   if (query && query.token) {
-    store.dispatch(authUser(query.token));
+    reduxStore.dispatch(authUser(query.token));
     return { query };
   }
-  return null;
+  return {};
 };
 
 ResetPassword.propTypes = {
@@ -127,4 +125,4 @@ ResetPassword.defaultProps = {
   query: null,
 };
 
-export default withRedux(initialState)(ResetPassword);
+export default ResetPassword;

client/pages/settings.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withRedux from 'next-redux-wrapper';
-import initialState from '../store';
+import { connect } from 'react-redux';
 import BodyWrapper from '../components/BodyWrapper';
 import Footer from '../components/Footer';
 import { authUser } from '../actions';
@@ -14,9 +13,10 @@ const SettingsPage = ({ isAuthenticated }) => (
   </BodyWrapper>
 );
 
-SettingsPage.getInitialProps = ({ req, store }) => {
+SettingsPage.getInitialProps = ({ req, reduxStore }) => {
   const token = req && req.cookies && req.cookies.token;
-  if (token && store) store.dispatch(authUser(token));
+  if (token && reduxStore) reduxStore.dispatch(authUser(token));
+  return {};
 };
 
 SettingsPage.propTypes = {
@@ -25,4 +25,4 @@ SettingsPage.propTypes = {
 
 const mapStateToProps = ({ auth: { isAuthenticated } }) => ({ isAuthenticated });
 
-export default withRedux(initialState, mapStateToProps)(SettingsPage);
+export default connect(mapStateToProps)(SettingsPage);

client/pages/stats.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withRedux from 'next-redux-wrapper';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import Stats from '../components/Stats';
 import { authUser } from '../actions';
@@ -12,9 +10,9 @@ const StatsPage = ({ id }) => (
   </BodyWrapper>
 );
 
-StatsPage.getInitialProps = ({ req, store, query }) => {
+StatsPage.getInitialProps = ({ req, reduxStore, query }) => {
   const token = req && req.cookies && req.cookies.token;
-  if (token && store) store.dispatch(authUser(token));
+  if (token && reduxStore) reduxStore.dispatch(authUser(token));
   return { id: query && query.id };
 };
 
@@ -26,4 +24,4 @@ StatsPage.defaultProps = {
   id: '',
 };
 
-export default withRedux(initialState)(StatsPage);
+export default StatsPage;

client/pages/terms.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import withRedux from 'next-redux-wrapper';
 import styled from 'styled-components';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import { authUser } from '../actions';
 
@@ -54,9 +52,10 @@ const TermsPage = () => (
   </BodyWrapper>
 );
 
-TermsPage.getInitialProps = ({ req, store }) => {
+TermsPage.getInitialProps = ({ req, reduxStore }) => {
   const token = req && req.cookies && req.cookies.token;
-  if (token && store) store.dispatch(authUser(token));
+  if (token && reduxStore) reduxStore.dispatch(authUser(token));
+  return {};
 };
 
-export default withRedux(initialState)(TermsPage);
+export default TermsPage;

client/pages/url-info.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import withRedux from 'next-redux-wrapper';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import Footer from '../components/Footer';
 import { authUser } from '../actions';
@@ -35,9 +33,9 @@ const Target = styled.h3`
 `;
 
 class UrlInfoPage extends Component {
-  static getInitialProps({ query, req, store }) {
+  static getInitialProps({ query, req, reduxStore }) {
     const token = req && req.cookies && req.cookies.token;
-    if (token && store) store.dispatch(authUser(token));
+    if (token && reduxStore) reduxStore.dispatch(authUser(token));
     return { query };
   }
 
@@ -70,4 +68,4 @@ UrlInfoPage.defaultProps = {
   query: null,
 };
 
-export default withRedux(initialState)(UrlInfoPage);
+export default UrlInfoPage;

client/pages/url-password.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import withRedux from 'next-redux-wrapper';
 import styled from 'styled-components';
 import axios from 'axios';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import TextInput from '../components/TextInput';
 import Button from '../components/Button';
@@ -117,4 +115,4 @@ UrlPasswordPage.defaultProps = {
   query: null,
 };
 
-export default withRedux(initialState)(UrlPasswordPage);
+export default UrlPasswordPage;

client/pages/verify.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
-import withRedux from 'next-redux-wrapper';
+import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 import cookie from 'js-cookie';
-import initialState from '../store';
 import BodyWrapper from '../components/BodyWrapper';
 import { authRenew, authUser, showPageLoading } from '../actions';
 import Button from '../components/Button';
@@ -74,13 +73,13 @@ const Verify = ({ showLoading, query }) => {
   return <BodyWrapper norenew>{message}</BodyWrapper>;
 };
 
-Verify.getInitialProps = ({ store, query }) => {
+Verify.getInitialProps = ({ reduxStore, query }) => {
   if (query && query.token) {
-    store.dispatch(authUser(query.token));
-    store.dispatch(authRenew());
+    reduxStore.dispatch(authUser(query.token));
+    reduxStore.dispatch(authRenew());
     return { query };
   }
-  return null;
+  return {};
 };
 
 Verify.propTypes = {
@@ -98,4 +97,4 @@ const mapDispatchToProps = dispatch => ({
   showLoading: bindActionCreators(showPageLoading, dispatch),
 });
 
-export default withRedux(initialState, null, mapDispatchToProps)(Verify);
+export default connect(null, mapDispatchToProps)(Verify);

client/with-redux-store.js

@@ -0,0 +1,51 @@
+/* eslint-disable */
+import React from 'react';
+import initializeStore from './store';
+
+const isServer = typeof window === 'undefined';
+const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__';
+
+function getOrCreateStore(initialState) {
+  // Always make a new store if server, otherwise state is shared between requests
+  if (isServer) {
+    return initializeStore(initialState);
+  }
+
+  // Create store if unavailable on the client and set it on the window object
+  if (!window[__NEXT_REDUX_STORE__]) {
+    window[__NEXT_REDUX_STORE__] = initializeStore(initialState);
+  }
+  return window[__NEXT_REDUX_STORE__];
+}
+
+export default App =>
+  class AppWithRedux extends React.Component {
+    static async getInitialProps(appContext) {
+      // Get or Create the store with `undefined` as initialState
+      // This allows you to set a custom default initialState
+      const reduxStore = getOrCreateStore();
+
+      // Provide the store to getInitialProps of pages
+      appContext.ctx.reduxStore = reduxStore;
+
+      let appProps = {};
+      if (typeof App.getInitialProps === 'function') {
+        appProps = await App.getInitialProps(appContext);
+      }
+
+      return {
+        ...appProps,
+        initialReduxState: reduxStore.getState(),
+      };
+    }
+
+    constructor(props) {
+      super(props);
+      this.reduxStore = getOrCreateStore(props.initialReduxState);
+      console.log('test');
+    }
+
+    render() {
+      return <App {...this.props} reduxStore={this.reduxStore} />;
+    }
+  };

package.json

@@ -48,28 +48,28 @@
     "nanoid": "^1.0.1",
     "natives": "^1.1.6",
     "neo4j-driver": "^1.5.2",
-    "next": "^5.1.0",
-    "next-redux-wrapper": "^1.3.5",
+    "next": "^7.0.2",
+    "next-redux-wrapper": "^2.1.0",
     "nodemailer": "^4.4.1",
     "passport": "^0.4.0",
     "passport-jwt": "^3.0.1",
     "passport-local": "^1.0.0",
     "passport-localapikey-update": "^0.6.0",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.6.2",
     "qrcode.react": "^0.8.0",
     "raven": "^2.4.0",
     "react": "^16.3.2",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.3.2",
+    "react-dom": "^16.6.3",
     "react-ga": "^2.4.1",
     "react-inlinesvg": "^0.7.5",
-    "react-redux": "^5.0.6",
+    "react-redux": "^6.0.0",
     "recharts": "^1.0.0-beta.10",
     "redis": "^2.8.0",
-    "redux": "^3.7.2",
+    "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.2.0",
-    "styled-components": "^3.2.6",
+    "styled-components": "^4.1.3",
     "url-regex": "^4.1.1",
     "useragent": "^2.2.1"
   },
@@ -78,7 +78,8 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.0.2",
-    "babel-plugin-styled-components": "^1.3.0",
+    "babel-plugin-styled-components": "^1.10.0",
+    "babel-preset-env": "^1.7.0",
     "chai": "^4.1.2",
     "deep-freeze": "^0.0.1",
     "eslint": "^4.12.0",