feat: prep for modern challenges (#15781)

* feat(seed): Add modern challenge

* chore(react): Use prop-types package

* feat: Initial refactor to redux-first-router

BREAKING CHANGE: Everything is different!

* feat: First rendering

* feat(routes): Challenges view render but failing

* fix(Challenges): Remove contain HOC

* fix(RFR): Add params selector

* fix(RFR): :en should be :lang

* fix: Update berks utils for redux

* fix(Map): Challenge link to arg

* fix(Map): Add trailing slash to map page

* fix(RFR): Use FCC Link

Use fcc Link to get around issue of lang being undefined

* fix(Router): Link to is required

* fix(app): Rely on RFR state for app lang

* chore(RFR): Remove unused RFR Link

* fix(RFR): Hydrate initial challenge using RFR and RO

* fix: Casing issue

* fix(RFR): Undefined links

* fix(RFR): Use onRoute<name> convention for route types

* feat(server/react): Add helpful redux logging/throwing

* fix(server/react): Strip out nonjson from state

This prevents thunks in routesMap from breaking serialization

* fix(RFR/Link): Should accept any renderable

* fix(RFR): Get redirects working

* fix(RFR): Redirects and not found's

* fix(Map): Move challenge onClick handler

* fix(Map): Allow Router.link to handle clicks after onClick

* fix(routes): Remove react-router-redux

* feat(Router): Add lang to all route actions by default

* fix(entities): Only fetch challenge if not already loaded

* fix(Files): Move files to own feature

* chore(Challenges): Remove vestigial hints logic

* fix(RFR): Update challenges on route challenges

* fix(code-storage): Should use events instead of commands

* fix(Map): ClickOnMap should not hold on to event

* chore(lint): Use eslint-config-freecodecamp

Closes #15938

* feat(Panes): Update panes on route instead of render

* fix(Panes): Store panesmap and update on fetchchallenges

* fix(Panes): Normalize panesmaps

* fix(Panes): Remove filter from createpanemap

* fix(Panes): Middleware on location meta object

* feat(Panes): Filter preview on nonhtml challenges

* build(babel): Add lodash babel plugin

* chore(lint): Lint js files

* fix(server/user-stats): Remove use of lodash chain

this interferes with babel-plugin-lodash

* feat(dev): Add remote redux devtools for ssr

* fix(Panes): Dispatch mount action

this is needed to trigger window/divider epics

* fix(Panes): Getpane to use new panesmap format

* fix(Panes): Always update panes after state

this lets the panes logic be affected by changes in state

client/index.js

@@ -1,21 +1,13 @@
 import './es6-shims';
 import Rx from 'rx';
-import React from 'react';
 import debug from 'debug';
-import { Router } from 'react-router';
-import {
-  routerMiddleware,
-  routerReducer as routing,
-  syncHistoryWithStore
-} from 'react-router-redux';
 import { render } from 'redux-epic';
-import { createHistory } from 'history';
+import createHistory from 'history/createBrowserHistory';
 import useLangRoutes from './utils/use-lang-routes';
 import sendPageAnalytics from './utils/send-page-analytics';
 import flashToToast from './utils/flash-to-toast';
 
-import createApp from '../common/app';
-import provideStore from '../common/app/provide-store';
+import { App, createApp, provideStore } from '../common/app';
 import { getLangFromPath } from '../common/app/utils/lang';
 
 // client specific epics
@@ -32,13 +24,13 @@ const log = debug('fcc:client');
 const hotReloadTimeout = 2000;
 const { csrf: { token: csrfToken } = {} } = window.__fcc__;
 const DOMContainer = document.getElementById('fcc');
-const initialState = isColdStored() ?
+const defaultState = isColdStored() ?
   getColdStorage() :
   window.__fcc__.data;
 const primaryLang = getLangFromPath(window.location.pathname);
 
-initialState.app.csrfToken = csrfToken;
-initialState.toasts = flashToToast(window.__fcc__.flash);
+defaultState.app.csrfToken = csrfToken;
+defaultState.toasts = flashToToast(window.__fcc__.flash);
 
 // make empty object so hot reload works
 window.__fcc__ = {};
@@ -49,7 +41,6 @@ const history = useLangRoutes(createHistory, primaryLang)();
 sendPageAnalytics(history, window.ga);
 
 const devTools = window.devToolsExtension ? window.devToolsExtension() : f => f;
-const adjustUrlOnReplay = !!window.devToolsExtension;
 
 const epicOptions = {
   isDev,
@@ -61,14 +52,10 @@ const epicOptions = {
 
 createApp({
     history,
-    syncHistoryWithStore,
-    syncOptions: { adjustUrlOnReplay },
     serviceOptions,
-    initialState,
-    middlewares: [ routerMiddleware(history) ],
+    defaultState,
     epics,
     epicOptions,
-    reducers: { routing },
     enhancers: [ devTools ]
   })
   .doOnNext(({ store }) => {
@@ -83,13 +70,7 @@ createApp({
     }
   })
   .doOnNext(() => log('rendering'))
-  .flatMap(
-    ({ props, store }) => render(
-      provideStore(React.createElement(Router, props), store),
-      DOMContainer
-    ),
-    ({ store }) => store
-  )
+  .flatMap(({ store }) => render(provideStore(App, store), DOMContainer))
   .subscribe(
     () => debug('react rendered'),
     err => { throw err; },