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

common/app/routes/Settings/redux/update-user-epic.js

@@ -0,0 +1,124 @@
+import { Observable } from 'rx';
+import { combineEpics, ofType } from 'redux-epic';
+
+import { types, onRouteSettings } from './';
+import { makeToast } from '../../../Toasts/redux';
+import {
+  fetchChallenges,
+  doActionOnError,
+
+  userSelector
+} from '../../../redux';
+import {
+  updateUserFlag,
+  updateUserEmail,
+  updateUserLang
+} from '../../../entities';
+
+import { postJSON$ } from '../../../../utils/ajax-stream';
+import langs from '../../../../utils/supported-languages';
+
+const urlMap = {
+  isLocked: 'lockdown',
+  isAvailableForHire: 'available-for-hire',
+  sendQuincyEmail: 'quincy-email',
+  sendNotificationEmail: 'notification-email',
+  sendMonthlyEmail: 'announcement-email'
+};
+
+export function updateUserEmailEpic(actions, { getState }) {
+  return actions::ofType(types.updateMyEmail)
+    .flatMap(({ payload: email }) => {
+      const {
+        app: { user: username, csrfToken: _csrf },
+        entities: { user: userMap }
+      } = getState();
+      const { email: oldEmail } = userMap[username] || {};
+      const body = { _csrf, email };
+      const optimisticUpdate = Observable.just(
+        updateUserEmail(username, email)
+      );
+      const ajaxUpdate = postJSON$('/update-my-email', body)
+        .map(({ message }) => makeToast({ message }))
+        .catch(doActionOnError(() => oldEmail ?
+          updateUserFlag(username, oldEmail) :
+          null
+        ));
+      return Observable.merge(optimisticUpdate, ajaxUpdate);
+    });
+}
+
+export function updateUserLangEpic(actions, { getState }) {
+  const updateLang = actions
+    .filter(({ type, payload }) => (
+      type === types.updateMyLang && !!langs[payload]
+    ))
+    .map(({ payload }) => {
+      const state = getState();
+      const { languageTag } = userSelector(state);
+      return { lang: payload, oldLang: languageTag };
+    });
+  const ajaxUpdate = updateLang
+    .debounce(250)
+    .flatMap(({ lang, oldLang }) => {
+      const { app: { user: username, csrfToken: _csrf } } = getState();
+      const body = { _csrf, lang };
+      return postJSON$('/update-my-lang', body)
+        .flatMap(({ message }) => {
+          return Observable.of(
+            // show user that we have updated their lang
+            makeToast({ message }),
+            // update url to reflect change
+            onRouteSettings({ lang }),
+            // refetch challenges in new language
+            fetchChallenges()
+          );
+        })
+        .catch(doActionOnError(() => {
+          return updateUserLang(username, oldLang);
+        }));
+    });
+  const optimistic = updateLang
+    .map(({ lang }) => {
+      const { app: { user: username } } = getState();
+      return updateUserLang(username, lang);
+    });
+  return Observable.merge(ajaxUpdate, optimistic);
+}
+export function updateUserFlagEpic(actions, { getState }) {
+  const toggleFlag = actions
+    .filter(({ type, payload }) => type === types.toggleUserFlag && payload)
+    .map(({ payload }) => payload);
+  const optimistic = toggleFlag.map(flag => {
+    const { app: { user: username } } = getState();
+    return updateUserFlag(username, flag);
+  });
+  const serverUpdate = toggleFlag
+    .debounce(500)
+    .flatMap(flag => {
+      const url = `/toggle-${urlMap[ flag ]}`;
+      const {
+        app: { user: username, csrfToken: _csrf },
+        entities: { user: userMap }
+      } = getState();
+      const user = userMap[username];
+      const currentValue = user[ flag ];
+      return postJSON$(url, { _csrf })
+        .map(({ flag, value }) => {
+          if (currentValue === value) {
+            return null;
+          }
+          return updateUserFlag(username, flag);
+        })
+        .catch(doActionOnError(() => {
+          return updateUserFlag(username, currentValue);
+        }));
+    });
+  return Observable.merge(optimistic, serverUpdate);
+}
+
+export default combineEpics(
+  updateUserFlagEpic,
+  updateUserEmailEpic,
+  updateUserLangEpic
+);