{ message }
);
@@ -81,13 +81,14 @@ export class SuperBlock extends PureComponent {
renderHeader(isOpen, title, isCompleted) {
return (
-
+
{ this.renderMessage(message) }
-
+
{ this.renderBlocks(blocks) }
diff --git a/common/app/routes/challenges/views/map/index.js b/common/app/Map/index.js
similarity index 100%
rename from common/app/routes/challenges/views/map/index.js
rename to common/app/Map/index.js
diff --git a/common/app/Map/map.less b/common/app/Map/map.less
new file mode 100644
index 0000000000..0dfb49d8a3
--- /dev/null
+++ b/common/app/Map/map.less
@@ -0,0 +1,118 @@
+// should be the same as the filename and ./ns.json
+@ns: map;
+
+.@{ns}-accordion {
+ max-width: 700px;
+ overflow-y: auto;
+ width: 100%;
+
+ a:focus {
+ text-decoration: none;
+ color:darkgreen;
+ }
+
+ a:focus:hover {
+ text-decoration: underline;
+ color:#001800;
+ }
+
+ @media (max-width: 720px) {
+ left: 0;
+ right: 0;
+ width: 100%;
+ top: 195px;
+ bottom: 0;
+ // position:absolute;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ h2 {
+ margin:15px 0;
+ padding:0;
+ &:first-of-type {
+ margin-top:0;
+ }
+ > a {
+ padding: 10px 0;
+ padding-left: 50px;
+ padding-right: 20px;
+ font-size: 20px;
+ }
+ }
+ a {
+ margin: 10px 0;
+ padding: 0;
+ > h3 {
+ clear:both;
+ font-size:20px;
+ }
+ }
+ }
+
+ .@{ns}-caret {
+ color: @gray-dark;
+ text-decoration: none;
+ // make sure all carats are fixed width
+ width: 10px;
+ }
+}
+
+
+.@{ns}-accordion-block .@{ns}-accordion-panel-heading {
+ padding-left: 26px;
+}
+
+.@{ns}-challenge-title, .@{ns}-accordion-panel-heading {
+ background: @body-bg;
+ line-height: 26px;
+ padding: 2px 12px 2px 10px;
+ width:100%;
+}
+
+.@{ns}-challenge-title {
+ &::before {
+ padding-right: 6px;
+ }
+ padding-left: 40px;
+ a {
+ cursor: pointer;
+ }
+}
+
+.@{ns}-accordion-panel-heading a {
+ cursor: pointer;
+ display: block;
+}
+
+.@{ns}-accordion-panel-collapse {
+ transition: height 0.001s;
+}
+
+.@{ns}-block-time {
+ color: #BBBBBB;
+ @media (min-width: 721px) {
+ float: right;
+ }
+}
+
+.@{ns}-block-description {
+ margin:0;
+ margin-top:-10px;
+ padding:0 15px 23px 30px;
+}
+
+
+.night {
+ .@{ns}-accordion .no-link-underline {
+ color: @brand-primary;
+ }
+ .@{ns}-accordion h2 > a {
+ background: #666;
+ }
+ .@{ns}-accordion a:focus, #noneFound {
+ color: #ABABAB;
+ }
+ .challenge-title {
+ color: @night-text-color;
+ }
+}
diff --git a/common/app/Map/ns.json b/common/app/Map/ns.json
new file mode 100644
index 0000000000..6bc66fc09e
--- /dev/null
+++ b/common/app/Map/ns.json
@@ -0,0 +1 @@
+"map"
diff --git a/common/app/Map/redux/index.js b/common/app/Map/redux/index.js
new file mode 100644
index 0000000000..6c6bc452d6
--- /dev/null
+++ b/common/app/Map/redux/index.js
@@ -0,0 +1,129 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+import { createSelector } from 'reselect';
+import identity from 'lodash/identity';
+import capitalize from 'lodash/capitalize';
+
+import selectChallengeEpic from './select-challenge-epic.js';
+
+import * as utils from './utils.js';
+import ns from '../ns.json';
+import {
+ types as app,
+ createEventMetaCreator
+} from '../../redux';
+
+export const epics = [
+ selectChallengeEpic
+];
+
+export const types = createTypes([
+ 'initMap',
+
+ 'toggleThisPanel',
+
+ 'isAllCollapsed',
+ 'collapseAll',
+ 'expandAll',
+
+ 'clickOnChallenge'
+], ns);
+
+export const initMap = createAction(types.initMap);
+
+export const toggleThisPanel = createAction(types.toggleThisPanel);
+export const collapseAll = createAction(types.collapseAll);
+
+export const expandAll = createAction(types.expandAll);
+export const clickOnChallenge = createAction(
+ types.clickOnChallenge,
+ identity,
+ createEventMetaCreator({
+ category: capitalize(ns),
+ action: 'click',
+ label: types.clickOnChallenge
+ })
+);
+
+const initialState = {
+ mapUi: { isAllCollapsed: false },
+ superBlocks: []
+};
+
+export const getNS = state => state[ns];
+export const allColapsedSelector = state => state[ns].isAllCollapsed;
+export const mapSelector = state => getNS(state).mapUi;
+export function makePanelOpenSelector(name) {
+ return createSelector(
+ mapSelector,
+ mapUi => {
+ const node = utils.getNode(mapUi, name);
+ return node ? node.isOpen : false;
+ }
+ );
+}
+
+export function makePanelHiddenSelector(name) {
+ return createSelector(
+ mapSelector,
+ mapUi => {
+ const node = utils.getNode(mapUi, name);
+ return node ? node.isHidden : false;
+ }
+ );
+}
+// interface Map{
+// children: [...{
+// name: (superBlock: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (blockName: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (challengeName: String),
+// isHidden: Boolean
+// }]
+// }]
+// }
+// }
+export default function createReducer() {
+ const reducer = handleActions(
+ {
+ [types.toggleThisPanel]: (state, { payload: name }) => {
+ return {
+ ...state,
+ mapUi: utils.toggleThisPanel(state.mapUi, name)
+ };
+ },
+ [types.collapseAll]: state => {
+ const mapUi = utils.collapseAllPanels(state.mapUi);
+ mapUi.isAllCollapsed = true;
+ return {
+ ...state,
+ mapUi
+ };
+ },
+ [types.expandAll]: state => {
+ const mapUi = utils.expandAllPanels(state.mapUi);
+ mapUi.isAllCollapsed = false;
+ return {
+ ...state,
+ mapUi
+ };
+ },
+ [app.fetchChallenges.complete]: (state, { payload }) => {
+ const { entities, result } = payload;
+ return {
+ ...state,
+ mapUi: utils.createMapUi(entities, result)
+ };
+ }
+ },
+ initialState
+ );
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/Map/redux/select-challenge-epic.js b/common/app/Map/redux/select-challenge-epic.js
new file mode 100644
index 0000000000..090bc019cf
--- /dev/null
+++ b/common/app/Map/redux/select-challenge-epic.js
@@ -0,0 +1,10 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+import { updateCurrentChallenge } from '../../redux';
+
+export default function selectChallengeEpic(actions) {
+ return actions::ofType(types.clickOnChallenge)
+ .pluck('payload')
+ .map(updateCurrentChallenge);
+}
diff --git a/common/app/Map/redux/utils.js b/common/app/Map/redux/utils.js
new file mode 100644
index 0000000000..4afdbdfc8e
--- /dev/null
+++ b/common/app/Map/redux/utils.js
@@ -0,0 +1,159 @@
+import protect from '../../utils/empty-protector';
+
+const throwIfUndefined = () => {
+ throw new Error('Challenge does not have a title');
+};
+
+export function createSearchTitle(
+ name = throwIfUndefined(),
+ challengeMap = {}
+) {
+ return challengeMap[name] || name;
+}
+// interface Node {
+// isHidden: Boolean,
+// children: Void|[ ...Node ],
+// isOpen?: Boolean
+// }
+//
+// interface MapUi
+// {
+// children: [...{
+// name: (superBlock: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (blockName: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (challengeName: String),
+// isHidden: Boolean
+// }]
+// }]
+// }]
+// }
+export function createMapUi(
+ {
+ block: blockMap,
+ challenge: challengeMap,
+ superBlock: superBlockMap
+ } = {},
+ { superBlocks } = {}
+) {
+ if (!superBlocks || !superBlockMap || !blockMap) {
+ return {};
+ }
+ return {
+ children: superBlocks.map(superBlock => {
+ return {
+ name: superBlock,
+ isOpen: false,
+ isHidden: false,
+ children: protect(superBlockMap[superBlock]).blocks.map(block => {
+ return {
+ name: block,
+ isOpen: false,
+ isHidden: false,
+ children: protect(blockMap[block]).challenges.map(challenge => {
+ return {
+ name: challenge,
+ title: createSearchTitle(challenge, challengeMap),
+ isHidden: false,
+ children: null
+ };
+ })
+ };
+ })
+ };
+ })
+ };
+}
+
+// synchronise
+// traverseMapUi(
+// tree: MapUi|Node,
+// update: ((MapUi|Node) => MapUi|Node)
+// ) => MapUi|Node
+export function traverseMapUi(tree, update) {
+ let childrenChanged;
+ if (!Array.isArray(tree.children)) {
+ return update(tree);
+ }
+ const newChildren = tree.children.map(node => {
+ const newNode = traverseMapUi(node, update);
+ if (!childrenChanged && newNode !== node) {
+ childrenChanged = true;
+ }
+ return newNode;
+ });
+ if (childrenChanged) {
+ tree = {
+ ...tree,
+ children: newChildren
+ };
+ }
+ return update(tree);
+}
+
+// synchronise
+// getNode(tree: MapUi, name: String) => MapUi
+export function getNode(tree, name) {
+ let node;
+ traverseMapUi(tree, thisNode => {
+ if (thisNode.name === name) {
+ node = thisNode;
+ }
+ return thisNode;
+ });
+ return node;
+}
+
+// synchronise
+// updateSingelNode(
+// tree: MapUi,
+// name: String,
+// update(MapUi|Node) => MapUi|Node
+// ) => MapUi
+export function updateSingleNode(tree, name, update) {
+ return traverseMapUi(tree, node => {
+ if (name !== node.name) {
+ return node;
+ }
+ return update(node);
+ });
+}
+
+// synchronise
+// toggleThisPanel(tree: MapUi, name: String) => MapUi
+export function toggleThisPanel(tree, name) {
+ return updateSingleNode(tree, name, node => {
+ return {
+ ...node,
+ isOpen: !node.isOpen
+ };
+ });
+}
+
+// toggleAllPanels(tree: MapUi, isOpen: Boolean = false ) => MapUi
+export function toggleAllPanels(tree, isOpen = false) {
+ return traverseMapUi(tree, node => {
+ if (!Array.isArray(node.children) || node.isOpen === isOpen) {
+ return node;
+ }
+ return {
+ ...node,
+ isOpen
+ };
+ });
+}
+
+// collapseAllPanels(tree: MapUi) => MapUi
+export function collapseAllPanels(tree) {
+ return toggleAllPanels(tree);
+}
+
+// expandAllPanels(tree: MapUi) => MapUi
+export function expandAllPanels(tree) {
+ return toggleAllPanels(tree, true);
+}
diff --git a/common/app/Map/redux/utils.test.js b/common/app/Map/redux/utils.test.js
new file mode 100644
index 0000000000..de761a9c3c
--- /dev/null
+++ b/common/app/Map/redux/utils.test.js
@@ -0,0 +1,215 @@
+import test from 'tape';
+import sinon from 'sinon';
+
+import {
+ getNode,
+ createMapUi,
+ traverseMapUi,
+ updateSingleNode,
+ toggleThisPanel,
+ expandAllPanels,
+ collapseAllPanels
+} from './utils.js';
+
+test('createMapUi', t => {
+ t.plan(3);
+ t.test('should return an `{}` when proper args not supplied', t => {
+ t.plan(3);
+ t.equal(
+ Object.keys(createMapUi()).length,
+ 0
+ );
+ t.equal(
+ Object.keys(createMapUi({}, [])).length,
+ 0
+ );
+ t.equal(
+ Object.keys(createMapUi({ superBlock: {} }, [])).length,
+ 0
+ );
+ });
+ t.test('should return a map tree', t => {
+ const expected = {
+ children: [{
+ name: 'superBlockA',
+ children: [{
+ name: 'blockA',
+ children: [{
+ name: 'challengeA'
+ }]
+ }]
+ }]
+ };
+ const actual = createMapUi({
+ superBlock: {
+ superBlockA: {
+ blocks: [
+ 'blockA'
+ ]
+ }
+ },
+ block: {
+ blockA: {
+ challenges: [
+ 'challengeA'
+ ]
+ }
+ }
+ },
+ { superBlocks: ['superBlockA'] },
+ { challengeA: 'ChallengeA title'}
+ );
+ t.plan(3);
+ t.equal(actual.children[0].name, expected.children[0].name);
+ t.equal(
+ actual.children[0].children[0].name,
+ expected.children[0].children[0].name
+ );
+ t.equal(
+ actual.children[0].children[0].children[0].name,
+ expected.children[0].children[0].children[0].name
+ );
+ });
+ t.test('should protect against malformed data', t => {
+ t.plan(2);
+ t.equal(
+ createMapUi({
+ superBlock: {},
+ block: {
+ blockA: {
+ challenges: [
+ 'challengeA'
+ ]
+ }
+ }
+ }, { superBlocks: ['superBlockA'] }).children[0].children.length,
+ 0
+ );
+ t.equal(
+ createMapUi({
+ superBlock: {
+ superBlockA: {
+ blocks: [
+ 'blockA'
+ ]
+ }
+ },
+ block: {}
+ },
+ { superBlocks: ['superBlockA'] }).children[0].children[0].children.length,
+ 0
+ );
+ });
+});
+test('traverseMapUi', t => {
+ t.test('should return tree', t => {
+ t.plan(2);
+ const expectedTree = {};
+ const actaulTree = traverseMapUi(expectedTree, tree => {
+ t.equal(tree, expectedTree);
+ return tree;
+ });
+ t.equal(actaulTree, expectedTree);
+ });
+ t.test('should hit every node', t => {
+ t.plan(4);
+ const expected = { children: [{ children: [{}] }] };
+ const spy = sinon.spy(t => t);
+ spy.withArgs(expected);
+ spy.withArgs(expected.children[0]);
+ spy.withArgs(expected.children[0].children[0]);
+ traverseMapUi(expected, spy);
+ t.equal(spy.callCount, 3);
+ t.ok(spy.withArgs(expected).calledOnce, 'foo');
+ t.ok(spy.withArgs(expected.children[0]).calledOnce, 'bar');
+ t.ok(spy.withArgs(expected.children[0].children[0]).calledOnce, 'baz');
+ });
+ t.test('should create new object when children change', t => {
+ t.plan(9);
+ const expected = { children: [{ bar: true }, {}] };
+ const actual = traverseMapUi(expected, node => ({ ...node, foo: true }));
+ t.notEqual(actual, expected);
+ t.notEqual(actual.children, expected.children);
+ t.notEqual(actual.children[0], expected.children[0]);
+ t.notEqual(actual.children[1], expected.children[1]);
+ t.equal(actual.children[0].bar, expected.children[0].bar);
+ t.notOk(expected.children[0].foo);
+ t.notOk(expected.children[1].foo);
+ t.true(actual.children[0].foo);
+ t.true(actual.children[1].foo);
+ });
+});
+test('getNode', t => {
+ t.test('should return node', t => {
+ t.plan(1);
+ const expected = { name: 'foo' };
+ const tree = { children: [{ name: 'notfoo' }, expected ] };
+ const actual = getNode(tree, 'foo');
+ t.equal(expected, actual);
+ });
+ t.test('should returned undefined if not found', t => {
+ t.plan(1);
+ const tree = {
+ children: [ { name: 'foo' }, { children: [ { name: 'bar' } ] } ]
+ };
+ const actual = getNode(tree, 'baz');
+ t.notOk(actual);
+ });
+});
+test('updateSingleNode', t => {
+ t.test('should update single node', t => {
+ const expected = { name: 'foo' };
+ const untouched = { name: 'notFoo' };
+ const actual = updateSingleNode(
+ { children: [ untouched, expected ] },
+ 'foo',
+ node => ({ ...node, tag: true })
+ );
+ t.plan(4);
+ t.ok(actual.children[1].tag);
+ t.equal(actual.children[1].name, expected.name);
+ t.notEqual(actual.children[1], expected);
+ t.equal(actual.children[0], untouched);
+ });
+});
+test('toggleThisPanel', t => {
+ t.test('should update single node', t => {
+ const expected = { name: 'foo', isOpen: true };
+ const actual = toggleThisPanel(
+ { children: [ { name: 'foo', isOpen: false }] },
+ 'foo'
+ );
+ t.plan(1);
+ t.deepLooseEqual(actual.children[0], expected);
+ });
+});
+test('toggleAllPanels', t => {
+ t.test('should add `isOpen: true` to every node without children', t => {
+ const expected = {
+ isOpen: true,
+ children: [{
+ isOpen: true,
+ children: [{}, {}]
+ }]
+ };
+ const actual = expandAllPanels({ children: [{ children: [{}, {}] }] });
+ t.plan(1);
+ t.deepLooseEqual(actual, expected);
+ });
+ t.test('should add `isOpen: false` to every node without children', t => {
+ const leaf = {};
+ const expected = {
+ isOpen: false,
+ children: [{
+ isOpen: false,
+ children: [{}, leaf]
+ }]
+ };
+ const actual = collapseAllPanels(
+ { isOpen: true, children: [{ children: [{}, leaf]}]},
+ );
+ t.plan(2);
+ t.deepLooseEqual(actual, expected);
+ t.equal(actual.children[0].children[1], leaf);
+ });
+});
diff --git a/common/app/Nav/Bin-Button.jsx b/common/app/Nav/Bin-Button.jsx
new file mode 100644
index 0000000000..47d822f316
--- /dev/null
+++ b/common/app/Nav/Bin-Button.jsx
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import { NavItem } from 'react-bootstrap';
+
+const propTypes = {
+ content: PropTypes.string,
+ handleClick: PropTypes.func.isRequired
+};
+
+export default function BinButton({ content, handleClick }) {
+ return (
+
+ { content }
+
+ );
+}
+BinButton.displayName = 'BinButton';
+BinButton.propTypes = propTypes;
diff --git a/common/app/Nav/Nav.jsx b/common/app/Nav/Nav.jsx
new file mode 100644
index 0000000000..1198275416
--- /dev/null
+++ b/common/app/Nav/Nav.jsx
@@ -0,0 +1,249 @@
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import noop from 'lodash/noop';
+import capitalize from 'lodash/capitalize';
+import { createSelector } from 'reselect';
+
+import { LinkContainer } from 'react-router-bootstrap';
+import {
+ MenuItem,
+ Nav,
+ NavDropdown,
+ NavItem,
+ Navbar,
+ NavbarBrand
+} from 'react-bootstrap';
+
+import navLinks from './links.json';
+import SignUp from './Sign-Up.jsx';
+import BinButton from './Bin-Button.jsx';
+import {
+ clickOnLogo,
+ openDropdown,
+ closeDropdown,
+ createNavLinkActionCreator,
+
+ dropdownSelector
+} from './redux';
+import {
+ userSelector,
+ signInLoadingSelector
+} from '../redux';
+import { nameToTypeSelector, panesSelector } from '../Panes/redux';
+
+
+const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
+
+const mapStateToProps = createSelector(
+ userSelector,
+ dropdownSelector,
+ signInLoadingSelector,
+ panesSelector,
+ nameToTypeSelector,
+ (
+ { username, picture, points },
+ isDropdownOpen,
+ showLoading,
+ panes,
+ nameToType
+ ) => {
+ return {
+ panes: panes.map(name => {
+ return {
+ content: name,
+ action: nameToType[name]
+ };
+ }, {}),
+ isDropdownOpen,
+ isSignedIn: !!username,
+ picture,
+ points,
+ showLoading,
+ username
+ };
+ }
+);
+
+function mapDispatchToProps(dispatch) {
+ const dispatchers = bindActionCreators(navLinks.reduce(
+ (mdtp, { content }) => {
+ const handler = `handle${capitalize(content)}Click`;
+ mdtp[handler] = createNavLinkActionCreator(content);
+ return mdtp;
+ },
+ {
+ clickOnLogo: e => {
+ e.preventDefault();
+ return clickOnLogo();
+ },
+ closeDropdown: () => closeDropdown(),
+ openDropdown: () => openDropdown()
+ }
+ ), dispatch);
+ dispatchers.dispatch = dispatch;
+ return () => dispatchers;
+}
+
+function mergeProps(stateProps, dispatchProps, ownProps) {
+ const panes = stateProps.panes.map(pane => {
+ return {
+ ...pane,
+ actionCreator: () => dispatchProps.dispatch({ type: pane.action })
+ };
+ });
+ return {
+ ...ownProps,
+ ...stateProps,
+ ...dispatchProps,
+ panes
+ };
+}
+
+const propTypes = navLinks.reduce(
+ (pt, { content }) => {
+ const handler = `handle${capitalize(content)}Click`;
+ pt[handler] = PropTypes.func.isRequired;
+ return pt;
+ },
+ {
+ panes: PropTypes.array,
+ clickOnLogo: PropTypes.func.isRequired,
+ closeDropdown: PropTypes.func.isRequired,
+ isDropdownOpen: PropTypes.bool,
+ openDropdown: PropTypes.func.isRequired,
+ picture: PropTypes.string,
+ points: PropTypes.number,
+ showLoading: PropTypes.bool,
+ signedIn: PropTypes.bool,
+ username: PropTypes.string
+ }
+);
+
+export class FCCNav extends React.Component {
+ renderLink(isNavItem, { isReact, isDropdown, content, link, links, target }) {
+ const Component = isNavItem ? NavItem : MenuItem;
+ const {
+ isDropdownOpen,
+ openDropdown,
+ closeDropdown
+ } = this.props;
+
+ if (isDropdown) {
+ // adding a noop to NavDropdown to disable false warning
+ // about controlled component
+ return (
+
+ { links.map(this.renderLink.bind(this, false)) }
+
+ );
+ }
+ if (isReact) {
+ return (
+
+
+ { content }
+
+
+ );
+ }
+ return (
+
+ { content }
+
+ );
+ }
+
+ render() {
+ const {
+ panes,
+ clickOnLogo,
+ username,
+ points,
+ picture,
+ showLoading
+ } = this.props;
+
+ return (
+
+
+
+
+ 
+
+
+
+
+
+
+
+ );
+ }
+}
+
+FCCNav.displayName = 'FCCNav';
+FCCNav.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ mergeProps
+)(FCCNav);
diff --git a/common/app/Nav/Sign-Up.jsx b/common/app/Nav/Sign-Up.jsx
new file mode 100644
index 0000000000..ea4d6a2e76
--- /dev/null
+++ b/common/app/Nav/Sign-Up.jsx
@@ -0,0 +1,54 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+import { NavItem } from 'react-bootstrap';
+
+// this is separated out to prevent react bootstrap's
+// NavBar from injecting unknown props to the li component
+
+const propTypes = {
+ picture: PropTypes.string,
+ points: PropTypes.number,
+ showLoading: PropTypes.bool,
+ username: PropTypes.string
+};
+
+export default function SignUpButton({
+ picture,
+ points,
+ showLoading,
+ username
+}) {
+ if (showLoading) {
+ return null;
+ }
+ if (!username) {
+ return (
+
+ Sign Up
+
+ );
+ }
+ return (
+
+
+ { username }
+ [ { points || 1 } ]
+
+
+
+
+
+ );
+}
+
+SignUpButton.displayName = 'SignUpButton';
+SignUpButton.propTypes = propTypes;
diff --git a/common/app/components/Nav/index.js b/common/app/Nav/index.js
similarity index 100%
rename from common/app/components/Nav/index.js
rename to common/app/Nav/index.js
diff --git a/common/app/components/Nav/links.json b/common/app/Nav/links.json
similarity index 92%
rename from common/app/components/Nav/links.json
rename to common/app/Nav/links.json
index d6c43de3b0..57b82e7ac3 100644
--- a/common/app/components/Nav/links.json
+++ b/common/app/Nav/links.json
@@ -34,13 +34,8 @@
}
]
},
- {
- "content": "Map",
- "link": "/map",
- "isReact": true
- },
{
"content": "Donate",
"link": "https://www.freecodecamp.com/donate"
}
-]
\ No newline at end of file
+]
diff --git a/common/app/Nav/nav.less b/common/app/Nav/nav.less
new file mode 100644
index 0000000000..7493f6d0e5
--- /dev/null
+++ b/common/app/Nav/nav.less
@@ -0,0 +1,196 @@
+.navbar {
+ background-color: @brand-primary;
+ font-size: 14px;
+}
+
+.navbar-nav > li > a {
+ color: @body-bg;
+ &:hover {
+ color: @brand-primary;
+ }
+}
+
+.navbar > .container {
+ padding-right: 0px;
+ width: auto;
+
+ @media (max-width: 767px) {
+ // container default padding size
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+
+.nav-height {
+ border: none;
+ height: @navbar-height;
+ width: 100%;
+}
+
+@navbar-logo-height: 25px;
+@navbar-logo-padding: (@navbar-height - @navbar-logo-height) / 2;
+.navbar-brand {
+ padding-top: @navbar-logo-padding;
+ padding-bottom: @navbar-logo-padding;
+}
+
+.nav-logo {
+ height: @navbar-logo-height;
+}
+
+.navbar-right {
+ background-color: @brand-primary;
+ text-align: center;
+
+ @media (min-width: @screen-md-min) {
+ margin-right:0;
+ }
+ @media (min-width: @screen-md-max) and (max-width: 991px) {
+ left: 0;
+ margin-right: 0;
+ position: absolute;
+ right: 0;
+ white-space: nowrap;
+ }
+}
+
+.navbar {
+ white-space: nowrap;
+ border: none;
+ line-height: 1;
+ @media (min-width: 767px) {
+ padding-left: 15px;
+ padding-right: 30px;
+ }
+}
+
+// li is used here to get more specific
+// and win against navbar.less#273
+li.nav-avatar {
+ span {
+ display: inline-block;
+ }
+ @media (min-width: @screen-sm-min) {
+ height: @navbar-height;
+ margin: 0;
+ padding: 0;
+
+ > a {
+ margin: 0;
+ padding: 0 @navbar-padding-horizontal 0 @navbar-padding-horizontal;
+ }
+ }
+}
+
+.nav-username {
+ padding-right: @navbar-padding-horizontal;
+}
+
+.nav-points {
+ @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+ padding: @navbar-padding-vertical 0 @navbar-padding-vertical 0;
+ }
+ @media (min-width: @screen-md-min) {
+ padding: @navbar-padding-vertical @navbar-padding-horizontal @navbar-padding-vertical 0;
+ }
+}
+
+.nav-picture {
+ margin-top: @navbar-logo-padding;
+ margin-bottom: @navbar-logo-padding;
+ height: @navbar-logo-height;
+ width: @navbar-logo-height;
+}
+
+.navbar-nav a {
+ color: @body-bg;
+ margin-top: -5px;
+ margin-bottom: -5px;
+}
+
+.navbar-toggle {
+ color: @body-bg;
+
+ &:hover,
+ &:focus {
+ color: #4a2b0f;
+ }
+}
+
+.navbar-collapse {
+ border-top: 0;
+}
+
+@media (max-width: @screen-xs-max) {
+ .navbar-header {
+ float: none;
+ }
+
+ .navbar-toggle {
+ display: block;
+ }
+
+ .navbar-collapse.collapse {
+ display: none !important;
+ }
+
+ .navbar-nav {
+ margin-top: 0;
+ }
+
+ .navbar-nav > li {
+ float: none;
+ }
+
+ .navbar-nav > li > a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+
+ .navbar-text {
+ float: none;
+ margin: 15px 0;
+ }
+
+ /* since 3.1.0 */
+ .navbar-collapse.collapse.in {
+ display: block !important;
+ }
+
+ .collapsing {
+ overflow: hidden !important;
+ position: absolute;
+ left: 0;
+ right: 0;
+ }
+}
+
+.night {
+ .navbar-default {
+ .navbar-nav {
+ & > li > a {
+ color: #CCC;
+ }
+ .dropdown-menu {
+ background-color: @gray;
+ a {
+ color: @night-text-color !important;
+ }
+ }
+ a:focus,
+ a:hover,
+ .open #nav-Community-dropdown {
+ background-color: #666 !important;
+ color: @link-hover-color !important;
+ }
+ }
+ }
+ .navbar-toggle {
+ &:hover,
+ &:focus {
+ background-color: #666;
+ color: @link-hover-color;
+ border-color: #666;
+ }
+ }
+}
diff --git a/common/app/Nav/ns.json b/common/app/Nav/ns.json
new file mode 100644
index 0000000000..ea84de45ff
--- /dev/null
+++ b/common/app/Nav/ns.json
@@ -0,0 +1 @@
+"nav"
diff --git a/common/app/Nav/redux/bin-epic.js b/common/app/Nav/redux/bin-epic.js
new file mode 100644
index 0000000000..8ac0cf620e
--- /dev/null
+++ b/common/app/Nav/redux/bin-epic.js
@@ -0,0 +1,10 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+
+import { hidePane } from '../../Panes/redux';
+
+export default function binEpic(actions) {
+ return actions::ofType(types.clickOnMap)
+ .map(() => hidePane('Map'));
+}
diff --git a/common/app/Nav/redux/index.js b/common/app/Nav/redux/index.js
new file mode 100644
index 0000000000..f6fd626085
--- /dev/null
+++ b/common/app/Nav/redux/index.js
@@ -0,0 +1,79 @@
+import capitalize from 'lodash/capitalize';
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+import noop from 'lodash/noop';
+
+import loadCurrentChallengeEpic from './load-current-challenge-epic.js';
+import binEpic from './bin-epic.js';
+import ns from '../ns.json';
+import { createEventMetaCreator } from '../../redux';
+
+export const epics = [
+ loadCurrentChallengeEpic,
+ binEpic
+];
+
+export const types = createTypes([
+ 'clickOnLogo',
+ 'clickOnMap',
+ 'navLinkClicked',
+
+ 'closeDropdown',
+ 'openDropdown'
+], ns);
+
+export const clickOnLogo = createAction(
+ types.clickOnLogo,
+ noop,
+ createEventMetaCreator({
+ category: 'Nav',
+ action: 'clicked',
+ label: 'fcc logo clicked'
+ })
+);
+
+export const clickOnMap = createAction(
+ types.clickOnMap,
+ noop,
+ createEventMetaCreator({
+ category: 'Nav',
+ action: 'clicked',
+ label: 'map button clicked'
+ })
+);
+
+export const closeDropdown = createAction(types.closeDropdown);
+export const openDropdown = createAction(types.openDropdown);
+export function createNavLinkActionCreator(link) {
+ return createAction(
+ types.navLinkClicked,
+ noop,
+ createEventMetaCreator({
+ category: capitalize(ns),
+ action: 'click',
+ label: `${link} link`
+ })
+ );
+}
+
+const initialState = {
+ isDropdownOpen: false
+};
+
+export const dropdownSelector = state => state[ns].isDropdownOpen;
+
+export default function createReducer() {
+ const reducer = handleActions({
+ [types.closeDropdown]: state => ({
+ ...state,
+ isDropdownOpen: false
+ }),
+ [types.openDropdown]: state => ({
+ ...state,
+ isDropdownOpen: true
+ })
+ }, initialState);
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/Nav/redux/load-current-challenge-epic.js b/common/app/Nav/redux/load-current-challenge-epic.js
new file mode 100644
index 0000000000..9e609ecbfa
--- /dev/null
+++ b/common/app/Nav/redux/load-current-challenge-epic.js
@@ -0,0 +1,61 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+import {
+ updateCurrentChallenge,
+
+ userSelector,
+ firstChallengeSelector,
+ challengeSelector
+} from '../../redux';
+import { entitiesSelector } from '../../entities';
+
+export default function loadCurrentChallengeEpic(actions, { getState }) {
+ return actions::ofType(types.clickOnLogo)
+ .debounce(500)
+ .map(() => {
+ let finalChallenge;
+ const state = getState();
+ const { id: currentlyLoadedChallengeId } = challengeSelector(state);
+ const {
+ challenge: challengeMap,
+ challengeIdToName
+ } = entitiesSelector(state);
+ const {
+ routing: {
+ locationBeforeTransitions: { pathname } = {}
+ }
+ } = state;
+ const firstChallenge = firstChallengeSelector(state);
+ const { currentChallengeId } = userSelector(state);
+ const isOnAChallenge = (/^\/[^\/]{2,6}\/challenges/).test(pathname);
+
+ if (!currentChallengeId) {
+ finalChallenge = firstChallenge;
+ } else {
+ finalChallenge = challengeMap[
+ challengeIdToName[ currentChallengeId ]
+ ];
+ }
+ return {
+ finalChallenge,
+ isOnAChallenge,
+ currentlyLoadedChallengeId
+ };
+ })
+ .filter(({
+ finalChallenge,
+ isOnAChallenge,
+ currentlyLoadedChallengeId
+ }) => (
+ // data might not be there yet, filter out for now
+ !!finalChallenge &&
+ // are we already on that challenge? if not load challenge
+ (!isOnAChallenge || finalChallenge.id !== currentlyLoadedChallengeId)
+ // don't reload if the challenge is already loaded.
+ // This may change to toast to avoid user confusion
+ ))
+ .map(({ finalChallenge }) => {
+ return updateCurrentChallenge(finalChallenge.dashedName);
+ });
+}
diff --git a/common/app/components/NotFound/index.jsx b/common/app/NotFound/Not-Found.jsx
similarity index 90%
rename from common/app/components/NotFound/index.jsx
rename to common/app/NotFound/Not-Found.jsx
index 9acc2b34f9..f8223a9357 100644
--- a/common/app/components/NotFound/index.jsx
+++ b/common/app/NotFound/Not-Found.jsx
@@ -1,6 +1,6 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
-import { hardGoTo } from '../../redux/actions';
+import { hardGoTo } from '../redux';
const propTypes = {
hardGoTo: PropTypes.func,
@@ -8,8 +8,6 @@ const propTypes = {
};
export class NotFound extends React.Component {
-
-
componentWillMount() {
this.props.hardGoTo(this.props.location.pathname);
}
diff --git a/common/app/NotFound/index.js b/common/app/NotFound/index.js
new file mode 100644
index 0000000000..b174c4f934
--- /dev/null
+++ b/common/app/NotFound/index.js
@@ -0,0 +1 @@
+export default from './Not-Found.jsx';
diff --git a/common/app/Panes/Divider.jsx b/common/app/Panes/Divider.jsx
new file mode 100644
index 0000000000..3eb97df6b0
--- /dev/null
+++ b/common/app/Panes/Divider.jsx
@@ -0,0 +1,50 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import { dividerClicked } from './redux';
+
+const mapStateToProps = null;
+function mapDispatchToProps(dispatch, { name }) {
+ const dispatchers = {
+ dividerClicked: () => dispatch(dividerClicked(name))
+ };
+ return () => dispatchers;
+}
+
+const propTypes = {
+ dividerClicked: PropTypes.func.isRequired,
+ left: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired
+};
+
+export function Divider({ left, dividerClicked }) {
+ const style = {
+ borderLeft: '1px solid rgb(204, 204, 204)',
+ bottom: 0,
+ cursor: 'col-resize',
+ height: '100%',
+ left: left + '%',
+ marginLeft: '-4px',
+ position: 'absolute',
+ right: 'auto',
+ top: 0,
+ width: '8px',
+ zIndex: 100
+ };
+ // use onMouseDown as onClick does not fire
+ // until onMouseUp
+ // note(berks): do we need touch support?
+ return (
+
+ );
+}
+Divider.displayName = 'Divider';
+Divider.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Divider);
diff --git a/common/app/Panes/Pane.jsx b/common/app/Panes/Pane.jsx
new file mode 100644
index 0000000000..dee72c5da6
--- /dev/null
+++ b/common/app/Panes/Pane.jsx
@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+const mapStateToProps = null;
+const mapDispatchToProps = null;
+const propTypes = {
+ children: PropTypes.element,
+ left: PropTypes.number.isRequired,
+ right: PropTypes.number.isRequired
+};
+
+export function Pane({
+ children,
+ left,
+ right
+}) {
+ const style = {
+ bottom: 0,
+ left: left + '%',
+ overflowX: 'hidden',
+ overflowY: 'auto',
+ position: 'absolute',
+ right: right + '%',
+ top: 0
+ };
+ return (
+
+ { children }
+
+ );
+}
+Pane.displayName = 'Pane';
+Pane.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Pane);
diff --git a/common/app/Panes/Panes-Container.jsx b/common/app/Panes/Panes-Container.jsx
new file mode 100644
index 0000000000..cec7878bcd
--- /dev/null
+++ b/common/app/Panes/Panes-Container.jsx
@@ -0,0 +1,58 @@
+import React, { PureComponent, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import Panes from './Panes.jsx';
+import {
+ panesMounted,
+ panesUpdated,
+ panesWillMount,
+ panesWillUnmount
+} from './redux';
+
+const mapStateToProps = null;
+const mapDispatchToProps = {
+ panesMounted,
+ panesUpdated,
+ panesWillMount,
+ panesWillUnmount
+};
+
+const propTypes = {
+ nameToComponent: PropTypes.object.isRequired,
+ panesMounted: PropTypes.func.isRequired,
+ panesUpdated: PropTypes.func.isRequired,
+ panesWillMount: PropTypes.func.isRequired,
+ panesWillUnmount: PropTypes.func.isRequired
+};
+
+export class PanesContainer extends PureComponent {
+ componentWillMount() {
+ this.props.panesWillMount(Object.keys(this.props.nameToComponent));
+ }
+ componentDidMount() {
+ this.props.panesMounted();
+ }
+
+ componentWillUnmount() {
+ this.props.panesWillUnmount();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.nameToComponent !== this.props.nameToComponent) {
+ this.props.panesUpdated(Object.keys(nextProps.nameToComponent));
+ }
+ }
+
+ render() {
+ return (
+
+ ,
+ divider
+ ];
+ }).reduce((panes, pane) => panes.concat(pane), [])
+ .filter(Boolean);
+ }
+
+ render() {
+ const { height } = this.props;
+ const outerStyle = {
+ height,
+ position: 'relative',
+ width: '100%'
+ };
+ const innerStyle = {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0
+ };
+ return (
+
+
+ { this.renderPanes() }
+
+
+ );
+ }
+}
+
+Panes.displayName = 'Panes';
+Panes.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Panes);
diff --git a/common/app/Panes/index.js b/common/app/Panes/index.js
new file mode 100644
index 0000000000..a6ad764581
--- /dev/null
+++ b/common/app/Panes/index.js
@@ -0,0 +1 @@
+export default from './Panes-Container.jsx';
diff --git a/common/app/Panes/ns.json b/common/app/Panes/ns.json
new file mode 100644
index 0000000000..23b82c1253
--- /dev/null
+++ b/common/app/Panes/ns.json
@@ -0,0 +1 @@
+"panes"
diff --git a/common/app/Panes/redux/divider-epic.js b/common/app/Panes/redux/divider-epic.js
new file mode 100644
index 0000000000..130c472588
--- /dev/null
+++ b/common/app/Panes/redux/divider-epic.js
@@ -0,0 +1,40 @@
+import 'rx-dom';
+import { Observable, Scheduler } from 'rx';
+import { combineEpics, ofType } from 'redux-epic';
+
+import {
+ types,
+
+ mouseReleased,
+ dividerMoved,
+
+ pressedDividerSelector
+} from './';
+
+export function dividerReleasedEpic(actions, _, { document }) {
+ return actions::ofType(types.dividerClicked)
+ .switchMap(() => Observable.fromEvent(document, 'mouseup')
+ .map(() => mouseReleased())
+ // allow mouse up on divider to go first
+ .delay(1)
+ .takeUntil(actions::ofType(types.mouseReleased))
+ );
+}
+
+export function dividerMovedEpic(actions, { getState }, { document }) {
+ return actions::ofType(types.dividerClicked)
+ .switchMap(() => Observable.fromEvent(document, 'mousemove')
+ // prevent mouse drags from highlighting text
+ .do(e => e.preventDefault())
+ .map(({ clientX }) => clientX)
+ .throttle(1, Scheduler.requestAnimationFrame)
+ .filter(() => {
+ const divider = pressedDividerSelector(getState());
+ return !!divider || divider === 0;
+ })
+ .map(dividerMoved)
+ .takeUntil(actions::ofType(types.mouseReleased))
+ );
+}
+
+export default combineEpics(dividerReleasedEpic, dividerMovedEpic);
diff --git a/common/app/Panes/redux/index.js b/common/app/Panes/redux/index.js
new file mode 100644
index 0000000000..ad4e608b1b
--- /dev/null
+++ b/common/app/Panes/redux/index.js
@@ -0,0 +1,236 @@
+import { combineActions, createAction, handleActions } from 'redux-actions';
+import { createTypes } from 'redux-create-types';
+import clamp from 'lodash/clamp';
+
+import ns from '../ns.json';
+
+import windowEpic from './window-epic.js';
+import dividerEpic from './divider-epic.js';
+
+const isDev = process.env.NODE_ENV !== 'production';
+export const epics = [
+ windowEpic,
+ dividerEpic
+];
+
+export const types = createTypes([
+ 'panesMounted',
+ 'panesUpdated',
+ 'panesWillMount',
+ 'panesWillUnmount',
+ 'updateSize',
+
+ 'dividerClicked',
+ 'dividerMoved',
+ 'mouseReleased',
+ 'windowResized',
+
+ // commands
+ 'updateNavHeight',
+ 'hidePane'
+], ns);
+
+export const panesMounted = createAction(types.panesMounted);
+export const panesUpdated = createAction(types.panesUpdated);
+export const panesWillMount = createAction(types.panesWillMount);
+export const panesWillUnmount = createAction(types.panesWillUnmount);
+
+export const dividerClicked = createAction(types.dividerClicked);
+export const dividerMoved = createAction(types.dividerMoved);
+export const mouseReleased = createAction(types.mouseReleased);
+export const windowResized = createAction(types.windowResized);
+
+// commands
+export const updateNavHeight = createAction(types.updateNavHeight);
+export const hidePane = createAction(types.hidePane);
+
+const initialState = {
+ height: 600,
+ width: 800,
+ navHeight: 50,
+ panes: [],
+ panesByName: {},
+ pressedDivider: null,
+ nameToType: {}
+};
+export const getNS = state => state[ns];
+export const heightSelector = state => {
+ const { navHeight, height } = getNS(state);
+ return height - navHeight;
+};
+
+export const panesSelector = state => getNS(state).panes;
+export const panesByNameSelector = state => getNS(state).panesByName;
+export const pressedDividerSelector =
+ state => getNS(state).pressedDivider;
+export const widthSelector = state => getNS(state).width;
+export const nameToTypeSelector = state => getNS(state).nameToType;
+
+function isPanesAction({ type } = {}, typeToName) {
+ return !!typeToName[type];
+}
+
+function getDividerLeft(numOfPanes, index) {
+ let dividerLeft = null;
+ if (numOfPanes > 1 && numOfPanes !== index + 1) {
+ dividerLeft = (100 / numOfPanes) * (index + 1);
+ }
+ return dividerLeft;
+}
+
+export default function createPanesAspects(typeToName) {
+ if (isDev) {
+ Object.keys(typeToName).forEach(actionType => {
+ if (actionType === 'undefined') {
+ throw new Error(
+ `action type for ${typeToName[actionType]} is undefined`
+ );
+ }
+ });
+ }
+ const nameToType = Object.keys(typeToName).reduce((map, type) => {
+ map[typeToName[type]] = type;
+ return map;
+ }, {});
+ function getInitialState() {
+ return {
+ ...initialState,
+ nameToType
+ };
+ }
+
+ function middleware() {
+ return next => action => {
+ let finalAction = action;
+ if (isPanesAction(action, typeToName)) {
+ finalAction = {
+ ...action,
+ meta: {
+ ...action.meta,
+ isPaneAction: true
+ }
+ };
+ }
+ return next(finalAction);
+ };
+ }
+
+ const reducer = handleActions({
+ [types.dividerClicked]: (state, { payload: name }) => ({
+ ...state,
+ pressedDivider: name
+ }),
+ [types.dividerMoved]: (state, { payload: clientX }) => {
+ const { width, pressedDivider: paneName } = state;
+ const dividerBuffer = (200 / width) * 100;
+ const paneIndex = state.panes.indexOf(paneName);
+ const currentPane = state.panesByName[paneName];
+ const rightPane = state.panesByName[state.panes[paneIndex + 1]] || {};
+ const leftPane = state.panesByName[state.panes[paneIndex - 1]] || {};
+ const rightBound = (rightPane.dividerLeft || 100) - dividerBuffer;
+ const leftBound = (leftPane.dividerLeft || 0) + dividerBuffer;
+ const newPosition = clamp(
+ (clientX / width) * 100,
+ leftBound,
+ rightBound
+ );
+ return {
+ ...state,
+ panesByName: {
+ ...state.panesByName,
+ [currentPane.name]: {
+ ...currentPane,
+ dividerLeft: newPosition
+ }
+ }
+ };
+ },
+ [types.mouseReleased]: state => ({ ...state, pressedDivider: null }),
+ [types.windowResized]: (state, { payload: { height, width } }) => ({
+ ...state,
+ height,
+ width
+ }),
+ // used to clear bin buttons
+ [types.panesWillUnmount]: state => ({
+ ...state,
+ panes: [],
+ panesByName: {},
+ pressedDivider: null
+ }),
+ [
+ combineActions(
+ panesWillMount,
+ panesUpdated
+ )
+ ]: (state, { payload: panes }) => {
+ const numOfPanes = panes.length;
+ return {
+ ...state,
+ panes,
+ panesByName: panes.reduce((panes, name, index) => {
+ const dividerLeft = getDividerLeft(numOfPanes, index);
+ panes[name] = {
+ name,
+ dividerLeft,
+ isHidden: false
+ };
+ return panes;
+ }, {})
+ };
+ },
+ [types.updateNavHeight]: (state, { payload: navHeight }) => ({
+ ...state,
+ navHeight
+ })
+ }, getInitialState());
+ function metaReducer(state = getInitialState(), action) {
+ if (action.meta && action.meta.isPaneAction) {
+ const name = typeToName[action.type];
+ const oldPane = state.panesByName[name];
+ const pane = {
+ ...oldPane,
+ isHidden: !oldPane.isHidden
+ };
+ const panesByName = {
+ ...state.panesByName,
+ [name]: pane
+ };
+ const numOfPanes = state.panes.reduce((sum, name) => {
+ return panesByName[name].isHidden ? sum : sum + 1;
+ }, 0);
+ let numOfHidden = 0;
+ return {
+ ...state,
+ panesByName: state.panes.reduce(
+ (panesByName, name, index) => {
+ if (!panesByName[name].isHidden) {
+ const dividerLeft = getDividerLeft(
+ numOfPanes,
+ index - numOfHidden
+ );
+ panesByName[name] = {
+ ...panesByName[name],
+ dividerLeft
+ };
+ } else {
+ numOfHidden = numOfHidden + 1;
+ }
+ return panesByName;
+ },
+ panesByName
+ )
+ };
+ }
+ return state;
+ }
+
+ function finalReducer(state, action) {
+ return reducer(metaReducer(state, action), action);
+ }
+ finalReducer.toString = () => ns;
+ return {
+ reducer: finalReducer,
+ middleware
+ };
+}
diff --git a/client/less/challenge.less b/common/app/Panes/redux/utils.js
similarity index 100%
rename from client/less/challenge.less
rename to common/app/Panes/redux/utils.js
diff --git a/common/app/Panes/redux/window-epic.js b/common/app/Panes/redux/window-epic.js
new file mode 100644
index 0000000000..68a92512db
--- /dev/null
+++ b/common/app/Panes/redux/window-epic.js
@@ -0,0 +1,21 @@
+import { Observable } from 'rx';
+import { ofType } from 'redux-epic';
+
+import {
+ types,
+ windowResized
+} from './';
+
+export default function windowEpic(actions, _, { window }) {
+ return actions::ofType(types.panesMounted)
+ .switchMap(() => {
+ return Observable.fromEvent(window, 'resize', () => windowResized({
+ width: window.innerWidth,
+ height: window.innerHeight
+ }))
+ .startWith(windowResized({
+ width: window.innerWidth,
+ height: window.innerHeight
+ }));
+ });
+}
diff --git a/common/app/toasts/Toasts.jsx b/common/app/Toasts/Toasts.jsx
similarity index 96%
rename from common/app/toasts/Toasts.jsx
rename to common/app/Toasts/Toasts.jsx
index 035bc4b466..8e55ae9ac0 100644
--- a/common/app/toasts/Toasts.jsx
+++ b/common/app/Toasts/Toasts.jsx
@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { NotificationStack } from 'react-notification';
-import { removeToast } from './redux/actions';
+import { removeToast } from './redux';
import {
submitChallenge,
resetChallenge
-} from '../routes/challenges/redux/actions';
+} from '../routes/challenges/redux';
const registeredActions = {
submitChallenge,
diff --git a/common/app/Toasts/index.js b/common/app/Toasts/index.js
new file mode 100644
index 0000000000..2518a55c0f
--- /dev/null
+++ b/common/app/Toasts/index.js
@@ -0,0 +1 @@
+export default from './Toasts.jsx';
diff --git a/common/app/Toasts/ns.json b/common/app/Toasts/ns.json
new file mode 100644
index 0000000000..2471c4eb56
--- /dev/null
+++ b/common/app/Toasts/ns.json
@@ -0,0 +1 @@
+"toasts"
diff --git a/common/app/Toasts/redux/index.js b/common/app/Toasts/redux/index.js
new file mode 100644
index 0000000000..af05b57b1f
--- /dev/null
+++ b/common/app/Toasts/redux/index.js
@@ -0,0 +1,45 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+
+import ns from '../ns.json';
+
+export const types = createTypes([
+ 'makeToast',
+ 'removeToast'
+], 'toast');
+
+let key = 0;
+export const makeToast = createAction(
+ types.makeToast,
+ ({ timeout, ...rest }) => ({
+ ...rest,
+ // assign current value of key to new toast
+ // and then increment key value
+ key: key++,
+ dismissAfter: timeout || 6000,
+ position: rest.position === 'left' ? 'left' : 'right'
+ })
+);
+
+export const removeToast = createAction(
+ types.removeToast,
+ ({ key }) => key
+);
+
+
+const initialState = [];
+
+export default function createReducer() {
+ const reducer = handleActions({
+ [types.makeToast]: (state, { payload: toast }) => [
+ ...state,
+ toast
+ ],
+ [types.removeToast]: (state, { payload: key }) => state.filter(
+ toast => toast.key !== key
+ )
+ }, initialState);
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/app.less b/common/app/app.less
index 3705a8db5f..5a90c57e1f 100644
--- a/common/app/app.less
+++ b/common/app/app.less
@@ -2,13 +2,22 @@
@ns: app;
.@{ns}-container {
- .column();
+ // we invert the nav and content since
+ // the content needs to render first
+ // Here we invert the order in which
+ // they are painted using css so the
+ // nav is on top again
+ .grid(@direction: column-reverse);
width: 100vw;
}
.@{ns}-content {
- .center(@value: @container-xl, @padding: @grid-gutter-width);
// makes the inital content height 0px
// then lets it grow to fit the rest of the space
flex: 1 0 0px;
}
+
+.@{ns}-centered {
+ .center(@value: @container-xl, @padding: @grid-gutter-width);
+ margin-top: @navbar-margin-bottom;
+}
diff --git a/common/app/components/Nav/Avatar-Points-Nav-Item.jsx b/common/app/components/Nav/Avatar-Points-Nav-Item.jsx
deleted file mode 100644
index d8907f2b1b..0000000000
--- a/common/app/components/Nav/Avatar-Points-Nav-Item.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Link } from 'react-router';
-
-// this is separated out to prevent react bootstrap's
-// NavBar from injecting unknown props to the li component
-
-const propTypes = {
- picture: PropTypes.string,
- points: PropTypes.number,
- username: PropTypes.string
-};
-
-export default function AvatarPointsNavItem({ picture, points, username }) {
- return (
-
-
-
- { username }
- [ { points || 1 } ]
-
-
-
-
-
-
- );
-}
-
-AvatarPointsNavItem.displayName = 'AvatarPointsNavItem';
-AvatarPointsNavItem.propTypes = propTypes;
diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx
deleted file mode 100644
index 033c4af227..0000000000
--- a/common/app/components/Nav/Nav.jsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import React, { PropTypes } from 'react';
-import { LinkContainer } from 'react-router-bootstrap';
-import {
- Col,
- MenuItem,
- Nav,
- NavDropdown,
- NavItem,
- Navbar,
- NavbarBrand
-} from 'react-bootstrap';
-import noop from 'lodash/noop';
-
-import navLinks from './links.json';
-import AvatarPointsNavItem from './Avatar-Points-Nav-Item.jsx';
-
-const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
-
-const toggleButtonChild = (
-
- { links.map(this.renderLink.bind(this, false)) }
-
- );
- }
- if (isReact) {
- return (
-
-
- { content }
-
-
- );
- }
- return (
-
- { content }
-
- );
- }
-
- renderSignIn(username, points, picture, showLoading) {
- if (showLoading) {
- return null;
- }
- if (username) {
- return (
-
- Sign Up
-
- );
- }
- }
-
- render() {
- const {
- username,
- points,
- picture,
- showLoading
- } = this.props;
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-FCCNav.displayName = 'FCCNav';
-FCCNav.propTypes = propTypes;
diff --git a/common/app/components/README.md b/common/app/components/README.md
deleted file mode 100644
index e5b2bbdca3..0000000000
--- a/common/app/components/README.md
+++ /dev/null
@@ -1 +0,0 @@
-things like NavBar and Footer go here
diff --git a/common/app/create-app.jsx b/common/app/create-app.jsx
index edb63d29fc..efb77b269e 100644
--- a/common/app/create-app.jsx
+++ b/common/app/create-app.jsx
@@ -2,17 +2,13 @@ import { Observable } from 'rx';
import { match } from 'react-router';
import { compose, createStore, applyMiddleware } from 'redux';
-// main app
-import App from './App.jsx';
-// app routes
-import createChildRoute from './routes';
-
-// redux
import { createEpic } from 'redux-epic';
import createReducer from './create-reducer';
-import sagas from './sagas';
+import createRoutes from './create-routes.js';
+import createPanesMap from './create-panes-map.js';
+import createPanesAspects from './Panes/redux';
+import epics from './epics';
-// general utils
import servicesCreator from '../utils/services-creator';
const createRouteProps = Observable.fromNodeCallback(match);
@@ -27,7 +23,7 @@ const createRouteProps = Observable.fromNodeCallback(match);
// middlewares?: Function[],
// sideReducers?: Object
// enhancers?: Function[],
-// sagas?: Function[],
+// epics?: Function[],
// }) => Observable
//
// Either location or history must be defined
@@ -41,44 +37,49 @@ export default function createApp({
middlewares: sideMiddlewares = [],
enhancers: sideEnhancers = [],
reducers: sideReducers = {},
- sagas: sideSagas = [],
- sagaOptions: sideSagaOptions = {}
+ epics: sideEpics = [],
+ epicOptions: sideEpicOptions = {}
}) {
- const sagaOptions = {
- ...sideSagaOptions,
+ const epicOptions = {
+ ...sideEpicOptions,
services: servicesCreator(serviceOptions)
};
- const sagaMiddleware = createEpic(
- sagaOptions,
- ...sagas,
- ...sideSagas
+ const epicMiddleware = createEpic(
+ epicOptions,
+ ...epics,
+ ...sideEpics
);
- const enhancers = [
+ const {
+ reducer: panesReducer,
+ middleware: panesMiddleware
+ } = createPanesAspects(createPanesMap());
+ const enhancer = compose(
applyMiddleware(
- ...sideMiddlewares,
- sagaMiddleware
+ panesMiddleware,
+ epicMiddleware,
+ ...sideMiddlewares
),
// enhancers must come after middlewares
// on client side these are things like Redux DevTools
...sideEnhancers
- ];
- const reducer = createReducer(sideReducers);
+ );
+ const reducer = createReducer(
+ {
+ [panesReducer]: panesReducer,
+ ...sideReducers
+ },
+ );
// create composed store enhancer
// use store enhancer function to enhance `createStore` function
// call enhanced createStore function with reducer and initialState
// to create store
- const store = compose(...enhancers)(createStore)(reducer, initialState);
+ const store = createStore(reducer, initialState, enhancer);
// sync history client side with store.
// server side this is an identity function and history is undefined
history = syncHistoryWithStore(history, store, syncOptions);
- const routes = {
- components: App,
- ...createChildRoute({
- getState() { return store.getState(); }
- })
- };
+ const routes = createRoutes(store);
// createRouteProps({
// redirect: LocationDescriptor,
// history: History,
@@ -90,6 +91,6 @@ export default function createApp({
props,
reducer,
store,
- epic: sagaMiddleware
+ epic: epicMiddleware
}));
}
diff --git a/common/app/create-panes-map.js b/common/app/create-panes-map.js
new file mode 100644
index 0000000000..5ce26a90d0
--- /dev/null
+++ b/common/app/create-panes-map.js
@@ -0,0 +1,7 @@
+import { createPanesMap as routesPanes } from './routes/';
+
+export default function createPanesMap() {
+ return {
+ ...routesPanes()
+ };
+}
diff --git a/common/app/create-reducer.js b/common/app/create-reducer.js
index 80964bc069..869890cbcc 100644
--- a/common/app/create-reducer.js
+++ b/common/app/create-reducer.js
@@ -1,21 +1,42 @@
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
-import { reducer as app } from './redux';
-import { reducer as toasts } from './toasts/redux';
-import entitiesReducer from './redux/entities-reducer';
-import {
- reducer as challengesApp,
- projectNormalizer
-} from './routes/challenges/redux';
+import app from './redux';
+import entities from './entities';
+import map from './Map/redux';
+import nav from './Nav/redux';
+import routes from './routes/redux';
+import toasts from './Toasts/redux';
+// not ideal but should go away once we move to react-redux-form
+import { projectNormalizer } from './routes/challenges/redux';
-export default function createReducer(sideReducers = {}) {
- return combineReducers({
- ...sideReducers,
- entities: entitiesReducer,
+export default function createReducer(sideReducers) {
+ // reducers exported from features need to be factories
+ // this helps avoid cyclic requires messing up reducer creation
+ // We end up with exports from files being undefined as node tries
+ // to resolve cyclic dependencies.
+ // This prevents that by wrapping the `handleActions` call so that the ref
+ // to types imported from parent features are closures and can be resolved
+ // by node before we need them.
+ const reducerMap = [
app,
- toasts,
- challengesApp,
- form: formReducer.normalize({ ...projectNormalizer })
- });
+ entities,
+ map,
+ nav,
+ routes,
+ toasts
+ ]
+ .map(createReducer => createReducer())
+ .reduce((arr, cur) => arr.concat(cur), [])
+ .reduce(
+ (reducerMap, reducer) => {
+ reducerMap[reducer] = reducer;
+ return reducerMap;
+ },
+ {
+ form: formReducer.normalize({ ...projectNormalizer }),
+ ...sideReducers
+ }
+ );
+ return combineReducers(reducerMap);
}
diff --git a/common/app/create-routes.js b/common/app/create-routes.js
new file mode 100644
index 0000000000..bae05c8e84
--- /dev/null
+++ b/common/app/create-routes.js
@@ -0,0 +1,9 @@
+import App from './App.jsx';
+import createChildRoute from './routes';
+
+export default function createRoutes(store) {
+ return {
+ components: App,
+ ...createChildRoute(store)
+ };
+}
diff --git a/common/app/entities/index.js b/common/app/entities/index.js
new file mode 100644
index 0000000000..e9e28c1a2c
--- /dev/null
+++ b/common/app/entities/index.js
@@ -0,0 +1,163 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+
+export const ns = 'entities';
+export const getNS = state => state[ns];
+export const entitiesSelector = getNS;
+export const types = createTypes([
+ 'updateUserPoints',
+ 'updateUserFlag',
+ 'updateUserEmail',
+ 'updateUserLang',
+ 'updateUserChallenge',
+ 'updateUserCurrentChallenge'
+], ns);
+
+// updateUserPoints(username: String, points: Number) => Action
+export const updateUserPoints = createAction(
+ types.updateUserPoints,
+ (username, points) => ({ username, points })
+);
+// updateUserFlag(username: String, flag: String) => Action
+export const updateUserFlag = createAction(
+ types.updateUserFlag,
+ (username, flag) => ({ username, flag })
+);
+// updateUserEmail(username: String, email: String) => Action
+export const updateUserEmail = createAction(
+ types.updateUserFlag,
+ (username, email) => ({ username, email })
+);
+// updateUserLang(username: String, lang: String) => Action
+export const updateUserLang = createAction(
+ types.updateUserLang,
+ (username, lang) => ({ username, languageTag: lang })
+);
+
+// updateUserChallenge(
+// username: String,
+// challengeInfo: Object
+// ) => Action
+export const updateUserChallenge = createAction(
+ types.updateUserChallenge,
+ (username, challengeInfo) => ({ username, challengeInfo })
+);
+
+export const updateUserCurrentChallenge = createAction(
+ types.updateUserCurrentChallenge
+);
+
+
+const initialState = {
+ superBlock: {},
+ block: {},
+ challenge: {},
+ user: {}
+};
+
+export const challengeMapSelector = state => getNS(state).challenge || {};
+export function makeBlockSelector(block) {
+ return state => {
+ const blockMap = getNS(state).block || {};
+ return blockMap[block] || {};
+ };
+}
+export function makeSuperBlockSelector(name) {
+ return state => {
+ const superBlock = getNS(state).superBlock || {};
+ return superBlock[name] || {};
+ };
+}
+
+export default function createReducer() {
+ const userReducer = handleActions(
+ {
+ [types.updateUserPoints]: (state, { payload: { username, points } }) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ points
+ }
+ }),
+ [types.updateUserFlag]: (state, { payload: { username, flag } }) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ [flag]: !state[username][flag]
+ }
+ }),
+ [types.updateUserEmail]: (state, { payload: { username, email } }) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ email
+ }
+ }),
+ [types.updateUserLang]:
+ (
+ state,
+ {
+ payload: { username, languageTag }
+ }
+ ) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ languageTag
+ }
+ }),
+ [types.updateUserCurrentChallenge]:
+ (
+ state,
+ {
+ payload: { username, currentChallengeId }
+ }
+ ) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ currentChallengeId
+ }
+ }),
+ [types.updateUserChallenge]:
+ (
+ state,
+ {
+ payload: { username, challengeInfo }
+ }
+ ) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ challengeMap: {
+ ...state[username].challengeMap,
+ [challengeInfo.id]: challengeInfo
+ }
+ }
+ })
+ },
+ initialState.user
+ );
+
+ function metaReducer(state = initialState, action) {
+ if (action.meta && action.meta.entities) {
+ return {
+ ...state,
+ ...action.meta.entities
+ };
+ }
+ return state;
+ }
+
+ function entitiesReducer(state, action) {
+ const newState = metaReducer(state, action);
+ const user = userReducer(newState.user, action);
+ if (newState.user !== user) {
+ return { ...newState, user };
+ }
+ return newState;
+ }
+
+ entitiesReducer.toString = () => ns;
+ return entitiesReducer;
+}
diff --git a/common/app/epics.js b/common/app/epics.js
new file mode 100644
index 0000000000..1b83fd1d2e
--- /dev/null
+++ b/common/app/epics.js
@@ -0,0 +1,15 @@
+import { epics as app } from './redux';
+import { epics as challenge } from './routes/challenges/redux';
+import { epics as settings } from './routes/settings/redux';
+import { epics as nav } from './Nav/redux';
+import { epics as map } from './Map/redux';
+import { epics as panes } from './Panes/redux';
+
+export default [
+ ...app,
+ ...challenge,
+ ...settings,
+ ...nav,
+ ...map,
+ ...panes
+];
diff --git a/common/app/index.less b/common/app/index.less
index 69bf5eb725..4a0fa6d828 100644
--- a/common/app/index.less
+++ b/common/app/index.less
@@ -1,2 +1,4 @@
&{ @import "./app.less"; }
+&{ @import "./Map/map.less"; }
+&{ @import "./Nav/nav.less"; }
&{ @import "./routes/index.less"; }
diff --git a/common/app/redux/actions.js b/common/app/redux/actions.js
deleted file mode 100644
index 6768f58627..0000000000
--- a/common/app/redux/actions.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Observable } from 'rx';
-import { createAction } from 'redux-actions';
-import types from './types';
-import noop from 'lodash/noop';
-
-const throwIfUndefined = () => {
- throw new TypeError('Argument must not be of type `undefined`');
-};
-
-export const createEventMeta = ({
- category = throwIfUndefined,
- action = throwIfUndefined,
- label,
- value
-} = throwIfUndefined) => ({
- analytics: {
- type: 'event',
- category,
- action,
- label,
- value
- }
-});
-
-export const trackEvent = createAction(
- types.analytics,
- null,
- createEventMeta
-);
-
-export const trackSocial = createAction(
- types.analytics,
- null,
- (
- network = throwIfUndefined,
- action = throwIfUndefined,
- target = throwIfUndefined
- ) => ({
- analytics: {
- type: 'event',
- network,
- action,
- target
- }
- })
-);
-// updateTitle(title: String) => Action
-export const updateTitle = createAction(types.updateTitle);
-
-// fetchUser() => Action
-// used in combination with fetch-user-saga
-export const fetchUser = createAction(types.fetchUser);
-
-// addUser(
-// entities: { [userId]: User }
-// ) => Action
-export const addUser = createAction(
- types.addUser,
- () => {},
- entities => ({ entities })
-);
-export const updateThisUser = createAction(types.updateThisUser);
-export const showSignIn = createAction(types.showSignIn);
-export const loadCurrentChallenge = createAction(
- types.loadCurrentChallenge,
- null,
- () => createEventMeta({
- category: 'Nav',
- action: 'clicked',
- label: 'fcc logo clicked'
- })
-);
-export const updateMyCurrentChallenge = createAction(
- types.updateMyCurrentChallenge,
- (username, currentChallengeId) => ({ username, currentChallengeId })
-);
-
-// updateUserPoints(username: String, points: Number) => Action
-export const updateUserPoints = createAction(
- types.updateUserPoints,
- (username, points) => ({ username, points })
-);
-// updateUserFlag(username: String, flag: String) => Action
-export const updateUserFlag = createAction(
- types.updateUserFlag,
- (username, flag) => ({ username, flag })
-);
-// updateUserEmail(username: String, email: String) => Action
-export const updateUserEmail = createAction(
- types.updateUserFlag,
- (username, email) => ({ username, email })
-);
-// updateUserLang(username: String, lang: String) => Action
-export const updateUserLang = createAction(
- types.updateUserLang,
- (username, lang) => ({ username, languageTag: lang })
-);
-
-// updateUserChallenge(
-// username: String,
-// challengeInfo: Object
-// ) => Action
-export const updateUserChallenge = createAction(
- types.updateUserChallenge,
- (username, challengeInfo) => ({ username, challengeInfo })
-);
-
-export const updateAppLang = createAction(types.updateAppLang);
-
-// used when server needs client to redirect
-export const delayedRedirect = createAction(types.delayedRedirect);
-
-// hardGoTo(path: String) => Action
-export const hardGoTo = createAction(types.hardGoTo);
-
-// data
-export const updateChallengesData = createAction(types.updateChallengesData);
-export const updateHikesData = createAction(types.updateHikesData);
-
-export const createErrorObservable = error => Observable.just({
- type: types.handleError,
- error
-});
-// doActionOnError(
-// actionCreator: (() => Action|Null)
-// ) => (error: Error) => Observable[Action]
-export const doActionOnError = actionCreator => error => Observable.of(
- {
- type: types.handleError,
- error
- },
- actionCreator()
-);
-
-export const toggleNightMode = createAction(
- types.toggleNightMode,
- // we use this function to avoid hanging onto the eventObject
- // so that react can recycle it
- () => null
-);
-// updateTheme(theme: /night|default/) => Action
-export const updateTheme = createAction(types.updateTheme);
-// addThemeToBody(theme: /night|default/) => Action
-export const addThemeToBody = createAction(types.addThemeToBody);
-
-export const openDropdown = createAction(types.openDropdown, noop);
-export const closeDropdown = createAction(types.closeDropdown, noop);
diff --git a/common/app/redux/entities-reducer.js b/common/app/redux/entities-reducer.js
deleted file mode 100644
index 9e3df2c6c4..0000000000
--- a/common/app/redux/entities-reducer.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { handleActions } from 'redux-actions';
-
-import types from './types';
-
-const initialState = {
- superBlock: {},
- block: {},
- challenge: {},
- user: {}
-};
-
-const userReducer = handleActions(
- {
- [types.updateUserPoints]: (state, { payload: { username, points } }) => ({
- ...state,
- [username]: {
- ...state[username],
- points
- }
- }),
- [types.updateUserFlag]: (state, { payload: { username, flag } }) => ({
- ...state,
- [username]: {
- ...state[username],
- [flag]: !state[username][flag]
- }
- }),
- [types.updateUserEmail]: (state, { payload: { username, email } }) => ({
- ...state,
- [username]: {
- ...state[username],
- email
- }
- }),
- [types.updateUserLang]:
- (
- state,
- {
- payload: { username, languageTag }
- }
- ) => ({
- ...state,
- [username]: {
- ...state[username],
- languageTag
- }
- }),
- [types.updateMyCurrentChallenge]:
- (
- state,
- {
- payload: { username, currentChallengeId }
- }
- ) => ({
- ...state,
- [username]: {
- ...state[username],
- currentChallengeId
- }
- }),
- [types.updateUserChallenge]:
- (
- state,
- {
- payload: { username, challengeInfo }
- }
- ) => ({
- ...state,
- [username]: {
- ...state[username],
- challengeMap: {
- ...state[username].challengeMap,
- [challengeInfo.id]: challengeInfo
- }
- }
- })
- },
- initialState.user
-);
-
-function metaReducer(state = initialState, action) {
- if (action.meta && action.meta.entities) {
- return {
- ...state,
- ...action.meta.entities
- };
- }
- return state;
-}
-
-export default function entitiesReducer(state, action) {
- const newState = metaReducer(state, action);
- const user = userReducer(newState.user, action);
- if (newState.user !== user) {
- return { ...newState, user };
- }
- return newState;
-}
diff --git a/common/app/redux/fetch-challenges-epic.js b/common/app/redux/fetch-challenges-epic.js
new file mode 100644
index 0000000000..ab8468530c
--- /dev/null
+++ b/common/app/redux/fetch-challenges-epic.js
@@ -0,0 +1,86 @@
+import { Observable } from 'rx';
+import { combineEpics, ofType } from 'redux-epic';
+import debug from 'debug';
+
+import {
+ types,
+
+ createErrorObservable,
+ delayedRedirect,
+
+ fetchChallengeCompleted,
+ fetchChallengesCompleted,
+
+ langSelector
+} from './';
+import { shapeChallenges } from './utils';
+
+const isDev = debug.enabled('fcc:*');
+
+export function fetchChallengeEpic(actions, { getState }, { services }) {
+ return actions::ofType('' + types.fetchChallenge)
+ .flatMap(({ payload: { dashedName, block } }) => {
+ const lang = langSelector(getState());
+ const options = {
+ service: 'map',
+ params: { block, dashedName, lang }
+ };
+ return services.readService$(options)
+ .retry(3)
+ .map(({ entities, ...rest }) => ({
+ entities: shapeChallenges(entities, isDev),
+ ...rest
+ }))
+ .flatMap(({ entities, result, redirect } = {}) => {
+ const actions = [
+ fetchChallengeCompleted({
+ entities,
+ currentChallenge: result.challenge,
+ challenge: entities.challenge[result.challenge],
+ result
+ }),
+ redirect ? delayedRedirect(redirect) : null
+ ];
+ return Observable.from(actions).filter(Boolean);
+ })
+ .catch(createErrorObservable);
+ });
+}
+
+export function fetchChallengesEpic(
+ actions,
+ { getState },
+ { services }
+) {
+ return actions::ofType(
+ // async type
+ '' + types.fetchChallenges,
+ types.appMounted
+ )
+ .flatMapLatest(() => {
+ const lang = langSelector(getState());
+ const options = {
+ lang,
+ service: 'map'
+ };
+ return services.readService$(options)
+ .retry(3)
+ .map(({ entities, ...res }) => ({
+ entities: shapeChallenges(
+ entities,
+ isDev
+ ),
+ ...res
+ }))
+ .map(({ entities, result } = {}) => {
+ return fetchChallengesCompleted(
+ entities,
+ result
+ );
+ })
+ .startWith({ type: types.fetchChallenges.start })
+ .catch(createErrorObservable);
+ });
+}
+
+export default combineEpics(fetchChallengeEpic, fetchChallengesEpic);
diff --git a/common/app/redux/fetch-user-saga.js b/common/app/redux/fetch-user-epic.js
similarity index 61%
rename from common/app/redux/fetch-user-saga.js
rename to common/app/redux/fetch-user-epic.js
index b2b8a36495..a409311e7a 100644
--- a/common/app/redux/fetch-user-saga.js
+++ b/common/app/redux/fetch-user-epic.js
@@ -1,33 +1,33 @@
import { Observable } from 'rx';
-import types from './types';
+import { ofType } from 'redux-epic';
import {
+ types,
+
addUser,
updateThisUser,
createErrorObservable,
showSignIn,
updateTheme,
addThemeToBody
-} from './actions';
+} from './';
-const { fetchUser } = types;
-export default function getUserSaga(action$, getState, { services }) {
- return action$
- .filter(action => action.type === fetchUser)
+export default function getUserEpic(actions, { getState }, { services }) {
+ return actions::ofType(types.fetchUser)
.flatMap(() => {
return services.readService$({ service: 'user' })
+ .filter(({ entities, result }) => entities && !!result)
.flatMap(({ entities, result })=> {
- if (!entities || !result) {
- return Observable.just(showSignIn());
- }
const user = entities.user[result];
const isNightMode = user.theme === 'night';
- return Observable.of(
+ const actions = [
addUser(entities),
updateThisUser(result),
isNightMode ? updateTheme(user.theme) : null,
isNightMode ? addThemeToBody(user.theme) : null
- );
+ ];
+ return Observable.from(actions).filter(Boolean);
})
+ .defaultIfEmpty(showSignIn())
.catch(createErrorObservable);
});
}
diff --git a/common/app/redux/index.js b/common/app/redux/index.js
index 4f29ce7e0d..e256de78ed 100644
--- a/common/app/redux/index.js
+++ b/common/app/redux/index.js
@@ -1,10 +1,279 @@
-import fetchUserSaga from './fetch-user-saga';
-import loadCurrentChallengeSaga from './load-current-challenge-saga';
+import { Observable } from 'rx';
+import { createTypes, createAsyncTypes } from 'redux-create-types';
+import { combineActions, createAction, handleActions } from 'redux-actions';
+import { createSelector } from 'reselect';
+import noop from 'lodash/noop';
+import identity from 'lodash/identity';
-export { default as reducer } from './reducer';
-export * as actions from './actions';
-export { default as types } from './types';
-export const sagas = [
- fetchUserSaga,
- loadCurrentChallengeSaga
+import { entitiesSelector } from '../entities';
+import fetchUserEpic from './fetch-user-epic.js';
+import updateMyCurrentChallengeEpic from './update-my-challenge-epic.js';
+import fetchChallengesEpic from './fetch-challenges-epic.js';
+import navSizeEpic from './nav-size-epic.js';
+
+import ns from '../ns.json';
+
+export const epics = [
+ fetchUserEpic,
+ fetchChallengesEpic,
+ updateMyCurrentChallengeEpic,
+ navSizeEpic
];
+
+export const types = createTypes([
+ 'appMounted',
+ 'analytics',
+ 'updateTitle',
+ 'updateAppLang',
+
+ createAsyncTypes('fetchChallenge'),
+ createAsyncTypes('fetchChallenges'),
+ 'updateCurrentChallenge',
+
+ 'fetchUser',
+ 'addUser',
+ 'updateThisUser',
+ 'showSignIn',
+
+ 'handleError',
+ // used to hit the server
+ 'hardGoTo',
+ 'delayedRedirect',
+
+ // night mode
+ 'toggleNightMode',
+ 'updateTheme',
+ 'addThemeToBody'
+], ns);
+
+const throwIfUndefined = () => {
+ throw new TypeError('Argument must not be of type `undefined`');
+};
+
+// createEventMetaCreator({
+// category: String,
+// action: String,
+// label?: String,
+// value?: Number
+// }) => () => Object
+export const createEventMetaCreator = ({
+ // categories are features or namespaces of the app (capitalized):
+ // Map, Nav, Challenges, and so on
+ category = throwIfUndefined,
+ // can be a one word the event
+ // click, play, toggle.
+ // This is not a hard and fast rule
+ action = throwIfUndefined,
+ // any additional information
+ // when in doubt use redux action type
+ // or a short sentence describing the action
+ label,
+ // used to tack some specific value for a GA event
+ value
+} = throwIfUndefined) => () => ({
+ analytics: {
+ type: 'event',
+ category,
+ action,
+ label,
+ value
+ }
+});
+
+export const appMounted = createAction(types.appMounted);
+export const fetchChallenge = createAction(
+ '' + types.fetchChallenge,
+ (dashedName, block) => ({ dashedName, block })
+);
+export const fetchChallengeCompleted = createAction(
+ types.fetchChallenge.complete,
+ null,
+ identity
+);
+export const fetchChallenges = createAction('' + types.fetchChallenges);
+export const fetchChallengesCompleted = createAction(
+ types.fetchChallenges.complete,
+ (entities, result) => ({ entities, result }),
+ entities => ({ entities })
+);
+export const updateCurrentChallenge = createAction(
+ types.updateCurrentChallenge
+);
+
+// updateTitle(title: String) => Action
+export const updateTitle = createAction(types.updateTitle);
+
+// fetchUser() => Action
+// used in combination with fetch-user-epic
+export const fetchUser = createAction(types.fetchUser);
+
+// addUser(
+// entities: { [userId]: User }
+// ) => Action
+export const addUser = createAction(
+ types.addUser,
+ noop,
+ entities => ({ entities })
+);
+export const updateThisUser = createAction(types.updateThisUser);
+export const showSignIn = createAction(types.showSignIn);
+
+export const updateAppLang = createAction(types.updateAppLang);
+
+// used when server needs client to redirect
+export const delayedRedirect = createAction(types.delayedRedirect);
+
+// hardGoTo(path: String) => Action
+export const hardGoTo = createAction(types.hardGoTo);
+
+export const createErrorObservable = error => Observable.just({
+ type: types.handleError,
+ error
+});
+// doActionOnError(
+// actionCreator: (() => Action|Null)
+// ) => (error: Error) => Observable[Action]
+export const doActionOnError = actionCreator => error => Observable.of(
+ {
+ type: types.handleError,
+ error
+ },
+ actionCreator()
+);
+
+export const toggleNightMode = createAction(
+ types.toggleNightMode,
+ // we use this function to avoid hanging onto the eventObject
+ // so that react can recycle it
+ () => null
+);
+// updateTheme(theme: /night|default/) => Action
+export const updateTheme = createAction(types.updateTheme);
+// addThemeToBody(theme: /night|default/) => Action
+export const addThemeToBody = createAction(types.addThemeToBody);
+
+const initialState = {
+ title: 'Learn To Code | freeCodeCamp',
+ isSignInAttempted: false,
+ user: '',
+ lang: '',
+ csrfToken: '',
+ theme: 'default',
+ // eventually this should be only in the user object
+ currentChallenge: '',
+ superBlocks: []
+};
+
+export const getNS = state => state[ns];
+export const langSelector = state => getNS(state).lang;
+export const csrfSelector = state => getNS(state).csrfToken;
+export const themeSelector = state => getNS(state).theme;
+export const titleSelector = state => getNS(state).title;
+
+export const currentChallengeSelector = state => getNS(state).currentChallenge;
+export const superBlocksSelector = state => getNS(state).superBlocks;
+export const signInLoadingSelector = state => !getNS(state).isSignInAttempted;
+
+export const userSelector = createSelector(
+ state => getNS(state).user,
+ state => entitiesSelector(state).user,
+ (username, userMap) => userMap[username] || {}
+);
+
+export const challengeSelector = createSelector(
+ currentChallengeSelector,
+ state => entitiesSelector(state).challenge,
+ (challengeName, challengeMap = {}) => {
+ return challengeMap[challengeName] || {};
+ }
+);
+
+export const firstChallengeSelector = createSelector(
+ entitiesSelector,
+ superBlocksSelector,
+ (
+ {
+ challengeMap,
+ blockMap,
+ superBlockMap
+ },
+ superBlocks
+ ) => {
+ if (
+ !challengeMap ||
+ !blockMap ||
+ !superBlockMap ||
+ !superBlocks
+ ) {
+ return {};
+ }
+ try {
+ return challengeMap[
+ blockMap[
+ superBlockMap[
+ superBlocks[0]
+ ].blocks[0]
+ ].challenges[0]
+ ];
+ } catch (err) {
+ console.error(err);
+ return {};
+ }
+ }
+);
+
+export default function createReducer() {
+ const reducer = handleActions(
+ {
+ [types.updateTitle]: (state, { payload = 'Learn To Code' }) => ({
+ ...state,
+ title: payload + ' | freeCodeCamp'
+ }),
+
+ [types.updateThisUser]: (state, { payload: user }) => ({
+ ...state,
+ user
+ }),
+ [types.fetchChallenge.complete]: (state, { payload }) => ({
+ ...state,
+ currentChallenge: payload.currentChallenge
+ }),
+ [combineActions(
+ types.fetchChallenge.complete,
+ types.fetchChallenges.complete
+ )]: (state, { payload }) => ({
+ ...state,
+ superBlocks: payload.result.superBlocks
+ }),
+ [types.updateCurrentChallenge]: (state, { payload = '' }) => ({
+ ...state,
+ currentChallenge: payload
+ }),
+ [types.updateAppLang]: (state, { payload = 'en' }) =>({
+ ...state,
+ lang: payload
+ }),
+ [types.updateTheme]: (state, { payload = 'default' }) => ({
+ ...state,
+ theme: payload
+ }),
+ [combineActions(types.showSignIn, types.updateThisUser)]: state => ({
+ ...state,
+ isSignInAttempted: true
+ }),
+
+ [types.challengeSaved]: (state, { payload: { points = 0 } }) => ({
+ ...state,
+ points
+ }),
+ [types.delayedRedirect]: (state, { payload }) => ({
+ ...state,
+ delayedRedirect: payload
+ })
+ },
+ initialState
+ );
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/redux/load-current-challenge-saga.js b/common/app/redux/load-current-challenge-saga.js
deleted file mode 100644
index c89c8f87cf..0000000000
--- a/common/app/redux/load-current-challenge-saga.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Observable } from 'rx';
-import debug from 'debug';
-import { push } from 'react-router-redux';
-
-import types from './types';
-import {
- updateMyCurrentChallenge,
- createErrorObservable
-} from './actions';
-import {
- userSelector,
- firstChallengeSelector
-} from './selectors';
-import { updateCurrentChallenge } from '../routes/challenges/redux/actions';
-import getActionsOfType from '../../utils/get-actions-of-type';
-import combineSagas from '../../utils/combine-sagas';
-import { postJSON$ } from '../../utils/ajax-stream';
-
-const log = debug('fcc:app/redux/load-current-challenge-saga');
-export function updateMyCurrentChallengeSaga(actions, getState) {
- const updateChallenge$ = getActionsOfType(
- actions,
- updateCurrentChallenge.toString()
- )
- .map(({ payload: { id } }) => id)
- .filter(() => {
- const { app: { user: username } } = getState();
- return !!username;
- })
- .distinctUntilChanged();
- const optimistic = updateChallenge$.map(id => {
- const { app: { user: username } } = getState();
- return updateMyCurrentChallenge(username, id);
- });
- const ajaxUpdate = updateChallenge$
- .debounce(250)
- .flatMapLatest(currentChallengeId => {
- const { app: { csrfToken: _csrf } } = getState();
- return postJSON$(
- '/update-my-current-challenge',
- { _csrf, currentChallengeId }
- )
- .map(({ message }) => log(message))
- .catch(createErrorObservable);
- });
- return Observable.merge(optimistic, ajaxUpdate);
-}
-
-export function loadCurrentChallengeSaga(actions, getState) {
- return getActionsOfType(actions, types.loadCurrentChallenge)
- .flatMap(() => {
- let finalChallenge;
- const state = getState();
- const {
- entities: { challenge: challengeMap, challengeIdToName },
- challengesApp: { id: currentlyLoadedChallengeId },
- locationBeforeTransition: { pathname } = {}
- } = state;
- const firstChallenge = firstChallengeSelector(state);
- const { user: { currentChallengeId } } = userSelector(state);
- const isOnAChallenge = (/^\/[^\/]{2,6}\/challenges/).test(pathname);
-
- if (!currentChallengeId) {
- finalChallenge = firstChallenge;
- } else {
- finalChallenge = challengeMap[
- challengeIdToName[ currentChallengeId ]
- ];
- }
- if (
- // data might not be there yet, ignore for now
- !finalChallenge ||
- // are we already on that challenge?
- (isOnAChallenge && finalChallenge.id === currentlyLoadedChallengeId)
- ) {
- // don't reload if the challenge is already loaded.
- // This may change to toast to avoid user confusion
- return Observable.empty();
- }
- return Observable.of(
- updateCurrentChallenge(finalChallenge),
- push(
- `/challenges/${finalChallenge.block}/${finalChallenge.dashedName}`
- )
- );
- });
-}
-
-export default combineSagas(
- updateMyCurrentChallengeSaga,
- loadCurrentChallengeSaga
-);
diff --git a/common/app/redux/nav-size-epic.js b/common/app/redux/nav-size-epic.js
new file mode 100644
index 0000000000..2a89a861cb
--- /dev/null
+++ b/common/app/redux/nav-size-epic.js
@@ -0,0 +1,13 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+
+import { updateNavHeight } from '../Panes/redux';
+
+export default function navSizeEpic(actions, _, { document }) {
+ return actions::ofType(types.appMounted)
+ .map(() => {
+ const navbar = document.getElementById('navbar');
+ return updateNavHeight(navbar.clientHeight || 50);
+ });
+}
diff --git a/common/app/redux/reducer.js b/common/app/redux/reducer.js
deleted file mode 100644
index 754345ac76..0000000000
--- a/common/app/redux/reducer.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { handleActions } from 'redux-actions';
-import types from './types';
-
-const initialState = {
- title: 'Learn To Code | freeCodeCamp',
- isSignInAttempted: false,
- user: '',
- lang: '',
- csrfToken: '',
- theme: 'default'
-};
-
-export default handleActions(
- {
- [types.updateTitle]: (state, { payload = 'Learn To Code' }) => ({
- ...state,
- title: payload + ' | freeCodeCamp'
- }),
-
- [types.updateThisUser]: (state, { payload: user }) => ({
- ...state,
- user,
- isSignInAttempted: true
- }),
- [types.updateAppLang]: (state, { payload = 'en' }) =>({
- ...state,
- lang: payload
- }),
- [types.updateTheme]: (state, { payload = 'default' }) => ({
- ...state,
- theme: payload
- }),
- [types.showSignIn]: state => ({
- ...state,
- isSignInAttempted: true
- }),
-
- [types.challengeSaved]: (state, { payload: { points = 0 } }) => ({
- ...state,
- points
- }),
- [types.delayedRedirect]: (state, { payload }) => ({
- ...state,
- delayedRedirect: payload
- }),
- [types.openDropdown]: state => ({
- ...state,
- isNavDropdownOpen: true
- }),
- [types.closeDropdown]: state => ({
- ...state,
- isNavDropdownOpen: false
- })
- },
- initialState
-);
diff --git a/common/app/redux/selectors.js b/common/app/redux/selectors.js
deleted file mode 100644
index 0a56f23a23..0000000000
--- a/common/app/redux/selectors.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createSelector } from 'reselect';
-
-export const userSelector = createSelector(
- state => state.app.user,
- state => state.entities.user,
- (username, userMap) => ({
- user: userMap[username] || {}
- })
-);
-
-export const firstChallengeSelector = createSelector(
- state => state.entities.challenge,
- state => state.entities.block,
- state => state.entities.superBlock,
- state => state.challengesApp.superBlocks,
- (challengeMap, blockMap, superBlockMap, superBlocks) => {
- if (
- !challengeMap ||
- !blockMap ||
- !superBlockMap ||
- !superBlocks
- ) {
- return {};
- }
- try {
- return challengeMap[
- blockMap[
- superBlockMap[
- superBlocks[0]
- ].blocks[0]
- ].challenges[0]
- ];
- } catch (err) {
- console.error(err);
- return {};
- }
- }
-);
diff --git a/common/app/redux/types.js b/common/app/redux/types.js
deleted file mode 100644
index 766b695c85..0000000000
--- a/common/app/redux/types.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { createTypes } from 'redux-create-types';
-
-export default createTypes([
- 'analytics',
- 'updateTitle',
- 'updateAppLang',
-
- 'fetchUser',
- 'addUser',
- 'updateThisUser',
- 'updateUserPoints',
- 'updateUserFlag',
- 'updateUserEmail',
- 'updateUserLang',
- 'updateUserChallenge',
- 'showSignIn',
- 'loadCurrentChallenge',
- 'updateMyCurrentChallenge',
-
- 'handleError',
- // used to hit the server
- 'hardGoTo',
- 'delayedRedirect',
-
- // data handling
- 'updateChallengesData',
- 'updateHikesData',
-
- // night mode
- 'toggleNightMode',
- 'updateTheme',
- 'addThemeToBody',
-
- // nav
- 'openDropdown',
- 'closeDropdown'
-], 'app');
diff --git a/common/app/redux/update-my-challenge-epic.js b/common/app/redux/update-my-challenge-epic.js
new file mode 100644
index 0000000000..26a74d9058
--- /dev/null
+++ b/common/app/redux/update-my-challenge-epic.js
@@ -0,0 +1,48 @@
+import { Observable } from 'rx';
+import { ofType } from 'redux-epic';
+import debug from 'debug';
+
+import {
+ types,
+ createErrorObservable,
+
+ challengeSelector,
+ csrfSelector,
+ userSelector
+} from './';
+import { updateUserCurrentChallenge } from '../entities';
+import { postJSON$ } from '../../utils/ajax-stream';
+
+const log = debug('fcc:app:redux:up-my-challenge-epic');
+export default function updateMyCurrentChallengeEpic(actions, { getState }) {
+ const updateChallenge = actions::ofType(types.updateCurrentChallenge)
+ .map(() => {
+ const state = getState();
+ const { username } = userSelector(state);
+ const { id } = challengeSelector(state);
+ const csrf = csrfSelector(state);
+ return {
+ username,
+ csrf,
+ currentChallengeId: id
+ };
+ })
+ .filter(({ username }) => !!username)
+ .distinctUntilChanged(x => x.currentChallengeId);
+ const optimistic = updateChallenge.map(updateUserCurrentChallenge);
+ const ajaxUpdate = updateChallenge
+ .debounce(250)
+ .flatMapLatest(({ csrf, currentChallengeId }) => {
+ return postJSON$(
+ '/update-my-current-challenge',
+ {
+ currentChallengeId,
+ _csrf: csrf
+ }
+ )
+ .map(({ message }) => log(message))
+ .ignoreElements()
+ .catch(createErrorObservable);
+ });
+ return Observable.merge(optimistic, ajaxUpdate);
+}
diff --git a/common/app/redux/utils.js b/common/app/redux/utils.js
new file mode 100644
index 0000000000..9be79e8804
--- /dev/null
+++ b/common/app/redux/utils.js
@@ -0,0 +1,33 @@
+import flowRight from 'lodash/flowRight';
+import createNameIdMap from '../../utils/create-name-id-map.js';
+
+
+export function filterComingSoonBetaChallenge(
+ isDev = false,
+ { isComingSoon, isBeta }
+) {
+ return !(isComingSoon || isBeta) ||
+ isDev;
+}
+
+export function filterComingSoonBetaFromEntities(
+ { challenge: challengeMap, ...rest },
+ isDev = false
+) {
+ const filter = filterComingSoonBetaChallenge.bind(null, isDev);
+ return {
+ ...rest,
+ challenge: Object.keys(challengeMap)
+ .map(dashedName => challengeMap[dashedName])
+ .filter(filter)
+ .reduce((challengeMap, challenge) => {
+ challengeMap[challenge.dashedName] = challenge;
+ return challengeMap;
+ }, {})
+ };
+}
+
+export const shapeChallenges = flowRight(
+ filterComingSoonBetaFromEntities,
+ createNameIdMap
+);
diff --git a/common/app/redux/utils.test.js b/common/app/redux/utils.test.js
new file mode 100644
index 0000000000..08cee9e2ed
--- /dev/null
+++ b/common/app/redux/utils.test.js
@@ -0,0 +1,92 @@
+import test from 'tape';
+import {
+ filterComingSoonBetaChallenge,
+ filterComingSoonBetaFromEntities
+} from './utils.js';
+
+
+test.test('filterComingSoonBetaChallenge', t => {
+ t.plan(4);
+ t.test('should return true when not coming-soon/beta', t => {
+ let isDev;
+ t.ok(filterComingSoonBetaChallenge(isDev, {}));
+ t.ok(filterComingSoonBetaChallenge(true, {}));
+ t.end();
+ });
+ t.test('should return false when isComingSoon', t => {
+ let isDev;
+ t.notOk(filterComingSoonBetaChallenge(isDev, { isComingSoon: true }));
+ t.end();
+ });
+ t.test('should return false when isBeta', t => {
+ let isDev;
+ t.notOk(filterComingSoonBetaChallenge(isDev, { isBeta: true }));
+ t.end();
+ });
+ t.test('should always return true when in dev', t => {
+ let isDev = true;
+ t.ok(filterComingSoonBetaChallenge(isDev, { isBeta: true }));
+ t.ok(filterComingSoonBetaChallenge(isDev, { isComingSoon: true }));
+ t.ok(filterComingSoonBetaChallenge(
+ isDev,
+ { isBeta: true, isCompleted: true }
+ ));
+ t.end();
+ });
+});
+test.test('filterComingSoonBetaFromEntities', t => {
+ t.plan(2);
+ t.test('should filter isBeta|coming-soon by default', t => {
+ t.plan(2);
+ const normalChallenge = { dashedName: 'normal-challenge' };
+ const entities = {
+ challenge: {
+ 'coming-soon': {
+ isComingSoon: true
+ },
+ 'is-beta': {
+ isBeta: true
+ },
+ [normalChallenge.dashedName]: normalChallenge
+ }
+ };
+ const actual = filterComingSoonBetaFromEntities(entities);
+ t.isEqual(
+ Object.keys(actual.challenge).length,
+ 1,
+ 'did not filter the correct amount of challenges'
+ );
+ t.isEqual(
+ actual.challenge[normalChallenge.dashedName],
+ normalChallenge,
+ 'did not return the correct challenge'
+ );
+ });
+ t.test('should not filter isBeta|coming-soon when isDev', t => {
+ t.plan(1);
+ const normalChallenge = { dashedName: 'normal-challenge' };
+ const entities = {
+ challenge: {
+ 'coming-soon': {
+ dashedName: 'coming-soon',
+ isComingSoon: true
+ },
+ 'is-beta': {
+ dashedName: 'is-beta',
+ isBeta: true
+ },
+ 'is-both': {
+ dashedName: 'is-both',
+ isBeta: true
+ },
+ [normalChallenge.dashedName]: normalChallenge
+ }
+ };
+ const actual = filterComingSoonBetaFromEntities(entities, true);
+ t.isEqual(
+ Object.keys(actual.challenge).length,
+ 4,
+ 'filtered challenges'
+ );
+ });
+});
diff --git a/common/app/routes/challenges/Bug-Modal.jsx b/common/app/routes/challenges/Bug-Modal.jsx
index d67c218574..5d301c163b 100644
--- a/common/app/routes/challenges/Bug-Modal.jsx
+++ b/common/app/routes/challenges/Bug-Modal.jsx
@@ -4,10 +4,15 @@ import { Button, Modal } from 'react-bootstrap';
import PureComponent from 'react-pure-render/component';
import ns from './ns.json';
+import {
+ createIssue,
+ openIssueSearch,
+ closeBugModal,
-import { createIssue, openIssueSearch, closeBugModal } from './redux/actions';
+ bugModalSelector
+} from './redux';
-const mapStateToProps = state => ({ isOpen: state.challengesApp.isBugOpen });
+const mapStateToProps = state => ({ isOpen: bugModalSelector(state) });
const mapDispatchToProps = { createIssue, openIssueSearch, closeBugModal };
const bugLink = 'http://forum.freecodecamp.com/t/how-to-report-a-bug/19543';
diff --git a/common/app/routes/challenges/Code-Mirror-Skeleton.jsx b/common/app/routes/challenges/Code-Mirror-Skeleton.jsx
index a9fc788d79..b694652ba4 100644
--- a/common/app/routes/challenges/Code-Mirror-Skeleton.jsx
+++ b/common/app/routes/challenges/Code-Mirror-Skeleton.jsx
@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
import PureComponent from 'react-pure-render/component';
import { Grid, Col, Row } from 'react-bootstrap';
+import ns from './ns.json';
+
const propTypes = {
content: PropTypes.string
};
@@ -10,7 +12,7 @@ export default class CodeMirrorSkeleton extends PureComponent {
renderLine(line, i) {
return (
-
+
+
+ { message }
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CompletionModal.displayName = 'CompletionModal';
+CompletionModal.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(CompletionModal);
diff --git a/common/app/routes/challenges/Show.jsx b/common/app/routes/challenges/Show.jsx
index 7d955c8c2b..1e03366527 100644
--- a/common/app/routes/challenges/Show.jsx
+++ b/common/app/routes/challenges/Show.jsx
@@ -5,61 +5,52 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import PureComponent from 'react-pure-render/component';
+import CompletionModal from './Completion-Modal.jsx';
import Classic from './views/classic';
import Step from './views/step';
import Project from './views/project';
-import Video from './views/video';
import BackEnd from './views/backend';
+import { challengeMetaSelector } from './redux';
import {
+ updateTitle,
+ updateCurrentChallenge,
fetchChallenge,
- fetchChallenges,
- replaceChallenge,
- resetUi
-} from './redux/actions';
-import { challengeSelector } from './redux/selectors';
-import { updateTitle } from '../../redux/actions';
-import { makeToast } from '../../toasts/redux/actions';
+
+ challengeSelector,
+ langSelector
+} from '../../redux';
+import { makeToast } from '../../Toasts/redux';
const views = {
backend: BackEnd,
classic: Classic,
project: Project,
simple: Project,
- step: Step,
- video: Video
+ step: Step
};
const mapDispatchToProps = {
fetchChallenge,
- fetchChallenges,
makeToast,
- replaceChallenge,
- resetUi,
+ updateCurrentChallenge,
updateTitle
};
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.challenge,
- state => state.challengesApp.superBlocks,
- state => state.app.lang,
+ challengeMetaSelector,
+ langSelector,
(
- {
- challenge: { isTranslated } = {},
- viewType,
- title
- },
- challenge,
- superBlocks = [],
+ { dashedName, isTranslated },
+ { viewType, title },
lang
) => ({
lang,
isTranslated,
title,
- challenge,
- viewType,
- areChallengesLoaded: superBlocks.length > 0
+ challenge: dashedName,
+ viewType
})
);
@@ -74,26 +65,23 @@ const fetchOptions = {
};
const link = 'http://forum.freecodecamp.com/t/' +
- 'guidelines-for-translating-free-code-camp' +
- '-to-any-language/19111';
+ 'guidelines-for-translating-free-code-camp' +
+ '-to-any-language/19111';
const propTypes = {
areChallengesLoaded: PropTypes.bool,
- fetchChallenges: PropTypes.func.isRequired,
isStep: PropTypes.bool,
isTranslated: PropTypes.bool,
lang: PropTypes.string.isRequired,
makeToast: PropTypes.func.isRequired,
params: PropTypes.object.isRequired,
- replaceChallenge: PropTypes.func.isRequired,
- resetUi: PropTypes.func.isRequired,
title: PropTypes.string,
+ updateCurrentChallenge: PropTypes.func.isRequired,
updateTitle: PropTypes.func.isRequired,
viewType: PropTypes.string
};
export class Show extends PureComponent {
-
componentWillMount() {
const { lang, isTranslated, makeToast } = this.props;
if (lang !== 'en' && !isTranslated) {
@@ -106,27 +94,19 @@ export class Show extends PureComponent {
}
componentDidMount() {
- if (!this.props.areChallengesLoaded) {
- this.props.fetchChallenges();
- }
if (this.props.title) {
this.props.updateTitle(this.props.title);
}
}
- componentWillUnmount() {
- this.props.resetUi();
- }
-
componentWillReceiveProps(nextProps) {
const { title } = nextProps;
- const { block, dashedName } = nextProps.params;
+ const { dashedName } = nextProps.params;
const { lang, isTranslated } = nextProps;
- const { resetUi, updateTitle, replaceChallenge, makeToast } = this.props;
+ const { updateTitle, updateCurrentChallenge, makeToast } = this.props;
if (this.props.params.dashedName !== dashedName) {
+ updateCurrentChallenge(dashedName);
updateTitle(title);
- resetUi();
- replaceChallenge({ dashedName, block });
if (lang !== 'en' && !isTranslated) {
makeToast({
message: 'We haven\'t translated this challenge yet.',
@@ -140,7 +120,12 @@ export class Show extends PureComponent {
render() {
const { viewType } = this.props;
const View = views[viewType] || Classic;
- return
+
+ );
+}
+
+ShowBackEnd.displayName = 'ShowBackEnd';
+ShowBackEnd.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/backend/index.js b/common/app/routes/challenges/views/backend/index.js
index 9da7aec1c3..f8a8115a06 100644
--- a/common/app/routes/challenges/views/backend/index.js
+++ b/common/app/routes/challenges/views/backend/index.js
@@ -1 +1 @@
-export { default } from './Back-End.jsx';
+export { default, panesMap } from './Show.jsx';
diff --git a/common/app/routes/challenges/views/classic/Classic-Modal.jsx b/common/app/routes/challenges/views/classic/Classic-Modal.jsx
deleted file mode 100644
index 945d4161c5..0000000000
--- a/common/app/routes/challenges/views/classic/Classic-Modal.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Button, Modal } from 'react-bootstrap';
-import PureComponent from 'react-pure-render/component';
-import FontAwesome from 'react-fontawesome';
-
-import ns from './ns.json';
-
-const propTypes = {
- close: PropTypes.func,
- open: PropTypes.bool.isRequired,
- submitChallenge: PropTypes.func.isRequired,
- successMessage: PropTypes.string.isRequired
-};
-
-export default class ClassicModal extends PureComponent {
- constructor(...props) {
- super(...props);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- }
-
- handleKeyDown(e) {
- const { open, submitChallenge } = this.props;
- if (
- e.keyCode === 13 &&
- (e.ctrlKey || e.meta) &&
- open
- ) {
- e.preventDefault();
- submitChallenge();
- }
- }
-
- render() {
- const {
- close,
- open,
- submitChallenge,
- successMessage
- } = this.props;
- return (
-
-
- { successMessage }
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-ClassicModal.displayName = 'ClassicModal';
-ClassicModal.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/classic/Classic.jsx b/common/app/routes/challenges/views/classic/Classic.jsx
deleted file mode 100644
index 4a1e7da1e0..0000000000
--- a/common/app/routes/challenges/views/classic/Classic.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { Row, Col } from 'react-bootstrap';
-import { createSelector } from 'reselect';
-import PureComponent from 'react-pure-render/component';
-
-import Editor from './Editor.jsx';
-import SidePanel from './Side-Panel.jsx';
-import Preview from './Preview.jsx';
-import BugModal from '../../Bug-Modal.jsx';
-import ClassicModal from './Classic-Modal.jsx';
-import { challengeSelector } from '../../redux/selectors';
-import {
- executeChallenge,
- updateFile,
- loadCode,
- submitChallenge,
- closeChallengeModal,
- updateSuccessMessage
-} from '../../redux/actions';
-import { randomCompliment } from '../../../../utils/get-words';
-
-const mapStateToProps = createSelector(
- challengeSelector,
- state => state.challengesApp.id,
- state => state.challengesApp.tests,
- state => state.challengesApp.files,
- state => state.challengesApp.key,
- state => state.challengesApp.isChallengeModalOpen,
- state => state.challengesApp.successMessage,
- (
- { showPreview, mode },
- id,
- tests,
- files = {},
- key = '',
- isChallengeModalOpen,
- successMessage,
- ) => ({
- id,
- content: files[key] && files[key].contents || '',
- file: files[key],
- showPreview,
- mode,
- tests,
- isChallengeModalOpen,
- successMessage
- })
-);
-
-const bindableActions = {
- executeChallenge,
- updateFile,
- loadCode,
- submitChallenge,
- closeChallengeModal,
- updateSuccessMessage
-};
-
-const propTypes = {
- closeChallengeModal: PropTypes.func,
- content: PropTypes.string,
- executeChallenge: PropTypes.func,
- file: PropTypes.object,
- id: PropTypes.string,
- isChallengeModalOpen: PropTypes.bool,
- loadCode: PropTypes.func,
- mode: PropTypes.string,
- showPreview: PropTypes.bool,
- submitChallenge: PropTypes.func,
- successMessage: PropTypes.string,
- updateFile: PropTypes.func,
- updateSuccessMessage: PropTypes.func
-};
-
-export class Challenge extends PureComponent {
-
- componentDidMount() {
- this.props.loadCode();
- this.props.updateSuccessMessage(randomCompliment());
- window.scrollTo(0, 0);
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.id !== nextProps.id) {
- this.props.loadCode();
- this.props.updateSuccessMessage(randomCompliment());
- }
- }
-
- renderPreview(showPreview) {
- if (!showPreview) {
- return null;
- }
- return (
-
- updateFile(content, file) }
- />
-
- { this.renderPreview(showPreview) }
-
- );
- }
-}
-
-Challenge.displayName = 'Challenge';
-Challenge.propTypes = propTypes;
-
-export default connect(mapStateToProps, bindableActions)(Challenge);
diff --git a/common/app/routes/challenges/views/classic/Editor.jsx b/common/app/routes/challenges/views/classic/Editor.jsx
index 3424d5a547..1484eca552 100644
--- a/common/app/routes/challenges/views/classic/Editor.jsx
+++ b/common/app/routes/challenges/views/classic/Editor.jsx
@@ -1,54 +1,67 @@
-import { Subject } from 'rx';
-import React, { PropTypes } from 'react';
+import React, { PureComponent, PropTypes } from 'react';
+import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import Codemirror from 'react-codemirror';
import NoSSR from 'react-no-ssr';
-import PureComponent from 'react-pure-render/component';
import MouseTrap from 'mousetrap';
import ns from './ns.json';
import CodeMirrorSkeleton from '../../Code-Mirror-Skeleton.jsx';
+import {
+ executeChallenge,
+ classicEditorUpdated,
-const editorDebounceTimeout = 750;
+ challengeMetaSelector,
+ filesSelector,
+ keySelector
+} from '../../redux';
const options = {
- lint: {esversion: 6},
+ lint: { esversion: 6 },
lineNumbers: true,
mode: 'javascript',
- theme: 'monokai',
+ theme: 'freecodecamp',
runnable: true,
matchBrackets: true,
autoCloseBrackets: true,
scrollbarStyle: 'null',
lineWrapping: true,
- gutters: ['CodeMirror-lint-markers']
+ gutters: [ 'CodeMirror-lint-markers' ]
};
-const defaultProps = {
- content: '// Happy Coding!',
- mode: 'javascript'
+const mapStateToProps = createSelector(
+ filesSelector,
+ challengeMetaSelector,
+ keySelector,
+ (
+ files = {},
+ { mode = 'javascript'},
+ key
+ ) => ({
+ content: files[key] && files[key].contents || '// Happy Coding!',
+ file: files[key],
+ mode
+ })
+);
+
+const mapDispatchToProps = {
+ executeChallenge,
+ classicEditorUpdated
};
const propTypes = {
+ classicEditorUpdated: PropTypes.func.isRequired,
content: PropTypes.string,
- executeChallenge: PropTypes.func,
- mode: PropTypes.string,
- updateFile: PropTypes.func
+ executeChallenge: PropTypes.func.isRequired,
+ mode: PropTypes.string
};
-export default class Editor extends PureComponent {
- constructor(...args) {
- super(...args);
- this._editorContent$ = new Subject();
- this.handleChange = this.handleChange.bind(this);
- }
-
+export class Editor extends PureComponent {
createOptions = createSelector(
- state => state.options,
state => state.executeChallenge,
state => state.mode,
- (options, executeChallenge, mode) => ({
+ (executeChallenge, mode) => ({
...options,
mode,
extraKeys: {
@@ -88,46 +101,28 @@ export default class Editor extends PureComponent {
);
componentDidMount() {
- const { updateFile = (() => {}) } = this.props;
- this._subscription = this._editorContent$
- .debounce(editorDebounceTimeout)
- .distinctUntilChanged()
- .subscribe(
- updateFile,
- err => { throw err; }
- );
-
MouseTrap.bind('e', () => {
this.refs.editor.focus();
}, 'keyup');
}
componentWillUnmount() {
- if (this._subscription) {
- this._subscription.dispose();
- this._subscription = null;
- }
MouseTrap.unbind('e', 'keyup');
}
- handleChange(value) {
- if (this._subscription) {
- this._editorContent$.onNext(value);
- }
- }
-
render() {
const {
content,
executeChallenge,
+ classicEditorUpdated,
mode
} = this.props;
return (
+
+ );
+}
+
+ShowClassic.displayName = 'ShowClassic';
+ShowClassic.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/classic/Side-Panel.jsx b/common/app/routes/challenges/views/classic/Side-Panel.jsx
index 3d928a85b2..34532be1ca 100644
--- a/common/app/routes/challenges/views/classic/Side-Panel.jsx
+++ b/common/app/routes/challenges/views/classic/Side-Panel.jsx
@@ -7,19 +7,27 @@ import { Col, Row } from 'react-bootstrap';
import ns from './ns.json';
+import ToolPanel from './Tool-Panel.jsx';
import ChallengeTitle from '../../Challenge-Title.jsx';
import TestSuite from '../../Test-Suite.jsx';
import Output from '../../Output.jsx';
-import ToolPanel from './Tool-Panel.jsx';
-import { challengeSelector } from '../../redux/selectors';
import {
openBugModal,
updateHint,
executeChallenge,
- unlockUntrustedCode
-} from '../../redux/actions';
+ unlockUntrustedCode,
+
+ challengeMetaSelector,
+ testsSelector,
+ outputSelector,
+ hintIndexSelector,
+ codeLockedSelector,
+ chatRoomSelector
+} from '../../redux';
+
import { descriptionRegex } from '../../utils';
-import { makeToast } from '../../../../toasts/redux/actions';
+import { challengeSelector } from '../../../../redux';
+import { makeToast } from '../../../../Toasts/redux';
const mapDispatchToProps = {
makeToast,
@@ -30,19 +38,18 @@ const mapDispatchToProps = {
};
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.tests,
- state => state.challengesApp.output,
- state => state.challengesApp.hintIndex,
- state => state.challengesApp.isCodeLocked,
- state => state.challengesApp.helpChatRoom,
+ challengeMetaSelector,
+ testsSelector,
+ outputSelector,
+ hintIndexSelector,
+ codeLockedSelector,
+ chatRoomSelector,
(
{
- challenge: {
- description,
- hints = []
- } = {},
- title
+ description,
+ hints = []
},
+ { title },
tests,
output,
hintIndex,
diff --git a/common/app/routes/challenges/views/classic/classic.less b/common/app/routes/challenges/views/classic/classic.less
index de511f9f51..272c1a42ec 100644
--- a/common/app/routes/challenges/views/classic/classic.less
+++ b/common/app/routes/challenges/views/classic/classic.less
@@ -1,21 +1,16 @@
// should match filename and ./ns.json
@ns: classic;
-// make the height no larger than (window - navbar)
-.max-element-height(up-to) {
- max-height: e(%('calc(100vh - %s)', @navbar-total-height));
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.max-element-height(always) {
- height: e(%('calc(100vh - %s)', @navbar-total-height));
+// challenge panes are bound to the pane size which in turn is
+// bound to the total height minus navbar height
+.max-element-height() {
+ height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.@{ns}-instructions-panel {
- .max-element-height(always);
+ .max-element-height();
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
@@ -90,56 +85,17 @@
}
.@{ns}-editor {
- .max-element-height(always);
+ .max-element-height();
width: 100%;
}
.@{ns}-preview {
- .max-element-height(always);
+ .max-element-height();
width: 100%;
}
.@{ns}-preview-frame {
- border: 1px solid gray;
- border-radius: 5px;
- color: @gray-lighter;
- height: 99%;
- overflow: hidden;
+ .max-element-height();
+ border: none;
width: 100%;
}
-
-.@{ns}-success-modal {
- display: flex;
- flex-direction: column;
- justify-content: center;
- height: 50vh;
-
- .modal-header {
- background-color: @brand-primary;
- margin-bottom: 0;
-
- .close {
- color: #eee;
- font-size: 4rem;
- opacity: 0.6;
- transition: all 300ms ease-out;
- margin-top: 0;
- padding-left: 0;
-
- &:hover {
- opacity: 1;
- }
- }
- }
-
- .modal-body {
- padding: 35px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- .fa {
- margin-right: 0;
- }
- }
-}
diff --git a/common/app/routes/challenges/views/classic/index.js b/common/app/routes/challenges/views/classic/index.js
index 479ed82803..f8a8115a06 100644
--- a/common/app/routes/challenges/views/classic/index.js
+++ b/common/app/routes/challenges/views/classic/index.js
@@ -1 +1 @@
-export default from './Classic.jsx';
+export { default, panesMap } from './Show.jsx';
diff --git a/common/app/routes/challenges/views/map/Header.jsx b/common/app/routes/challenges/views/map/Header.jsx
deleted file mode 100644
index 712189bdda..0000000000
--- a/common/app/routes/challenges/views/map/Header.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import PureComponent from 'react-pure-render/component';
-import { InputGroup, FormControl, Button, Row } from 'react-bootstrap';
-import classnames from 'classnames';
-import {
- clearFilter,
- updateFilter,
- collapseAll,
- expandAll
-} from '../../redux/actions';
-
-const ESC = 27;
-const clearIcon = ;
-const searchIcon = ;
-const bindableActions = {
- clearFilter,
- updateFilter,
- collapseAll,
- expandAll
-};
-const mapStateToProps = state => ({
- isAllCollapsed: state.challengesApp.mapUi.isAllCollapsed,
- filter: state.challengesApp.filter
-});
-const propTypes = {
- clearFilter: PropTypes.func,
- collapseAll: PropTypes.func,
- expandAll: PropTypes.func,
- filter: PropTypes.string,
- isAllCollapsed: PropTypes.bool,
- updateFilter: PropTypes.func
-};
-
-export class Header extends PureComponent {
- constructor(...props) {
- super(...props);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.handleClearButton = this.handleClearButton.bind(this);
- }
-
- handleKeyDown(e) {
- if (e.keyCode === ESC) {
- e.preventDefault();
- this.props.clearFilter();
- }
- }
-
- handleClearButton(e) {
- e.preventDefault();
- this.props.clearFilter();
- }
-
- renderSearchAddon(filter) {
- if (!filter) {
- return searchIcon;
- }
- return { clearIcon };
- }
-
- render() {
- const {
- filter,
- updateFilter,
- collapseAll,
- expandAll,
- isAllCollapsed
- } = this.props;
- const inputClass = classnames({
- 'map-filter': true,
- filled: !!filter
- });
- const buttonClass = classnames({
- 'center-block': true,
- active: isAllCollapsed
- });
- const buttonCopy = isAllCollapsed ?
- 'Expand all challenges' :
- 'Hide all challenges';
- return (
-
-
- Challenges required for certifications are marked with a *
-
-
-
-
-
-
- { this.renderSearchAddon(filter) }
-
-
-
-
-
-
- );
- }
-}
-
-Header.displayName = 'MapHeader';
-Header.propTypes = propTypes;
-
-export default connect(mapStateToProps, bindableActions)(Header);
diff --git a/common/app/routes/challenges/views/map/Map.jsx b/common/app/routes/challenges/views/map/Map.jsx
deleted file mode 100644
index e40701e45c..0000000000
--- a/common/app/routes/challenges/views/map/Map.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { PropTypes } from 'react';
-import { compose } from 'redux';
-import { contain } from 'redux-epic';
-import { connect } from 'react-redux';
-import PureComponent from 'react-pure-render/component';
-import { Col, Row } from 'react-bootstrap';
-
-import MapHeader from './Header.jsx';
-import SuperBlock from './Super-Block.jsx';
-import { fetchChallenges } from '../../redux/actions';
-import { updateTitle } from '../../../../redux/actions';
-
-const mapStateToProps = state => ({
- superBlocks: state.challengesApp.superBlocks
-});
-const mapDispatchToProps = { fetchChallenges, updateTitle };
-const fetchOptions = {
- fetchAction: 'fetchChallenges',
- isPrimed({ superBlocks }) {
- return Array.isArray(superBlocks) && superBlocks.length > 1;
- }
-};
-const propTypes = {
- fetchChallenges: PropTypes.func.isRequired,
- params: PropTypes.object,
- superBlocks: PropTypes.array,
- updateTitle: PropTypes.func.isRequired
-};
-
-export class ShowMap extends PureComponent {
- componentWillMount() {
- // if no params then map is open in drawer
- // do not update title
- if (!this.props.params) {
- return;
- }
- this.props.updateTitle(
- 'A Map to Learn to Code and Become a Software Engineer'
- );
- }
-
- renderSuperBlocks(superBlocks) {
- if (!Array.isArray(superBlocks) || !superBlocks.length) {
- return No Super Blocks;
- }
- return superBlocks.map(dashedName => (
-
-
- );
- }
-}
-
-ShowMap.displayName = 'Map';
-ShowMap.propTypes = propTypes;
-
-export default compose(
- connect(mapStateToProps, mapDispatchToProps),
- contain(fetchOptions)
-)(ShowMap);
diff --git a/common/app/routes/challenges/views/project/Forms.jsx b/common/app/routes/challenges/views/project/Forms.jsx
index f0505bfe34..5138fdccaa 100644
--- a/common/app/routes/challenges/views/project/Forms.jsx
+++ b/common/app/routes/challenges/views/project/Forms.jsx
@@ -6,14 +6,15 @@ import {
FormControl
} from 'react-bootstrap';
+import { showProjectSubmit } from './redux';
import SolutionInput from '../../Solution-Input.jsx';
+import { submitChallenge } from '../../redux';
import {
isValidURL,
makeRequired,
createFormValidator,
getValidationState
} from '../../../../utils/form';
-import { submitChallenge, showProjectSubmit } from '../../redux/actions';
const propTypes = {
fields: PropTypes.object,
diff --git a/common/app/routes/challenges/views/project/Project.jsx b/common/app/routes/challenges/views/project/Project.jsx
index e37071ec11..1278903c6c 100644
--- a/common/app/routes/challenges/views/project/Project.jsx
+++ b/common/app/routes/challenges/views/project/Project.jsx
@@ -2,25 +2,25 @@ import React, { PropTypes } from 'react';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import PureComponent from 'react-pure-render/component';
-import { Col, Row, Image } from 'react-bootstrap';
+import { Col, Image } from 'react-bootstrap';
import SidePanel from './Side-Panel.jsx';
import ToolPanel from './Tool-Panel.jsx';
import BugModal from '../../Bug-Modal.jsx';
-import { challengeSelector } from '../../redux/selectors';
+import { challengeMetaSelector } from '../../redux';
+import { challengeSelector } from '../../../../redux';
const mapStateToProps = createSelector(
challengeSelector,
+ challengeMetaSelector,
(
{
- challenge: {
- id,
- description,
- image
- } = {},
- title
- }
+ id,
+ description,
+ image
+ },
+ { title }
) => ({
id,
image,
@@ -47,29 +47,25 @@ export class Project extends PureComponent {
} = this.props;
const imageURL = '//i.imgur.com/' + image + '.png';
return (
-
-
-
-
+
+
+
+
+ );
+}
+
+ShowProject.displayName = 'ShowProject';
+ShowProject.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/project/Tool-Panel.jsx b/common/app/routes/challenges/views/project/Tool-Panel.jsx
index cf0c941a15..68b25fb556 100644
--- a/common/app/routes/challenges/views/project/Tool-Panel.jsx
+++ b/common/app/routes/challenges/views/project/Tool-Panel.jsx
@@ -9,8 +9,19 @@ import {
BackEndForm
} from './Forms.jsx';
-import { submitChallenge, openBugModal } from '../../redux/actions';
-import { challengeSelector } from '../../redux/selectors';
+import { submittingSelector } from './redux';
+
+import {
+ submitChallenge,
+ openBugModal,
+
+ chatRoomSelector
+} from '../../redux';
+
+import {
+ signInLoadingSelector,
+ challengeSelector
+} from '../../../../redux';
import {
simpleProject,
frontEndProject
@@ -31,16 +42,16 @@ const mapDispatchToProps = {
};
const mapStateToProps = createSelector(
challengeSelector,
- state => state.app.isSignedIn,
- state => state.challengesApp.isSubmitting,
- state => state.challengesApp.helpChatRoom,
+ signInLoadingSelector,
+ submittingSelector,
+ chatRoomSelector,
(
- { challenge: { challengeType = simpleProject } },
- isSignedIn,
+ { challengeType = simpleProject },
+ showLoading,
isSubmitting,
helpChatRoom,
) => ({
- isSignedIn,
+ isSignedIn: !showLoading,
isSubmitting,
helpChatRoom,
isSimple: challengeType === simpleProject,
diff --git a/common/app/routes/challenges/views/project/index.js b/common/app/routes/challenges/views/project/index.js
index 6784471995..f8a8115a06 100644
--- a/common/app/routes/challenges/views/project/index.js
+++ b/common/app/routes/challenges/views/project/index.js
@@ -1 +1 @@
-export default from './Project.jsx';
+export { default, panesMap } from './Show.jsx';
diff --git a/common/app/routes/challenges/views/project/ns.json b/common/app/routes/challenges/views/project/ns.json
new file mode 100644
index 0000000000..a8138abf72
--- /dev/null
+++ b/common/app/routes/challenges/views/project/ns.json
@@ -0,0 +1 @@
+"project"
diff --git a/common/app/routes/challenges/views/project/redux/index.js b/common/app/routes/challenges/views/project/redux/index.js
new file mode 100644
index 0000000000..67bde420a6
--- /dev/null
+++ b/common/app/routes/challenges/views/project/redux/index.js
@@ -0,0 +1,27 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+import ns from '../ns.json';
+
+export const types = createTypes([
+ 'showProjectSubmit'
+], ns);
+
+export const showProjectSubmit = createAction(types.showProjectSubmit);
+
+const initialState = {
+ // project is ready to submit
+ isSubmitting: false
+};
+export const submittingSelector = state => state[ns].isSubmitting;
+
+export default function createReducer() {
+ const reducer = handleActions({
+ [types.showProjectSubmit]: state => ({
+ ...state,
+ isSubmitting: true
+ })
+ }, initialState);
+
+ reducer.toString = () => ns;
+ return [ reducer ];
+}
diff --git a/common/app/routes/challenges/redux/project-normalizer.js b/common/app/routes/challenges/views/project/redux/project-normalizer.js
similarity index 73%
rename from common/app/routes/challenges/redux/project-normalizer.js
rename to common/app/routes/challenges/views/project/redux/project-normalizer.js
index a7c69981dc..4cd8b1ae31 100644
--- a/common/app/routes/challenges/redux/project-normalizer.js
+++ b/common/app/routes/challenges/views/project/redux/project-normalizer.js
@@ -1,4 +1,4 @@
-import { callIfDefined, formatUrl } from '../../../utils/form';
+import { callIfDefined, formatUrl } from '../../../../../utils/form';
export default {
NewFrontEndProject: {
diff --git a/common/app/routes/challenges/views/step/Show.jsx b/common/app/routes/challenges/views/step/Show.jsx
new file mode 100644
index 0000000000..81425940e2
--- /dev/null
+++ b/common/app/routes/challenges/views/step/Show.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import Step from './Step.jsx';
+import { types } from '../../redux';
+import Panes from '../../../../Panes';
+import _Map from '../../../../Map';
+import ChildContainer from '../../../../Child-Container.jsx';
+
+const propTypes = {};
+export const panesMap = {
+ [types.toggleMap]: 'Map',
+ [types.toggleStep]: 'Step'
+};
+
+const nameToComponent = {
+ Map: {
+ Component: _Map
+ },
+ Step: {
+ Component: Step
+ }
+};
+
+export default function ShowStep() {
+ return (
+
+
+ );
+}
+
+ShowStep.displayName = 'ShowStep';
+ShowStep.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/step/Step.jsx b/common/app/routes/challenges/views/step/Step.jsx
index a507bf800e..44959679f7 100644
--- a/common/app/routes/challenges/views/step/Step.jsx
+++ b/common/app/routes/challenges/views/step/Step.jsx
@@ -1,33 +1,36 @@
-import React, { PropTypes } from 'react';
-import classnames from 'classnames';
+import React, { PropTypes, PureComponent } from 'react';
+import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
+import classnames from 'classnames';
import { createSelector } from 'reselect';
-import PureComponent from 'react-pure-render/component';
import LightBox from 'react-images';
+import { Button, Col, Image, Row } from 'react-bootstrap';
import ns from './ns.json';
import {
closeLightBoxImage,
completeAction,
- openLightBoxImage,
+ clickOnImage,
stepBackward,
stepForward,
- submitChallenge,
- updateUnlockedSteps
-} from '../../redux/actions';
-import { challengeSelector } from '../../redux/selectors';
-import { Button, Col, Image, Row } from 'react-bootstrap';
+ updateUnlockedSteps,
+
+ currentIndexSelector,
+ actionCompletedSelector,
+ previousIndexSelector,
+ lightBoxSelector
+} from './redux';
+import { submitChallenge } from '../../redux';
+import { challengeSelector } from '../../../../redux';
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.currentIndex,
- state => state.challengesApp.previousIndex,
- state => state.challengesApp.isActionCompleted,
- state => state.challengesApp.isLightBoxOpen,
+ currentIndexSelector,
+ previousIndexSelector,
+ actionCompletedSelector,
+ lightBoxSelector,
(
- {
- challenge: { description = [] }
- },
+ { description = [] },
currentIndex,
previousIndex,
isActionCompleted,
@@ -43,17 +46,27 @@ const mapStateToProps = createSelector(
})
);
-const dispatchActions = {
- closeLightBoxImage,
- completeAction,
- openLightBoxImage,
- stepBackward,
- stepForward,
- submitChallenge,
- updateUnlockedSteps
-};
+function mapDispatchToProps(dispatch) {
+ const dispatchers = bindActionCreators({
+ closeLightBoxImage,
+ completeAction,
+ stepBackward,
+ stepForward,
+ submitChallenge,
+ updateUnlockedSteps
+ }, dispatch);
+ dispatchers.clickOnImage = e => {
+ if (!(e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ return dispatch(clickOnImage());
+ }
+ return null;
+ };
+ return () => dispatchers;
+}
const propTypes = {
+ clickOnImage: PropTypes.func.isRequired,
closeLightBoxImage: PropTypes.func.isRequired,
completeAction: PropTypes.func.isRequired,
currentIndex: PropTypes.number,
@@ -61,7 +74,6 @@ const propTypes = {
isLastStep: PropTypes.bool,
isLightBoxOpen: PropTypes.bool,
numOfSteps: PropTypes.number,
- openLightBoxImage: PropTypes.func.isRequired,
step: PropTypes.array,
stepBackward: PropTypes.func,
stepForward: PropTypes.func,
@@ -71,18 +83,6 @@ const propTypes = {
};
export class StepChallenge extends PureComponent {
- constructor(...args) {
- super(...args);
- this.handleLightBoxOpen = this.handleLightBoxOpen.bind(this);
- }
-
- handleLightBoxOpen(e) {
- if (!(e.ctrlKey || e.metaKey)) {
- e.preventDefault();
- this.props.openLightBoxImage();
- }
- }
-
componentWillMount() {
const { updateUnlockedSteps } = this.props;
updateUnlockedSteps([]);
@@ -167,14 +167,15 @@ export class StepChallenge extends PureComponent {
}
renderStep({
- step,
- currentIndex,
- numOfSteps,
- isActionCompleted,
+ clickOnImage,
completeAction,
+ currentIndex,
+ isActionCompleted,
isLastStep,
- stepForward,
- stepBackward
+ numOfSteps,
+ step,
+ stepBackward,
+ stepForward
}) {
if (!Array.isArray(step)) {
return null;
@@ -184,7 +185,7 @@ export class StepChallenge extends PureComponent {
+
+ { content }
+
+ );
+}
+BinButton.displayName = 'BinButton';
+BinButton.propTypes = propTypes;
diff --git a/common/app/Nav/Nav.jsx b/common/app/Nav/Nav.jsx
new file mode 100644
index 0000000000..1198275416
--- /dev/null
+++ b/common/app/Nav/Nav.jsx
@@ -0,0 +1,249 @@
+import React, { PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import noop from 'lodash/noop';
+import capitalize from 'lodash/capitalize';
+import { createSelector } from 'reselect';
+
+import { LinkContainer } from 'react-router-bootstrap';
+import {
+ MenuItem,
+ Nav,
+ NavDropdown,
+ NavItem,
+ Navbar,
+ NavbarBrand
+} from 'react-bootstrap';
+
+import navLinks from './links.json';
+import SignUp from './Sign-Up.jsx';
+import BinButton from './Bin-Button.jsx';
+import {
+ clickOnLogo,
+ openDropdown,
+ closeDropdown,
+ createNavLinkActionCreator,
+
+ dropdownSelector
+} from './redux';
+import {
+ userSelector,
+ signInLoadingSelector
+} from '../redux';
+import { nameToTypeSelector, panesSelector } from '../Panes/redux';
+
+
+const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
+
+const mapStateToProps = createSelector(
+ userSelector,
+ dropdownSelector,
+ signInLoadingSelector,
+ panesSelector,
+ nameToTypeSelector,
+ (
+ { username, picture, points },
+ isDropdownOpen,
+ showLoading,
+ panes,
+ nameToType
+ ) => {
+ return {
+ panes: panes.map(name => {
+ return {
+ content: name,
+ action: nameToType[name]
+ };
+ }, {}),
+ isDropdownOpen,
+ isSignedIn: !!username,
+ picture,
+ points,
+ showLoading,
+ username
+ };
+ }
+);
+
+function mapDispatchToProps(dispatch) {
+ const dispatchers = bindActionCreators(navLinks.reduce(
+ (mdtp, { content }) => {
+ const handler = `handle${capitalize(content)}Click`;
+ mdtp[handler] = createNavLinkActionCreator(content);
+ return mdtp;
+ },
+ {
+ clickOnLogo: e => {
+ e.preventDefault();
+ return clickOnLogo();
+ },
+ closeDropdown: () => closeDropdown(),
+ openDropdown: () => openDropdown()
+ }
+ ), dispatch);
+ dispatchers.dispatch = dispatch;
+ return () => dispatchers;
+}
+
+function mergeProps(stateProps, dispatchProps, ownProps) {
+ const panes = stateProps.panes.map(pane => {
+ return {
+ ...pane,
+ actionCreator: () => dispatchProps.dispatch({ type: pane.action })
+ };
+ });
+ return {
+ ...ownProps,
+ ...stateProps,
+ ...dispatchProps,
+ panes
+ };
+}
+
+const propTypes = navLinks.reduce(
+ (pt, { content }) => {
+ const handler = `handle${capitalize(content)}Click`;
+ pt[handler] = PropTypes.func.isRequired;
+ return pt;
+ },
+ {
+ panes: PropTypes.array,
+ clickOnLogo: PropTypes.func.isRequired,
+ closeDropdown: PropTypes.func.isRequired,
+ isDropdownOpen: PropTypes.bool,
+ openDropdown: PropTypes.func.isRequired,
+ picture: PropTypes.string,
+ points: PropTypes.number,
+ showLoading: PropTypes.bool,
+ signedIn: PropTypes.bool,
+ username: PropTypes.string
+ }
+);
+
+export class FCCNav extends React.Component {
+ renderLink(isNavItem, { isReact, isDropdown, content, link, links, target }) {
+ const Component = isNavItem ? NavItem : MenuItem;
+ const {
+ isDropdownOpen,
+ openDropdown,
+ closeDropdown
+ } = this.props;
+
+ if (isDropdown) {
+ // adding a noop to NavDropdown to disable false warning
+ // about controlled component
+ return (
+
+ { links.map(this.renderLink.bind(this, false)) }
+
+ );
+ }
+ if (isReact) {
+ return (
+
+
+ { content }
+
+
+ );
+ }
+ return (
+
+ { content }
+
+ );
+ }
+
+ render() {
+ const {
+ panes,
+ clickOnLogo,
+ username,
+ points,
+ picture,
+ showLoading
+ } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+FCCNav.displayName = 'FCCNav';
+FCCNav.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps,
+ mergeProps
+)(FCCNav);
diff --git a/common/app/Nav/Sign-Up.jsx b/common/app/Nav/Sign-Up.jsx
new file mode 100644
index 0000000000..ea4d6a2e76
--- /dev/null
+++ b/common/app/Nav/Sign-Up.jsx
@@ -0,0 +1,54 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+import { NavItem } from 'react-bootstrap';
+
+// this is separated out to prevent react bootstrap's
+// NavBar from injecting unknown props to the li component
+
+const propTypes = {
+ picture: PropTypes.string,
+ points: PropTypes.number,
+ showLoading: PropTypes.bool,
+ username: PropTypes.string
+};
+
+export default function SignUpButton({
+ picture,
+ points,
+ showLoading,
+ username
+}) {
+ if (showLoading) {
+ return null;
+ }
+ if (!username) {
+ return (
+
+ Sign Up
+
+ );
+ }
+ return (
+
+
+ { username }
+ [ { points || 1 } ]
+
+
+
+
+
+ );
+}
+
+SignUpButton.displayName = 'SignUpButton';
+SignUpButton.propTypes = propTypes;
diff --git a/common/app/components/Nav/index.js b/common/app/Nav/index.js
similarity index 100%
rename from common/app/components/Nav/index.js
rename to common/app/Nav/index.js
diff --git a/common/app/components/Nav/links.json b/common/app/Nav/links.json
similarity index 92%
rename from common/app/components/Nav/links.json
rename to common/app/Nav/links.json
index d6c43de3b0..57b82e7ac3 100644
--- a/common/app/components/Nav/links.json
+++ b/common/app/Nav/links.json
@@ -34,13 +34,8 @@
}
]
},
- {
- "content": "Map",
- "link": "/map",
- "isReact": true
- },
{
"content": "Donate",
"link": "https://www.freecodecamp.com/donate"
}
-]
\ No newline at end of file
+]
diff --git a/common/app/Nav/nav.less b/common/app/Nav/nav.less
new file mode 100644
index 0000000000..7493f6d0e5
--- /dev/null
+++ b/common/app/Nav/nav.less
@@ -0,0 +1,196 @@
+.navbar {
+ background-color: @brand-primary;
+ font-size: 14px;
+}
+
+.navbar-nav > li > a {
+ color: @body-bg;
+ &:hover {
+ color: @brand-primary;
+ }
+}
+
+.navbar > .container {
+ padding-right: 0px;
+ width: auto;
+
+ @media (max-width: 767px) {
+ // container default padding size
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+
+.nav-height {
+ border: none;
+ height: @navbar-height;
+ width: 100%;
+}
+
+@navbar-logo-height: 25px;
+@navbar-logo-padding: (@navbar-height - @navbar-logo-height) / 2;
+.navbar-brand {
+ padding-top: @navbar-logo-padding;
+ padding-bottom: @navbar-logo-padding;
+}
+
+.nav-logo {
+ height: @navbar-logo-height;
+}
+
+.navbar-right {
+ background-color: @brand-primary;
+ text-align: center;
+
+ @media (min-width: @screen-md-min) {
+ margin-right:0;
+ }
+ @media (min-width: @screen-md-max) and (max-width: 991px) {
+ left: 0;
+ margin-right: 0;
+ position: absolute;
+ right: 0;
+ white-space: nowrap;
+ }
+}
+
+.navbar {
+ white-space: nowrap;
+ border: none;
+ line-height: 1;
+ @media (min-width: 767px) {
+ padding-left: 15px;
+ padding-right: 30px;
+ }
+}
+
+// li is used here to get more specific
+// and win against navbar.less#273
+li.nav-avatar {
+ span {
+ display: inline-block;
+ }
+ @media (min-width: @screen-sm-min) {
+ height: @navbar-height;
+ margin: 0;
+ padding: 0;
+
+ > a {
+ margin: 0;
+ padding: 0 @navbar-padding-horizontal 0 @navbar-padding-horizontal;
+ }
+ }
+}
+
+.nav-username {
+ padding-right: @navbar-padding-horizontal;
+}
+
+.nav-points {
+ @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+ padding: @navbar-padding-vertical 0 @navbar-padding-vertical 0;
+ }
+ @media (min-width: @screen-md-min) {
+ padding: @navbar-padding-vertical @navbar-padding-horizontal @navbar-padding-vertical 0;
+ }
+}
+
+.nav-picture {
+ margin-top: @navbar-logo-padding;
+ margin-bottom: @navbar-logo-padding;
+ height: @navbar-logo-height;
+ width: @navbar-logo-height;
+}
+
+.navbar-nav a {
+ color: @body-bg;
+ margin-top: -5px;
+ margin-bottom: -5px;
+}
+
+.navbar-toggle {
+ color: @body-bg;
+
+ &:hover,
+ &:focus {
+ color: #4a2b0f;
+ }
+}
+
+.navbar-collapse {
+ border-top: 0;
+}
+
+@media (max-width: @screen-xs-max) {
+ .navbar-header {
+ float: none;
+ }
+
+ .navbar-toggle {
+ display: block;
+ }
+
+ .navbar-collapse.collapse {
+ display: none !important;
+ }
+
+ .navbar-nav {
+ margin-top: 0;
+ }
+
+ .navbar-nav > li {
+ float: none;
+ }
+
+ .navbar-nav > li > a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+
+ .navbar-text {
+ float: none;
+ margin: 15px 0;
+ }
+
+ /* since 3.1.0 */
+ .navbar-collapse.collapse.in {
+ display: block !important;
+ }
+
+ .collapsing {
+ overflow: hidden !important;
+ position: absolute;
+ left: 0;
+ right: 0;
+ }
+}
+
+.night {
+ .navbar-default {
+ .navbar-nav {
+ & > li > a {
+ color: #CCC;
+ }
+ .dropdown-menu {
+ background-color: @gray;
+ a {
+ color: @night-text-color !important;
+ }
+ }
+ a:focus,
+ a:hover,
+ .open #nav-Community-dropdown {
+ background-color: #666 !important;
+ color: @link-hover-color !important;
+ }
+ }
+ }
+ .navbar-toggle {
+ &:hover,
+ &:focus {
+ background-color: #666;
+ color: @link-hover-color;
+ border-color: #666;
+ }
+ }
+}
diff --git a/common/app/Nav/ns.json b/common/app/Nav/ns.json
new file mode 100644
index 0000000000..ea84de45ff
--- /dev/null
+++ b/common/app/Nav/ns.json
@@ -0,0 +1 @@
+"nav"
diff --git a/common/app/Nav/redux/bin-epic.js b/common/app/Nav/redux/bin-epic.js
new file mode 100644
index 0000000000..8ac0cf620e
--- /dev/null
+++ b/common/app/Nav/redux/bin-epic.js
@@ -0,0 +1,10 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+
+import { hidePane } from '../../Panes/redux';
+
+export default function binEpic(actions) {
+ return actions::ofType(types.clickOnMap)
+ .map(() => hidePane('Map'));
+}
diff --git a/common/app/Nav/redux/index.js b/common/app/Nav/redux/index.js
new file mode 100644
index 0000000000..f6fd626085
--- /dev/null
+++ b/common/app/Nav/redux/index.js
@@ -0,0 +1,79 @@
+import capitalize from 'lodash/capitalize';
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+import noop from 'lodash/noop';
+
+import loadCurrentChallengeEpic from './load-current-challenge-epic.js';
+import binEpic from './bin-epic.js';
+import ns from '../ns.json';
+import { createEventMetaCreator } from '../../redux';
+
+export const epics = [
+ loadCurrentChallengeEpic,
+ binEpic
+];
+
+export const types = createTypes([
+ 'clickOnLogo',
+ 'clickOnMap',
+ 'navLinkClicked',
+
+ 'closeDropdown',
+ 'openDropdown'
+], ns);
+
+export const clickOnLogo = createAction(
+ types.clickOnLogo,
+ noop,
+ createEventMetaCreator({
+ category: 'Nav',
+ action: 'clicked',
+ label: 'fcc logo clicked'
+ })
+);
+
+export const clickOnMap = createAction(
+ types.clickOnMap,
+ noop,
+ createEventMetaCreator({
+ category: 'Nav',
+ action: 'clicked',
+ label: 'map button clicked'
+ })
+);
+
+export const closeDropdown = createAction(types.closeDropdown);
+export const openDropdown = createAction(types.openDropdown);
+export function createNavLinkActionCreator(link) {
+ return createAction(
+ types.navLinkClicked,
+ noop,
+ createEventMetaCreator({
+ category: capitalize(ns),
+ action: 'click',
+ label: `${link} link`
+ })
+ );
+}
+
+const initialState = {
+ isDropdownOpen: false
+};
+
+export const dropdownSelector = state => state[ns].isDropdownOpen;
+
+export default function createReducer() {
+ const reducer = handleActions({
+ [types.closeDropdown]: state => ({
+ ...state,
+ isDropdownOpen: false
+ }),
+ [types.openDropdown]: state => ({
+ ...state,
+ isDropdownOpen: true
+ })
+ }, initialState);
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/Nav/redux/load-current-challenge-epic.js b/common/app/Nav/redux/load-current-challenge-epic.js
new file mode 100644
index 0000000000..9e609ecbfa
--- /dev/null
+++ b/common/app/Nav/redux/load-current-challenge-epic.js
@@ -0,0 +1,61 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+import {
+ updateCurrentChallenge,
+
+ userSelector,
+ firstChallengeSelector,
+ challengeSelector
+} from '../../redux';
+import { entitiesSelector } from '../../entities';
+
+export default function loadCurrentChallengeEpic(actions, { getState }) {
+ return actions::ofType(types.clickOnLogo)
+ .debounce(500)
+ .map(() => {
+ let finalChallenge;
+ const state = getState();
+ const { id: currentlyLoadedChallengeId } = challengeSelector(state);
+ const {
+ challenge: challengeMap,
+ challengeIdToName
+ } = entitiesSelector(state);
+ const {
+ routing: {
+ locationBeforeTransitions: { pathname } = {}
+ }
+ } = state;
+ const firstChallenge = firstChallengeSelector(state);
+ const { currentChallengeId } = userSelector(state);
+ const isOnAChallenge = (/^\/[^\/]{2,6}\/challenges/).test(pathname);
+
+ if (!currentChallengeId) {
+ finalChallenge = firstChallenge;
+ } else {
+ finalChallenge = challengeMap[
+ challengeIdToName[ currentChallengeId ]
+ ];
+ }
+ return {
+ finalChallenge,
+ isOnAChallenge,
+ currentlyLoadedChallengeId
+ };
+ })
+ .filter(({
+ finalChallenge,
+ isOnAChallenge,
+ currentlyLoadedChallengeId
+ }) => (
+ // data might not be there yet, filter out for now
+ !!finalChallenge &&
+ // are we already on that challenge? if not load challenge
+ (!isOnAChallenge || finalChallenge.id !== currentlyLoadedChallengeId)
+ // don't reload if the challenge is already loaded.
+ // This may change to toast to avoid user confusion
+ ))
+ .map(({ finalChallenge }) => {
+ return updateCurrentChallenge(finalChallenge.dashedName);
+ });
+}
diff --git a/common/app/components/NotFound/index.jsx b/common/app/NotFound/Not-Found.jsx
similarity index 90%
rename from common/app/components/NotFound/index.jsx
rename to common/app/NotFound/Not-Found.jsx
index 9acc2b34f9..f8223a9357 100644
--- a/common/app/components/NotFound/index.jsx
+++ b/common/app/NotFound/Not-Found.jsx
@@ -1,6 +1,6 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
-import { hardGoTo } from '../../redux/actions';
+import { hardGoTo } from '../redux';
const propTypes = {
hardGoTo: PropTypes.func,
@@ -8,8 +8,6 @@ const propTypes = {
};
export class NotFound extends React.Component {
-
-
componentWillMount() {
this.props.hardGoTo(this.props.location.pathname);
}
diff --git a/common/app/NotFound/index.js b/common/app/NotFound/index.js
new file mode 100644
index 0000000000..b174c4f934
--- /dev/null
+++ b/common/app/NotFound/index.js
@@ -0,0 +1 @@
+export default from './Not-Found.jsx';
diff --git a/common/app/Panes/Divider.jsx b/common/app/Panes/Divider.jsx
new file mode 100644
index 0000000000..3eb97df6b0
--- /dev/null
+++ b/common/app/Panes/Divider.jsx
@@ -0,0 +1,50 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import { dividerClicked } from './redux';
+
+const mapStateToProps = null;
+function mapDispatchToProps(dispatch, { name }) {
+ const dispatchers = {
+ dividerClicked: () => dispatch(dividerClicked(name))
+ };
+ return () => dispatchers;
+}
+
+const propTypes = {
+ dividerClicked: PropTypes.func.isRequired,
+ left: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired
+};
+
+export function Divider({ left, dividerClicked }) {
+ const style = {
+ borderLeft: '1px solid rgb(204, 204, 204)',
+ bottom: 0,
+ cursor: 'col-resize',
+ height: '100%',
+ left: left + '%',
+ marginLeft: '-4px',
+ position: 'absolute',
+ right: 'auto',
+ top: 0,
+ width: '8px',
+ zIndex: 100
+ };
+ // use onMouseDown as onClick does not fire
+ // until onMouseUp
+ // note(berks): do we need touch support?
+ return (
+
+ );
+}
+Divider.displayName = 'Divider';
+Divider.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Divider);
diff --git a/common/app/Panes/Pane.jsx b/common/app/Panes/Pane.jsx
new file mode 100644
index 0000000000..dee72c5da6
--- /dev/null
+++ b/common/app/Panes/Pane.jsx
@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+const mapStateToProps = null;
+const mapDispatchToProps = null;
+const propTypes = {
+ children: PropTypes.element,
+ left: PropTypes.number.isRequired,
+ right: PropTypes.number.isRequired
+};
+
+export function Pane({
+ children,
+ left,
+ right
+}) {
+ const style = {
+ bottom: 0,
+ left: left + '%',
+ overflowX: 'hidden',
+ overflowY: 'auto',
+ position: 'absolute',
+ right: right + '%',
+ top: 0
+ };
+ return (
+
+ ,
+ divider
+ ];
+ }).reduce((panes, pane) => panes.concat(pane), [])
+ .filter(Boolean);
+ }
+
+ render() {
+ const { height } = this.props;
+ const outerStyle = {
+ height,
+ position: 'relative',
+ width: '100%'
+ };
+ const innerStyle = {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0
+ };
+ return (
+
-
-
- { username }
- [ { points || 1 } ]
-
-
-
-
-
-
- );
-}
-
-AvatarPointsNavItem.displayName = 'AvatarPointsNavItem';
-AvatarPointsNavItem.propTypes = propTypes;
diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx
deleted file mode 100644
index 033c4af227..0000000000
--- a/common/app/components/Nav/Nav.jsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import React, { PropTypes } from 'react';
-import { LinkContainer } from 'react-router-bootstrap';
-import {
- Col,
- MenuItem,
- Nav,
- NavDropdown,
- NavItem,
- Navbar,
- NavbarBrand
-} from 'react-bootstrap';
-import noop from 'lodash/noop';
-
-import navLinks from './links.json';
-import AvatarPointsNavItem from './Avatar-Points-Nav-Item.jsx';
-
-const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
-
-const toggleButtonChild = (
-
- { links.map(this.renderLink.bind(this, false)) }
-
- );
- }
- if (isReact) {
- return (
-
-
- { content }
-
-
- );
- }
- return (
-
- { content }
-
- );
- }
-
- renderSignIn(username, points, picture, showLoading) {
- if (showLoading) {
- return null;
- }
- if (username) {
- return (
-
- Sign Up
-
- );
- }
- }
-
- render() {
- const {
- username,
- points,
- picture,
- showLoading
- } = this.props;
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-FCCNav.displayName = 'FCCNav';
-FCCNav.propTypes = propTypes;
diff --git a/common/app/components/README.md b/common/app/components/README.md
deleted file mode 100644
index e5b2bbdca3..0000000000
--- a/common/app/components/README.md
+++ /dev/null
@@ -1 +0,0 @@
-things like NavBar and Footer go here
diff --git a/common/app/create-app.jsx b/common/app/create-app.jsx
index edb63d29fc..efb77b269e 100644
--- a/common/app/create-app.jsx
+++ b/common/app/create-app.jsx
@@ -2,17 +2,13 @@ import { Observable } from 'rx';
import { match } from 'react-router';
import { compose, createStore, applyMiddleware } from 'redux';
-// main app
-import App from './App.jsx';
-// app routes
-import createChildRoute from './routes';
-
-// redux
import { createEpic } from 'redux-epic';
import createReducer from './create-reducer';
-import sagas from './sagas';
+import createRoutes from './create-routes.js';
+import createPanesMap from './create-panes-map.js';
+import createPanesAspects from './Panes/redux';
+import epics from './epics';
-// general utils
import servicesCreator from '../utils/services-creator';
const createRouteProps = Observable.fromNodeCallback(match);
@@ -27,7 +23,7 @@ const createRouteProps = Observable.fromNodeCallback(match);
// middlewares?: Function[],
// sideReducers?: Object
// enhancers?: Function[],
-// sagas?: Function[],
+// epics?: Function[],
// }) => Observable
//
// Either location or history must be defined
@@ -41,44 +37,49 @@ export default function createApp({
middlewares: sideMiddlewares = [],
enhancers: sideEnhancers = [],
reducers: sideReducers = {},
- sagas: sideSagas = [],
- sagaOptions: sideSagaOptions = {}
+ epics: sideEpics = [],
+ epicOptions: sideEpicOptions = {}
}) {
- const sagaOptions = {
- ...sideSagaOptions,
+ const epicOptions = {
+ ...sideEpicOptions,
services: servicesCreator(serviceOptions)
};
- const sagaMiddleware = createEpic(
- sagaOptions,
- ...sagas,
- ...sideSagas
+ const epicMiddleware = createEpic(
+ epicOptions,
+ ...epics,
+ ...sideEpics
);
- const enhancers = [
+ const {
+ reducer: panesReducer,
+ middleware: panesMiddleware
+ } = createPanesAspects(createPanesMap());
+ const enhancer = compose(
applyMiddleware(
- ...sideMiddlewares,
- sagaMiddleware
+ panesMiddleware,
+ epicMiddleware,
+ ...sideMiddlewares
),
// enhancers must come after middlewares
// on client side these are things like Redux DevTools
...sideEnhancers
- ];
- const reducer = createReducer(sideReducers);
+ );
+ const reducer = createReducer(
+ {
+ [panesReducer]: panesReducer,
+ ...sideReducers
+ },
+ );
// create composed store enhancer
// use store enhancer function to enhance `createStore` function
// call enhanced createStore function with reducer and initialState
// to create store
- const store = compose(...enhancers)(createStore)(reducer, initialState);
+ const store = createStore(reducer, initialState, enhancer);
// sync history client side with store.
// server side this is an identity function and history is undefined
history = syncHistoryWithStore(history, store, syncOptions);
- const routes = {
- components: App,
- ...createChildRoute({
- getState() { return store.getState(); }
- })
- };
+ const routes = createRoutes(store);
// createRouteProps({
// redirect: LocationDescriptor,
// history: History,
@@ -90,6 +91,6 @@ export default function createApp({
props,
reducer,
store,
- epic: sagaMiddleware
+ epic: epicMiddleware
}));
}
diff --git a/common/app/create-panes-map.js b/common/app/create-panes-map.js
new file mode 100644
index 0000000000..5ce26a90d0
--- /dev/null
+++ b/common/app/create-panes-map.js
@@ -0,0 +1,7 @@
+import { createPanesMap as routesPanes } from './routes/';
+
+export default function createPanesMap() {
+ return {
+ ...routesPanes()
+ };
+}
diff --git a/common/app/create-reducer.js b/common/app/create-reducer.js
index 80964bc069..869890cbcc 100644
--- a/common/app/create-reducer.js
+++ b/common/app/create-reducer.js
@@ -1,21 +1,42 @@
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
-import { reducer as app } from './redux';
-import { reducer as toasts } from './toasts/redux';
-import entitiesReducer from './redux/entities-reducer';
-import {
- reducer as challengesApp,
- projectNormalizer
-} from './routes/challenges/redux';
+import app from './redux';
+import entities from './entities';
+import map from './Map/redux';
+import nav from './Nav/redux';
+import routes from './routes/redux';
+import toasts from './Toasts/redux';
+// not ideal but should go away once we move to react-redux-form
+import { projectNormalizer } from './routes/challenges/redux';
-export default function createReducer(sideReducers = {}) {
- return combineReducers({
- ...sideReducers,
- entities: entitiesReducer,
+export default function createReducer(sideReducers) {
+ // reducers exported from features need to be factories
+ // this helps avoid cyclic requires messing up reducer creation
+ // We end up with exports from files being undefined as node tries
+ // to resolve cyclic dependencies.
+ // This prevents that by wrapping the `handleActions` call so that the ref
+ // to types imported from parent features are closures and can be resolved
+ // by node before we need them.
+ const reducerMap = [
app,
- toasts,
- challengesApp,
- form: formReducer.normalize({ ...projectNormalizer })
- });
+ entities,
+ map,
+ nav,
+ routes,
+ toasts
+ ]
+ .map(createReducer => createReducer())
+ .reduce((arr, cur) => arr.concat(cur), [])
+ .reduce(
+ (reducerMap, reducer) => {
+ reducerMap[reducer] = reducer;
+ return reducerMap;
+ },
+ {
+ form: formReducer.normalize({ ...projectNormalizer }),
+ ...sideReducers
+ }
+ );
+ return combineReducers(reducerMap);
}
diff --git a/common/app/create-routes.js b/common/app/create-routes.js
new file mode 100644
index 0000000000..bae05c8e84
--- /dev/null
+++ b/common/app/create-routes.js
@@ -0,0 +1,9 @@
+import App from './App.jsx';
+import createChildRoute from './routes';
+
+export default function createRoutes(store) {
+ return {
+ components: App,
+ ...createChildRoute(store)
+ };
+}
diff --git a/common/app/entities/index.js b/common/app/entities/index.js
new file mode 100644
index 0000000000..e9e28c1a2c
--- /dev/null
+++ b/common/app/entities/index.js
@@ -0,0 +1,163 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+
+export const ns = 'entities';
+export const getNS = state => state[ns];
+export const entitiesSelector = getNS;
+export const types = createTypes([
+ 'updateUserPoints',
+ 'updateUserFlag',
+ 'updateUserEmail',
+ 'updateUserLang',
+ 'updateUserChallenge',
+ 'updateUserCurrentChallenge'
+], ns);
+
+// updateUserPoints(username: String, points: Number) => Action
+export const updateUserPoints = createAction(
+ types.updateUserPoints,
+ (username, points) => ({ username, points })
+);
+// updateUserFlag(username: String, flag: String) => Action
+export const updateUserFlag = createAction(
+ types.updateUserFlag,
+ (username, flag) => ({ username, flag })
+);
+// updateUserEmail(username: String, email: String) => Action
+export const updateUserEmail = createAction(
+ types.updateUserFlag,
+ (username, email) => ({ username, email })
+);
+// updateUserLang(username: String, lang: String) => Action
+export const updateUserLang = createAction(
+ types.updateUserLang,
+ (username, lang) => ({ username, languageTag: lang })
+);
+
+// updateUserChallenge(
+// username: String,
+// challengeInfo: Object
+// ) => Action
+export const updateUserChallenge = createAction(
+ types.updateUserChallenge,
+ (username, challengeInfo) => ({ username, challengeInfo })
+);
+
+export const updateUserCurrentChallenge = createAction(
+ types.updateUserCurrentChallenge
+);
+
+
+const initialState = {
+ superBlock: {},
+ block: {},
+ challenge: {},
+ user: {}
+};
+
+export const challengeMapSelector = state => getNS(state).challenge || {};
+export function makeBlockSelector(block) {
+ return state => {
+ const blockMap = getNS(state).block || {};
+ return blockMap[block] || {};
+ };
+}
+export function makeSuperBlockSelector(name) {
+ return state => {
+ const superBlock = getNS(state).superBlock || {};
+ return superBlock[name] || {};
+ };
+}
+
+export default function createReducer() {
+ const userReducer = handleActions(
+ {
+ [types.updateUserPoints]: (state, { payload: { username, points } }) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ points
+ }
+ }),
+ [types.updateUserFlag]: (state, { payload: { username, flag } }) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ [flag]: !state[username][flag]
+ }
+ }),
+ [types.updateUserEmail]: (state, { payload: { username, email } }) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ email
+ }
+ }),
+ [types.updateUserLang]:
+ (
+ state,
+ {
+ payload: { username, languageTag }
+ }
+ ) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ languageTag
+ }
+ }),
+ [types.updateUserCurrentChallenge]:
+ (
+ state,
+ {
+ payload: { username, currentChallengeId }
+ }
+ ) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ currentChallengeId
+ }
+ }),
+ [types.updateUserChallenge]:
+ (
+ state,
+ {
+ payload: { username, challengeInfo }
+ }
+ ) => ({
+ ...state,
+ [username]: {
+ ...state[username],
+ challengeMap: {
+ ...state[username].challengeMap,
+ [challengeInfo.id]: challengeInfo
+ }
+ }
+ })
+ },
+ initialState.user
+ );
+
+ function metaReducer(state = initialState, action) {
+ if (action.meta && action.meta.entities) {
+ return {
+ ...state,
+ ...action.meta.entities
+ };
+ }
+ return state;
+ }
+
+ function entitiesReducer(state, action) {
+ const newState = metaReducer(state, action);
+ const user = userReducer(newState.user, action);
+ if (newState.user !== user) {
+ return { ...newState, user };
+ }
+ return newState;
+ }
+
+ entitiesReducer.toString = () => ns;
+ return entitiesReducer;
+}
diff --git a/common/app/epics.js b/common/app/epics.js
new file mode 100644
index 0000000000..1b83fd1d2e
--- /dev/null
+++ b/common/app/epics.js
@@ -0,0 +1,15 @@
+import { epics as app } from './redux';
+import { epics as challenge } from './routes/challenges/redux';
+import { epics as settings } from './routes/settings/redux';
+import { epics as nav } from './Nav/redux';
+import { epics as map } from './Map/redux';
+import { epics as panes } from './Panes/redux';
+
+export default [
+ ...app,
+ ...challenge,
+ ...settings,
+ ...nav,
+ ...map,
+ ...panes
+];
diff --git a/common/app/index.less b/common/app/index.less
index 69bf5eb725..4a0fa6d828 100644
--- a/common/app/index.less
+++ b/common/app/index.less
@@ -1,2 +1,4 @@
&{ @import "./app.less"; }
+&{ @import "./Map/map.less"; }
+&{ @import "./Nav/nav.less"; }
&{ @import "./routes/index.less"; }
diff --git a/common/app/redux/actions.js b/common/app/redux/actions.js
deleted file mode 100644
index 6768f58627..0000000000
--- a/common/app/redux/actions.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Observable } from 'rx';
-import { createAction } from 'redux-actions';
-import types from './types';
-import noop from 'lodash/noop';
-
-const throwIfUndefined = () => {
- throw new TypeError('Argument must not be of type `undefined`');
-};
-
-export const createEventMeta = ({
- category = throwIfUndefined,
- action = throwIfUndefined,
- label,
- value
-} = throwIfUndefined) => ({
- analytics: {
- type: 'event',
- category,
- action,
- label,
- value
- }
-});
-
-export const trackEvent = createAction(
- types.analytics,
- null,
- createEventMeta
-);
-
-export const trackSocial = createAction(
- types.analytics,
- null,
- (
- network = throwIfUndefined,
- action = throwIfUndefined,
- target = throwIfUndefined
- ) => ({
- analytics: {
- type: 'event',
- network,
- action,
- target
- }
- })
-);
-// updateTitle(title: String) => Action
-export const updateTitle = createAction(types.updateTitle);
-
-// fetchUser() => Action
-// used in combination with fetch-user-saga
-export const fetchUser = createAction(types.fetchUser);
-
-// addUser(
-// entities: { [userId]: User }
-// ) => Action
-export const addUser = createAction(
- types.addUser,
- () => {},
- entities => ({ entities })
-);
-export const updateThisUser = createAction(types.updateThisUser);
-export const showSignIn = createAction(types.showSignIn);
-export const loadCurrentChallenge = createAction(
- types.loadCurrentChallenge,
- null,
- () => createEventMeta({
- category: 'Nav',
- action: 'clicked',
- label: 'fcc logo clicked'
- })
-);
-export const updateMyCurrentChallenge = createAction(
- types.updateMyCurrentChallenge,
- (username, currentChallengeId) => ({ username, currentChallengeId })
-);
-
-// updateUserPoints(username: String, points: Number) => Action
-export const updateUserPoints = createAction(
- types.updateUserPoints,
- (username, points) => ({ username, points })
-);
-// updateUserFlag(username: String, flag: String) => Action
-export const updateUserFlag = createAction(
- types.updateUserFlag,
- (username, flag) => ({ username, flag })
-);
-// updateUserEmail(username: String, email: String) => Action
-export const updateUserEmail = createAction(
- types.updateUserFlag,
- (username, email) => ({ username, email })
-);
-// updateUserLang(username: String, lang: String) => Action
-export const updateUserLang = createAction(
- types.updateUserLang,
- (username, lang) => ({ username, languageTag: lang })
-);
-
-// updateUserChallenge(
-// username: String,
-// challengeInfo: Object
-// ) => Action
-export const updateUserChallenge = createAction(
- types.updateUserChallenge,
- (username, challengeInfo) => ({ username, challengeInfo })
-);
-
-export const updateAppLang = createAction(types.updateAppLang);
-
-// used when server needs client to redirect
-export const delayedRedirect = createAction(types.delayedRedirect);
-
-// hardGoTo(path: String) => Action
-export const hardGoTo = createAction(types.hardGoTo);
-
-// data
-export const updateChallengesData = createAction(types.updateChallengesData);
-export const updateHikesData = createAction(types.updateHikesData);
-
-export const createErrorObservable = error => Observable.just({
- type: types.handleError,
- error
-});
-// doActionOnError(
-// actionCreator: (() => Action|Null)
-// ) => (error: Error) => Observable[Action]
-export const doActionOnError = actionCreator => error => Observable.of(
- {
- type: types.handleError,
- error
- },
- actionCreator()
-);
-
-export const toggleNightMode = createAction(
- types.toggleNightMode,
- // we use this function to avoid hanging onto the eventObject
- // so that react can recycle it
- () => null
-);
-// updateTheme(theme: /night|default/) => Action
-export const updateTheme = createAction(types.updateTheme);
-// addThemeToBody(theme: /night|default/) => Action
-export const addThemeToBody = createAction(types.addThemeToBody);
-
-export const openDropdown = createAction(types.openDropdown, noop);
-export const closeDropdown = createAction(types.closeDropdown, noop);
diff --git a/common/app/redux/entities-reducer.js b/common/app/redux/entities-reducer.js
deleted file mode 100644
index 9e3df2c6c4..0000000000
--- a/common/app/redux/entities-reducer.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { handleActions } from 'redux-actions';
-
-import types from './types';
-
-const initialState = {
- superBlock: {},
- block: {},
- challenge: {},
- user: {}
-};
-
-const userReducer = handleActions(
- {
- [types.updateUserPoints]: (state, { payload: { username, points } }) => ({
- ...state,
- [username]: {
- ...state[username],
- points
- }
- }),
- [types.updateUserFlag]: (state, { payload: { username, flag } }) => ({
- ...state,
- [username]: {
- ...state[username],
- [flag]: !state[username][flag]
- }
- }),
- [types.updateUserEmail]: (state, { payload: { username, email } }) => ({
- ...state,
- [username]: {
- ...state[username],
- email
- }
- }),
- [types.updateUserLang]:
- (
- state,
- {
- payload: { username, languageTag }
- }
- ) => ({
- ...state,
- [username]: {
- ...state[username],
- languageTag
- }
- }),
- [types.updateMyCurrentChallenge]:
- (
- state,
- {
- payload: { username, currentChallengeId }
- }
- ) => ({
- ...state,
- [username]: {
- ...state[username],
- currentChallengeId
- }
- }),
- [types.updateUserChallenge]:
- (
- state,
- {
- payload: { username, challengeInfo }
- }
- ) => ({
- ...state,
- [username]: {
- ...state[username],
- challengeMap: {
- ...state[username].challengeMap,
- [challengeInfo.id]: challengeInfo
- }
- }
- })
- },
- initialState.user
-);
-
-function metaReducer(state = initialState, action) {
- if (action.meta && action.meta.entities) {
- return {
- ...state,
- ...action.meta.entities
- };
- }
- return state;
-}
-
-export default function entitiesReducer(state, action) {
- const newState = metaReducer(state, action);
- const user = userReducer(newState.user, action);
- if (newState.user !== user) {
- return { ...newState, user };
- }
- return newState;
-}
diff --git a/common/app/redux/fetch-challenges-epic.js b/common/app/redux/fetch-challenges-epic.js
new file mode 100644
index 0000000000..ab8468530c
--- /dev/null
+++ b/common/app/redux/fetch-challenges-epic.js
@@ -0,0 +1,86 @@
+import { Observable } from 'rx';
+import { combineEpics, ofType } from 'redux-epic';
+import debug from 'debug';
+
+import {
+ types,
+
+ createErrorObservable,
+ delayedRedirect,
+
+ fetchChallengeCompleted,
+ fetchChallengesCompleted,
+
+ langSelector
+} from './';
+import { shapeChallenges } from './utils';
+
+const isDev = debug.enabled('fcc:*');
+
+export function fetchChallengeEpic(actions, { getState }, { services }) {
+ return actions::ofType('' + types.fetchChallenge)
+ .flatMap(({ payload: { dashedName, block } }) => {
+ const lang = langSelector(getState());
+ const options = {
+ service: 'map',
+ params: { block, dashedName, lang }
+ };
+ return services.readService$(options)
+ .retry(3)
+ .map(({ entities, ...rest }) => ({
+ entities: shapeChallenges(entities, isDev),
+ ...rest
+ }))
+ .flatMap(({ entities, result, redirect } = {}) => {
+ const actions = [
+ fetchChallengeCompleted({
+ entities,
+ currentChallenge: result.challenge,
+ challenge: entities.challenge[result.challenge],
+ result
+ }),
+ redirect ? delayedRedirect(redirect) : null
+ ];
+ return Observable.from(actions).filter(Boolean);
+ })
+ .catch(createErrorObservable);
+ });
+}
+
+export function fetchChallengesEpic(
+ actions,
+ { getState },
+ { services }
+) {
+ return actions::ofType(
+ // async type
+ '' + types.fetchChallenges,
+ types.appMounted
+ )
+ .flatMapLatest(() => {
+ const lang = langSelector(getState());
+ const options = {
+ lang,
+ service: 'map'
+ };
+ return services.readService$(options)
+ .retry(3)
+ .map(({ entities, ...res }) => ({
+ entities: shapeChallenges(
+ entities,
+ isDev
+ ),
+ ...res
+ }))
+ .map(({ entities, result } = {}) => {
+ return fetchChallengesCompleted(
+ entities,
+ result
+ );
+ })
+ .startWith({ type: types.fetchChallenges.start })
+ .catch(createErrorObservable);
+ });
+}
+
+export default combineEpics(fetchChallengeEpic, fetchChallengesEpic);
diff --git a/common/app/redux/fetch-user-saga.js b/common/app/redux/fetch-user-epic.js
similarity index 61%
rename from common/app/redux/fetch-user-saga.js
rename to common/app/redux/fetch-user-epic.js
index b2b8a36495..a409311e7a 100644
--- a/common/app/redux/fetch-user-saga.js
+++ b/common/app/redux/fetch-user-epic.js
@@ -1,33 +1,33 @@
import { Observable } from 'rx';
-import types from './types';
+import { ofType } from 'redux-epic';
import {
+ types,
+
addUser,
updateThisUser,
createErrorObservable,
showSignIn,
updateTheme,
addThemeToBody
-} from './actions';
+} from './';
-const { fetchUser } = types;
-export default function getUserSaga(action$, getState, { services }) {
- return action$
- .filter(action => action.type === fetchUser)
+export default function getUserEpic(actions, { getState }, { services }) {
+ return actions::ofType(types.fetchUser)
.flatMap(() => {
return services.readService$({ service: 'user' })
+ .filter(({ entities, result }) => entities && !!result)
.flatMap(({ entities, result })=> {
- if (!entities || !result) {
- return Observable.just(showSignIn());
- }
const user = entities.user[result];
const isNightMode = user.theme === 'night';
- return Observable.of(
+ const actions = [
addUser(entities),
updateThisUser(result),
isNightMode ? updateTheme(user.theme) : null,
isNightMode ? addThemeToBody(user.theme) : null
- );
+ ];
+ return Observable.from(actions).filter(Boolean);
})
+ .defaultIfEmpty(showSignIn())
.catch(createErrorObservable);
});
}
diff --git a/common/app/redux/index.js b/common/app/redux/index.js
index 4f29ce7e0d..e256de78ed 100644
--- a/common/app/redux/index.js
+++ b/common/app/redux/index.js
@@ -1,10 +1,279 @@
-import fetchUserSaga from './fetch-user-saga';
-import loadCurrentChallengeSaga from './load-current-challenge-saga';
+import { Observable } from 'rx';
+import { createTypes, createAsyncTypes } from 'redux-create-types';
+import { combineActions, createAction, handleActions } from 'redux-actions';
+import { createSelector } from 'reselect';
+import noop from 'lodash/noop';
+import identity from 'lodash/identity';
-export { default as reducer } from './reducer';
-export * as actions from './actions';
-export { default as types } from './types';
-export const sagas = [
- fetchUserSaga,
- loadCurrentChallengeSaga
+import { entitiesSelector } from '../entities';
+import fetchUserEpic from './fetch-user-epic.js';
+import updateMyCurrentChallengeEpic from './update-my-challenge-epic.js';
+import fetchChallengesEpic from './fetch-challenges-epic.js';
+import navSizeEpic from './nav-size-epic.js';
+
+import ns from '../ns.json';
+
+export const epics = [
+ fetchUserEpic,
+ fetchChallengesEpic,
+ updateMyCurrentChallengeEpic,
+ navSizeEpic
];
+
+export const types = createTypes([
+ 'appMounted',
+ 'analytics',
+ 'updateTitle',
+ 'updateAppLang',
+
+ createAsyncTypes('fetchChallenge'),
+ createAsyncTypes('fetchChallenges'),
+ 'updateCurrentChallenge',
+
+ 'fetchUser',
+ 'addUser',
+ 'updateThisUser',
+ 'showSignIn',
+
+ 'handleError',
+ // used to hit the server
+ 'hardGoTo',
+ 'delayedRedirect',
+
+ // night mode
+ 'toggleNightMode',
+ 'updateTheme',
+ 'addThemeToBody'
+], ns);
+
+const throwIfUndefined = () => {
+ throw new TypeError('Argument must not be of type `undefined`');
+};
+
+// createEventMetaCreator({
+// category: String,
+// action: String,
+// label?: String,
+// value?: Number
+// }) => () => Object
+export const createEventMetaCreator = ({
+ // categories are features or namespaces of the app (capitalized):
+ // Map, Nav, Challenges, and so on
+ category = throwIfUndefined,
+ // can be a one word the event
+ // click, play, toggle.
+ // This is not a hard and fast rule
+ action = throwIfUndefined,
+ // any additional information
+ // when in doubt use redux action type
+ // or a short sentence describing the action
+ label,
+ // used to tack some specific value for a GA event
+ value
+} = throwIfUndefined) => () => ({
+ analytics: {
+ type: 'event',
+ category,
+ action,
+ label,
+ value
+ }
+});
+
+export const appMounted = createAction(types.appMounted);
+export const fetchChallenge = createAction(
+ '' + types.fetchChallenge,
+ (dashedName, block) => ({ dashedName, block })
+);
+export const fetchChallengeCompleted = createAction(
+ types.fetchChallenge.complete,
+ null,
+ identity
+);
+export const fetchChallenges = createAction('' + types.fetchChallenges);
+export const fetchChallengesCompleted = createAction(
+ types.fetchChallenges.complete,
+ (entities, result) => ({ entities, result }),
+ entities => ({ entities })
+);
+export const updateCurrentChallenge = createAction(
+ types.updateCurrentChallenge
+);
+
+// updateTitle(title: String) => Action
+export const updateTitle = createAction(types.updateTitle);
+
+// fetchUser() => Action
+// used in combination with fetch-user-epic
+export const fetchUser = createAction(types.fetchUser);
+
+// addUser(
+// entities: { [userId]: User }
+// ) => Action
+export const addUser = createAction(
+ types.addUser,
+ noop,
+ entities => ({ entities })
+);
+export const updateThisUser = createAction(types.updateThisUser);
+export const showSignIn = createAction(types.showSignIn);
+
+export const updateAppLang = createAction(types.updateAppLang);
+
+// used when server needs client to redirect
+export const delayedRedirect = createAction(types.delayedRedirect);
+
+// hardGoTo(path: String) => Action
+export const hardGoTo = createAction(types.hardGoTo);
+
+export const createErrorObservable = error => Observable.just({
+ type: types.handleError,
+ error
+});
+// doActionOnError(
+// actionCreator: (() => Action|Null)
+// ) => (error: Error) => Observable[Action]
+export const doActionOnError = actionCreator => error => Observable.of(
+ {
+ type: types.handleError,
+ error
+ },
+ actionCreator()
+);
+
+export const toggleNightMode = createAction(
+ types.toggleNightMode,
+ // we use this function to avoid hanging onto the eventObject
+ // so that react can recycle it
+ () => null
+);
+// updateTheme(theme: /night|default/) => Action
+export const updateTheme = createAction(types.updateTheme);
+// addThemeToBody(theme: /night|default/) => Action
+export const addThemeToBody = createAction(types.addThemeToBody);
+
+const initialState = {
+ title: 'Learn To Code | freeCodeCamp',
+ isSignInAttempted: false,
+ user: '',
+ lang: '',
+ csrfToken: '',
+ theme: 'default',
+ // eventually this should be only in the user object
+ currentChallenge: '',
+ superBlocks: []
+};
+
+export const getNS = state => state[ns];
+export const langSelector = state => getNS(state).lang;
+export const csrfSelector = state => getNS(state).csrfToken;
+export const themeSelector = state => getNS(state).theme;
+export const titleSelector = state => getNS(state).title;
+
+export const currentChallengeSelector = state => getNS(state).currentChallenge;
+export const superBlocksSelector = state => getNS(state).superBlocks;
+export const signInLoadingSelector = state => !getNS(state).isSignInAttempted;
+
+export const userSelector = createSelector(
+ state => getNS(state).user,
+ state => entitiesSelector(state).user,
+ (username, userMap) => userMap[username] || {}
+);
+
+export const challengeSelector = createSelector(
+ currentChallengeSelector,
+ state => entitiesSelector(state).challenge,
+ (challengeName, challengeMap = {}) => {
+ return challengeMap[challengeName] || {};
+ }
+);
+
+export const firstChallengeSelector = createSelector(
+ entitiesSelector,
+ superBlocksSelector,
+ (
+ {
+ challengeMap,
+ blockMap,
+ superBlockMap
+ },
+ superBlocks
+ ) => {
+ if (
+ !challengeMap ||
+ !blockMap ||
+ !superBlockMap ||
+ !superBlocks
+ ) {
+ return {};
+ }
+ try {
+ return challengeMap[
+ blockMap[
+ superBlockMap[
+ superBlocks[0]
+ ].blocks[0]
+ ].challenges[0]
+ ];
+ } catch (err) {
+ console.error(err);
+ return {};
+ }
+ }
+);
+
+export default function createReducer() {
+ const reducer = handleActions(
+ {
+ [types.updateTitle]: (state, { payload = 'Learn To Code' }) => ({
+ ...state,
+ title: payload + ' | freeCodeCamp'
+ }),
+
+ [types.updateThisUser]: (state, { payload: user }) => ({
+ ...state,
+ user
+ }),
+ [types.fetchChallenge.complete]: (state, { payload }) => ({
+ ...state,
+ currentChallenge: payload.currentChallenge
+ }),
+ [combineActions(
+ types.fetchChallenge.complete,
+ types.fetchChallenges.complete
+ )]: (state, { payload }) => ({
+ ...state,
+ superBlocks: payload.result.superBlocks
+ }),
+ [types.updateCurrentChallenge]: (state, { payload = '' }) => ({
+ ...state,
+ currentChallenge: payload
+ }),
+ [types.updateAppLang]: (state, { payload = 'en' }) =>({
+ ...state,
+ lang: payload
+ }),
+ [types.updateTheme]: (state, { payload = 'default' }) => ({
+ ...state,
+ theme: payload
+ }),
+ [combineActions(types.showSignIn, types.updateThisUser)]: state => ({
+ ...state,
+ isSignInAttempted: true
+ }),
+
+ [types.challengeSaved]: (state, { payload: { points = 0 } }) => ({
+ ...state,
+ points
+ }),
+ [types.delayedRedirect]: (state, { payload }) => ({
+ ...state,
+ delayedRedirect: payload
+ })
+ },
+ initialState
+ );
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/redux/load-current-challenge-saga.js b/common/app/redux/load-current-challenge-saga.js
deleted file mode 100644
index c89c8f87cf..0000000000
--- a/common/app/redux/load-current-challenge-saga.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Observable } from 'rx';
-import debug from 'debug';
-import { push } from 'react-router-redux';
-
-import types from './types';
-import {
- updateMyCurrentChallenge,
- createErrorObservable
-} from './actions';
-import {
- userSelector,
- firstChallengeSelector
-} from './selectors';
-import { updateCurrentChallenge } from '../routes/challenges/redux/actions';
-import getActionsOfType from '../../utils/get-actions-of-type';
-import combineSagas from '../../utils/combine-sagas';
-import { postJSON$ } from '../../utils/ajax-stream';
-
-const log = debug('fcc:app/redux/load-current-challenge-saga');
-export function updateMyCurrentChallengeSaga(actions, getState) {
- const updateChallenge$ = getActionsOfType(
- actions,
- updateCurrentChallenge.toString()
- )
- .map(({ payload: { id } }) => id)
- .filter(() => {
- const { app: { user: username } } = getState();
- return !!username;
- })
- .distinctUntilChanged();
- const optimistic = updateChallenge$.map(id => {
- const { app: { user: username } } = getState();
- return updateMyCurrentChallenge(username, id);
- });
- const ajaxUpdate = updateChallenge$
- .debounce(250)
- .flatMapLatest(currentChallengeId => {
- const { app: { csrfToken: _csrf } } = getState();
- return postJSON$(
- '/update-my-current-challenge',
- { _csrf, currentChallengeId }
- )
- .map(({ message }) => log(message))
- .catch(createErrorObservable);
- });
- return Observable.merge(optimistic, ajaxUpdate);
-}
-
-export function loadCurrentChallengeSaga(actions, getState) {
- return getActionsOfType(actions, types.loadCurrentChallenge)
- .flatMap(() => {
- let finalChallenge;
- const state = getState();
- const {
- entities: { challenge: challengeMap, challengeIdToName },
- challengesApp: { id: currentlyLoadedChallengeId },
- locationBeforeTransition: { pathname } = {}
- } = state;
- const firstChallenge = firstChallengeSelector(state);
- const { user: { currentChallengeId } } = userSelector(state);
- const isOnAChallenge = (/^\/[^\/]{2,6}\/challenges/).test(pathname);
-
- if (!currentChallengeId) {
- finalChallenge = firstChallenge;
- } else {
- finalChallenge = challengeMap[
- challengeIdToName[ currentChallengeId ]
- ];
- }
- if (
- // data might not be there yet, ignore for now
- !finalChallenge ||
- // are we already on that challenge?
- (isOnAChallenge && finalChallenge.id === currentlyLoadedChallengeId)
- ) {
- // don't reload if the challenge is already loaded.
- // This may change to toast to avoid user confusion
- return Observable.empty();
- }
- return Observable.of(
- updateCurrentChallenge(finalChallenge),
- push(
- `/challenges/${finalChallenge.block}/${finalChallenge.dashedName}`
- )
- );
- });
-}
-
-export default combineSagas(
- updateMyCurrentChallengeSaga,
- loadCurrentChallengeSaga
-);
diff --git a/common/app/redux/nav-size-epic.js b/common/app/redux/nav-size-epic.js
new file mode 100644
index 0000000000..2a89a861cb
--- /dev/null
+++ b/common/app/redux/nav-size-epic.js
@@ -0,0 +1,13 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+
+import { updateNavHeight } from '../Panes/redux';
+
+export default function navSizeEpic(actions, _, { document }) {
+ return actions::ofType(types.appMounted)
+ .map(() => {
+ const navbar = document.getElementById('navbar');
+ return updateNavHeight(navbar.clientHeight || 50);
+ });
+}
diff --git a/common/app/redux/reducer.js b/common/app/redux/reducer.js
deleted file mode 100644
index 754345ac76..0000000000
--- a/common/app/redux/reducer.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { handleActions } from 'redux-actions';
-import types from './types';
-
-const initialState = {
- title: 'Learn To Code | freeCodeCamp',
- isSignInAttempted: false,
- user: '',
- lang: '',
- csrfToken: '',
- theme: 'default'
-};
-
-export default handleActions(
- {
- [types.updateTitle]: (state, { payload = 'Learn To Code' }) => ({
- ...state,
- title: payload + ' | freeCodeCamp'
- }),
-
- [types.updateThisUser]: (state, { payload: user }) => ({
- ...state,
- user,
- isSignInAttempted: true
- }),
- [types.updateAppLang]: (state, { payload = 'en' }) =>({
- ...state,
- lang: payload
- }),
- [types.updateTheme]: (state, { payload = 'default' }) => ({
- ...state,
- theme: payload
- }),
- [types.showSignIn]: state => ({
- ...state,
- isSignInAttempted: true
- }),
-
- [types.challengeSaved]: (state, { payload: { points = 0 } }) => ({
- ...state,
- points
- }),
- [types.delayedRedirect]: (state, { payload }) => ({
- ...state,
- delayedRedirect: payload
- }),
- [types.openDropdown]: state => ({
- ...state,
- isNavDropdownOpen: true
- }),
- [types.closeDropdown]: state => ({
- ...state,
- isNavDropdownOpen: false
- })
- },
- initialState
-);
diff --git a/common/app/redux/selectors.js b/common/app/redux/selectors.js
deleted file mode 100644
index 0a56f23a23..0000000000
--- a/common/app/redux/selectors.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createSelector } from 'reselect';
-
-export const userSelector = createSelector(
- state => state.app.user,
- state => state.entities.user,
- (username, userMap) => ({
- user: userMap[username] || {}
- })
-);
-
-export const firstChallengeSelector = createSelector(
- state => state.entities.challenge,
- state => state.entities.block,
- state => state.entities.superBlock,
- state => state.challengesApp.superBlocks,
- (challengeMap, blockMap, superBlockMap, superBlocks) => {
- if (
- !challengeMap ||
- !blockMap ||
- !superBlockMap ||
- !superBlocks
- ) {
- return {};
- }
- try {
- return challengeMap[
- blockMap[
- superBlockMap[
- superBlocks[0]
- ].blocks[0]
- ].challenges[0]
- ];
- } catch (err) {
- console.error(err);
- return {};
- }
- }
-);
diff --git a/common/app/redux/types.js b/common/app/redux/types.js
deleted file mode 100644
index 766b695c85..0000000000
--- a/common/app/redux/types.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { createTypes } from 'redux-create-types';
-
-export default createTypes([
- 'analytics',
- 'updateTitle',
- 'updateAppLang',
-
- 'fetchUser',
- 'addUser',
- 'updateThisUser',
- 'updateUserPoints',
- 'updateUserFlag',
- 'updateUserEmail',
- 'updateUserLang',
- 'updateUserChallenge',
- 'showSignIn',
- 'loadCurrentChallenge',
- 'updateMyCurrentChallenge',
-
- 'handleError',
- // used to hit the server
- 'hardGoTo',
- 'delayedRedirect',
-
- // data handling
- 'updateChallengesData',
- 'updateHikesData',
-
- // night mode
- 'toggleNightMode',
- 'updateTheme',
- 'addThemeToBody',
-
- // nav
- 'openDropdown',
- 'closeDropdown'
-], 'app');
diff --git a/common/app/redux/update-my-challenge-epic.js b/common/app/redux/update-my-challenge-epic.js
new file mode 100644
index 0000000000..26a74d9058
--- /dev/null
+++ b/common/app/redux/update-my-challenge-epic.js
@@ -0,0 +1,48 @@
+import { Observable } from 'rx';
+import { ofType } from 'redux-epic';
+import debug from 'debug';
+
+import {
+ types,
+ createErrorObservable,
+
+ challengeSelector,
+ csrfSelector,
+ userSelector
+} from './';
+import { updateUserCurrentChallenge } from '../entities';
+import { postJSON$ } from '../../utils/ajax-stream';
+
+const log = debug('fcc:app:redux:up-my-challenge-epic');
+export default function updateMyCurrentChallengeEpic(actions, { getState }) {
+ const updateChallenge = actions::ofType(types.updateCurrentChallenge)
+ .map(() => {
+ const state = getState();
+ const { username } = userSelector(state);
+ const { id } = challengeSelector(state);
+ const csrf = csrfSelector(state);
+ return {
+ username,
+ csrf,
+ currentChallengeId: id
+ };
+ })
+ .filter(({ username }) => !!username)
+ .distinctUntilChanged(x => x.currentChallengeId);
+ const optimistic = updateChallenge.map(updateUserCurrentChallenge);
+ const ajaxUpdate = updateChallenge
+ .debounce(250)
+ .flatMapLatest(({ csrf, currentChallengeId }) => {
+ return postJSON$(
+ '/update-my-current-challenge',
+ {
+ currentChallengeId,
+ _csrf: csrf
+ }
+ )
+ .map(({ message }) => log(message))
+ .ignoreElements()
+ .catch(createErrorObservable);
+ });
+ return Observable.merge(optimistic, ajaxUpdate);
+}
diff --git a/common/app/redux/utils.js b/common/app/redux/utils.js
new file mode 100644
index 0000000000..9be79e8804
--- /dev/null
+++ b/common/app/redux/utils.js
@@ -0,0 +1,33 @@
+import flowRight from 'lodash/flowRight';
+import createNameIdMap from '../../utils/create-name-id-map.js';
+
+
+export function filterComingSoonBetaChallenge(
+ isDev = false,
+ { isComingSoon, isBeta }
+) {
+ return !(isComingSoon || isBeta) ||
+ isDev;
+}
+
+export function filterComingSoonBetaFromEntities(
+ { challenge: challengeMap, ...rest },
+ isDev = false
+) {
+ const filter = filterComingSoonBetaChallenge.bind(null, isDev);
+ return {
+ ...rest,
+ challenge: Object.keys(challengeMap)
+ .map(dashedName => challengeMap[dashedName])
+ .filter(filter)
+ .reduce((challengeMap, challenge) => {
+ challengeMap[challenge.dashedName] = challenge;
+ return challengeMap;
+ }, {})
+ };
+}
+
+export const shapeChallenges = flowRight(
+ filterComingSoonBetaFromEntities,
+ createNameIdMap
+);
diff --git a/common/app/redux/utils.test.js b/common/app/redux/utils.test.js
new file mode 100644
index 0000000000..08cee9e2ed
--- /dev/null
+++ b/common/app/redux/utils.test.js
@@ -0,0 +1,92 @@
+import test from 'tape';
+import {
+ filterComingSoonBetaChallenge,
+ filterComingSoonBetaFromEntities
+} from './utils.js';
+
+
+test.test('filterComingSoonBetaChallenge', t => {
+ t.plan(4);
+ t.test('should return true when not coming-soon/beta', t => {
+ let isDev;
+ t.ok(filterComingSoonBetaChallenge(isDev, {}));
+ t.ok(filterComingSoonBetaChallenge(true, {}));
+ t.end();
+ });
+ t.test('should return false when isComingSoon', t => {
+ let isDev;
+ t.notOk(filterComingSoonBetaChallenge(isDev, { isComingSoon: true }));
+ t.end();
+ });
+ t.test('should return false when isBeta', t => {
+ let isDev;
+ t.notOk(filterComingSoonBetaChallenge(isDev, { isBeta: true }));
+ t.end();
+ });
+ t.test('should always return true when in dev', t => {
+ let isDev = true;
+ t.ok(filterComingSoonBetaChallenge(isDev, { isBeta: true }));
+ t.ok(filterComingSoonBetaChallenge(isDev, { isComingSoon: true }));
+ t.ok(filterComingSoonBetaChallenge(
+ isDev,
+ { isBeta: true, isCompleted: true }
+ ));
+ t.end();
+ });
+});
+test.test('filterComingSoonBetaFromEntities', t => {
+ t.plan(2);
+ t.test('should filter isBeta|coming-soon by default', t => {
+ t.plan(2);
+ const normalChallenge = { dashedName: 'normal-challenge' };
+ const entities = {
+ challenge: {
+ 'coming-soon': {
+ isComingSoon: true
+ },
+ 'is-beta': {
+ isBeta: true
+ },
+ [normalChallenge.dashedName]: normalChallenge
+ }
+ };
+ const actual = filterComingSoonBetaFromEntities(entities);
+ t.isEqual(
+ Object.keys(actual.challenge).length,
+ 1,
+ 'did not filter the correct amount of challenges'
+ );
+ t.isEqual(
+ actual.challenge[normalChallenge.dashedName],
+ normalChallenge,
+ 'did not return the correct challenge'
+ );
+ });
+ t.test('should not filter isBeta|coming-soon when isDev', t => {
+ t.plan(1);
+ const normalChallenge = { dashedName: 'normal-challenge' };
+ const entities = {
+ challenge: {
+ 'coming-soon': {
+ dashedName: 'coming-soon',
+ isComingSoon: true
+ },
+ 'is-beta': {
+ dashedName: 'is-beta',
+ isBeta: true
+ },
+ 'is-both': {
+ dashedName: 'is-both',
+ isBeta: true
+ },
+ [normalChallenge.dashedName]: normalChallenge
+ }
+ };
+ const actual = filterComingSoonBetaFromEntities(entities, true);
+ t.isEqual(
+ Object.keys(actual.challenge).length,
+ 4,
+ 'filtered challenges'
+ );
+ });
+});
diff --git a/common/app/routes/challenges/Bug-Modal.jsx b/common/app/routes/challenges/Bug-Modal.jsx
index d67c218574..5d301c163b 100644
--- a/common/app/routes/challenges/Bug-Modal.jsx
+++ b/common/app/routes/challenges/Bug-Modal.jsx
@@ -4,10 +4,15 @@ import { Button, Modal } from 'react-bootstrap';
import PureComponent from 'react-pure-render/component';
import ns from './ns.json';
+import {
+ createIssue,
+ openIssueSearch,
+ closeBugModal,
-import { createIssue, openIssueSearch, closeBugModal } from './redux/actions';
+ bugModalSelector
+} from './redux';
-const mapStateToProps = state => ({ isOpen: state.challengesApp.isBugOpen });
+const mapStateToProps = state => ({ isOpen: bugModalSelector(state) });
const mapDispatchToProps = { createIssue, openIssueSearch, closeBugModal };
const bugLink = 'http://forum.freecodecamp.com/t/how-to-report-a-bug/19543';
diff --git a/common/app/routes/challenges/Code-Mirror-Skeleton.jsx b/common/app/routes/challenges/Code-Mirror-Skeleton.jsx
index a9fc788d79..b694652ba4 100644
--- a/common/app/routes/challenges/Code-Mirror-Skeleton.jsx
+++ b/common/app/routes/challenges/Code-Mirror-Skeleton.jsx
@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
import PureComponent from 'react-pure-render/component';
import { Grid, Col, Row } from 'react-bootstrap';
+import ns from './ns.json';
+
const propTypes = {
content: PropTypes.string
};
@@ -10,7 +12,7 @@ export default class CodeMirrorSkeleton extends PureComponent {
renderLine(line, i) {
return (
-
{ this.renderBlocks(blocks) }
diff --git a/common/app/routes/challenges/views/map/index.js b/common/app/Map/index.js
similarity index 100%
rename from common/app/routes/challenges/views/map/index.js
rename to common/app/Map/index.js
diff --git a/common/app/Map/map.less b/common/app/Map/map.less
new file mode 100644
index 0000000000..0dfb49d8a3
--- /dev/null
+++ b/common/app/Map/map.less
@@ -0,0 +1,118 @@
+// should be the same as the filename and ./ns.json
+@ns: map;
+
+.@{ns}-accordion {
+ max-width: 700px;
+ overflow-y: auto;
+ width: 100%;
+
+ a:focus {
+ text-decoration: none;
+ color:darkgreen;
+ }
+
+ a:focus:hover {
+ text-decoration: underline;
+ color:#001800;
+ }
+
+ @media (max-width: 720px) {
+ left: 0;
+ right: 0;
+ width: 100%;
+ top: 195px;
+ bottom: 0;
+ // position:absolute;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ h2 {
+ margin:15px 0;
+ padding:0;
+ &:first-of-type {
+ margin-top:0;
+ }
+ > a {
+ padding: 10px 0;
+ padding-left: 50px;
+ padding-right: 20px;
+ font-size: 20px;
+ }
+ }
+ a {
+ margin: 10px 0;
+ padding: 0;
+ > h3 {
+ clear:both;
+ font-size:20px;
+ }
+ }
+ }
+
+ .@{ns}-caret {
+ color: @gray-dark;
+ text-decoration: none;
+ // make sure all carats are fixed width
+ width: 10px;
+ }
+}
+
+
+.@{ns}-accordion-block .@{ns}-accordion-panel-heading {
+ padding-left: 26px;
+}
+
+.@{ns}-challenge-title, .@{ns}-accordion-panel-heading {
+ background: @body-bg;
+ line-height: 26px;
+ padding: 2px 12px 2px 10px;
+ width:100%;
+}
+
+.@{ns}-challenge-title {
+ &::before {
+ padding-right: 6px;
+ }
+ padding-left: 40px;
+ a {
+ cursor: pointer;
+ }
+}
+
+.@{ns}-accordion-panel-heading a {
+ cursor: pointer;
+ display: block;
+}
+
+.@{ns}-accordion-panel-collapse {
+ transition: height 0.001s;
+}
+
+.@{ns}-block-time {
+ color: #BBBBBB;
+ @media (min-width: 721px) {
+ float: right;
+ }
+}
+
+.@{ns}-block-description {
+ margin:0;
+ margin-top:-10px;
+ padding:0 15px 23px 30px;
+}
+
+
+.night {
+ .@{ns}-accordion .no-link-underline {
+ color: @brand-primary;
+ }
+ .@{ns}-accordion h2 > a {
+ background: #666;
+ }
+ .@{ns}-accordion a:focus, #noneFound {
+ color: #ABABAB;
+ }
+ .challenge-title {
+ color: @night-text-color;
+ }
+}
diff --git a/common/app/Map/ns.json b/common/app/Map/ns.json
new file mode 100644
index 0000000000..6bc66fc09e
--- /dev/null
+++ b/common/app/Map/ns.json
@@ -0,0 +1 @@
+"map"
diff --git a/common/app/Map/redux/index.js b/common/app/Map/redux/index.js
new file mode 100644
index 0000000000..6c6bc452d6
--- /dev/null
+++ b/common/app/Map/redux/index.js
@@ -0,0 +1,129 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+import { createSelector } from 'reselect';
+import identity from 'lodash/identity';
+import capitalize from 'lodash/capitalize';
+
+import selectChallengeEpic from './select-challenge-epic.js';
+
+import * as utils from './utils.js';
+import ns from '../ns.json';
+import {
+ types as app,
+ createEventMetaCreator
+} from '../../redux';
+
+export const epics = [
+ selectChallengeEpic
+];
+
+export const types = createTypes([
+ 'initMap',
+
+ 'toggleThisPanel',
+
+ 'isAllCollapsed',
+ 'collapseAll',
+ 'expandAll',
+
+ 'clickOnChallenge'
+], ns);
+
+export const initMap = createAction(types.initMap);
+
+export const toggleThisPanel = createAction(types.toggleThisPanel);
+export const collapseAll = createAction(types.collapseAll);
+
+export const expandAll = createAction(types.expandAll);
+export const clickOnChallenge = createAction(
+ types.clickOnChallenge,
+ identity,
+ createEventMetaCreator({
+ category: capitalize(ns),
+ action: 'click',
+ label: types.clickOnChallenge
+ })
+);
+
+const initialState = {
+ mapUi: { isAllCollapsed: false },
+ superBlocks: []
+};
+
+export const getNS = state => state[ns];
+export const allColapsedSelector = state => state[ns].isAllCollapsed;
+export const mapSelector = state => getNS(state).mapUi;
+export function makePanelOpenSelector(name) {
+ return createSelector(
+ mapSelector,
+ mapUi => {
+ const node = utils.getNode(mapUi, name);
+ return node ? node.isOpen : false;
+ }
+ );
+}
+
+export function makePanelHiddenSelector(name) {
+ return createSelector(
+ mapSelector,
+ mapUi => {
+ const node = utils.getNode(mapUi, name);
+ return node ? node.isHidden : false;
+ }
+ );
+}
+// interface Map{
+// children: [...{
+// name: (superBlock: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (blockName: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (challengeName: String),
+// isHidden: Boolean
+// }]
+// }]
+// }
+// }
+export default function createReducer() {
+ const reducer = handleActions(
+ {
+ [types.toggleThisPanel]: (state, { payload: name }) => {
+ return {
+ ...state,
+ mapUi: utils.toggleThisPanel(state.mapUi, name)
+ };
+ },
+ [types.collapseAll]: state => {
+ const mapUi = utils.collapseAllPanels(state.mapUi);
+ mapUi.isAllCollapsed = true;
+ return {
+ ...state,
+ mapUi
+ };
+ },
+ [types.expandAll]: state => {
+ const mapUi = utils.expandAllPanels(state.mapUi);
+ mapUi.isAllCollapsed = false;
+ return {
+ ...state,
+ mapUi
+ };
+ },
+ [app.fetchChallenges.complete]: (state, { payload }) => {
+ const { entities, result } = payload;
+ return {
+ ...state,
+ mapUi: utils.createMapUi(entities, result)
+ };
+ }
+ },
+ initialState
+ );
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/Map/redux/select-challenge-epic.js b/common/app/Map/redux/select-challenge-epic.js
new file mode 100644
index 0000000000..090bc019cf
--- /dev/null
+++ b/common/app/Map/redux/select-challenge-epic.js
@@ -0,0 +1,10 @@
+import { ofType } from 'redux-epic';
+
+import { types } from './';
+import { updateCurrentChallenge } from '../../redux';
+
+export default function selectChallengeEpic(actions) {
+ return actions::ofType(types.clickOnChallenge)
+ .pluck('payload')
+ .map(updateCurrentChallenge);
+}
diff --git a/common/app/Map/redux/utils.js b/common/app/Map/redux/utils.js
new file mode 100644
index 0000000000..4afdbdfc8e
--- /dev/null
+++ b/common/app/Map/redux/utils.js
@@ -0,0 +1,159 @@
+import protect from '../../utils/empty-protector';
+
+const throwIfUndefined = () => {
+ throw new Error('Challenge does not have a title');
+};
+
+export function createSearchTitle(
+ name = throwIfUndefined(),
+ challengeMap = {}
+) {
+ return challengeMap[name] || name;
+}
+// interface Node {
+// isHidden: Boolean,
+// children: Void|[ ...Node ],
+// isOpen?: Boolean
+// }
+//
+// interface MapUi
+// {
+// children: [...{
+// name: (superBlock: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (blockName: String),
+// isOpen: Boolean,
+// isHidden: Boolean,
+// children: [...{
+// name: (challengeName: String),
+// isHidden: Boolean
+// }]
+// }]
+// }]
+// }
+export function createMapUi(
+ {
+ block: blockMap,
+ challenge: challengeMap,
+ superBlock: superBlockMap
+ } = {},
+ { superBlocks } = {}
+) {
+ if (!superBlocks || !superBlockMap || !blockMap) {
+ return {};
+ }
+ return {
+ children: superBlocks.map(superBlock => {
+ return {
+ name: superBlock,
+ isOpen: false,
+ isHidden: false,
+ children: protect(superBlockMap[superBlock]).blocks.map(block => {
+ return {
+ name: block,
+ isOpen: false,
+ isHidden: false,
+ children: protect(blockMap[block]).challenges.map(challenge => {
+ return {
+ name: challenge,
+ title: createSearchTitle(challenge, challengeMap),
+ isHidden: false,
+ children: null
+ };
+ })
+ };
+ })
+ };
+ })
+ };
+}
+
+// synchronise
+// traverseMapUi(
+// tree: MapUi|Node,
+// update: ((MapUi|Node) => MapUi|Node)
+// ) => MapUi|Node
+export function traverseMapUi(tree, update) {
+ let childrenChanged;
+ if (!Array.isArray(tree.children)) {
+ return update(tree);
+ }
+ const newChildren = tree.children.map(node => {
+ const newNode = traverseMapUi(node, update);
+ if (!childrenChanged && newNode !== node) {
+ childrenChanged = true;
+ }
+ return newNode;
+ });
+ if (childrenChanged) {
+ tree = {
+ ...tree,
+ children: newChildren
+ };
+ }
+ return update(tree);
+}
+
+// synchronise
+// getNode(tree: MapUi, name: String) => MapUi
+export function getNode(tree, name) {
+ let node;
+ traverseMapUi(tree, thisNode => {
+ if (thisNode.name === name) {
+ node = thisNode;
+ }
+ return thisNode;
+ });
+ return node;
+}
+
+// synchronise
+// updateSingelNode(
+// tree: MapUi,
+// name: String,
+// update(MapUi|Node) => MapUi|Node
+// ) => MapUi
+export function updateSingleNode(tree, name, update) {
+ return traverseMapUi(tree, node => {
+ if (name !== node.name) {
+ return node;
+ }
+ return update(node);
+ });
+}
+
+// synchronise
+// toggleThisPanel(tree: MapUi, name: String) => MapUi
+export function toggleThisPanel(tree, name) {
+ return updateSingleNode(tree, name, node => {
+ return {
+ ...node,
+ isOpen: !node.isOpen
+ };
+ });
+}
+
+// toggleAllPanels(tree: MapUi, isOpen: Boolean = false ) => MapUi
+export function toggleAllPanels(tree, isOpen = false) {
+ return traverseMapUi(tree, node => {
+ if (!Array.isArray(node.children) || node.isOpen === isOpen) {
+ return node;
+ }
+ return {
+ ...node,
+ isOpen
+ };
+ });
+}
+
+// collapseAllPanels(tree: MapUi) => MapUi
+export function collapseAllPanels(tree) {
+ return toggleAllPanels(tree);
+}
+
+// expandAllPanels(tree: MapUi) => MapUi
+export function expandAllPanels(tree) {
+ return toggleAllPanels(tree, true);
+}
diff --git a/common/app/Map/redux/utils.test.js b/common/app/Map/redux/utils.test.js
new file mode 100644
index 0000000000..de761a9c3c
--- /dev/null
+++ b/common/app/Map/redux/utils.test.js
@@ -0,0 +1,215 @@
+import test from 'tape';
+import sinon from 'sinon';
+
+import {
+ getNode,
+ createMapUi,
+ traverseMapUi,
+ updateSingleNode,
+ toggleThisPanel,
+ expandAllPanels,
+ collapseAllPanels
+} from './utils.js';
+
+test('createMapUi', t => {
+ t.plan(3);
+ t.test('should return an `{}` when proper args not supplied', t => {
+ t.plan(3);
+ t.equal(
+ Object.keys(createMapUi()).length,
+ 0
+ );
+ t.equal(
+ Object.keys(createMapUi({}, [])).length,
+ 0
+ );
+ t.equal(
+ Object.keys(createMapUi({ superBlock: {} }, [])).length,
+ 0
+ );
+ });
+ t.test('should return a map tree', t => {
+ const expected = {
+ children: [{
+ name: 'superBlockA',
+ children: [{
+ name: 'blockA',
+ children: [{
+ name: 'challengeA'
+ }]
+ }]
+ }]
+ };
+ const actual = createMapUi({
+ superBlock: {
+ superBlockA: {
+ blocks: [
+ 'blockA'
+ ]
+ }
+ },
+ block: {
+ blockA: {
+ challenges: [
+ 'challengeA'
+ ]
+ }
+ }
+ },
+ { superBlocks: ['superBlockA'] },
+ { challengeA: 'ChallengeA title'}
+ );
+ t.plan(3);
+ t.equal(actual.children[0].name, expected.children[0].name);
+ t.equal(
+ actual.children[0].children[0].name,
+ expected.children[0].children[0].name
+ );
+ t.equal(
+ actual.children[0].children[0].children[0].name,
+ expected.children[0].children[0].children[0].name
+ );
+ });
+ t.test('should protect against malformed data', t => {
+ t.plan(2);
+ t.equal(
+ createMapUi({
+ superBlock: {},
+ block: {
+ blockA: {
+ challenges: [
+ 'challengeA'
+ ]
+ }
+ }
+ }, { superBlocks: ['superBlockA'] }).children[0].children.length,
+ 0
+ );
+ t.equal(
+ createMapUi({
+ superBlock: {
+ superBlockA: {
+ blocks: [
+ 'blockA'
+ ]
+ }
+ },
+ block: {}
+ },
+ { superBlocks: ['superBlockA'] }).children[0].children[0].children.length,
+ 0
+ );
+ });
+});
+test('traverseMapUi', t => {
+ t.test('should return tree', t => {
+ t.plan(2);
+ const expectedTree = {};
+ const actaulTree = traverseMapUi(expectedTree, tree => {
+ t.equal(tree, expectedTree);
+ return tree;
+ });
+ t.equal(actaulTree, expectedTree);
+ });
+ t.test('should hit every node', t => {
+ t.plan(4);
+ const expected = { children: [{ children: [{}] }] };
+ const spy = sinon.spy(t => t);
+ spy.withArgs(expected);
+ spy.withArgs(expected.children[0]);
+ spy.withArgs(expected.children[0].children[0]);
+ traverseMapUi(expected, spy);
+ t.equal(spy.callCount, 3);
+ t.ok(spy.withArgs(expected).calledOnce, 'foo');
+ t.ok(spy.withArgs(expected.children[0]).calledOnce, 'bar');
+ t.ok(spy.withArgs(expected.children[0].children[0]).calledOnce, 'baz');
+ });
+ t.test('should create new object when children change', t => {
+ t.plan(9);
+ const expected = { children: [{ bar: true }, {}] };
+ const actual = traverseMapUi(expected, node => ({ ...node, foo: true }));
+ t.notEqual(actual, expected);
+ t.notEqual(actual.children, expected.children);
+ t.notEqual(actual.children[0], expected.children[0]);
+ t.notEqual(actual.children[1], expected.children[1]);
+ t.equal(actual.children[0].bar, expected.children[0].bar);
+ t.notOk(expected.children[0].foo);
+ t.notOk(expected.children[1].foo);
+ t.true(actual.children[0].foo);
+ t.true(actual.children[1].foo);
+ });
+});
+test('getNode', t => {
+ t.test('should return node', t => {
+ t.plan(1);
+ const expected = { name: 'foo' };
+ const tree = { children: [{ name: 'notfoo' }, expected ] };
+ const actual = getNode(tree, 'foo');
+ t.equal(expected, actual);
+ });
+ t.test('should returned undefined if not found', t => {
+ t.plan(1);
+ const tree = {
+ children: [ { name: 'foo' }, { children: [ { name: 'bar' } ] } ]
+ };
+ const actual = getNode(tree, 'baz');
+ t.notOk(actual);
+ });
+});
+test('updateSingleNode', t => {
+ t.test('should update single node', t => {
+ const expected = { name: 'foo' };
+ const untouched = { name: 'notFoo' };
+ const actual = updateSingleNode(
+ { children: [ untouched, expected ] },
+ 'foo',
+ node => ({ ...node, tag: true })
+ );
+ t.plan(4);
+ t.ok(actual.children[1].tag);
+ t.equal(actual.children[1].name, expected.name);
+ t.notEqual(actual.children[1], expected);
+ t.equal(actual.children[0], untouched);
+ });
+});
+test('toggleThisPanel', t => {
+ t.test('should update single node', t => {
+ const expected = { name: 'foo', isOpen: true };
+ const actual = toggleThisPanel(
+ { children: [ { name: 'foo', isOpen: false }] },
+ 'foo'
+ );
+ t.plan(1);
+ t.deepLooseEqual(actual.children[0], expected);
+ });
+});
+test('toggleAllPanels', t => {
+ t.test('should add `isOpen: true` to every node without children', t => {
+ const expected = {
+ isOpen: true,
+ children: [{
+ isOpen: true,
+ children: [{}, {}]
+ }]
+ };
+ const actual = expandAllPanels({ children: [{ children: [{}, {}] }] });
+ t.plan(1);
+ t.deepLooseEqual(actual, expected);
+ });
+ t.test('should add `isOpen: false` to every node without children', t => {
+ const leaf = {};
+ const expected = {
+ isOpen: false,
+ children: [{
+ isOpen: false,
+ children: [{}, leaf]
+ }]
+ };
+ const actual = collapseAllPanels(
+ { isOpen: true, children: [{ children: [{}, leaf]}]},
+ );
+ t.plan(2);
+ t.deepLooseEqual(actual, expected);
+ t.equal(actual.children[0].children[1], leaf);
+ });
+});
diff --git a/common/app/Nav/Bin-Button.jsx b/common/app/Nav/Bin-Button.jsx
new file mode 100644
index 0000000000..47d822f316
--- /dev/null
+++ b/common/app/Nav/Bin-Button.jsx
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import { NavItem } from 'react-bootstrap';
+
+const propTypes = {
+ content: PropTypes.string,
+ handleClick: PropTypes.func.isRequired
+};
+
+export default function BinButton({ content, handleClick }) {
+ return (
+
+ { children }
+
+ );
+}
+Pane.displayName = 'Pane';
+Pane.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Pane);
diff --git a/common/app/Panes/Panes-Container.jsx b/common/app/Panes/Panes-Container.jsx
new file mode 100644
index 0000000000..cec7878bcd
--- /dev/null
+++ b/common/app/Panes/Panes-Container.jsx
@@ -0,0 +1,58 @@
+import React, { PureComponent, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import Panes from './Panes.jsx';
+import {
+ panesMounted,
+ panesUpdated,
+ panesWillMount,
+ panesWillUnmount
+} from './redux';
+
+const mapStateToProps = null;
+const mapDispatchToProps = {
+ panesMounted,
+ panesUpdated,
+ panesWillMount,
+ panesWillUnmount
+};
+
+const propTypes = {
+ nameToComponent: PropTypes.object.isRequired,
+ panesMounted: PropTypes.func.isRequired,
+ panesUpdated: PropTypes.func.isRequired,
+ panesWillMount: PropTypes.func.isRequired,
+ panesWillUnmount: PropTypes.func.isRequired
+};
+
+export class PanesContainer extends PureComponent {
+ componentWillMount() {
+ this.props.panesWillMount(Object.keys(this.props.nameToComponent));
+ }
+ componentDidMount() {
+ this.props.panesMounted();
+ }
+
+ componentWillUnmount() {
+ this.props.panesWillUnmount();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.nameToComponent !== this.props.nameToComponent) {
+ this.props.panesUpdated(Object.keys(nextProps.nameToComponent));
+ }
+ }
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+Panes.displayName = 'Panes';
+Panes.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Panes);
diff --git a/common/app/Panes/index.js b/common/app/Panes/index.js
new file mode 100644
index 0000000000..a6ad764581
--- /dev/null
+++ b/common/app/Panes/index.js
@@ -0,0 +1 @@
+export default from './Panes-Container.jsx';
diff --git a/common/app/Panes/ns.json b/common/app/Panes/ns.json
new file mode 100644
index 0000000000..23b82c1253
--- /dev/null
+++ b/common/app/Panes/ns.json
@@ -0,0 +1 @@
+"panes"
diff --git a/common/app/Panes/redux/divider-epic.js b/common/app/Panes/redux/divider-epic.js
new file mode 100644
index 0000000000..130c472588
--- /dev/null
+++ b/common/app/Panes/redux/divider-epic.js
@@ -0,0 +1,40 @@
+import 'rx-dom';
+import { Observable, Scheduler } from 'rx';
+import { combineEpics, ofType } from 'redux-epic';
+
+import {
+ types,
+
+ mouseReleased,
+ dividerMoved,
+
+ pressedDividerSelector
+} from './';
+
+export function dividerReleasedEpic(actions, _, { document }) {
+ return actions::ofType(types.dividerClicked)
+ .switchMap(() => Observable.fromEvent(document, 'mouseup')
+ .map(() => mouseReleased())
+ // allow mouse up on divider to go first
+ .delay(1)
+ .takeUntil(actions::ofType(types.mouseReleased))
+ );
+}
+
+export function dividerMovedEpic(actions, { getState }, { document }) {
+ return actions::ofType(types.dividerClicked)
+ .switchMap(() => Observable.fromEvent(document, 'mousemove')
+ // prevent mouse drags from highlighting text
+ .do(e => e.preventDefault())
+ .map(({ clientX }) => clientX)
+ .throttle(1, Scheduler.requestAnimationFrame)
+ .filter(() => {
+ const divider = pressedDividerSelector(getState());
+ return !!divider || divider === 0;
+ })
+ .map(dividerMoved)
+ .takeUntil(actions::ofType(types.mouseReleased))
+ );
+}
+
+export default combineEpics(dividerReleasedEpic, dividerMovedEpic);
diff --git a/common/app/Panes/redux/index.js b/common/app/Panes/redux/index.js
new file mode 100644
index 0000000000..ad4e608b1b
--- /dev/null
+++ b/common/app/Panes/redux/index.js
@@ -0,0 +1,236 @@
+import { combineActions, createAction, handleActions } from 'redux-actions';
+import { createTypes } from 'redux-create-types';
+import clamp from 'lodash/clamp';
+
+import ns from '../ns.json';
+
+import windowEpic from './window-epic.js';
+import dividerEpic from './divider-epic.js';
+
+const isDev = process.env.NODE_ENV !== 'production';
+export const epics = [
+ windowEpic,
+ dividerEpic
+];
+
+export const types = createTypes([
+ 'panesMounted',
+ 'panesUpdated',
+ 'panesWillMount',
+ 'panesWillUnmount',
+ 'updateSize',
+
+ 'dividerClicked',
+ 'dividerMoved',
+ 'mouseReleased',
+ 'windowResized',
+
+ // commands
+ 'updateNavHeight',
+ 'hidePane'
+], ns);
+
+export const panesMounted = createAction(types.panesMounted);
+export const panesUpdated = createAction(types.panesUpdated);
+export const panesWillMount = createAction(types.panesWillMount);
+export const panesWillUnmount = createAction(types.panesWillUnmount);
+
+export const dividerClicked = createAction(types.dividerClicked);
+export const dividerMoved = createAction(types.dividerMoved);
+export const mouseReleased = createAction(types.mouseReleased);
+export const windowResized = createAction(types.windowResized);
+
+// commands
+export const updateNavHeight = createAction(types.updateNavHeight);
+export const hidePane = createAction(types.hidePane);
+
+const initialState = {
+ height: 600,
+ width: 800,
+ navHeight: 50,
+ panes: [],
+ panesByName: {},
+ pressedDivider: null,
+ nameToType: {}
+};
+export const getNS = state => state[ns];
+export const heightSelector = state => {
+ const { navHeight, height } = getNS(state);
+ return height - navHeight;
+};
+
+export const panesSelector = state => getNS(state).panes;
+export const panesByNameSelector = state => getNS(state).panesByName;
+export const pressedDividerSelector =
+ state => getNS(state).pressedDivider;
+export const widthSelector = state => getNS(state).width;
+export const nameToTypeSelector = state => getNS(state).nameToType;
+
+function isPanesAction({ type } = {}, typeToName) {
+ return !!typeToName[type];
+}
+
+function getDividerLeft(numOfPanes, index) {
+ let dividerLeft = null;
+ if (numOfPanes > 1 && numOfPanes !== index + 1) {
+ dividerLeft = (100 / numOfPanes) * (index + 1);
+ }
+ return dividerLeft;
+}
+
+export default function createPanesAspects(typeToName) {
+ if (isDev) {
+ Object.keys(typeToName).forEach(actionType => {
+ if (actionType === 'undefined') {
+ throw new Error(
+ `action type for ${typeToName[actionType]} is undefined`
+ );
+ }
+ });
+ }
+ const nameToType = Object.keys(typeToName).reduce((map, type) => {
+ map[typeToName[type]] = type;
+ return map;
+ }, {});
+ function getInitialState() {
+ return {
+ ...initialState,
+ nameToType
+ };
+ }
+
+ function middleware() {
+ return next => action => {
+ let finalAction = action;
+ if (isPanesAction(action, typeToName)) {
+ finalAction = {
+ ...action,
+ meta: {
+ ...action.meta,
+ isPaneAction: true
+ }
+ };
+ }
+ return next(finalAction);
+ };
+ }
+
+ const reducer = handleActions({
+ [types.dividerClicked]: (state, { payload: name }) => ({
+ ...state,
+ pressedDivider: name
+ }),
+ [types.dividerMoved]: (state, { payload: clientX }) => {
+ const { width, pressedDivider: paneName } = state;
+ const dividerBuffer = (200 / width) * 100;
+ const paneIndex = state.panes.indexOf(paneName);
+ const currentPane = state.panesByName[paneName];
+ const rightPane = state.panesByName[state.panes[paneIndex + 1]] || {};
+ const leftPane = state.panesByName[state.panes[paneIndex - 1]] || {};
+ const rightBound = (rightPane.dividerLeft || 100) - dividerBuffer;
+ const leftBound = (leftPane.dividerLeft || 0) + dividerBuffer;
+ const newPosition = clamp(
+ (clientX / width) * 100,
+ leftBound,
+ rightBound
+ );
+ return {
+ ...state,
+ panesByName: {
+ ...state.panesByName,
+ [currentPane.name]: {
+ ...currentPane,
+ dividerLeft: newPosition
+ }
+ }
+ };
+ },
+ [types.mouseReleased]: state => ({ ...state, pressedDivider: null }),
+ [types.windowResized]: (state, { payload: { height, width } }) => ({
+ ...state,
+ height,
+ width
+ }),
+ // used to clear bin buttons
+ [types.panesWillUnmount]: state => ({
+ ...state,
+ panes: [],
+ panesByName: {},
+ pressedDivider: null
+ }),
+ [
+ combineActions(
+ panesWillMount,
+ panesUpdated
+ )
+ ]: (state, { payload: panes }) => {
+ const numOfPanes = panes.length;
+ return {
+ ...state,
+ panes,
+ panesByName: panes.reduce((panes, name, index) => {
+ const dividerLeft = getDividerLeft(numOfPanes, index);
+ panes[name] = {
+ name,
+ dividerLeft,
+ isHidden: false
+ };
+ return panes;
+ }, {})
+ };
+ },
+ [types.updateNavHeight]: (state, { payload: navHeight }) => ({
+ ...state,
+ navHeight
+ })
+ }, getInitialState());
+ function metaReducer(state = getInitialState(), action) {
+ if (action.meta && action.meta.isPaneAction) {
+ const name = typeToName[action.type];
+ const oldPane = state.panesByName[name];
+ const pane = {
+ ...oldPane,
+ isHidden: !oldPane.isHidden
+ };
+ const panesByName = {
+ ...state.panesByName,
+ [name]: pane
+ };
+ const numOfPanes = state.panes.reduce((sum, name) => {
+ return panesByName[name].isHidden ? sum : sum + 1;
+ }, 0);
+ let numOfHidden = 0;
+ return {
+ ...state,
+ panesByName: state.panes.reduce(
+ (panesByName, name, index) => {
+ if (!panesByName[name].isHidden) {
+ const dividerLeft = getDividerLeft(
+ numOfPanes,
+ index - numOfHidden
+ );
+ panesByName[name] = {
+ ...panesByName[name],
+ dividerLeft
+ };
+ } else {
+ numOfHidden = numOfHidden + 1;
+ }
+ return panesByName;
+ },
+ panesByName
+ )
+ };
+ }
+ return state;
+ }
+
+ function finalReducer(state, action) {
+ return reducer(metaReducer(state, action), action);
+ }
+ finalReducer.toString = () => ns;
+ return {
+ reducer: finalReducer,
+ middleware
+ };
+}
diff --git a/client/less/challenge.less b/common/app/Panes/redux/utils.js
similarity index 100%
rename from client/less/challenge.less
rename to common/app/Panes/redux/utils.js
diff --git a/common/app/Panes/redux/window-epic.js b/common/app/Panes/redux/window-epic.js
new file mode 100644
index 0000000000..68a92512db
--- /dev/null
+++ b/common/app/Panes/redux/window-epic.js
@@ -0,0 +1,21 @@
+import { Observable } from 'rx';
+import { ofType } from 'redux-epic';
+
+import {
+ types,
+ windowResized
+} from './';
+
+export default function windowEpic(actions, _, { window }) {
+ return actions::ofType(types.panesMounted)
+ .switchMap(() => {
+ return Observable.fromEvent(window, 'resize', () => windowResized({
+ width: window.innerWidth,
+ height: window.innerHeight
+ }))
+ .startWith(windowResized({
+ width: window.innerWidth,
+ height: window.innerHeight
+ }));
+ });
+}
diff --git a/common/app/toasts/Toasts.jsx b/common/app/Toasts/Toasts.jsx
similarity index 96%
rename from common/app/toasts/Toasts.jsx
rename to common/app/Toasts/Toasts.jsx
index 035bc4b466..8e55ae9ac0 100644
--- a/common/app/toasts/Toasts.jsx
+++ b/common/app/Toasts/Toasts.jsx
@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { NotificationStack } from 'react-notification';
-import { removeToast } from './redux/actions';
+import { removeToast } from './redux';
import {
submitChallenge,
resetChallenge
-} from '../routes/challenges/redux/actions';
+} from '../routes/challenges/redux';
const registeredActions = {
submitChallenge,
diff --git a/common/app/Toasts/index.js b/common/app/Toasts/index.js
new file mode 100644
index 0000000000..2518a55c0f
--- /dev/null
+++ b/common/app/Toasts/index.js
@@ -0,0 +1 @@
+export default from './Toasts.jsx';
diff --git a/common/app/Toasts/ns.json b/common/app/Toasts/ns.json
new file mode 100644
index 0000000000..2471c4eb56
--- /dev/null
+++ b/common/app/Toasts/ns.json
@@ -0,0 +1 @@
+"toasts"
diff --git a/common/app/Toasts/redux/index.js b/common/app/Toasts/redux/index.js
new file mode 100644
index 0000000000..af05b57b1f
--- /dev/null
+++ b/common/app/Toasts/redux/index.js
@@ -0,0 +1,45 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+
+import ns from '../ns.json';
+
+export const types = createTypes([
+ 'makeToast',
+ 'removeToast'
+], 'toast');
+
+let key = 0;
+export const makeToast = createAction(
+ types.makeToast,
+ ({ timeout, ...rest }) => ({
+ ...rest,
+ // assign current value of key to new toast
+ // and then increment key value
+ key: key++,
+ dismissAfter: timeout || 6000,
+ position: rest.position === 'left' ? 'left' : 'right'
+ })
+);
+
+export const removeToast = createAction(
+ types.removeToast,
+ ({ key }) => key
+);
+
+
+const initialState = [];
+
+export default function createReducer() {
+ const reducer = handleActions({
+ [types.makeToast]: (state, { payload: toast }) => [
+ ...state,
+ toast
+ ],
+ [types.removeToast]: (state, { payload: key }) => state.filter(
+ toast => toast.key !== key
+ )
+ }, initialState);
+
+ reducer.toString = () => ns;
+ return reducer;
+}
diff --git a/common/app/app.less b/common/app/app.less
index 3705a8db5f..5a90c57e1f 100644
--- a/common/app/app.less
+++ b/common/app/app.less
@@ -2,13 +2,22 @@
@ns: app;
.@{ns}-container {
- .column();
+ // we invert the nav and content since
+ // the content needs to render first
+ // Here we invert the order in which
+ // they are painted using css so the
+ // nav is on top again
+ .grid(@direction: column-reverse);
width: 100vw;
}
.@{ns}-content {
- .center(@value: @container-xl, @padding: @grid-gutter-width);
// makes the inital content height 0px
// then lets it grow to fit the rest of the space
flex: 1 0 0px;
}
+
+.@{ns}-centered {
+ .center(@value: @container-xl, @padding: @grid-gutter-width);
+ margin-top: @navbar-margin-bottom;
+}
diff --git a/common/app/components/Nav/Avatar-Points-Nav-Item.jsx b/common/app/components/Nav/Avatar-Points-Nav-Item.jsx
deleted file mode 100644
index d8907f2b1b..0000000000
--- a/common/app/components/Nav/Avatar-Points-Nav-Item.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Link } from 'react-router';
-
-// this is separated out to prevent react bootstrap's
-// NavBar from injecting unknown props to the li component
-
-const propTypes = {
- picture: PropTypes.string,
- points: PropTypes.number,
- username: PropTypes.string
-};
-
-export default function AvatarPointsNavItem({ picture, points, username }) {
- return (
-
+ { this.renderPanes() }
+
+
+
diff --git a/common/app/routes/challenges/Completion-Modal.jsx b/common/app/routes/challenges/Completion-Modal.jsx
new file mode 100644
index 0000000000..242a0cda56
--- /dev/null
+++ b/common/app/routes/challenges/Completion-Modal.jsx
@@ -0,0 +1,104 @@
+import noop from 'lodash/noop';
+import React, { PureComponent, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Button, Modal } from 'react-bootstrap';
+import FontAwesome from 'react-fontawesome';
+
+import ns from './ns.json';
+import {
+ closeChallengeModal,
+ submitChallenge,
+
+ challengeModalSelector,
+ successMessageSelector
+} from './redux';
+
+const mapStateToProps = createSelector(
+ challengeModalSelector,
+ successMessageSelector,
+ (isOpen, message) => ({
+ isOpen,
+ message
+ })
+);
+
+const mapDispatchToProps = function(dispatch) {
+ const dispatchers = {
+ close: () => dispatch(closeChallengeModal()),
+ submitChallenge: (e) => {
+ if (
+ e.keyCode === 13 &&
+ (e.ctrlKey || e.meta)
+ ) {
+ dispatch(submitChallenge());
+ }
+ }
+ };
+ return () => dispatchers;
+};
+
+const propTypes = {
+ close: PropTypes.func.isRequired,
+ isOpen: PropTypes.bool,
+ message: PropTypes.string,
+ submitChallenge: PropTypes.func.isRequired
+};
+
+export class CompletionModal extends PureComponent {
+ render() {
+ const {
+ close,
+ isOpen,
+ submitChallenge,
+ message
+ } = this.props;
+ return (
+
+
+ { message }
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CompletionModal.displayName = 'CompletionModal';
+CompletionModal.propTypes = propTypes;
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(CompletionModal);
diff --git a/common/app/routes/challenges/Show.jsx b/common/app/routes/challenges/Show.jsx
index 7d955c8c2b..1e03366527 100644
--- a/common/app/routes/challenges/Show.jsx
+++ b/common/app/routes/challenges/Show.jsx
@@ -5,61 +5,52 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import PureComponent from 'react-pure-render/component';
+import CompletionModal from './Completion-Modal.jsx';
import Classic from './views/classic';
import Step from './views/step';
import Project from './views/project';
-import Video from './views/video';
import BackEnd from './views/backend';
+import { challengeMetaSelector } from './redux';
import {
+ updateTitle,
+ updateCurrentChallenge,
fetchChallenge,
- fetchChallenges,
- replaceChallenge,
- resetUi
-} from './redux/actions';
-import { challengeSelector } from './redux/selectors';
-import { updateTitle } from '../../redux/actions';
-import { makeToast } from '../../toasts/redux/actions';
+
+ challengeSelector,
+ langSelector
+} from '../../redux';
+import { makeToast } from '../../Toasts/redux';
const views = {
backend: BackEnd,
classic: Classic,
project: Project,
simple: Project,
- step: Step,
- video: Video
+ step: Step
};
const mapDispatchToProps = {
fetchChallenge,
- fetchChallenges,
makeToast,
- replaceChallenge,
- resetUi,
+ updateCurrentChallenge,
updateTitle
};
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.challenge,
- state => state.challengesApp.superBlocks,
- state => state.app.lang,
+ challengeMetaSelector,
+ langSelector,
(
- {
- challenge: { isTranslated } = {},
- viewType,
- title
- },
- challenge,
- superBlocks = [],
+ { dashedName, isTranslated },
+ { viewType, title },
lang
) => ({
lang,
isTranslated,
title,
- challenge,
- viewType,
- areChallengesLoaded: superBlocks.length > 0
+ challenge: dashedName,
+ viewType
})
);
@@ -74,26 +65,23 @@ const fetchOptions = {
};
const link = 'http://forum.freecodecamp.com/t/' +
- 'guidelines-for-translating-free-code-camp' +
- '-to-any-language/19111';
+ 'guidelines-for-translating-free-code-camp' +
+ '-to-any-language/19111';
const propTypes = {
areChallengesLoaded: PropTypes.bool,
- fetchChallenges: PropTypes.func.isRequired,
isStep: PropTypes.bool,
isTranslated: PropTypes.bool,
lang: PropTypes.string.isRequired,
makeToast: PropTypes.func.isRequired,
params: PropTypes.object.isRequired,
- replaceChallenge: PropTypes.func.isRequired,
- resetUi: PropTypes.func.isRequired,
title: PropTypes.string,
+ updateCurrentChallenge: PropTypes.func.isRequired,
updateTitle: PropTypes.func.isRequired,
viewType: PropTypes.string
};
export class Show extends PureComponent {
-
componentWillMount() {
const { lang, isTranslated, makeToast } = this.props;
if (lang !== 'en' && !isTranslated) {
@@ -106,27 +94,19 @@ export class Show extends PureComponent {
}
componentDidMount() {
- if (!this.props.areChallengesLoaded) {
- this.props.fetchChallenges();
- }
if (this.props.title) {
this.props.updateTitle(this.props.title);
}
}
- componentWillUnmount() {
- this.props.resetUi();
- }
-
componentWillReceiveProps(nextProps) {
const { title } = nextProps;
- const { block, dashedName } = nextProps.params;
+ const { dashedName } = nextProps.params;
const { lang, isTranslated } = nextProps;
- const { resetUi, updateTitle, replaceChallenge, makeToast } = this.props;
+ const { updateTitle, updateCurrentChallenge, makeToast } = this.props;
if (this.props.params.dashedName !== dashedName) {
+ updateCurrentChallenge(dashedName);
updateTitle(title);
- resetUi();
- replaceChallenge({ dashedName, block });
if (lang !== 'en' && !isTranslated) {
makeToast({
message: 'We haven\'t translated this challenge yet.',
@@ -140,7 +120,12 @@ export class Show extends PureComponent {
render() {
const { viewType } = this.props;
const View = views[viewType] || Classic;
- return
+
+ );
+}
+
+ShowBackEnd.displayName = 'ShowBackEnd';
+ShowBackEnd.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/backend/index.js b/common/app/routes/challenges/views/backend/index.js
index 9da7aec1c3..f8a8115a06 100644
--- a/common/app/routes/challenges/views/backend/index.js
+++ b/common/app/routes/challenges/views/backend/index.js
@@ -1 +1 @@
-export { default } from './Back-End.jsx';
+export { default, panesMap } from './Show.jsx';
diff --git a/common/app/routes/challenges/views/classic/Classic-Modal.jsx b/common/app/routes/challenges/views/classic/Classic-Modal.jsx
deleted file mode 100644
index 945d4161c5..0000000000
--- a/common/app/routes/challenges/views/classic/Classic-Modal.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Button, Modal } from 'react-bootstrap';
-import PureComponent from 'react-pure-render/component';
-import FontAwesome from 'react-fontawesome';
-
-import ns from './ns.json';
-
-const propTypes = {
- close: PropTypes.func,
- open: PropTypes.bool.isRequired,
- submitChallenge: PropTypes.func.isRequired,
- successMessage: PropTypes.string.isRequired
-};
-
-export default class ClassicModal extends PureComponent {
- constructor(...props) {
- super(...props);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- }
-
- handleKeyDown(e) {
- const { open, submitChallenge } = this.props;
- if (
- e.keyCode === 13 &&
- (e.ctrlKey || e.meta) &&
- open
- ) {
- e.preventDefault();
- submitChallenge();
- }
- }
-
- render() {
- const {
- close,
- open,
- submitChallenge,
- successMessage
- } = this.props;
- return (
-
-
- { successMessage }
-
-
-
-
-
-
-
- );
- }
-}
-
-ClassicModal.displayName = 'ClassicModal';
-ClassicModal.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/classic/Classic.jsx b/common/app/routes/challenges/views/classic/Classic.jsx
deleted file mode 100644
index 4a1e7da1e0..0000000000
--- a/common/app/routes/challenges/views/classic/Classic.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { Row, Col } from 'react-bootstrap';
-import { createSelector } from 'reselect';
-import PureComponent from 'react-pure-render/component';
-
-import Editor from './Editor.jsx';
-import SidePanel from './Side-Panel.jsx';
-import Preview from './Preview.jsx';
-import BugModal from '../../Bug-Modal.jsx';
-import ClassicModal from './Classic-Modal.jsx';
-import { challengeSelector } from '../../redux/selectors';
-import {
- executeChallenge,
- updateFile,
- loadCode,
- submitChallenge,
- closeChallengeModal,
- updateSuccessMessage
-} from '../../redux/actions';
-import { randomCompliment } from '../../../../utils/get-words';
-
-const mapStateToProps = createSelector(
- challengeSelector,
- state => state.challengesApp.id,
- state => state.challengesApp.tests,
- state => state.challengesApp.files,
- state => state.challengesApp.key,
- state => state.challengesApp.isChallengeModalOpen,
- state => state.challengesApp.successMessage,
- (
- { showPreview, mode },
- id,
- tests,
- files = {},
- key = '',
- isChallengeModalOpen,
- successMessage,
- ) => ({
- id,
- content: files[key] && files[key].contents || '',
- file: files[key],
- showPreview,
- mode,
- tests,
- isChallengeModalOpen,
- successMessage
- })
-);
-
-const bindableActions = {
- executeChallenge,
- updateFile,
- loadCode,
- submitChallenge,
- closeChallengeModal,
- updateSuccessMessage
-};
-
-const propTypes = {
- closeChallengeModal: PropTypes.func,
- content: PropTypes.string,
- executeChallenge: PropTypes.func,
- file: PropTypes.object,
- id: PropTypes.string,
- isChallengeModalOpen: PropTypes.bool,
- loadCode: PropTypes.func,
- mode: PropTypes.string,
- showPreview: PropTypes.bool,
- submitChallenge: PropTypes.func,
- successMessage: PropTypes.string,
- updateFile: PropTypes.func,
- updateSuccessMessage: PropTypes.func
-};
-
-export class Challenge extends PureComponent {
-
- componentDidMount() {
- this.props.loadCode();
- this.props.updateSuccessMessage(randomCompliment());
- window.scrollTo(0, 0);
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.id !== nextProps.id) {
- this.props.loadCode();
- this.props.updateSuccessMessage(randomCompliment());
- }
- }
-
- renderPreview(showPreview) {
- if (!showPreview) {
- return null;
- }
- return (
-
- updateFile(content, file) }
- />
-
- { this.renderPreview(showPreview) }
-
- );
- }
-}
-
-Challenge.displayName = 'Challenge';
-Challenge.propTypes = propTypes;
-
-export default connect(mapStateToProps, bindableActions)(Challenge);
diff --git a/common/app/routes/challenges/views/classic/Editor.jsx b/common/app/routes/challenges/views/classic/Editor.jsx
index 3424d5a547..1484eca552 100644
--- a/common/app/routes/challenges/views/classic/Editor.jsx
+++ b/common/app/routes/challenges/views/classic/Editor.jsx
@@ -1,54 +1,67 @@
-import { Subject } from 'rx';
-import React, { PropTypes } from 'react';
+import React, { PureComponent, PropTypes } from 'react';
+import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import Codemirror from 'react-codemirror';
import NoSSR from 'react-no-ssr';
-import PureComponent from 'react-pure-render/component';
import MouseTrap from 'mousetrap';
import ns from './ns.json';
import CodeMirrorSkeleton from '../../Code-Mirror-Skeleton.jsx';
+import {
+ executeChallenge,
+ classicEditorUpdated,
-const editorDebounceTimeout = 750;
+ challengeMetaSelector,
+ filesSelector,
+ keySelector
+} from '../../redux';
const options = {
- lint: {esversion: 6},
+ lint: { esversion: 6 },
lineNumbers: true,
mode: 'javascript',
- theme: 'monokai',
+ theme: 'freecodecamp',
runnable: true,
matchBrackets: true,
autoCloseBrackets: true,
scrollbarStyle: 'null',
lineWrapping: true,
- gutters: ['CodeMirror-lint-markers']
+ gutters: [ 'CodeMirror-lint-markers' ]
};
-const defaultProps = {
- content: '// Happy Coding!',
- mode: 'javascript'
+const mapStateToProps = createSelector(
+ filesSelector,
+ challengeMetaSelector,
+ keySelector,
+ (
+ files = {},
+ { mode = 'javascript'},
+ key
+ ) => ({
+ content: files[key] && files[key].contents || '// Happy Coding!',
+ file: files[key],
+ mode
+ })
+);
+
+const mapDispatchToProps = {
+ executeChallenge,
+ classicEditorUpdated
};
const propTypes = {
+ classicEditorUpdated: PropTypes.func.isRequired,
content: PropTypes.string,
- executeChallenge: PropTypes.func,
- mode: PropTypes.string,
- updateFile: PropTypes.func
+ executeChallenge: PropTypes.func.isRequired,
+ mode: PropTypes.string
};
-export default class Editor extends PureComponent {
- constructor(...args) {
- super(...args);
- this._editorContent$ = new Subject();
- this.handleChange = this.handleChange.bind(this);
- }
-
+export class Editor extends PureComponent {
createOptions = createSelector(
- state => state.options,
state => state.executeChallenge,
state => state.mode,
- (options, executeChallenge, mode) => ({
+ (executeChallenge, mode) => ({
...options,
mode,
extraKeys: {
@@ -88,46 +101,28 @@ export default class Editor extends PureComponent {
);
componentDidMount() {
- const { updateFile = (() => {}) } = this.props;
- this._subscription = this._editorContent$
- .debounce(editorDebounceTimeout)
- .distinctUntilChanged()
- .subscribe(
- updateFile,
- err => { throw err; }
- );
-
MouseTrap.bind('e', () => {
this.refs.editor.focus();
}, 'keyup');
}
componentWillUnmount() {
- if (this._subscription) {
- this._subscription.dispose();
- this._subscription = null;
- }
MouseTrap.unbind('e', 'keyup');
}
- handleChange(value) {
- if (this._subscription) {
- this._editorContent$.onNext(value);
- }
- }
-
render() {
const {
content,
executeChallenge,
+ classicEditorUpdated,
mode
} = this.props;
return (
+
+ );
+}
+
+ShowClassic.displayName = 'ShowClassic';
+ShowClassic.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/classic/Side-Panel.jsx b/common/app/routes/challenges/views/classic/Side-Panel.jsx
index 3d928a85b2..34532be1ca 100644
--- a/common/app/routes/challenges/views/classic/Side-Panel.jsx
+++ b/common/app/routes/challenges/views/classic/Side-Panel.jsx
@@ -7,19 +7,27 @@ import { Col, Row } from 'react-bootstrap';
import ns from './ns.json';
+import ToolPanel from './Tool-Panel.jsx';
import ChallengeTitle from '../../Challenge-Title.jsx';
import TestSuite from '../../Test-Suite.jsx';
import Output from '../../Output.jsx';
-import ToolPanel from './Tool-Panel.jsx';
-import { challengeSelector } from '../../redux/selectors';
import {
openBugModal,
updateHint,
executeChallenge,
- unlockUntrustedCode
-} from '../../redux/actions';
+ unlockUntrustedCode,
+
+ challengeMetaSelector,
+ testsSelector,
+ outputSelector,
+ hintIndexSelector,
+ codeLockedSelector,
+ chatRoomSelector
+} from '../../redux';
+
import { descriptionRegex } from '../../utils';
-import { makeToast } from '../../../../toasts/redux/actions';
+import { challengeSelector } from '../../../../redux';
+import { makeToast } from '../../../../Toasts/redux';
const mapDispatchToProps = {
makeToast,
@@ -30,19 +38,18 @@ const mapDispatchToProps = {
};
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.tests,
- state => state.challengesApp.output,
- state => state.challengesApp.hintIndex,
- state => state.challengesApp.isCodeLocked,
- state => state.challengesApp.helpChatRoom,
+ challengeMetaSelector,
+ testsSelector,
+ outputSelector,
+ hintIndexSelector,
+ codeLockedSelector,
+ chatRoomSelector,
(
{
- challenge: {
- description,
- hints = []
- } = {},
- title
+ description,
+ hints = []
},
+ { title },
tests,
output,
hintIndex,
diff --git a/common/app/routes/challenges/views/classic/classic.less b/common/app/routes/challenges/views/classic/classic.less
index de511f9f51..272c1a42ec 100644
--- a/common/app/routes/challenges/views/classic/classic.less
+++ b/common/app/routes/challenges/views/classic/classic.less
@@ -1,21 +1,16 @@
// should match filename and ./ns.json
@ns: classic;
-// make the height no larger than (window - navbar)
-.max-element-height(up-to) {
- max-height: e(%('calc(100vh - %s)', @navbar-total-height));
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.max-element-height(always) {
- height: e(%('calc(100vh - %s)', @navbar-total-height));
+// challenge panes are bound to the pane size which in turn is
+// bound to the total height minus navbar height
+.max-element-height() {
+ height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.@{ns}-instructions-panel {
- .max-element-height(always);
+ .max-element-height();
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
@@ -90,56 +85,17 @@
}
.@{ns}-editor {
- .max-element-height(always);
+ .max-element-height();
width: 100%;
}
.@{ns}-preview {
- .max-element-height(always);
+ .max-element-height();
width: 100%;
}
.@{ns}-preview-frame {
- border: 1px solid gray;
- border-radius: 5px;
- color: @gray-lighter;
- height: 99%;
- overflow: hidden;
+ .max-element-height();
+ border: none;
width: 100%;
}
-
-.@{ns}-success-modal {
- display: flex;
- flex-direction: column;
- justify-content: center;
- height: 50vh;
-
- .modal-header {
- background-color: @brand-primary;
- margin-bottom: 0;
-
- .close {
- color: #eee;
- font-size: 4rem;
- opacity: 0.6;
- transition: all 300ms ease-out;
- margin-top: 0;
- padding-left: 0;
-
- &:hover {
- opacity: 1;
- }
- }
- }
-
- .modal-body {
- padding: 35px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- .fa {
- margin-right: 0;
- }
- }
-}
diff --git a/common/app/routes/challenges/views/classic/index.js b/common/app/routes/challenges/views/classic/index.js
index 479ed82803..f8a8115a06 100644
--- a/common/app/routes/challenges/views/classic/index.js
+++ b/common/app/routes/challenges/views/classic/index.js
@@ -1 +1 @@
-export default from './Classic.jsx';
+export { default, panesMap } from './Show.jsx';
diff --git a/common/app/routes/challenges/views/map/Header.jsx b/common/app/routes/challenges/views/map/Header.jsx
deleted file mode 100644
index 712189bdda..0000000000
--- a/common/app/routes/challenges/views/map/Header.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import PureComponent from 'react-pure-render/component';
-import { InputGroup, FormControl, Button, Row } from 'react-bootstrap';
-import classnames from 'classnames';
-import {
- clearFilter,
- updateFilter,
- collapseAll,
- expandAll
-} from '../../redux/actions';
-
-const ESC = 27;
-const clearIcon = ;
-const searchIcon = ;
-const bindableActions = {
- clearFilter,
- updateFilter,
- collapseAll,
- expandAll
-};
-const mapStateToProps = state => ({
- isAllCollapsed: state.challengesApp.mapUi.isAllCollapsed,
- filter: state.challengesApp.filter
-});
-const propTypes = {
- clearFilter: PropTypes.func,
- collapseAll: PropTypes.func,
- expandAll: PropTypes.func,
- filter: PropTypes.string,
- isAllCollapsed: PropTypes.bool,
- updateFilter: PropTypes.func
-};
-
-export class Header extends PureComponent {
- constructor(...props) {
- super(...props);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.handleClearButton = this.handleClearButton.bind(this);
- }
-
- handleKeyDown(e) {
- if (e.keyCode === ESC) {
- e.preventDefault();
- this.props.clearFilter();
- }
- }
-
- handleClearButton(e) {
- e.preventDefault();
- this.props.clearFilter();
- }
-
- renderSearchAddon(filter) {
- if (!filter) {
- return searchIcon;
- }
- return { clearIcon };
- }
-
- render() {
- const {
- filter,
- updateFilter,
- collapseAll,
- expandAll,
- isAllCollapsed
- } = this.props;
- const inputClass = classnames({
- 'map-filter': true,
- filled: !!filter
- });
- const buttonClass = classnames({
- 'center-block': true,
- active: isAllCollapsed
- });
- const buttonCopy = isAllCollapsed ?
- 'Expand all challenges' :
- 'Hide all challenges';
- return (
-
-
- );
- }
-}
-
-ShowMap.displayName = 'Map';
-ShowMap.propTypes = propTypes;
-
-export default compose(
- connect(mapStateToProps, mapDispatchToProps),
- contain(fetchOptions)
-)(ShowMap);
diff --git a/common/app/routes/challenges/views/project/Forms.jsx b/common/app/routes/challenges/views/project/Forms.jsx
index f0505bfe34..5138fdccaa 100644
--- a/common/app/routes/challenges/views/project/Forms.jsx
+++ b/common/app/routes/challenges/views/project/Forms.jsx
@@ -6,14 +6,15 @@ import {
FormControl
} from 'react-bootstrap';
+import { showProjectSubmit } from './redux';
import SolutionInput from '../../Solution-Input.jsx';
+import { submitChallenge } from '../../redux';
import {
isValidURL,
makeRequired,
createFormValidator,
getValidationState
} from '../../../../utils/form';
-import { submitChallenge, showProjectSubmit } from '../../redux/actions';
const propTypes = {
fields: PropTypes.object,
diff --git a/common/app/routes/challenges/views/project/Project.jsx b/common/app/routes/challenges/views/project/Project.jsx
index e37071ec11..1278903c6c 100644
--- a/common/app/routes/challenges/views/project/Project.jsx
+++ b/common/app/routes/challenges/views/project/Project.jsx
@@ -2,25 +2,25 @@ import React, { PropTypes } from 'react';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import PureComponent from 'react-pure-render/component';
-import { Col, Row, Image } from 'react-bootstrap';
+import { Col, Image } from 'react-bootstrap';
import SidePanel from './Side-Panel.jsx';
import ToolPanel from './Tool-Panel.jsx';
import BugModal from '../../Bug-Modal.jsx';
-import { challengeSelector } from '../../redux/selectors';
+import { challengeMetaSelector } from '../../redux';
+import { challengeSelector } from '../../../../redux';
const mapStateToProps = createSelector(
challengeSelector,
+ challengeMetaSelector,
(
{
- challenge: {
- id,
- description,
- image
- } = {},
- title
- }
+ id,
+ description,
+ image
+ },
+ { title }
) => ({
id,
image,
@@ -47,29 +47,25 @@ export class Project extends PureComponent {
} = this.props;
const imageURL = '//i.imgur.com/' + image + '.png';
return (
-
-
-
-
+
+
+
+
+ );
+}
+
+ShowProject.displayName = 'ShowProject';
+ShowProject.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/project/Tool-Panel.jsx b/common/app/routes/challenges/views/project/Tool-Panel.jsx
index cf0c941a15..68b25fb556 100644
--- a/common/app/routes/challenges/views/project/Tool-Panel.jsx
+++ b/common/app/routes/challenges/views/project/Tool-Panel.jsx
@@ -9,8 +9,19 @@ import {
BackEndForm
} from './Forms.jsx';
-import { submitChallenge, openBugModal } from '../../redux/actions';
-import { challengeSelector } from '../../redux/selectors';
+import { submittingSelector } from './redux';
+
+import {
+ submitChallenge,
+ openBugModal,
+
+ chatRoomSelector
+} from '../../redux';
+
+import {
+ signInLoadingSelector,
+ challengeSelector
+} from '../../../../redux';
import {
simpleProject,
frontEndProject
@@ -31,16 +42,16 @@ const mapDispatchToProps = {
};
const mapStateToProps = createSelector(
challengeSelector,
- state => state.app.isSignedIn,
- state => state.challengesApp.isSubmitting,
- state => state.challengesApp.helpChatRoom,
+ signInLoadingSelector,
+ submittingSelector,
+ chatRoomSelector,
(
- { challenge: { challengeType = simpleProject } },
- isSignedIn,
+ { challengeType = simpleProject },
+ showLoading,
isSubmitting,
helpChatRoom,
) => ({
- isSignedIn,
+ isSignedIn: !showLoading,
isSubmitting,
helpChatRoom,
isSimple: challengeType === simpleProject,
diff --git a/common/app/routes/challenges/views/project/index.js b/common/app/routes/challenges/views/project/index.js
index 6784471995..f8a8115a06 100644
--- a/common/app/routes/challenges/views/project/index.js
+++ b/common/app/routes/challenges/views/project/index.js
@@ -1 +1 @@
-export default from './Project.jsx';
+export { default, panesMap } from './Show.jsx';
diff --git a/common/app/routes/challenges/views/project/ns.json b/common/app/routes/challenges/views/project/ns.json
new file mode 100644
index 0000000000..a8138abf72
--- /dev/null
+++ b/common/app/routes/challenges/views/project/ns.json
@@ -0,0 +1 @@
+"project"
diff --git a/common/app/routes/challenges/views/project/redux/index.js b/common/app/routes/challenges/views/project/redux/index.js
new file mode 100644
index 0000000000..67bde420a6
--- /dev/null
+++ b/common/app/routes/challenges/views/project/redux/index.js
@@ -0,0 +1,27 @@
+import { createTypes } from 'redux-create-types';
+import { createAction, handleActions } from 'redux-actions';
+import ns from '../ns.json';
+
+export const types = createTypes([
+ 'showProjectSubmit'
+], ns);
+
+export const showProjectSubmit = createAction(types.showProjectSubmit);
+
+const initialState = {
+ // project is ready to submit
+ isSubmitting: false
+};
+export const submittingSelector = state => state[ns].isSubmitting;
+
+export default function createReducer() {
+ const reducer = handleActions({
+ [types.showProjectSubmit]: state => ({
+ ...state,
+ isSubmitting: true
+ })
+ }, initialState);
+
+ reducer.toString = () => ns;
+ return [ reducer ];
+}
diff --git a/common/app/routes/challenges/redux/project-normalizer.js b/common/app/routes/challenges/views/project/redux/project-normalizer.js
similarity index 73%
rename from common/app/routes/challenges/redux/project-normalizer.js
rename to common/app/routes/challenges/views/project/redux/project-normalizer.js
index a7c69981dc..4cd8b1ae31 100644
--- a/common/app/routes/challenges/redux/project-normalizer.js
+++ b/common/app/routes/challenges/views/project/redux/project-normalizer.js
@@ -1,4 +1,4 @@
-import { callIfDefined, formatUrl } from '../../../utils/form';
+import { callIfDefined, formatUrl } from '../../../../../utils/form';
export default {
NewFrontEndProject: {
diff --git a/common/app/routes/challenges/views/step/Show.jsx b/common/app/routes/challenges/views/step/Show.jsx
new file mode 100644
index 0000000000..81425940e2
--- /dev/null
+++ b/common/app/routes/challenges/views/step/Show.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import Step from './Step.jsx';
+import { types } from '../../redux';
+import Panes from '../../../../Panes';
+import _Map from '../../../../Map';
+import ChildContainer from '../../../../Child-Container.jsx';
+
+const propTypes = {};
+export const panesMap = {
+ [types.toggleMap]: 'Map',
+ [types.toggleStep]: 'Step'
+};
+
+const nameToComponent = {
+ Map: {
+ Component: _Map
+ },
+ Step: {
+ Component: Step
+ }
+};
+
+export default function ShowStep() {
+ return (
+
+
+ );
+}
+
+ShowStep.displayName = 'ShowStep';
+ShowStep.propTypes = propTypes;
diff --git a/common/app/routes/challenges/views/step/Step.jsx b/common/app/routes/challenges/views/step/Step.jsx
index a507bf800e..44959679f7 100644
--- a/common/app/routes/challenges/views/step/Step.jsx
+++ b/common/app/routes/challenges/views/step/Step.jsx
@@ -1,33 +1,36 @@
-import React, { PropTypes } from 'react';
-import classnames from 'classnames';
+import React, { PropTypes, PureComponent } from 'react';
+import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
+import classnames from 'classnames';
import { createSelector } from 'reselect';
-import PureComponent from 'react-pure-render/component';
import LightBox from 'react-images';
+import { Button, Col, Image, Row } from 'react-bootstrap';
import ns from './ns.json';
import {
closeLightBoxImage,
completeAction,
- openLightBoxImage,
+ clickOnImage,
stepBackward,
stepForward,
- submitChallenge,
- updateUnlockedSteps
-} from '../../redux/actions';
-import { challengeSelector } from '../../redux/selectors';
-import { Button, Col, Image, Row } from 'react-bootstrap';
+ updateUnlockedSteps,
+
+ currentIndexSelector,
+ actionCompletedSelector,
+ previousIndexSelector,
+ lightBoxSelector
+} from './redux';
+import { submitChallenge } from '../../redux';
+import { challengeSelector } from '../../../../redux';
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.currentIndex,
- state => state.challengesApp.previousIndex,
- state => state.challengesApp.isActionCompleted,
- state => state.challengesApp.isLightBoxOpen,
+ currentIndexSelector,
+ previousIndexSelector,
+ actionCompletedSelector,
+ lightBoxSelector,
(
- {
- challenge: { description = [] }
- },
+ { description = [] },
currentIndex,
previousIndex,
isActionCompleted,
@@ -43,17 +46,27 @@ const mapStateToProps = createSelector(
})
);
-const dispatchActions = {
- closeLightBoxImage,
- completeAction,
- openLightBoxImage,
- stepBackward,
- stepForward,
- submitChallenge,
- updateUnlockedSteps
-};
+function mapDispatchToProps(dispatch) {
+ const dispatchers = bindActionCreators({
+ closeLightBoxImage,
+ completeAction,
+ stepBackward,
+ stepForward,
+ submitChallenge,
+ updateUnlockedSteps
+ }, dispatch);
+ dispatchers.clickOnImage = e => {
+ if (!(e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ return dispatch(clickOnImage());
+ }
+ return null;
+ };
+ return () => dispatchers;
+}
const propTypes = {
+ clickOnImage: PropTypes.func.isRequired,
closeLightBoxImage: PropTypes.func.isRequired,
completeAction: PropTypes.func.isRequired,
currentIndex: PropTypes.number,
@@ -61,7 +74,6 @@ const propTypes = {
isLastStep: PropTypes.bool,
isLightBoxOpen: PropTypes.bool,
numOfSteps: PropTypes.number,
- openLightBoxImage: PropTypes.func.isRequired,
step: PropTypes.array,
stepBackward: PropTypes.func,
stepForward: PropTypes.func,
@@ -71,18 +83,6 @@ const propTypes = {
};
export class StepChallenge extends PureComponent {
- constructor(...args) {
- super(...args);
- this.handleLightBoxOpen = this.handleLightBoxOpen.bind(this);
- }
-
- handleLightBoxOpen(e) {
- if (!(e.ctrlKey || e.metaKey)) {
- e.preventDefault();
- this.props.openLightBoxImage();
- }
- }
-
componentWillMount() {
const { updateUnlockedSteps } = this.props;
updateUnlockedSteps([]);
@@ -167,14 +167,15 @@ export class StepChallenge extends PureComponent {
}
renderStep({
- step,
- currentIndex,
- numOfSteps,
- isActionCompleted,
+ clickOnImage,
completeAction,
+ currentIndex,
+ isActionCompleted,
isLastStep,
- stepForward,
- stepBackward
+ numOfSteps,
+ step,
+ stepBackward,
+ stepForward
}) {
if (!Array.isArray(step)) {
return null;
@@ -184,7 +185,7 @@ export class StepChallenge extends PureComponent {
+
+
+
+
+
+
+
+ );
}
}
diff --git a/common/app/routes/challenges/challenges.less b/common/app/routes/challenges/challenges.less
index efda7469a8..b1816a5368 100644
--- a/common/app/routes/challenges/challenges.less
+++ b/common/app/routes/challenges/challenges.less
@@ -78,4 +78,86 @@
word-wrap: break-word;
}
+@keyframes skeletonShimmer{
+ 0% {
+ transform: translateX(-48px);
+ }
+ 100% {
+ transform: translateX(1000px);
+ }
+}
+
+.@{ns}-shimmer {
+ position: relative;
+ min-height: 18px;
+
+ .row {
+ height: 18px;
+
+ .col-xs-12 {
+ padding-right: 12px;
+ height: 17px;
+ }
+ }
+
+ .sprite-wrapper {
+ background-color: #333;
+ height: 17px;
+ width: 75%;
+ }
+
+ .sprite {
+ animation-name: skeletonShimmer;
+ animation-duration: 2.5s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ animation-direction: normal;
+ background: white;
+ box-shadow: 0 0 3px 2px;
+ height: 17px;
+ width: 2px;
+ z-index: 5;
+ }
+}
+
+.@{ns}-success-modal {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 50vh;
+
+ .modal-title {
+ color: @gray-lighter;
+ }
+
+ .modal-header {
+ background-color: @brand-primary;
+ margin-bottom: 0;
+
+ .close {
+ color: #eee;
+ font-size: 4rem;
+ opacity: 0.6;
+ transition: all 300ms ease-out;
+ margin-top: 0;
+ padding-left: 0;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+
+ .modal-body {
+ padding: 35px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .fa {
+ margin-right: 0;
+ }
+ }
+}
+
&{ @import "./views/index.less"; }
diff --git a/common/app/routes/challenges/index.js b/common/app/routes/challenges/index.js
index c422581b24..77768a2197 100644
--- a/common/app/routes/challenges/index.js
+++ b/common/app/routes/challenges/index.js
@@ -1,8 +1,20 @@
import Show from './Show.jsx';
-import _Map from './views/map';
+import { panesMap as backendPanesMap } from './views/backend';
+import { panesMap as classicPanesMap } from './views/classic';
+import { panesMap as stepPanesMap } from './views/step';
+import { panesMap as projectPanesMap } from './views/project';
-export function challengesRoute() {
+export function createPanesMap() {
return {
+ ...backendPanesMap,
+ ...classicPanesMap,
+ ...stepPanesMap,
+ ...projectPanesMap
+ };
+}
+
+export default function challengesRoutes() {
+ return [{
path: 'challenges(/:dashedName)',
component: Show,
onEnter(nextState, replace) {
@@ -11,19 +23,8 @@ export function challengesRoute() {
replace('/map');
}
}
- };
-}
-
-export function modernChallengesRoute() {
- return {
+ }, {
path: 'challenges/:block/:dashedName',
component: Show
- };
-}
-
-export function mapRoute() {
- return {
- path: 'map',
- component: _Map
- };
+ }];
}
diff --git a/common/app/routes/challenges/redux/actions.js b/common/app/routes/challenges/redux/actions.js
deleted file mode 100644
index ca411382b3..0000000000
--- a/common/app/routes/challenges/redux/actions.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import { createAction } from 'redux-actions';
-import { setContent } from '../../../../utils/polyvinyl';
-import { getMouse, loggerToStr } from '../utils';
-
-import types from './types';
-
-// step
-export const stepForward = createAction(types.stepForward);
-export const stepBackward = createAction(types.stepBackward);
-export const goToStep = createAction(
- types.goToStep,
- (step, isUnlocked) => ({ step, isUnlocked })
-);
-export const completeAction = createAction(types.completeAction);
-export const updateUnlockedSteps = createAction(types.updateUnlockedSteps);
-export const openLightBoxImage = createAction(types.openLightBoxImage);
-export const closeLightBoxImage = createAction(types.closeLightBoxImage);
-
-// challenges
-export const fetchChallenge = createAction(
- types.fetchChallenge,
- (dashedName, block) => ({ dashedName, block })
-);
-export const fetchChallengeCompleted = createAction(
- types.fetchChallengeCompleted,
- (_, challenge) => challenge,
- entities => ({ entities })
-);
-export const closeChallengeModal = createAction(types.closeChallengeModal);
-export const resetUi = createAction(types.resetUi);
-export const updateHint = createAction(types.updateHint);
-export const lockUntrustedCode = createAction(types.lockUntrustedCode);
-export const unlockUntrustedCode = createAction(
- types.unlockUntrustedCode,
- () => null
-);
-export const updateSuccessMessage = createAction(types.updateSuccessMessage);
-export const fetchChallenges = createAction(types.fetchChallenges);
-export const fetchChallengesCompleted = createAction(
- types.fetchChallengesCompleted,
- (_, superBlocks) => superBlocks,
- entities => ({ entities })
-);
-
-export const updateCurrentChallenge = createAction(
- types.updateCurrentChallenge
-);
-export const resetChallenge = createAction(types.resetChallenge);
-// replaceChallenge(dashedname) => Action
-export const replaceChallenge = createAction(types.replaceChallenge);
-
-// map
-export const updateFilter = createAction(
- types.updateFilter,
- e => e.target.value
-);
-
-export const initMap = createAction(types.initMap);
-export const toggleThisPanel = createAction(types.toggleThisPanel);
-export const collapseAll = createAction(types.collapseAll);
-export const expandAll = createAction(types.expandAll);
-
-export const clearFilter = createAction(types.clearFilter);
-
-// files
-export const updateFile = createAction(
- types.updateFile,
- (content, file) => setContent(content, file)
-);
-
-export const updateFiles = createAction(types.updateFiles);
-
-// rechallenge
-export const executeChallenge = createAction(
- types.executeChallenge,
- () => null
-);
-
-export const updateMain = createAction(types.updateMain);
-export const frameMain = createAction(types.frameMain);
-export const frameTests = createAction(types.frameTests);
-
-export const runTests = createAction(types.runTests);
-export const updateTests = createAction(types.updateTests);
-
-export const initOutput = createAction(types.initOutput, loggerToStr);
-export const updateOutput = createAction(types.updateOutput, loggerToStr);
-
-export const checkChallenge = createAction(types.checkChallenge);
-
-export const showProjectSubmit = createAction(types.showProjectSubmit);
-
-export const submitChallenge = createAction(types.submitChallenge);
-export const moveToNextChallenge = createAction(types.moveToNextChallenge);
-
-// code storage
-export const saveCode = createAction(types.saveCode);
-export const loadCode = createAction(types.loadCode);
-export const savedCodeFound = createAction(
- types.savedCodeFound,
- (files, challenge) => ({ files, challenge })
-);
-export const clearSavedCode = createAction(types.clearSavedCode);
-
-
-// video challenges
-export const toggleQuestionView = createAction(types.toggleQuestionView);
-export const grabQuestion = createAction(types.grabQuestion, e => {
- let { pageX, pageY, touches } = e;
- if (touches) {
- e.preventDefault();
- // these re-assigns the values of pageX, pageY from touches
- ({ pageX, pageY } = touches[0]);
- }
- const delta = [pageX, pageY];
- const mouse = [0, 0];
-
- return { delta, mouse };
-});
-
-export const releaseQuestion = createAction(types.releaseQuestion);
-export const moveQuestion = createAction(
- types.moveQuestion,
- ({ e, delta }) => getMouse(e, delta)
-);
-
-// answer({
-// e: Event,
-// answer: Boolean,
-// userAnswer: Boolean,
-// info: String,
-// threshold: Number
-// }) => Action
-export const answerQuestion = createAction(types.answerQuestion);
-
-export const startShake = createAction(types.startShake);
-export const endShake = createAction(types.primeNextQuestion);
-
-export const goToNextQuestion = createAction(types.goToNextQuestion);
-export const videoCompleted = createAction(types.videoCompleted);
-
-// bug
-export const openBugModal = createAction(types.openBugModal);
-export const closeBugModal = createAction(types.closeBugModal);
-export const openIssueSearch = createAction(types.openIssueSearch);
-export const createIssue = createAction(types.createIssue);
diff --git a/common/app/routes/challenges/redux/answer-saga.js b/common/app/routes/challenges/redux/answer-saga.js
deleted file mode 100644
index f5bb4aece6..0000000000
--- a/common/app/routes/challenges/redux/answer-saga.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Observable } from 'rx';
-import types from './types';
-import { getMouse } from '../utils';
-
-import { submitChallenge, videoCompleted } from './actions';
-import { createErrorObservable } from '../../../redux/actions';
-import { makeToast } from '../../../toasts/redux/actions';
-import { challengeSelector } from './selectors';
-
-export default function answerSaga(action$, getState) {
- return action$
- .filter(action => action.type === types.answerQuestion)
- .flatMap(({
- payload: {
- e,
- answer,
- userAnswer,
- info,
- threshold
- }
- }) => {
- const state = getState();
- const {
- challenge: { tests }
- } = challengeSelector(state);
- const {
- challengesApp: {
- currentQuestion,
- delta = [ 0, 0 ]
- }
- } = state;
-
- let finalAnswer;
- // drag answer, compute response
- if (typeof userAnswer === 'undefined') {
- const [positionX] = getMouse(e, delta);
-
- // question released under threshold
- if (Math.abs(positionX) < threshold) {
- return Observable.just(null);
- }
-
- if (positionX >= threshold) {
- finalAnswer = true;
- }
-
- if (positionX <= -threshold) {
- finalAnswer = false;
- }
- } else {
- finalAnswer = userAnswer;
- }
-
- // incorrect question
- if (answer !== finalAnswer) {
- let infoAction;
- if (info) {
- infoAction = makeToast({
- message: info,
- timeout: 5000
- });
- }
-
- return Observable
- .just({ type: types.endShake })
- .delay(500)
- .startWith(infoAction, { type: types.startShake });
- }
-
- if (tests[currentQuestion]) {
- return Observable
- .just({ type: types.goToNextQuestion })
- .delay(300)
- .startWith({ type: types.primeNextQuestion });
- }
-
-
- return Observable.just(submitChallenge())
- .delay(300)
- // moves question to the appropriate side of the screen
- .startWith(videoCompleted(finalAnswer))
- // end with action so we know it is ok to transition
- .concat(Observable.just({ type: types.transitionHike }))
- .catch(createErrorObservable);
- });
-}
diff --git a/common/app/routes/challenges/redux/bug-saga.js b/common/app/routes/challenges/redux/bug-epic.js
similarity index 81%
rename from common/app/routes/challenges/redux/bug-saga.js
rename to common/app/routes/challenges/redux/bug-epic.js
index c7a3610200..f1d261c570 100644
--- a/common/app/routes/challenges/redux/bug-saga.js
+++ b/common/app/routes/challenges/redux/bug-epic.js
@@ -1,5 +1,12 @@
-import types from '../redux/types';
-import { closeBugModal } from '../redux/actions';
+import { ofType } from 'redux-epic';
+import {
+ types,
+ closeBugModal,
+
+ filesSelector
+} from '../redux';
+
+import { currentChallengeSelector } from '../../../redux';
function filesToMarkdown(files = {}) {
const moreThenOneFile = Object.keys(files).length > 1;
@@ -22,19 +29,12 @@ function filesToMarkdown(files = {}) {
}, '\n');
}
-export default function bugSaga(actions$, getState, { window }) {
- return actions$
- .filter(({ type }) => (
- type === types.openIssueSearch ||
- type === types.createIssue
- ))
+export default function bugEpic(actions, { getState }, { window }) {
+ return actions::ofType(types.openIssueSearch, types.createIssue)
.map(({ type }) => {
- const {
- challengesApp: {
- legacyKey: challengeName,
- files
- }
- } = getState();
+ const state = getState();
+ const files = filesSelector(state);
+ const challengeName = currentChallengeSelector(state);
const {
navigator: { userAgent },
location: { href }
diff --git a/common/app/routes/challenges/redux/next-challenge-saga.js b/common/app/routes/challenges/redux/challenge-epic.js
similarity index 58%
rename from common/app/routes/challenges/redux/next-challenge-saga.js
rename to common/app/routes/challenges/redux/challenge-epic.js
index 77fd920113..3f69fe0bce 100644
--- a/common/app/routes/challenges/redux/next-challenge-saga.js
+++ b/common/app/routes/challenges/redux/challenge-epic.js
@@ -1,22 +1,59 @@
+import debug from 'debug';
import { Observable } from 'rx';
+import { combineEpics, ofType } from 'redux-epic';
import { push } from 'react-router-redux';
-import types from './types';
-import { resetUi, updateCurrentChallenge } from './actions';
-import { createErrorObservable } from '../../../redux/actions';
-import { makeToast } from '../../../toasts/redux/actions';
+
+import {
+ types,
+
+ updateMain,
+ challengeUpdated
+} from './';
+import { getNS as entitiesSelector } from '../../../entities';
import {
getNextChallenge,
getFirstChallengeOfNextBlock,
getFirstChallengeOfNextSuperBlock
} from '../utils';
-import debug from 'debug';
+import {
+ types as app,
+
+ createErrorObservable,
+ updateCurrentChallenge,
+
+ currentChallengeSelector,
+ challengeSelector,
+ superBlocksSelector
+} from '../../../redux';
+import { makeToast } from '../../../Toasts/redux';
const isDev = debug.enabled('fcc:*');
-const { moveToNextChallenge } = types;
-export default function nextChallengeSaga(actions$, getState) {
- return actions$
- .filter(({ type }) => type === moveToNextChallenge)
+export function challengeUpdatedEpic(actions, { getState }) {
+ return actions::ofType(app.updateCurrentChallenge)
+ .flatMap(() => {
+ const challenge = challengeSelector(getState());
+ return Observable.of(
+ challengeUpdated(challenge),
+ push(`/challenges/${challenge.block}/${challenge.dashedName}`)
+ );
+ });
+}
+
+// used to reset users code on request
+export function resetChallengeEpic(actions, { getState }) {
+ return actions::ofType(types.resetChallenge)
+ .flatMap(() => {
+ const currentChallenge = currentChallengeSelector(getState());
+ return Observable.of(
+ updateCurrentChallenge(currentChallenge),
+ updateMain()
+ );
+ });
+}
+
+export function nextChallengeEpic(actions, { getState }) {
+ return actions::ofType(types.moveToNextChallenge)
.flatMap(() => {
let nextChallenge;
// let message = '';
@@ -24,8 +61,9 @@ export default function nextChallengeSaga(actions$, getState) {
// let isNewSuperBlock = false;
try {
const state = getState();
- const { challenge, superBlocks } = state.challengesApp;
- const { entities } = state;
+ const superBlocks = superBlocksSelector(state);
+ const challenge = currentChallengeSelector(state);
+ const entities = entitiesSelector(state);
nextChallenge = getNextChallenge(challenge, entities, { isDev });
// block completed.
if (!nextChallenge) {
@@ -73,13 +111,17 @@ export default function nextChallengeSaga(actions$, getState) {
);
}
return Observable.of(
- updateCurrentChallenge(nextChallenge),
- resetUi(),
- makeToast({ message: 'Your next challenge has arrived.' }),
- push(`/challenges/${nextChallenge.block}/${nextChallenge.dashedName}`)
+ updateCurrentChallenge(nextChallenge.dashedName),
+ makeToast({ message: 'Your next challenge has arrived.' })
);
} catch (err) {
return createErrorObservable(err);
}
});
}
+
+export default combineEpics(
+ challengeUpdatedEpic,
+ nextChallengeEpic,
+ resetChallengeEpic
+);
diff --git a/common/app/routes/challenges/redux/completion-saga.js b/common/app/routes/challenges/redux/completion-epic.js
similarity index 63%
rename from common/app/routes/challenges/redux/completion-saga.js
rename to common/app/routes/challenges/redux/completion-epic.js
index 9205cc1153..ab7265aab1 100644
--- a/common/app/routes/challenges/redux/completion-saga.js
+++ b/common/app/routes/challenges/redux/completion-epic.js
@@ -1,25 +1,35 @@
import { Observable } from 'rx';
+import { ofType } from 'redux-epic';
-import types from './types.js';
import {
- moveToNextChallenge,
- clearSavedCode
-} from './actions.js';
+ types,
+
+ moveToNextChallenge,
+ clearSavedCode,
+
+ challengeMetaSelector,
+ filesSelector,
+ testsSelector
+} from './';
-import { challengeSelector } from './selectors.js';
import {
createErrorObservable,
+
+ challengeSelector,
+ csrfSelector,
+ userSelector
+} from '../../../redux';
+import {
updateUserPoints,
updateUserChallenge
-} from '../../../redux/actions.js';
+} from '../../../entities';
import { backEndProject } from '../../../utils/challengeTypes.js';
-import { makeToast } from '../../../toasts/redux/actions.js';
+import { makeToast } from '../../../Toasts/redux';
import { postJSON$ } from '../../../../utils/ajax-stream.js';
-import { ofType } from '../../../../utils/get-actions-of-type.js';
function postChallenge(url, username, _csrf, challengeInfo) {
const body = { ...challengeInfo, _csrf };
- const saveChallenge$ = postJSON$(url, body)
+ const saveChallenge = postJSON$(url, body)
.retry(3)
.flatMap(({ points, lastUpdated, completedDate }) => {
return Observable.of(
@@ -32,29 +42,27 @@ function postChallenge(url, username, _csrf, challengeInfo) {
);
})
.catch(createErrorObservable);
- const challengeCompleted$ = Observable.of(moveToNextChallenge());
- return Observable.merge(saveChallenge$, challengeCompleted$);
+ const challengeCompleted = Observable.of(moveToNextChallenge());
+ return Observable.merge(saveChallenge, challengeCompleted);
}
function submitModern(type, state) {
- const { tests } = state.challengesApp;
+ const tests = testsSelector(state);
if (tests.length > 0 && tests.every(test => test.pass && !test.err)) {
if (type === types.checkChallenge) {
- return Observable.just(null);
+ return Observable.empty();
}
if (type === types.submitChallenge) {
- const { challenge: { id } } = challengeSelector(state);
- const {
- app: { user, csrfToken },
- challengesApp: { files }
- } = state;
- const challengeInfo = { id, files };
+ const { id } = challengeSelector(state);
+ const files = filesSelector(state);
+ const { username } = userSelector(state);
+ const csrfToken = csrfSelector(state);
return postChallenge(
'/modern-challenge-completed',
- user,
+ username,
csrfToken,
- challengeInfo
+ { id, files }
);
}
}
@@ -64,42 +72,36 @@ function submitModern(type, state) {
}
function submitProject(type, state, { solution, githubLink }) {
- const {
- challenge: { id, challengeType }
- } = challengeSelector(state);
- const {
- app: { user, csrfToken }
- } = state;
+ const { id, challengeType } = challengeSelector(state);
+ const { username } = userSelector(state);
+ const csrfToken = csrfSelector(state);
const challengeInfo = { id, challengeType, solution };
if (challengeType === backEndProject) {
challengeInfo.githubLink = githubLink;
}
return postChallenge(
'/project-completed',
- user,
+ username,
csrfToken,
challengeInfo
);
}
function submitSimpleChallenge(type, state) {
- const {
- challenge: { id }
- } = challengeSelector(state);
- const {
- app: { user, csrfToken }
- } = state;
+ const { id } = challengeSelector(state);
+ const { username } = userSelector(state);
+ const csrfToken = csrfSelector(state);
const challengeInfo = { id };
return postChallenge(
'/challenge-completed',
- user,
+ username,
csrfToken,
challengeInfo
);
}
function submitBackendChallenge(type, state, { solution }) {
- const { tests } = state.challengesApp;
+ const tests = testsSelector(state);
if (
type === types.checkChallenge &&
tests.length > 0 &&
@@ -115,13 +117,13 @@ function submitBackendChallenge(type, state, { solution }) {
})
);
*/
-
- const { challenge: { id } } = challengeSelector(state);
- const { app: { user, csrfToken } } = state;
+ const { id } = challengeSelector(state);
+ const { username } = userSelector(state);
+ const csrfToken = csrfSelector(state);
const challengeInfo = { id, solution };
return postChallenge(
'/backend-challenge-completed',
- user,
+ username,
csrfToken,
challengeInfo
);
@@ -141,14 +143,12 @@ const submitters = {
'project.simple': submitSimpleChallenge
};
-export default function completionSaga(actions$, getState) {
- return actions$
- ::ofType(types.checkChallenge, types.submitChallenge)
+export default function completionEpic(actions, { getState }) {
+ return actions::ofType(types.checkChallenge, types.submitChallenge)
.flatMap(({ type, payload }) => {
const state = getState();
- const { submitType } = challengeSelector(state);
- const submitter = submitters[submitType] ||
- (() => Observable.just(null));
+ const { submitType } = challengeMetaSelector(state);
+ const submitter = submitters[submitType] || (() => Observable.empty());
return submitter(type, state, payload);
});
}
diff --git a/common/app/routes/challenges/redux/editor-epic.js b/common/app/routes/challenges/redux/editor-epic.js
new file mode 100644
index 0000000000..33eda718cc
--- /dev/null
+++ b/common/app/routes/challenges/redux/editor-epic.js
@@ -0,0 +1,17 @@
+import { ofType } from 'redux-epic';
+
+import {
+ types,
+ updateFile,
+
+ keySelector
+} from './';
+
+export default function editorEpic(actions, { getState }) {
+ return actions::ofType(types.classicEditorUpdated)
+ .pluck('payload')
+ .map(content => updateFile({
+ content,
+ key: keySelector(getState())
+ }));
+}
diff --git a/common/app/routes/challenges/redux/fetch-challenges-saga.js b/common/app/routes/challenges/redux/fetch-challenges-saga.js
deleted file mode 100644
index 5ad27638d3..0000000000
--- a/common/app/routes/challenges/redux/fetch-challenges-saga.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Observable } from 'rx';
-import debug from 'debug';
-
-import { challengeSelector } from './selectors';
-import types from './types';
-import {
- fetchChallengeCompleted,
- fetchChallengesCompleted,
- updateCurrentChallenge,
- initMap
-} from './actions';
-import {
- createMapUi,
- filterComingSoonBetaFromEntities,
- searchableChallengeTitles
-} from '../utils';
-import {
- delayedRedirect,
- createErrorObservable
-} from '../../../redux/actions';
-import createNameIdMap from '../../../../utils/create-name-id-map';
-
-const isDev = debug.enabled('fcc:*');
-
-const { fetchChallenge, fetchChallenges, replaceChallenge } = types;
-
-export default function fetchChallengesSaga(action$, getState, { services }) {
- return action$
- .filter(({ type }) => (
- type === fetchChallenges ||
- type === fetchChallenge ||
- type === replaceChallenge
- ))
- .flatMap(({ type, payload: { dashedName, block } = {} }) => {
- const state = getState();
- const lang = state.app.lang;
- if (type === replaceChallenge) {
- const { challenge: newChallenge } = challengeSelector({
- ...state,
- challengesApp: {
- ...state.challengesApp,
- challenge: dashedName
- }
- });
- if (state.challengesApp.challenge !== newChallenge.dashedName) {
- return Observable.just(updateCurrentChallenge(newChallenge));
- }
- return Observable.just(null);
- }
- const options = { service: 'map' };
- options.params = { lang };
- if (type === fetchChallenge) {
- options.params.dashedName = dashedName;
- options.params.block = block;
- }
- return services.readService$(options)
- .retry(3)
- .flatMap(({ entities, result, redirect } = {}) => {
- if (type === fetchChallenge) {
- return Observable.of(
- fetchChallengeCompleted(
- createNameIdMap(entities),
- result
- ),
- updateCurrentChallenge(entities.challenge[result.challenge]),
- redirect ? delayedRedirect(redirect) : null
- );
- }
- const filteredEntities = filterComingSoonBetaFromEntities(
- entities,
- isDev
- );
- const searchNames = searchableChallengeTitles(filteredEntities);
- return Observable.of(
- fetchChallengesCompleted(
- createNameIdMap(filteredEntities),
- result
- ),
- initMap(
- createMapUi(
- filteredEntities,
- result,
- searchNames
- )),
- );
- })
- .catch(createErrorObservable);
- });
-}
diff --git a/common/app/routes/challenges/redux/index.js b/common/app/routes/challenges/redux/index.js
index 1ea0b8dbea..61cef59898 100644
--- a/common/app/routes/challenges/redux/index.js
+++ b/common/app/routes/challenges/redux/index.js
@@ -1,25 +1,366 @@
-import fetchChallengesSaga from './fetch-challenges-saga';
-import completionSaga from './completion-saga';
-import nextChallengeSaga from './next-challenge-saga';
-import answerSaga from './answer-saga';
-import resetChallengeSaga from './reset-challenge-saga';
-import bugSaga from './bug-saga';
-import mapUiSaga from './map-ui-saga';
-import stepChallengeEpic from './step-challenge-epic';
+import { createTypes } from 'redux-create-types';
+import { createAction, combineActions, handleActions } from 'redux-actions';
+import { createSelector } from 'reselect';
+import noop from 'lodash/noop';
-export * as actions from './actions';
-export reducer from './reducer';
-export types from './types';
+import bugEpic from './bug-epic';
+import completionEpic from './completion-epic.js';
+import challengeEpic from './challenge-epic.js';
+import editorEpic from './editor-epic.js';
-export projectNormalizer from './project-normalizer';
+import ns from '../ns.json';
+import {
+ arrayToString,
+ buildSeed,
+ createTests,
+ getFileKey,
+ getPreFile,
+ loggerToStr,
+ submitTypes,
+ viewTypes
+} from '../utils';
+import {
+ types as app,
+ challengeSelector
+} from '../../../redux';
+import { bonfire, html, js } from '../../../utils/challengeTypes';
+import blockNameify from '../../../utils/blockNameify';
+import { createPoly, setContent } from '../../../../utils/polyvinyl';
+import createStepReducer, { epics as stepEpics } from '../views/step/redux';
+import createProjectReducer from '../views/project/redux';
-export const sagas = [
- fetchChallengesSaga,
- completionSaga,
- nextChallengeSaga,
- answerSaga,
- resetChallengeSaga,
- bugSaga,
- mapUiSaga,
- stepChallengeEpic
+// this is not great but is ok until we move to a different form type
+export projectNormalizer from '../views/project/redux';
+
+export const epics = [
+ bugEpic,
+ completionEpic,
+ challengeEpic,
+ editorEpic,
+ ...stepEpics
];
+
+export const types = createTypes([
+ // challenges
+ // |- classic
+ 'classicEditorUpdated',
+ 'challengeUpdated',
+ 'resetChallenge',
+ 'updateHint',
+ 'lockUntrustedCode',
+ 'unlockUntrustedCode',
+ 'closeChallengeModal',
+ 'updateSuccessMessage',
+
+ // files
+ 'updateFile',
+ 'updateFiles',
+
+ // rechallenge
+ 'executeChallenge',
+ 'updateMain',
+ 'runTests',
+ 'frameMain',
+ 'frameTests',
+ 'updateOutput',
+ 'initOutput',
+ 'updateTests',
+ 'checkChallenge',
+ 'submitChallenge',
+ 'moveToNextChallenge',
+
+ // code storage
+ 'saveCode',
+ 'loadCode',
+ 'savedCodeFound',
+ 'clearSavedCode',
+
+ // bug
+ 'openBugModal',
+ 'closeBugModal',
+ 'openIssueSearch',
+ 'createIssue',
+
+ // panes
+ 'toggleClassicEditor',
+ 'toggleMain',
+ 'toggleMap',
+ 'togglePreview',
+ 'toggleSidePanel',
+ 'toggleStep'
+], ns);
+
+// classic
+export const classicEditorUpdated = createAction(types.classicEditorUpdated);
+// challenges
+export const closeChallengeModal = createAction(types.closeChallengeModal);
+export const updateHint = createAction(types.updateHint);
+export const lockUntrustedCode = createAction(types.lockUntrustedCode);
+export const unlockUntrustedCode = createAction(
+ types.unlockUntrustedCode,
+ () => null
+);
+export const updateSuccessMessage = createAction(types.updateSuccessMessage);
+export const challengeUpdated = createAction(
+ types.challengeUpdated,
+ challenge => ({ challenge })
+);
+export const resetChallenge = createAction(types.resetChallenge);
+// files
+export const updateFile = createAction(types.updateFile);
+export const updateFiles = createAction(types.updateFiles);
+
+// rechallenge
+export const executeChallenge = createAction(
+ types.executeChallenge,
+ noop,
+);
+
+export const updateMain = createAction(types.updateMain);
+export const frameMain = createAction(types.frameMain);
+export const frameTests = createAction(types.frameTests);
+
+export const runTests = createAction(types.runTests);
+export const updateTests = createAction(types.updateTests);
+
+export const initOutput = createAction(types.initOutput, loggerToStr);
+export const updateOutput = createAction(types.updateOutput, loggerToStr);
+
+export const checkChallenge = createAction(types.checkChallenge);
+
+export const submitChallenge = createAction(types.submitChallenge);
+export const moveToNextChallenge = createAction(types.moveToNextChallenge);
+
+// code storage
+export const saveCode = createAction(types.saveCode);
+export const loadCode = createAction(types.loadCode);
+export const savedCodeFound = createAction(
+ types.savedCodeFound,
+ (files, challenge) => ({ files, challenge })
+);
+export const clearSavedCode = createAction(types.clearSavedCode);
+
+// bug
+export const openBugModal = createAction(types.openBugModal);
+export const closeBugModal = createAction(types.closeBugModal);
+export const openIssueSearch = createAction(types.openIssueSearch);
+export const createIssue = createAction(types.createIssue);
+
+const initialUiState = {
+ output: null,
+ isChallengeModalOpen: false,
+ isBugOpen: false,
+ successMessage: 'Happy Coding!',
+ hintIndex: 0,
+ numOfHints: 0
+};
+
+const initialState = {
+ isCodeLocked: false,
+ id: '',
+ challenge: '',
+ helpChatRoom: 'Help',
+ // old code storage key
+ legacyKey: '',
+ files: {},
+ // map
+ superBlocks: [],
+ // misc
+ ...initialUiState
+};
+
+export const getNS = state => state[ns];
+export const keySelector = state => getNS(state).key;
+export const filesSelector = state => getNS(state).files;
+export const testsSelector = state => getNS(state).tests;
+
+export const outputSelector = state => getNS(state).output;
+export const successMessageSelector = state => getNS(state).successMessage;
+export const hintIndexSelector = state => getNS(state).hintIndex;
+export const codeLockedSelector = state => getNS(state).isCodeLocked;
+export const chatRoomSelector = state => getNS(state).helpChatRoom;
+export const challengeModalSelector =
+ state => getNS(state).isChallengeModalOpen;
+
+export const bugModalSelector = state => getNS(state).isBugOpen;
+
+export const challengeMetaSelector = createSelector(
+ challengeSelector,
+ challenge => {
+ if (!challenge.id) {
+ return {};
+ }
+ const challengeType = challenge && challenge.challengeType;
+ const type = challenge && challenge.type;
+ const viewType = viewTypes[type] || viewTypes[challengeType] || 'classic';
+ const blockName = blockNameify(challenge.block);
+ const title = blockName && challenge.title ?
+ `${blockName}: ${challenge.title}` :
+ challenge.title;
+
+ return {
+ title,
+ viewType,
+ submitType:
+ submitTypes[challengeType] ||
+ submitTypes[challenge && challenge.type] ||
+ 'tests',
+ showPreview: challengeType === html,
+ mode: challenge && challengeType === html ?
+ 'text/html' :
+ 'javascript'
+ };
+ }
+);
+
+export default function createReducers() {
+ const setChallengeType = combineActions(
+ types.challengeUpdated,
+ app.fetchChallenge.complete
+ );
+
+ const mainReducer = handleActions(
+ {
+ [setChallengeType]: (state, { payload: { challenge } }) => {
+ return {
+ ...state,
+ ...initialUiState,
+ id: challenge.id,
+ challenge: challenge.dashedName,
+ key: getFileKey(challenge),
+ tests: createTests(challenge),
+ helpChatRoom: challenge.helpRoom || 'Help',
+ numOfHints: Array.isArray(challenge.hints) ?
+ challenge.hints.length :
+ 0
+ };
+ },
+ [types.updateTests]: (state, { payload: tests }) => ({
+ ...state,
+ tests,
+ isChallengeModalOpen: (
+ tests.length > 0 &&
+ tests.every(test => test.pass && !test.err)
+ )
+ }),
+ [types.closeChallengeModal]: state => ({
+ ...state,
+ isChallengeModalOpen: false
+ }),
+ [types.updateSuccessMessage]: (state, { payload }) => ({
+ ...state,
+ successMessage: payload
+ }),
+ [types.updateHint]: state => ({
+ ...state,
+ hintIndex: state.hintIndex + 1 >= state.numOfHints ?
+ 0 :
+ state.hintIndex + 1
+ }),
+ [types.lockUntrustedCode]: state => ({
+ ...state,
+ isCodeLocked: true
+ }),
+ [types.unlockUntrustedCode]: state => ({
+ ...state,
+ isCodeLocked: false
+ }),
+ [types.executeChallenge]: state => ({
+ ...state,
+ tests: state.tests.map(test => ({ ...test, err: false, pass: false }))
+ }),
+
+ // classic/modern
+ [types.initOutput]: (state, { payload: output }) => ({
+ ...state,
+ output
+ }),
+ [types.updateOutput]: (state, { payload: output }) => ({
+ ...state,
+ output: (state.output || '') + output
+ }),
+
+ [types.openBugModal]: state => ({ ...state, isBugOpen: true }),
+ [types.closeBugModal]: state => ({ ...state, isBugOpen: false })
+ },
+ initialState
+ );
+
+ const filesReducer = handleActions(
+ {
+ [types.updateFile]: (state, { payload: { key, content }}) => ({
+ ...state,
+ [key]: setContent(content, state[key])
+ }),
+ [types.updateFiles]: (state, { payload: files }) => {
+ return files
+ .reduce((files, file) => {
+ files[file.key] = file;
+ return files;
+ }, { ...state });
+ },
+ [types.savedCodeFound]: (state, { payload: { files, challenge } }) => {
+ if (challenge.type === 'mod') {
+ // this may need to change to update head/tail
+ return challenge.files;
+ }
+ if (
+ challenge.challengeType !== html &&
+ challenge.challengeType !== js &&
+ challenge.challengeType !== bonfire
+ ) {
+ return {};
+ }
+ // classic challenge to modern format
+ const preFile = getPreFile(challenge);
+ return {
+ [preFile.key]: createPoly({
+ ...files[preFile.key],
+ // make sure head/tail are always fresh
+ head: arrayToString(challenge.head),
+ tail: arrayToString(challenge.tail)
+ })
+ };
+ },
+ [setChallengeType]: (state, { payload: { challenge } }) => {
+ if (challenge.type === 'mod') {
+ return challenge.files;
+ }
+ if (
+ challenge.challengeType !== html &&
+ challenge.challengeType !== js &&
+ challenge.challengeType !== bonfire
+ ) {
+ return {};
+ }
+ // classic challenge to modern format
+ const preFile = getPreFile(challenge);
+ return {
+ [preFile.key]: createPoly({
+ ...preFile,
+ contents: buildSeed(challenge),
+ head: arrayToString(challenge.head),
+ tail: arrayToString(challenge.tail)
+ })
+ };
+ }
+ },
+ {}
+ );
+
+ function reducer(state, action) {
+ const newState = mainReducer(state, action);
+ const files = filesReducer(state && state.files || {}, action);
+ if (newState.files !== files) {
+ return { ...newState, files };
+ }
+ return newState;
+ }
+
+ reducer.toString = () => ns;
+ return [
+ reducer,
+ ...createStepReducer(),
+ ...createProjectReducer()
+ ];
+}
diff --git a/common/app/routes/challenges/redux/map-ui-saga.js b/common/app/routes/challenges/redux/map-ui-saga.js
deleted file mode 100644
index 9d3cff1c61..0000000000
--- a/common/app/routes/challenges/redux/map-ui-saga.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import types from './types';
-import { initMap } from './actions';
-import { unfilterMapUi, applyFilterToMap } from '../utils';
-
-export default function mapUiSaga(actions$, getState) {
- return actions$
- .filter(({ type }) => (
- type === types.updateFilter ||
- type === types.clearFilter
- ))
- .debounce(250)
- .map(({ payload: filter = '' }) => filter)
- .distinctUntilChanged()
- .map(filter => {
- const { challengesApp: { mapUi = {} } } = getState();
- let newMapUi;
- if (filter.length <= 3) {
- newMapUi = unfilterMapUi(mapUi);
- } else {
- const regexString = filter
- // replace spaces with any key to match dashes
- .replace(/ /g, '.')
- // makes search more fuzzy (thanks @xRahul)
- .split('')
- .join('.*');
- const filterRegex = new RegExp(regexString, 'i');
- newMapUi = applyFilterToMap(mapUi, filterRegex);
- }
- if (!newMapUi || newMapUi === mapUi) {
- return null;
- }
- return initMap(newMapUi);
- });
-}
diff --git a/common/app/routes/challenges/redux/reducer.js b/common/app/routes/challenges/redux/reducer.js
deleted file mode 100644
index cda99f4fb2..0000000000
--- a/common/app/routes/challenges/redux/reducer.js
+++ /dev/null
@@ -1,333 +0,0 @@
-import { handleActions } from 'redux-actions';
-import { createPoly } from '../../../../utils/polyvinyl';
-
-import types from './types';
-import { bonfire, html, js } from '../../../utils/challengeTypes';
-import {
- arrayToString,
- buildSeed,
- createTests,
- getPreFile,
- getFileKey,
- toggleThisPanel,
- collapseAllPanels,
- expandAllPanels
-} from '../utils';
-
-const initialUiState = {
- hintIndex: 0,
- // step index tracing
- currentIndex: 0,
- previousIndex: -1,
- // step action
- isActionCompleted: false,
- isLightBoxOpen: false,
- // project is ready to submit
- isSubmitting: false,
- output: null,
- // video
- // 1 indexed
- currentQuestion: 1,
- // [ xPosition, yPosition ]
- mouse: [ 0, 0 ],
- // change in mouse position since pressed
- // [ xDelta, yDelta ]
- delta: [ 0, 0 ],
- isPressed: false,
- isCorrect: false,
- shouldShakeQuestion: false,
- shouldShowQuestions: false,
- isChallengeModalOpen: false,
- successMessage: 'Happy Coding!',
- unlockedSteps: []
-};
-const initialState = {
- isCodeLocked: false,
- id: '',
- challenge: '',
- helpChatRoom: 'Help',
- isBugOpen: false,
- // old code storage key
- legacyKey: '',
- files: {},
- // map
- mapUi: { isAllCollapsed: false },
- filter: '',
- superBlocks: [],
- // misc
- toast: 0,
- ...initialUiState
-};
-
-const mainReducer = handleActions(
- {
- [types.fetchChallengeCompleted]: (state, { payload = '' }) => ({
- ...state,
- challenge: payload
- }),
- [types.updateCurrentChallenge]: (state, { payload: challenge = {} }) => ({
- ...state,
- id: challenge.id,
- // used mainly to find code storage
- legacyKey: challenge.name,
- challenge: challenge.dashedName,
- key: getFileKey(challenge),
- tests: createTests(challenge),
- helpChatRoom: challenge.helpRoom || 'Help',
- numOfHints: Array.isArray(challenge.hints) ? challenge.hints.length : 0
- }),
- [types.updateTests]: (state, { payload: tests }) => ({
- ...state,
- tests,
- isChallengeModalOpen: (
- tests.length > 0 &&
- tests.every(test => test.pass && !test.err)
- )
- }),
- [types.closeChallengeModal]: state => ({
- ...state,
- isChallengeModalOpen: false
- }),
- [types.updateSuccessMessage]: (state, { payload }) => ({
- ...state,
- successMessage: payload
- }),
- [types.updateHint]: state => ({
- ...state,
- hintIndex: state.hintIndex + 1 >= state.numOfHints ?
- 0 :
- state.hintIndex + 1
- }),
- [types.lockUntrustedCode]: state => ({
- ...state,
- isCodeLocked: true
- }),
- [types.unlockUntrustedCode]: state => ({
- ...state,
- isCodeLocked: false
- }),
- [types.executeChallenge]: state => ({
- ...state,
- tests: state.tests.map(test => ({ ...test, err: false, pass: false }))
- }),
- [types.showChallengeComplete]: (state, { payload: toast }) => ({
- ...state,
- toast
- }),
- [types.showProjectSubmit]: state => ({
- ...state,
- isSubmitting: true
- }),
- [types.resetUi]: (state) => ({
- ...state,
- ...initialUiState
- }),
-
- // map
- [types.updateFilter]: (state, { payload = ''}) => ({
- ...state,
- filter: payload
- }),
- [types.clearFilter]: (state) => ({
- ...state,
- filter: ''
- }),
- [types.fetchChallengesCompleted]: (state, { payload = [] }) => ({
- ...state,
- superBlocks: payload
- }),
-
- // step
- [types.goToStep]: (state, { payload: { step = 0, isUnlocked }}) => ({
- ...state,
- currentIndex: step,
- previousIndex: state.currentIndex,
- isActionCompleted: isUnlocked
- }),
- [types.completeAction]: state => ({
- ...state,
- isActionCompleted: true
- }),
- [types.updateUnlockedSteps]: (state, { payload }) => ({
- ...state,
- unlockedSteps: payload
- }),
- [types.openLightBoxImage]: state => ({
- ...state,
- isLightBoxOpen: true
- }),
- [types.closeLightBoxImage]: state => ({
- ...state,
- isLightBoxOpen: false
- }),
-
- // classic/modern
- [types.initOutput]: (state, { payload: output }) => ({
- ...state,
- output
- }),
- [types.updateOutput]: (state, { payload: output }) => ({
- ...state,
- output: (state.output || '') + output
- }),
- // video
- [types.toggleQuestionView]: state => ({
- ...state,
- shouldShowQuestions: !state.shouldShowQuestions,
- currentQuestion: 1
- }),
-
- [types.grabQuestion]: (state, { payload: { delta, mouse } }) => ({
- ...state,
- isPressed: true,
- delta,
- mouse
- }),
-
- [types.releaseQuestion]: state => ({
- ...state,
- isPressed: false,
- mouse: [ 0, 0 ]
- }),
-
- [types.moveQuestion]: (state, { payload: mouse }) => ({ ...state, mouse }),
- [types.startShake]: state => ({ ...state, shouldShakeQuestion: true }),
- [types.endShake]: state => ({ ...state, shouldShakeQuestion: false }),
-
- [types.primeNextQuestion]: (state, { payload: userAnswer }) => ({
- ...state,
- currentQuestion: state.currentQuestion + 1,
- mouse: [ userAnswer ? 1000 : -1000, 0],
- isPressed: false
- }),
-
- [types.goToNextQuestion]: state => ({
- ...state,
- mouse: [ 0, 0 ]
- }),
-
- [types.videoCompleted]: (state, { payload: userAnswer }) => ({
- ...state,
- isCorrect: true,
- isPressed: false,
- delta: [ 0, 0 ],
- mouse: [ userAnswer ? 1000 : -1000, 0]
- }),
-
- [types.openBugModal]: state => ({ ...state, isBugOpen: true }),
- [types.closeBugModal]: state => ({ ...state, isBugOpen: false })
- },
- initialState
-);
-
-const filesReducer = handleActions(
- {
- [types.updateFile]: (state, { payload: file }) => ({
- ...state,
- [file.key]: file
- }),
- [types.updateFiles]: (state, { payload: files }) => {
- return files
- .reduce((files, file) => {
- files[file.key] = file;
- return files;
- }, { ...state });
- },
- [types.savedCodeFound]: (state, { payload: { files, challenge } }) => {
- if (challenge.type === 'mod') {
- // this may need to change to update head/tail
- return challenge.files;
- }
- if (
- challenge.challengeType !== html &&
- challenge.challengeType !== js &&
- challenge.challengeType !== bonfire
- ) {
- return {};
- }
- // classic challenge to modern format
- const preFile = getPreFile(challenge);
- return {
- [preFile.key]: createPoly({
- ...files[preFile.key],
- // make sure head/tail are always fresh
- head: arrayToString(challenge.head),
- tail: arrayToString(challenge.tail)
- })
- };
- },
- [types.updateCurrentChallenge]: (state, { payload: challenge = {} }) => {
- if (challenge.type === 'mod') {
- return challenge.files;
- }
- if (
- challenge.challengeType !== html &&
- challenge.challengeType !== js &&
- challenge.challengeType !== bonfire
- ) {
- return {};
- }
- // classic challenge to modern format
- const preFile = getPreFile(challenge);
- return {
- [preFile.key]: createPoly({
- ...preFile,
- contents: buildSeed(challenge),
- head: arrayToString(challenge.head),
- tail: arrayToString(challenge.tail)
- })
- };
- }
- },
- {}
-);
-
-// {
-// children: [...{
-// name: (superBlock: String),
-// isOpen: Boolean,
-// isHidden: Boolean,
-// children: [...{
-// name: (blockName: String),
-// isOpen: Boolean,
-// isHidden: Boolean,
-// children: [...{
-// name: (challengeName: String),
-// isHidden: Boolean
-// }]
-// }]
-// }
-// }
-const mapReducer = handleActions(
- {
- [types.initMap]: (state, { payload }) => payload,
- [types.toggleThisPanel]: (state, { payload: name }) => {
- return toggleThisPanel(state, name);
- },
- [types.collapseAll]: state => {
- const newState = collapseAllPanels(state);
- newState.isAllCollapsed = true;
- return newState;
- },
- [types.expandAll]: state => {
- const newState = expandAllPanels(state);
- newState.isAllCollapsed = false;
- return newState;
- }
- },
- initialState.mapUi
-);
-
-export default function challengeReducers(state, action) {
- const newState = mainReducer(state, action);
- const files = filesReducer(state && state.files || {}, action);
- if (newState.files !== files) {
- return { ...newState, files };
- }
- // map actions only effect this reducer;
- const mapUi = mapReducer(state && state.mapUi || {}, action);
- if (newState.mapUi !== mapUi) {
- return { ...newState, mapUi };
- }
- return newState;
-}
diff --git a/common/app/routes/challenges/redux/reset-challenge-saga.js b/common/app/routes/challenges/redux/reset-challenge-saga.js
deleted file mode 100644
index 65ff5ec5ad..0000000000
--- a/common/app/routes/challenges/redux/reset-challenge-saga.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Observable } from 'rx';
-import types from './types';
-import {
- updateCurrentChallenge,
- updateMain
-} from './actions';
-
-export default function resetChallengeSaga(actions$, getState) {
- return actions$
- .filter(({ type }) => type === types.resetChallenge)
- .flatMap(() => {
- const {
- challengesApp: { challenge: dashedName },
- entities: { challenge: challengeMap }
- } = getState();
- const currentChallenge = challengeMap[dashedName];
- return Observable.of(
- updateCurrentChallenge(currentChallenge),
- updateMain()
- );
- });
-}
diff --git a/common/app/routes/challenges/redux/selectors.js b/common/app/routes/challenges/redux/selectors.js
deleted file mode 100644
index 7ab4063529..0000000000
--- a/common/app/routes/challenges/redux/selectors.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createSelector } from 'reselect';
-
-import { viewTypes, submitTypes, getNode } from '../utils';
-import blockNameify from '../../../utils/blockNameify';
-import { html } from '../../../utils/challengeTypes';
-
-export const challengeSelector = createSelector(
- state => state.challengesApp.challenge,
- state => state.entities.challenge,
- (challengeName, challengeMap) => {
- if (!challengeName || !challengeMap) {
- return {};
- }
- const challenge = challengeMap[challengeName];
- const challengeType = challenge && challenge.challengeType;
- const type = challenge && challenge.type;
- const viewType = viewTypes[type] || viewTypes[challengeType] || 'classic';
- const blockName = blockNameify(challenge.block);
- const title = blockName && challenge.title ?
- `${blockName}: ${challenge.title}` :
- challenge.title;
- return {
- challenge,
- title,
- viewType,
- submitType:
- submitTypes[challengeType] ||
- submitTypes[challenge && challenge.type] ||
- 'tests',
- showPreview: challengeType === html,
- mode: challenge && challengeType === html ?
- 'text/html' :
- 'javascript'
- };
- }
-);
-
-export const makePanelOpenSelector = () => createSelector(
- state => state.challengesApp.mapUi,
- (_, props) => props.dashedName,
- (mapUi, name) => {
- const node = getNode(mapUi, name);
- return node ? node.isOpen : true;
- }
-);
-
-export const makePanelHiddenSelector = () => createSelector(
- state => state.challengesApp.mapUi,
- (_, props) => props.dashedName,
- (mapUi, name) => {
- const node = getNode(mapUi, name);
- return node ? node.isHidden : false;
- }
-);
diff --git a/common/app/routes/challenges/redux/types.js b/common/app/routes/challenges/redux/types.js
deleted file mode 100644
index d04cd0bb38..0000000000
--- a/common/app/routes/challenges/redux/types.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import createTypes from '../../../utils/create-types';
-
-export default createTypes([
- // step
- 'stepForward',
- 'stepBackward',
- 'goToStep',
- 'completeAction',
- 'openLightBoxImage',
- 'closeLightBoxImage',
- 'updateUnlockedSteps',
-
- // challenges
- 'fetchChallenge',
- 'fetchChallenges',
- 'fetchChallengeCompleted',
- 'fetchChallengesCompleted',
- 'updateCurrentChallenge',
- 'resetChallenge',
- 'replaceChallenge',
- 'resetUi',
- 'updateHint',
- 'lockUntrustedCode',
- 'unlockUntrustedCode',
- 'closeChallengeModal',
- 'updateSuccessMessage',
-
- // map
- 'updateFilter',
- 'clearFilter',
- 'initMap',
- 'toggleThisPanel',
- 'collapseAll',
- 'expandAll',
-
- // files
- 'updateFile',
- 'updateFiles',
-
- // rechallenge
- 'executeChallenge',
- 'updateMain',
- 'runTests',
- 'frameMain',
- 'frameTests',
- 'updateOutput',
- 'initOutput',
- 'updateTests',
- 'checkChallenge',
- 'showChallengeComplete',
- 'showProjectSubmit',
- 'submitChallenge',
- 'moveToNextChallenge',
-
- // code storage
- 'saveCode',
- 'loadCode',
- 'savedCodeFound',
- 'clearSavedCode',
-
- // video challenges
- 'toggleQuestionView',
- 'grabQuestion',
- 'releaseQuestion',
- 'moveQuestion',
-
- 'answerQuestion',
-
- 'startShake',
- 'endShake',
-
- 'primeNextQuestion',
- 'goToNextQuestion',
- 'transitionVideo',
- 'videoCompleted',
-
- // bug
- 'openBugModal',
- 'closeBugModal',
- 'openIssueSearch',
- 'createIssue'
-], 'challenges');
diff --git a/common/app/routes/challenges/utils.js b/common/app/routes/challenges/utils.js
index 29e65f2e36..39140c3429 100644
--- a/common/app/routes/challenges/utils.js
+++ b/common/app/routes/challenges/utils.js
@@ -1,6 +1,5 @@
import flow from 'lodash/flow';
import * as challengeTypes from '../../utils/challengeTypes';
-import protect from '../../utils/empty-protector';
import { decodeScriptTags } from '../../../utils/encode-decode';
// determine the component to view for each challenge
@@ -298,265 +297,3 @@ export function getCurrentSuperBlockName(current, entities) {
const block = blockMap[challenge.block];
return block.superBlock;
}
-
-// gets new mouse position
-// getMouse(
-// e: MouseEvent|TouchEvent,
-// [ dx: Number, dy: Number ]
-// ) => [ Number, Number ]
-export function getMouse(e, [dx, dy]) {
- let { pageX, pageY, touches, changedTouches } = e;
-
- // touches can be empty on touchend
- if (touches || changedTouches) {
- e.preventDefault();
- // these re-assigns the values of pageX, pageY from touches
- ({ pageX, pageY } = touches[0] || changedTouches[0]);
- }
-
- return [pageX - dx, pageY - dy];
-}
-
-export function filterComingSoonBetaChallenge(
- isDev = false,
- { isComingSoon, isBeta }
-) {
- return !(isComingSoon || isBeta) ||
- isDev;
-}
-
-export function filterComingSoonBetaFromEntities(
- { challenge: challengeMap, ...rest },
- isDev = false
-) {
- const filter = filterComingSoonBetaChallenge.bind(null, isDev);
- return {
- ...rest,
- challenge: Object.keys(challengeMap)
- .map(dashedName => challengeMap[dashedName])
- .filter(filter)
- .reduce((challengeMap, challenge) => {
- challengeMap[challenge.dashedName] = challenge;
- return challengeMap;
- }, {})
- };
-}
-
-export function searchableChallengeTitles({ challenge: challengeMap } = {}) {
- return Object.keys(challengeMap)
- .map(dashedName => challengeMap[dashedName])
- .reduce((accu, current) => {
- accu[current.dashedName] = current.title;
- return accu;
- }
- , {});
-}
-
-// interface Node {
-// isHidden: Boolean,
-// children: Void|[ ...Node ],
-// isOpen?: Boolean
-// }
-//
-// interface MapUi
-// {
-// children: [...{
-// name: (superBlock: String),
-// isOpen: Boolean,
-// isHidden: Boolean,
-// children: [...{
-// name: (blockName: String),
-// isOpen: Boolean,
-// isHidden: Boolean,
-// children: [...{
-// name: (challengeName: String),
-// isHidden: Boolean
-// }]
-// }]
-// }]
-// }
-export function createMapUi(
- { superBlock: superBlockMap, block: blockMap } = {},
- superBlocks,
- searchNameMap
-) {
- if (!superBlocks || !superBlockMap || !blockMap) {
- return {};
- }
- return {
- children: superBlocks.map(superBlock => {
- return {
- name: superBlock,
- isOpen: false,
- isHidden: false,
- children: protect(superBlockMap[superBlock]).blocks.map(block => {
- return {
- name: block,
- isOpen: false,
- isHidden: false,
- children: protect(blockMap[block]).challenges.map(challenge => {
- return {
- name: challenge,
- title: searchNameMap[challenge],
- isHidden: false,
- children: null
- };
- })
- };
- })
- };
- })
- };
-}
-
-// synchronise
-// traverseMapUi(
-// tree: MapUi|Node,
-// update: ((MapUi|Node) => MapUi|Node)
-// ) => MapUi|Node
-export function traverseMapUi(tree, update) {
- let childrenChanged;
- if (!Array.isArray(tree.children)) {
- return update(tree);
- }
- const newChildren = tree.children.map(node => {
- const newNode = traverseMapUi(node, update);
- if (!childrenChanged && newNode !== node) {
- childrenChanged = true;
- }
- return newNode;
- });
- if (childrenChanged) {
- tree = {
- ...tree,
- children: newChildren
- };
- }
- return update(tree);
-}
-
-// synchronise
-// getNode(tree: MapUi, name: String) => MapUi
-export function getNode(tree, name) {
- let node;
- traverseMapUi(tree, thisNode => {
- if (thisNode.name === name) {
- node = thisNode;
- }
- return thisNode;
- });
- return node;
-}
-
-// synchronise
-// updateSingelNode(
-// tree: MapUi,
-// name: String,
-// update(MapUi|Node) => MapUi|Node
-// ) => MapUi
-export function updateSingleNode(tree, name, update) {
- return traverseMapUi(tree, node => {
- if (name !== node.name) {
- return node;
- }
- return update(node);
- });
-}
-
-// synchronise
-// toggleThisPanel(tree: MapUi, name: String) => MapUi
-export function toggleThisPanel(tree, name) {
- return updateSingleNode(tree, name, node => {
- return {
- ...node,
- isOpen: !node.isOpen
- };
- });
-}
-
-// toggleAllPanels(tree: MapUi, isOpen: Boolean = false ) => MapUi
-export function toggleAllPanels(tree, isOpen = false) {
- return traverseMapUi(tree, node => {
- if (!Array.isArray(node.children) || node.isOpen === isOpen) {
- return node;
- }
- return {
- ...node,
- isOpen
- };
- });
-}
-
-// collapseAllPanels(tree: MapUi) => MapUi
-export function collapseAllPanels(tree) {
- return toggleAllPanels(tree);
-}
-
-// expandAllPanels(tree: MapUi) => MapUi
-export function expandAllPanels(tree) {
- return toggleAllPanels(tree, true);
-}
-
-// applyFilterToMap(tree: MapUi, filterRegex: RegExp) => MapUi
-export function applyFilterToMap(tree, filterRegex) {
- return traverseMapUi(
- tree,
- node => {
- // no children indicates a challenge node
- // if leaf (challenge) then test if regex is a match
- if (!Array.isArray(node.children)) {
- // does challenge name meet filter criteria?
- if (filterRegex.test(node.title)) {
- // is challenge currently hidden?
- if (node.isHidden) {
- // unhide challenge, it matches
- return {
- ...node,
- isHidden: false
- };
- }
- } else if (!node.isHidden) {
- return {
- ...node,
- isHidden: true
- };
- }
- return node;
- }
- // if not leaf node (challenge) then
- // test to see if all its children are hidden
- if (node.children.every(node => node.isHidden)) {
- if (node.isHidden) {
- return node;
- }
- return {
- ...node,
- isHidden: true
- };
- } else if (node.isHidden) {
- return {
- ...node,
- isHidden: false
- };
- }
- // nothing has changed
- return node;
- }
- );
-}
-
-// unfilterMapUi(tree: MapUi) => MapUi
-export function unfilterMapUi(tree) {
- return traverseMapUi(
- tree,
- node => {
- if (!node.isHidden) {
- return node;
- }
- return {
- ...node,
- isHidden: false
- };
- }
- );
-}
diff --git a/common/app/routes/challenges/utils.test.js b/common/app/routes/challenges/utils.test.js
index a93cf6845d..06956afcea 100644
--- a/common/app/routes/challenges/utils.test.js
+++ b/common/app/routes/challenges/utils.test.js
@@ -1,1263 +1,848 @@
import test from 'tape';
-import sinon from 'sinon';
import {
getNextChallenge,
getFirstChallengeOfNextBlock,
- getFirstChallengeOfNextSuperBlock,
- filterComingSoonBetaChallenge,
- filterComingSoonBetaFromEntities,
- createMapUi,
- traverseMapUi,
- getNode,
- updateSingleNode,
- toggleThisPanel,
- expandAllPanels,
- collapseAllPanels,
- applyFilterToMap,
- unfilterMapUi
+ getFirstChallengeOfNextSuperBlock
} from './utils.js';
+test('getNextChallenge', t => {
+ t.plan(7);
+ t.test('should return falsey when current challenge is not found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: {},
+ block: {}
+ };
+ t.notOk(
+ getNextChallenge('non-existent-challenge', entities),
+ 'getNextChallenge did not return falsey when challenge is not found'
+ );
+ });
+ t.test('should return falsey when last challenge in block', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const nextChallenge = {
+ dashedName: 'next-challenge',
+ block: 'current-block'
+ };
+ const shouldBeNext = getNextChallenge(
+ 'next-challenge',
+ {
+ challenge: {
+ 'current-challenge': currentChallenge,
+ 'next-challenge': nextChallenge
+ },
+ block: {
+ 'current-block': {
+ challenges: [
+ 'current-challenge',
+ 'next-challenge'
+ ]
+ }
+ }
+ }
+ );
+ t.false(
+ shouldBeNext,
+ 'getNextChallenge should return null or undefined'
+ );
+ });
-test('common/app/routes/challenges/utils', function(t) {
- t.test('getNextChallenge', t => {
- t.plan(7);
- t.test('should return falsey when current challenge is not found', t => {
- t.plan(1);
- const entities = {
- challenge: {},
- block: {}
- };
- t.notOk(
- getNextChallenge('non-existent-challenge', entities),
- 'getNextChallenge did not return falsey when challenge is not found'
- );
- });
- t.test('should return falsey when last challenge in block', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const nextChallenge = {
- dashedName: 'next-challenge',
- block: 'current-block'
- };
- const shouldBeNext = getNextChallenge(
- 'next-challenge',
- {
- challenge: {
- 'current-challenge': currentChallenge,
- 'next-challenge': nextChallenge
- },
- block: {
- 'current-block': {
- challenges: [
- 'current-challenge',
- 'next-challenge'
- ]
- }
+ t.test('should return next challenge when it exists', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const nextChallenge = {
+ dashedName: 'next-challenge',
+ block: 'current-block'
+ };
+ const shouldBeNext = getNextChallenge(
+ 'current-challenge',
+ {
+ challenge: {
+ 'current-challenge': currentChallenge,
+ 'next-challenge': nextChallenge
+ },
+ block: {
+ 'current-block': {
+ challenges: [
+ 'current-challenge',
+ 'next-challenge'
+ ]
}
}
- );
- t.false(
- shouldBeNext,
- 'getNextChallenge should return null or undefined'
- );
- });
-
- t.test('should return next challenge when it exists', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const nextChallenge = {
- dashedName: 'next-challenge',
- block: 'current-block'
- };
- const shouldBeNext = getNextChallenge(
- 'current-challenge',
- {
- challenge: {
- 'current-challenge': currentChallenge,
- 'next-challenge': nextChallenge
- },
- block: {
- 'current-block': {
- challenges: [
- 'current-challenge',
- 'next-challenge'
- ]
- }
- }
- }
- );
- t.isEqual(shouldBeNext, nextChallenge);
- });
- t.test('should skip isComingSoon challenge', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const comingSoon = {
- dashedName: 'coming-soon',
- isComingSoon: true,
- block: 'current-block'
- };
- const nextChallenge = {
- dashedName: 'next-challenge',
- block: 'current-block'
- };
- const shouldBeNext = getNextChallenge(
- 'current-challenge',
- {
- challenge: {
- 'current-challenge': currentChallenge,
- 'next-challenge': nextChallenge,
- 'coming-soon': comingSoon,
- 'coming-soon2': comingSoon
- },
- block: {
- 'current-block': {
- challenges: [
- 'current-challenge',
- 'coming-soon',
- 'coming-soon2',
- 'next-challenge'
- ]
- }
- }
- }
- );
- t.isEqual(shouldBeNext, nextChallenge);
- });
- t.test('should not skip isComingSoon challenge in dev', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const comingSoon = {
- dashedName: 'coming-soon',
- isComingSoon: true,
- block: 'current-block'
- };
- const nextChallenge = {
- dashedName: 'next-challenge',
- block: 'current-block'
- };
- const entities = {
+ }
+ );
+ t.isEqual(shouldBeNext, nextChallenge);
+ });
+ t.test('should skip isComingSoon challenge', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const comingSoon = {
+ dashedName: 'coming-soon',
+ isComingSoon: true,
+ block: 'current-block'
+ };
+ const nextChallenge = {
+ dashedName: 'next-challenge',
+ block: 'current-block'
+ };
+ const shouldBeNext = getNextChallenge(
+ 'current-challenge',
+ {
challenge: {
'current-challenge': currentChallenge,
'next-challenge': nextChallenge,
- 'coming-soon': comingSoon
+ 'coming-soon': comingSoon,
+ 'coming-soon2': comingSoon
},
block: {
'current-block': {
challenges: [
'current-challenge',
'coming-soon',
+ 'coming-soon2',
'next-challenge'
]
}
}
- };
- t.isEqual(
- getNextChallenge('current-challenge', entities, { isDev: true }),
- comingSoon
- );
- });
- t.test('should skip isBeta challenge', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const beta = {
- dashedName: 'beta-challenge',
- isBeta: true,
- block: 'current-block'
- };
- const nextChallenge = {
- dashedName: 'next-challenge',
- block: 'current-block'
- };
- const shouldBeNext = getNextChallenge(
- 'current-challenge',
- {
- challenge: {
- 'current-challenge': currentChallenge,
- 'next-challenge': nextChallenge,
- 'beta-challenge': beta,
- 'beta-challenge2': beta
- },
- block: {
- 'current-block': {
- challenges: [
- 'current-challenge',
- 'beta-challenge',
- 'beta-challenge2',
- 'next-challenge'
- ]
- }
- }
+ }
+ );
+ t.isEqual(shouldBeNext, nextChallenge);
+ });
+ t.test('should not skip isComingSoon challenge in dev', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const comingSoon = {
+ dashedName: 'coming-soon',
+ isComingSoon: true,
+ block: 'current-block'
+ };
+ const nextChallenge = {
+ dashedName: 'next-challenge',
+ block: 'current-block'
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': currentChallenge,
+ 'next-challenge': nextChallenge,
+ 'coming-soon': comingSoon
+ },
+ block: {
+ 'current-block': {
+ challenges: [
+ 'current-challenge',
+ 'coming-soon',
+ 'next-challenge'
+ ]
}
- );
- t.isEqual(shouldBeNext, nextChallenge);
- });
- t.test('should not skip isBeta challenge if in dev', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const beta = {
- dashedName: 'beta-challenge',
- isBeta: true,
- block: 'current-block'
- };
- const nextChallenge = {
- dashedName: 'next-challenge',
- block: 'current-block'
- };
- const entities = {
+ }
+ };
+ t.isEqual(
+ getNextChallenge('current-challenge', entities, { isDev: true }),
+ comingSoon
+ );
+ });
+ t.test('should skip isBeta challenge', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const beta = {
+ dashedName: 'beta-challenge',
+ isBeta: true,
+ block: 'current-block'
+ };
+ const nextChallenge = {
+ dashedName: 'next-challenge',
+ block: 'current-block'
+ };
+ const shouldBeNext = getNextChallenge(
+ 'current-challenge',
+ {
challenge: {
'current-challenge': currentChallenge,
'next-challenge': nextChallenge,
- 'beta-challenge': beta
+ 'beta-challenge': beta,
+ 'beta-challenge2': beta
},
block: {
'current-block': {
challenges: [
'current-challenge',
'beta-challenge',
+ 'beta-challenge2',
'next-challenge'
]
}
}
- };
- t.isEqual(
- getNextChallenge('current-challenge', entities, { isDev: true }),
- beta
- );
- });
- });
-
- t.test('getFirstChallengeOfNextBlock', t => {
- t.plan(8);
- t.test('should return falsey when current challenge is not found', t => {
- t.plan(1);
- const entities = {
- challenge: {},
- block: {}
- };
- t.notOk(
- getFirstChallengeOfNextBlock('non-existent-challenge', entities),
- `
- gitFirstChallengeOfNextBlock returned true value for non-existant
- challenge
- `
- );
- });
- t.test('should return falsey when current block is not found', t => {
- t.plan(1);
- const entities = {
- challenge: {
- 'current-challenge': {
- block: 'non-existent-block'
- }
- },
- block: {}
- };
- t.notOk(
- getFirstChallengeOfNextBlock('current-challenge', entities),
- `
- getFirstChallengeOfNextBlock did not returned true value block
- did non exist
- `
- );
- });
- t.test('should return falsey if no current superBlock found', t => {
- t.plan(1);
- const entities = {
- challenge: { 'current-challenge': { block: 'current-block' } },
- block: {
- 'current-block': {
- dashedName: 'current-block',
- superBlock: 'current-super-block'
- }
- },
- superBlock: {}
- };
- t.notOk(
- getFirstChallengeOfNextBlock('current-challenge', entities),
- `
- getFirstChallengeOfNextBlock returned a true value
- when superBlock is undefined
- `
- );
- });
- t.test('should return falsey when no next block found', t => {
- t.plan(1);
- const entities = {
- challenge: { 'current-challenge': { block: 'current-block' } },
- block: {
- 'current-block': {
- dashedName: 'current-block',
- superBlock: 'current-super-block'
- }
- },
- superBlock: {
- 'current-super-block': {
- blocks: [
- 'current-block',
- 'non-exitent-block'
- ]
- }
- }
- };
- t.notOk(
- getFirstChallengeOfNextBlock('current-challenge', entities),
- `
- getFirstChallengeOfNextBlock returned a value when next block
- does not exist
- `
- );
- });
- t.test('should return first challenge of next block', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const entities = {
- challenge: {
- [currentChallenge.dashedName]: currentChallenge,
- [firstChallenge.dashedName]: firstChallenge
- },
- block: {
- 'current-block': {
- dashedName: 'current-block',
- superBlock: 'current-super-block'
- },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'current-super-block',
- challenges: [ 'first-challenge' ]
- }
- },
- superBlock: {
- 'current-super-block': {
- dashedName: 'current-super-block',
- blocks: [ 'current-block', 'next-block' ]
- }
- }
- };
- t.equal(
- getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
- firstChallenge,
- 'getFirstChallengeOfNextBlock did not return the correct challenge'
- );
- });
- t.test('should skip coming soon challenge of next block', t => {
- t.plan(2);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const comingSoon = {
- dashedName: 'coming-soon',
- block: 'next-block',
- isComingSoon: true
- };
- const comingSoon2 = {
- dashedName: 'coming-soon2',
- block: 'next-block',
- isComingSoon: true
- };
- const entities = {
- challenge: {
- [currentChallenge.dashedName]: currentChallenge,
- [firstChallenge.dashedName]: firstChallenge,
- 'coming-soon': comingSoon,
- 'coming-soon2': comingSoon2
- },
- block: {
- 'current-block': {
- dashedName: 'current-block',
- superBlock: 'current-super-block'
- },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'current-super-block',
- challenges: [
- 'coming-soon',
- 'coming-soon2',
- 'first-challenge'
- ]
- }
- },
- superBlock: {
- 'current-super-block': {
- dashedName: 'current-super-block',
- blocks: [ 'current-block', 'next-block' ]
- }
- }
- };
- t.notEqual(
- getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
- comingSoon,
- 'getFirstChallengeOfNextBlock returned isComingSoon challenge'
- );
- t.equal(
- getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
- firstChallenge,
- 'getFirstChallengeOfNextBlock did not return the correct challenge'
- );
- });
- t.test('should not skip coming soon in dev mode', t => {
- t.plan(1);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const comingSoon = {
- dashedName: 'coming-soon',
- block: 'next-block',
- isComingSoon: true
- };
- const entities = {
- challenge: {
- [currentChallenge.dashedName]: currentChallenge,
- [firstChallenge.dashedName]: firstChallenge,
- 'coming-soon': comingSoon
- },
- block: {
- 'current-block': {
- dashedName: 'current-block',
- superBlock: 'current-super-block'
- },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'current-super-block',
- challenges: [
- 'coming-soon',
- 'first-challenge'
- ]
- }
- },
- superBlock: {
- 'current-super-block': {
- dashedName: 'current-super-block',
- blocks: [ 'current-block', 'next-block' ]
- }
- }
- };
- t.equal(
- getFirstChallengeOfNextBlock(
- currentChallenge.dashedName,
- entities,
- { isDev: true }
- ),
- comingSoon,
- 'getFirstChallengeOfNextBlock returned isComingSoon challenge'
- );
- });
- t.test('should skip block if all challenges are coming soon', t => {
- t.plan(2);
- const currentChallenge = {
- dashedName: 'current-challenge',
- block: 'current-block'
- };
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const comingSoon = {
- dashedName: 'coming-soon',
- block: 'coming-soon-block',
- isComingSoon: true
- };
- const comingSoon2 = {
- dashedName: 'coming-soon2',
- block: 'coming-soon-block',
- isComingSoon: true
- };
- const entities = {
- challenge: {
- [currentChallenge.dashedName]: currentChallenge,
- [firstChallenge.dashedName]: firstChallenge,
- [comingSoon.dashedName]: comingSoon,
- [comingSoon2.dashedName]: comingSoon2
- },
- block: {
- 'current-block': {
- dashedName: 'current-block',
- superBlock: 'current-super-block'
- },
- 'coming-soon-block': {
- dashedName: 'coming-soon-block',
- superBlock: 'current-super-block',
- challenges: [
- 'coming-soon',
- 'coming-soon2'
- ]
- },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'current-super-block',
- challenges: [
- 'first-challenge'
- ]
- }
- },
- superBlock: {
- 'current-super-block': {
- dashedName: 'current-super-block',
- blocks: [
- 'current-block',
- 'coming-soon-block',
- 'next-block'
- ]
- }
- }
- };
- t.notEqual(
- getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
- comingSoon,
- 'getFirstChallengeOfNextBlock returned isComingSoon challenge'
- );
- t.equal(
- getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
- firstChallenge,
- 'getFirstChallengeOfNextBlock did not return the correct challenge'
- );
- });
- });
-
- t.test('getFirstChallengeOfNextBlock', t => {
- t.plan(10);
- t.test('should return falsey if current challenge not found', t => {
- t.plan(1);
- const entities = {
- challenge: {}
- };
- t.notOk(
- getFirstChallengeOfNextSuperBlock('current-challenge', entities),
- );
- });
- t.test('should return falsey if current block not found', t => {
- t.plan(1);
- const entities = {
- challenge: { 'current-challenge': { block: 'current-block' } },
- block: {}
- };
- t.notOk(
- getFirstChallengeOfNextSuperBlock('current-challenge', entities)
- );
- });
- t.test('should return falsey if current superBlock is not found', t => {
- t.plan(1);
- const entities = {
- challenge: { 'current-challenge': { block: 'current-block' } },
- block: { 'current-block': { superBlock: 'current-super-block' } },
- superBlock: {}
- };
- t.notOk(
- getFirstChallengeOfNextSuperBlock('current-challenge', entities)
- );
- });
- t.test('should return falsey when last superBlock', t => {
- t.plan(1);
- const entities = {
- challenge: { 'current-challenge': { block: 'current-block' } },
- block: { 'current-block': { superBlock: 'current-super-block' } },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' }
- }
- };
- const superBlocks = [ 'current-super-block' ];
- t.notOk(getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks
- ));
- });
- t.test('should return falsey when last block of new superblock', t => {
- t.plan(1);
- const entities = {
- challenge: { 'current-challenge': { block: 'current-block' } },
- block: {
- 'current-block': {
- superBlock: 'current-super-block'
- }
- },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' },
- 'next-super-block': {
- dashedName: 'next-super-block',
- blocks: [
- 'first-block'
- ]
- }
- }
- };
- const superBlocks = [ 'current-super-block', 'next-super-block' ];
- t.notOk(getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks
- ));
- });
- t.test('should return first challenge of next superBlock', t => {
- t.plan(1);
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const entities = {
- challenge: {
- 'current-challenge': { block: 'current-block' },
- [firstChallenge.dashedName]: firstChallenge
- },
- block: {
- 'current-block': { superBlock: 'current-super-block' },
- 'next-block': {
- superBlock: 'next-super-block',
- challenges: [ 'first-challenge' ]
- }
- },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' },
- 'next-super-block': {
- dashedName: 'next-super-block',
- blocks: [ 'next-block' ]
- }
- }
- };
- const superBlocks = [ 'current-super-block', 'next-super-block' ];
- t.isEqual(
- getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks
- ),
- firstChallenge
- );
- });
- t.test('should skip coming soon challenge', t => {
- t.plan(1);
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const entities = {
- challenge: {
- 'current-challenge': { block: 'current-block' },
- [firstChallenge.dashedName]: firstChallenge,
- 'coming-soon': {
- dashedName: 'coming-soon',
- block: 'next-block',
- isComingSoon: true
- }
- },
- block: {
- 'current-block': { superBlock: 'current-super-block' },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'next-super-block',
- challenges: [ 'coming-soon', 'first-challenge' ]
- }
- },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' },
- 'next-super-block': {
- dashedName: 'next-super-block',
- blocks: [ 'next-block' ]
- }
- }
- };
- const superBlocks = [
- 'current-super-block',
- 'next-super-block'
- ];
- t.isEqual(
- getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks
- ),
- firstChallenge
- );
- });
- t.test('should not skip coming soon in dev mode', t => {
- t.plan(1);
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const comingSoon = {
- dashedName: 'coming-soon',
- block: 'next-block',
- isComingSoon: true
- };
- const entities = {
- challenge: {
- 'current-challenge': { block: 'current-block' },
- [firstChallenge.dashedName]: firstChallenge,
- 'coming-soon': comingSoon
- },
- block: {
- 'current-block': { superBlock: 'current-super-block' },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'next-super-block',
- challenges: [ 'coming-soon', 'first-challenge' ]
- }
- },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' },
- 'next-super-block': {
- dashedName: 'next-super-block',
- blocks: [ 'next-block' ]
- }
- }
- };
- const superBlocks = [
- 'current-super-block',
- 'next-super-block'
- ];
- t.isEqual(
- getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks,
- { isDev: true }
- ),
- comingSoon
- );
- });
- t.test('should skip coming soon block', t => {
- t.plan(1);
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const entities = {
- challenge: {
- 'current-challenge': { block: 'current-block' },
- [firstChallenge.dashedName]: firstChallenge,
- 'coming-soon': {
- dashedName: 'coming-soon',
- block: 'coming-soon-block',
- isComingSoon: true
- }
- },
- block: {
- 'current-block': { superBlock: 'current-super-block' },
- 'coming-soon-block': {
- dashedName: 'coming-soon-block',
- superBlock: 'next-super-block',
- challenges: [
- 'coming-soon'
- ]
- },
- 'next-block': {
- dashedName: 'next-block',
- superBlock: 'next-super-block',
- challenges: [ 'first-challenge' ]
- }
- },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' },
- 'next-super-block': {
- dashedName: 'next-super-block',
- blocks: [ 'coming-soon-block', 'next-block' ]
- }
- }
- };
- const superBlocks = [
- 'current-super-block',
- 'next-super-block'
- ];
- t.isEqual(
- getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks
- ),
- firstChallenge
- );
- });
- t.test('should skip coming soon super block', t => {
- t.plan(1);
- const firstChallenge = {
- dashedName: 'first-challenge',
- block: 'next-block'
- };
- const entities = {
- challenge: {
- 'current-challenge': { block: 'current-block' },
- [firstChallenge.dashedName]: firstChallenge,
- 'coming-soon': {
- dashedName: 'coming-soon',
- block: 'coming-soon-block',
- isComingSoon: true
- }
- },
- block: {
- 'current-block': { superBlock: 'current-super-block' },
- 'coming-soon-block': {
- dashedName: 'coming-soon-block',
- superBlock: 'coming-soon-super-block',
- challenges: [
- 'coming-soon'
- ]
- },
- 'next-block': {
- superBlock: 'next-super-block',
- dashedName: 'next-block',
- challenges: [ 'first-challenge' ]
- }
- },
- superBlock: {
- 'current-super-block': { dashedName: 'current-super-block' },
- 'coming-soon-super-block': {
- dashedName: 'coming-soon-super-block',
- blocks: [ 'coming-soon-block' ]
- },
- 'next-super-block': {
- dashedName: 'next-super-block',
- blocks: [ 'next-block' ]
- }
- }
- };
- const superBlocks = [
- 'current-super-block',
- 'coming-soon-super-block',
- 'next-super-block'
- ];
- t.isEqual(
- getFirstChallengeOfNextSuperBlock(
- 'current-challenge',
- entities,
- superBlocks
- ),
- firstChallenge
- );
- });
- });
- t.test('filterComingSoonBetaChallenge', t => {
- t.plan(4);
- t.test('should return true when not coming-soon/beta', t => {
- let isDev;
- t.ok(filterComingSoonBetaChallenge(isDev, {}));
- t.ok(filterComingSoonBetaChallenge(true, {}));
- t.end();
- });
- t.test('should return false when isComingSoon', t => {
- let isDev;
- t.notOk(filterComingSoonBetaChallenge(isDev, { isComingSoon: true }));
- t.end();
- });
- t.test('should return false when isBeta', t => {
- let isDev;
- t.notOk(filterComingSoonBetaChallenge(isDev, { isBeta: true }));
- t.end();
- });
- t.test('should always return true when in dev', t => {
- let isDev = true;
- t.ok(filterComingSoonBetaChallenge(isDev, { isBeta: true }));
- t.ok(filterComingSoonBetaChallenge(isDev, { isComingSoon: true }));
- t.ok(filterComingSoonBetaChallenge(
- isDev,
- { isBeta: true, isCompleted: true }
- ));
- t.end();
- });
- });
- t.test('filterComingSoonBetaFromEntities', t => {
- t.plan(2);
- t.test('should filter isBeta|coming-soon by default', t => {
- t.plan(2);
- const normalChallenge = { dashedName: 'normal-challenge' };
- const entities = {
- challenge: {
- 'coming-soon': {
- isComingSoon: true
- },
- 'is-beta': {
- isBeta: true
- },
- [normalChallenge.dashedName]: normalChallenge
- }
- };
- const actual = filterComingSoonBetaFromEntities(entities);
- t.isEqual(
- Object.keys(actual.challenge).length,
- 1,
- 'did not filter the correct amount of challenges'
- );
- t.isEqual(
- actual.challenge[normalChallenge.dashedName],
- normalChallenge,
- 'did not return the correct challenge'
- );
- });
- t.test('should not filter isBeta|coming-soon when isDev', t => {
- t.plan(1);
- const normalChallenge = { dashedName: 'normal-challenge' };
- const entities = {
- challenge: {
- 'coming-soon': {
- dashedName: 'coming-soon',
- isComingSoon: true
- },
- 'is-beta': {
- dashedName: 'is-beta',
- isBeta: true
- },
- 'is-both': {
- dashedName: 'is-both',
- isBeta: true
- },
- [normalChallenge.dashedName]: normalChallenge
- }
- };
- const actual = filterComingSoonBetaFromEntities(entities, true);
- t.isEqual(
- Object.keys(actual.challenge).length,
- 4,
- 'filtered challenges'
- );
- });
- });
- t.test('createMapUi', t => {
- t.plan(3);
- t.test('should return an `{}` when proper args not supplied', t => {
- t.plan(3);
- t.equal(
- Object.keys(createMapUi()).length,
- 0
- );
- t.equal(
- Object.keys(createMapUi({}, [])).length,
- 0
- );
- t.equal(
- Object.keys(createMapUi({ superBlock: {} }, [])).length,
- 0
- );
- });
- t.test('should return a map tree', t => {
- const expected = {
- children: [{
- name: 'superBlockA',
- children: [{
- name: 'blockA',
- children: [{
- name: 'challengeA'
- }]
- }]
- }]
- };
- const actual = createMapUi({
- superBlock: {
- superBlockA: {
- blocks: [
- 'blockA'
- ]
- }
- },
- block: {
- blockA: {
- challenges: [
- 'challengeA'
- ]
- }
- }
- },
- ['superBlockA'],
- { challengeA: 'ChallengeA title'}
+ }
);
- t.plan(3);
- t.equal(actual.children[0].name, expected.children[0].name);
- t.equal(
- actual.children[0].children[0].name,
- expected.children[0].children[0].name
- );
- t.equal(
- actual.children[0].children[0].children[0].name,
- expected.children[0].children[0].children[0].name
- );
- });
- t.test('should protect against malformed data', t => {
- t.plan(2);
- t.equal(
- createMapUi({
- superBlock: {},
- block: {
- blockA: {
- challenges: [
- 'challengeA'
- ]
- }
- }
- }, ['superBlockA']).children[0].children.length,
- 0
- );
- t.equal(
- createMapUi({
- superBlock: {
- superBlockA: {
- blocks: [
- 'blockA'
- ]
- }
- },
- block: {}
- }, ['superBlockA']).children[0].children[0].children.length,
- 0
- );
- });
+ t.isEqual(shouldBeNext, nextChallenge);
});
- t.test('traverseMapUi', t => {
- t.test('should return tree', t => {
- t.plan(2);
- const expectedTree = {};
- const actaulTree = traverseMapUi(expectedTree, tree => {
- t.equal(tree, expectedTree);
- return tree;
- });
- t.equal(actaulTree, expectedTree);
- });
- t.test('should hit every node', t => {
- t.plan(4);
- const expected = { children: [{ children: [{}] }] };
- const spy = sinon.spy(t => t);
- spy.withArgs(expected);
- spy.withArgs(expected.children[0]);
- spy.withArgs(expected.children[0].children[0]);
- traverseMapUi(expected, spy);
- t.equal(spy.callCount, 3);
- t.ok(spy.withArgs(expected).calledOnce, 'foo');
- t.ok(spy.withArgs(expected.children[0]).calledOnce, 'bar');
- t.ok(spy.withArgs(expected.children[0].children[0]).calledOnce, 'baz');
- });
- t.test('should create new object when children change', t => {
- t.plan(9);
- const expected = { children: [{ bar: true }, {}] };
- const actual = traverseMapUi(expected, node => ({ ...node, foo: true }));
- t.notEqual(actual, expected);
- t.notEqual(actual.children, expected.children);
- t.notEqual(actual.children[0], expected.children[0]);
- t.notEqual(actual.children[1], expected.children[1]);
- t.equal(actual.children[0].bar, expected.children[0].bar);
- t.notOk(expected.children[0].foo);
- t.notOk(expected.children[1].foo);
- t.true(actual.children[0].foo);
- t.true(actual.children[1].foo);
- });
- });
- t.test('getNode', t => {
- t.test('should return node', t => {
- t.plan(1);
- const expected = { name: 'foo' };
- const tree = { children: [{ name: 'notfoo' }, expected ] };
- const actual = getNode(tree, 'foo');
- t.equal(expected, actual);
- });
- t.test('should returned undefined if not found', t => {
- t.plan(1);
- const tree = {
- children: [ { name: 'foo' }, { children: [ { name: 'bar' } ] } ]
- };
- const actual = getNode(tree, 'baz');
- t.notOk(actual);
- });
- });
- t.test('updateSingleNode', t => {
- t.test('should update single node', t => {
- const expected = { name: 'foo' };
- const untouched = { name: 'notFoo' };
- const actual = updateSingleNode(
- { children: [ untouched, expected ] },
- 'foo',
- node => ({ ...node, tag: true })
- );
- t.plan(4);
- t.ok(actual.children[1].tag);
- t.equal(actual.children[1].name, expected.name);
- t.notEqual(actual.children[1], expected);
- t.equal(actual.children[0], untouched);
- });
- });
- t.test('toggleThisPanel', t => {
- t.test('should update single node', t => {
- const expected = { name: 'foo', isOpen: true };
- const actual = toggleThisPanel(
- { children: [ { name: 'foo', isOpen: false }] },
- 'foo'
- );
- t.plan(1);
- t.deepLooseEqual(actual.children[0], expected);
- });
- });
- t.test('toggleAllPanels', t => {
- t.test('should add `isOpen: true` to every node without children', t => {
- const expected = {
- isOpen: true,
- children: [{
- isOpen: true,
- children: [{}, {}]
- }]
- };
- const actual = expandAllPanels({ children: [{ children: [{}, {}] }] });
- t.plan(1);
- t.deepLooseEqual(actual, expected);
- });
- t.test('should add `isOpen: false` to every node without children', t => {
- const leaf = {};
- const expected = {
- isOpen: false,
- children: [{
- isOpen: false,
- children: [{}, leaf]
- }]
- };
- const actual = collapseAllPanels(
- { isOpen: true, children: [{ children: [{}, leaf]}]},
- );
- t.plan(2);
- t.deepLooseEqual(actual, expected);
- t.equal(actual.children[0].children[1], leaf);
- });
- });
- t.test('applyFilterToMap', t => {
- t.test('should not touch child that is already hidden', t => {
- t.plan(1);
- const expected = { name: 'bar', isHidden: true };
- const actual = applyFilterToMap(
- expected,
- /foo/
- );
- t.equal(actual, expected);
- });
- t.test('should update child that is hidden', t => {
- t.plan(1);
- const expected = { title: 'bar', isHidden: false };
- const input = { title: 'bar', isHidden: true };
- const actual = applyFilterToMap(input, /bar/);
- t.deepLooseEqual(actual, expected);
- });
- t.test('should unhide child that matches filter regex', t => {
- t.plan(1);
- const expected = { title: 'foo' };
- const actual = applyFilterToMap({ title: 'foo' }, /foo/);
- t.deepLooseEqual(actual, expected);
- });
- t.test('should hide child that does not match filter', t => {
- t.plan(1);
- const expected = { title: 'bar', isHidden: true };
- const actual = applyFilterToMap({ title: 'bar' }, /foo/);
- t.deepLooseEqual(actual, expected);
- });
- t.test('should not touch node that is already hidden', t => {
- t.plan(1);
- const expected = {
- name: 'bar',
- isHidden: true,
- children: [
- { name: 'baz', isHidden: true },
- { name: 'baz2', isHidden: true }
- ]
- };
- const actual = applyFilterToMap(expected, /foo/);
- t.equal(actual, expected);
- });
- t.test('should not touch node that is unhidden', t => {
- t.plan(1);
- const expected = {
- name: 'bar',
- isHidden: false,
- children: [
- { title: 'baz', isHidden: true },
- { title: 'foo', isHidden: false }
- ]
- };
- const actual = applyFilterToMap(expected, /foo/);
- t.equal(actual, expected);
- });
- t.test('should hide node if all children are hidden', t => {
- t.plan(1);
- const input = {
- name: 'bar',
- isHidden: false,
- children: [
- { name: 'baz' },
- { name: 'baz2', isHidden: false }
- ]
- };
- const expected = {
- name: 'bar',
- isHidden: true,
- children: [
- { name: 'baz', isHidden: true },
- { name: 'baz2', isHidden: true }
- ]
- };
- const actual = applyFilterToMap(input, /foo/);
- t.deepLooseEqual(actual, expected);
- });
- t.test('should unhide node some children unhidden', t => {
- t.plan(1);
- const input = {
- name: 'bar',
- isHidden: true,
- children: [
- { title: 'baz', isHidden: true },
- { title: 'foo', isHidden: false }
- ]
- };
- const expected = {
- name: 'bar',
- isHidden: false,
- children: [
- { title: 'baz', isHidden: true },
- { title: 'foo', isHidden: false }
- ]
- };
- const actual = applyFilterToMap(input, /foo/);
- t.deepLooseEqual(actual, expected);
- });
- });
- t.test('unfilterMapUi', t => {
- t.test('should not touch node that is already hidden', t => {
- const expected = { isHidden: false };
- const actual = unfilterMapUi(expected);
- t.plan(1);
- t.equal(actual, expected);
- });
- t.test('should update node that is not hidden', t => {
- const expected = { isHidden: false };
- const input = { isHidden: true };
- const actual = unfilterMapUi(input);
- t.plan(2);
- t.notEqual(actual, input);
- t.deepLooseEqual(actual, expected);
- });
+ t.test('should not skip isBeta challenge if in dev', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const beta = {
+ dashedName: 'beta-challenge',
+ isBeta: true,
+ block: 'current-block'
+ };
+ const nextChallenge = {
+ dashedName: 'next-challenge',
+ block: 'current-block'
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': currentChallenge,
+ 'next-challenge': nextChallenge,
+ 'beta-challenge': beta
+ },
+ block: {
+ 'current-block': {
+ challenges: [
+ 'current-challenge',
+ 'beta-challenge',
+ 'next-challenge'
+ ]
+ }
+ }
+ };
+ t.isEqual(
+ getNextChallenge('current-challenge', entities, { isDev: true }),
+ beta
+ );
+ });
+});
+
+test('getFirstChallengeOfNextBlock', t => {
+ t.plan(8);
+ t.test('should return falsey when current challenge is not found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: {},
+ block: {}
+ };
+ t.notOk(
+ getFirstChallengeOfNextBlock('non-existent-challenge', entities),
+ `
+ gitFirstChallengeOfNextBlock returned true value for non-existant
+ challenge
+ `
+ );
+ });
+ t.test('should return falsey when current block is not found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: {
+ 'current-challenge': {
+ block: 'non-existent-block'
+ }
+ },
+ block: {}
+ };
+ t.notOk(
+ getFirstChallengeOfNextBlock('current-challenge', entities),
+ `
+ getFirstChallengeOfNextBlock did not returned true value block
+ did non exist
+ `
+ );
+ });
+ t.test('should return falsey if no current superBlock found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: { 'current-challenge': { block: 'current-block' } },
+ block: {
+ 'current-block': {
+ dashedName: 'current-block',
+ superBlock: 'current-super-block'
+ }
+ },
+ superBlock: {}
+ };
+ t.notOk(
+ getFirstChallengeOfNextBlock('current-challenge', entities),
+ `
+ getFirstChallengeOfNextBlock returned a true value
+ when superBlock is undefined
+ `
+ );
+ });
+ t.test('should return falsey when no next block found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: { 'current-challenge': { block: 'current-block' } },
+ block: {
+ 'current-block': {
+ dashedName: 'current-block',
+ superBlock: 'current-super-block'
+ }
+ },
+ superBlock: {
+ 'current-super-block': {
+ blocks: [
+ 'current-block',
+ 'non-exitent-block'
+ ]
+ }
+ }
+ };
+ t.notOk(
+ getFirstChallengeOfNextBlock('current-challenge', entities),
+ `
+ getFirstChallengeOfNextBlock returned a value when next block
+ does not exist
+ `
+ );
+ });
+ t.test('should return first challenge of next block', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const entities = {
+ challenge: {
+ [currentChallenge.dashedName]: currentChallenge,
+ [firstChallenge.dashedName]: firstChallenge
+ },
+ block: {
+ 'current-block': {
+ dashedName: 'current-block',
+ superBlock: 'current-super-block'
+ },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'current-super-block',
+ challenges: [ 'first-challenge' ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': {
+ dashedName: 'current-super-block',
+ blocks: [ 'current-block', 'next-block' ]
+ }
+ }
+ };
+ t.equal(
+ getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
+ firstChallenge,
+ 'getFirstChallengeOfNextBlock did not return the correct challenge'
+ );
+ });
+ t.test('should skip coming soon challenge of next block', t => {
+ t.plan(2);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const comingSoon = {
+ dashedName: 'coming-soon',
+ block: 'next-block',
+ isComingSoon: true
+ };
+ const comingSoon2 = {
+ dashedName: 'coming-soon2',
+ block: 'next-block',
+ isComingSoon: true
+ };
+ const entities = {
+ challenge: {
+ [currentChallenge.dashedName]: currentChallenge,
+ [firstChallenge.dashedName]: firstChallenge,
+ 'coming-soon': comingSoon,
+ 'coming-soon2': comingSoon2
+ },
+ block: {
+ 'current-block': {
+ dashedName: 'current-block',
+ superBlock: 'current-super-block'
+ },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'current-super-block',
+ challenges: [
+ 'coming-soon',
+ 'coming-soon2',
+ 'first-challenge'
+ ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': {
+ dashedName: 'current-super-block',
+ blocks: [ 'current-block', 'next-block' ]
+ }
+ }
+ };
+ t.notEqual(
+ getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
+ comingSoon,
+ 'getFirstChallengeOfNextBlock returned isComingSoon challenge'
+ );
+ t.equal(
+ getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
+ firstChallenge,
+ 'getFirstChallengeOfNextBlock did not return the correct challenge'
+ );
+ });
+ t.test('should not skip coming soon in dev mode', t => {
+ t.plan(1);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const comingSoon = {
+ dashedName: 'coming-soon',
+ block: 'next-block',
+ isComingSoon: true
+ };
+ const entities = {
+ challenge: {
+ [currentChallenge.dashedName]: currentChallenge,
+ [firstChallenge.dashedName]: firstChallenge,
+ 'coming-soon': comingSoon
+ },
+ block: {
+ 'current-block': {
+ dashedName: 'current-block',
+ superBlock: 'current-super-block'
+ },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'current-super-block',
+ challenges: [
+ 'coming-soon',
+ 'first-challenge'
+ ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': {
+ dashedName: 'current-super-block',
+ blocks: [ 'current-block', 'next-block' ]
+ }
+ }
+ };
+ t.equal(
+ getFirstChallengeOfNextBlock(
+ currentChallenge.dashedName,
+ entities,
+ { isDev: true }
+ ),
+ comingSoon,
+ 'getFirstChallengeOfNextBlock returned isComingSoon challenge'
+ );
+ });
+ t.test('should skip block if all challenges are coming soon', t => {
+ t.plan(2);
+ const currentChallenge = {
+ dashedName: 'current-challenge',
+ block: 'current-block'
+ };
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const comingSoon = {
+ dashedName: 'coming-soon',
+ block: 'coming-soon-block',
+ isComingSoon: true
+ };
+ const comingSoon2 = {
+ dashedName: 'coming-soon2',
+ block: 'coming-soon-block',
+ isComingSoon: true
+ };
+ const entities = {
+ challenge: {
+ [currentChallenge.dashedName]: currentChallenge,
+ [firstChallenge.dashedName]: firstChallenge,
+ [comingSoon.dashedName]: comingSoon,
+ [comingSoon2.dashedName]: comingSoon2
+ },
+ block: {
+ 'current-block': {
+ dashedName: 'current-block',
+ superBlock: 'current-super-block'
+ },
+ 'coming-soon-block': {
+ dashedName: 'coming-soon-block',
+ superBlock: 'current-super-block',
+ challenges: [
+ 'coming-soon',
+ 'coming-soon2'
+ ]
+ },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'current-super-block',
+ challenges: [
+ 'first-challenge'
+ ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': {
+ dashedName: 'current-super-block',
+ blocks: [
+ 'current-block',
+ 'coming-soon-block',
+ 'next-block'
+ ]
+ }
+ }
+ };
+ t.notEqual(
+ getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
+ comingSoon,
+ 'getFirstChallengeOfNextBlock returned isComingSoon challenge'
+ );
+ t.equal(
+ getFirstChallengeOfNextBlock(currentChallenge.dashedName, entities),
+ firstChallenge,
+ 'getFirstChallengeOfNextBlock did not return the correct challenge'
+ );
+ });
+});
+
+test('getFirstChallengeOfNextBlock', t => {
+ t.plan(10);
+ t.test('should return falsey if current challenge not found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: {}
+ };
+ t.notOk(
+ getFirstChallengeOfNextSuperBlock('current-challenge', entities),
+ );
+ });
+ t.test('should return falsey if current block not found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: { 'current-challenge': { block: 'current-block' } },
+ block: {}
+ };
+ t.notOk(
+ getFirstChallengeOfNextSuperBlock('current-challenge', entities)
+ );
+ });
+ t.test('should return falsey if current superBlock is not found', t => {
+ t.plan(1);
+ const entities = {
+ challenge: { 'current-challenge': { block: 'current-block' } },
+ block: { 'current-block': { superBlock: 'current-super-block' } },
+ superBlock: {}
+ };
+ t.notOk(
+ getFirstChallengeOfNextSuperBlock('current-challenge', entities)
+ );
+ });
+ t.test('should return falsey when last superBlock', t => {
+ t.plan(1);
+ const entities = {
+ challenge: { 'current-challenge': { block: 'current-block' } },
+ block: { 'current-block': { superBlock: 'current-super-block' } },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' }
+ }
+ };
+ const superBlocks = [ 'current-super-block' ];
+ t.notOk(getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks
+ ));
+ });
+ t.test('should return falsey when last block of new superblock', t => {
+ t.plan(1);
+ const entities = {
+ challenge: { 'current-challenge': { block: 'current-block' } },
+ block: {
+ 'current-block': {
+ superBlock: 'current-super-block'
+ }
+ },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' },
+ 'next-super-block': {
+ dashedName: 'next-super-block',
+ blocks: [
+ 'first-block'
+ ]
+ }
+ }
+ };
+ const superBlocks = [ 'current-super-block', 'next-super-block' ];
+ t.notOk(getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks
+ ));
+ });
+ t.test('should return first challenge of next superBlock', t => {
+ t.plan(1);
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': { block: 'current-block' },
+ [firstChallenge.dashedName]: firstChallenge
+ },
+ block: {
+ 'current-block': { superBlock: 'current-super-block' },
+ 'next-block': {
+ superBlock: 'next-super-block',
+ challenges: [ 'first-challenge' ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' },
+ 'next-super-block': {
+ dashedName: 'next-super-block',
+ blocks: [ 'next-block' ]
+ }
+ }
+ };
+ const superBlocks = [ 'current-super-block', 'next-super-block' ];
+ t.isEqual(
+ getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks
+ ),
+ firstChallenge
+ );
+ });
+ t.test('should skip coming soon challenge', t => {
+ t.plan(1);
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': { block: 'current-block' },
+ [firstChallenge.dashedName]: firstChallenge,
+ 'coming-soon': {
+ dashedName: 'coming-soon',
+ block: 'next-block',
+ isComingSoon: true
+ }
+ },
+ block: {
+ 'current-block': { superBlock: 'current-super-block' },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'next-super-block',
+ challenges: [ 'coming-soon', 'first-challenge' ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' },
+ 'next-super-block': {
+ dashedName: 'next-super-block',
+ blocks: [ 'next-block' ]
+ }
+ }
+ };
+ const superBlocks = [
+ 'current-super-block',
+ 'next-super-block'
+ ];
+ t.isEqual(
+ getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks
+ ),
+ firstChallenge
+ );
+ });
+ t.test('should not skip coming soon in dev mode', t => {
+ t.plan(1);
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const comingSoon = {
+ dashedName: 'coming-soon',
+ block: 'next-block',
+ isComingSoon: true
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': { block: 'current-block' },
+ [firstChallenge.dashedName]: firstChallenge,
+ 'coming-soon': comingSoon
+ },
+ block: {
+ 'current-block': { superBlock: 'current-super-block' },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'next-super-block',
+ challenges: [ 'coming-soon', 'first-challenge' ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' },
+ 'next-super-block': {
+ dashedName: 'next-super-block',
+ blocks: [ 'next-block' ]
+ }
+ }
+ };
+ const superBlocks = [
+ 'current-super-block',
+ 'next-super-block'
+ ];
+ t.isEqual(
+ getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks,
+ { isDev: true }
+ ),
+ comingSoon
+ );
+ });
+ t.test('should skip coming soon block', t => {
+ t.plan(1);
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': { block: 'current-block' },
+ [firstChallenge.dashedName]: firstChallenge,
+ 'coming-soon': {
+ dashedName: 'coming-soon',
+ block: 'coming-soon-block',
+ isComingSoon: true
+ }
+ },
+ block: {
+ 'current-block': { superBlock: 'current-super-block' },
+ 'coming-soon-block': {
+ dashedName: 'coming-soon-block',
+ superBlock: 'next-super-block',
+ challenges: [
+ 'coming-soon'
+ ]
+ },
+ 'next-block': {
+ dashedName: 'next-block',
+ superBlock: 'next-super-block',
+ challenges: [ 'first-challenge' ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' },
+ 'next-super-block': {
+ dashedName: 'next-super-block',
+ blocks: [ 'coming-soon-block', 'next-block' ]
+ }
+ }
+ };
+ const superBlocks = [
+ 'current-super-block',
+ 'next-super-block'
+ ];
+ t.isEqual(
+ getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks
+ ),
+ firstChallenge
+ );
+ });
+ t.test('should skip coming soon super block', t => {
+ t.plan(1);
+ const firstChallenge = {
+ dashedName: 'first-challenge',
+ block: 'next-block'
+ };
+ const entities = {
+ challenge: {
+ 'current-challenge': { block: 'current-block' },
+ [firstChallenge.dashedName]: firstChallenge,
+ 'coming-soon': {
+ dashedName: 'coming-soon',
+ block: 'coming-soon-block',
+ isComingSoon: true
+ }
+ },
+ block: {
+ 'current-block': { superBlock: 'current-super-block' },
+ 'coming-soon-block': {
+ dashedName: 'coming-soon-block',
+ superBlock: 'coming-soon-super-block',
+ challenges: [
+ 'coming-soon'
+ ]
+ },
+ 'next-block': {
+ superBlock: 'next-super-block',
+ dashedName: 'next-block',
+ challenges: [ 'first-challenge' ]
+ }
+ },
+ superBlock: {
+ 'current-super-block': { dashedName: 'current-super-block' },
+ 'coming-soon-super-block': {
+ dashedName: 'coming-soon-super-block',
+ blocks: [ 'coming-soon-block' ]
+ },
+ 'next-super-block': {
+ dashedName: 'next-super-block',
+ blocks: [ 'next-block' ]
+ }
+ }
+ };
+ const superBlocks = [
+ 'current-super-block',
+ 'coming-soon-super-block',
+ 'next-super-block'
+ ];
+ t.isEqual(
+ getFirstChallengeOfNextSuperBlock(
+ 'current-challenge',
+ entities,
+ superBlocks
+ ),
+ firstChallenge
+ );
});
});
diff --git a/common/app/routes/challenges/views/backend/Back-End.jsx b/common/app/routes/challenges/views/backend/Back-End.jsx
index fd062e4e14..41c32434f0 100644
--- a/common/app/routes/challenges/views/backend/Back-End.jsx
+++ b/common/app/routes/challenges/views/backend/Back-End.jsx
@@ -11,14 +11,20 @@ import ChallengeTitle from '../../Challenge-Title.jsx';
import SolutionInput from '../../Solution-Input.jsx';
import TestSuite from '../../Test-Suite.jsx';
import Output from '../../Output.jsx';
-import { submitChallenge, executeChallenge } from '../../redux/actions.js';
-import { challengeSelector } from '../../redux/selectors.js';
+import {
+ submitChallenge,
+ executeChallenge,
+ testsSelector,
+ outputSelector
+} from '../../redux';
import { descriptionRegex } from '../../utils.js';
+
import {
createFormValidator,
isValidURL,
makeRequired
} from '../../../../utils/form.js';
+import { challengeSelector } from '../../../../redux';
// provided by redux form
const reduxFormPropTypes = {
@@ -47,15 +53,13 @@ const fieldValidators = {
const mapStateToProps = createSelector(
challengeSelector,
- state => state.challengesApp.output,
- state => state.challengesApp.tests,
+ outputSelector,
+ testsSelector,
(
{
- challenge: {
- id,
- title,
- description
- } = {}
+ id,
+ title,
+ description
},
output,
tests
@@ -74,7 +78,6 @@ const mapDispatchToActions = {
};
export class BackEnd extends PureComponent {
-
renderDescription(description) {
if (!Array.isArray(description)) {
return null;
diff --git a/common/app/routes/challenges/views/backend/Show.jsx b/common/app/routes/challenges/views/backend/Show.jsx
new file mode 100644
index 0000000000..477083c7e1
--- /dev/null
+++ b/common/app/routes/challenges/views/backend/Show.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import BackEnd from './Back-End.jsx';
+import { types } from '../../redux';
+import Panes from '../../../../Panes';
+import _Map from '../../../../Map';
+import ChildContainer from '../../../../Child-Container.jsx';
+
+const propTypes = {};
+
+export const panesMap = {
+ [types.toggleMap]: 'Map',
+ [types.toggleMain]: 'Main'
+};
+
+const nameToComponentDef = {
+ Map: {
+ Component: _Map,
+ defaultSize: 25
+ },
+ Main: {
+ Component: BackEnd,
+ defaultSize: 50
+ }
+};
+
+export default function ShowBackEnd() {
+ return (
+
-
-
-
-
-
-
-
- );
- }
-}
-
-Header.displayName = 'MapHeader';
-Header.propTypes = propTypes;
-
-export default connect(mapStateToProps, bindableActions)(Header);
diff --git a/common/app/routes/challenges/views/map/Map.jsx b/common/app/routes/challenges/views/map/Map.jsx
deleted file mode 100644
index e40701e45c..0000000000
--- a/common/app/routes/challenges/views/map/Map.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { PropTypes } from 'react';
-import { compose } from 'redux';
-import { contain } from 'redux-epic';
-import { connect } from 'react-redux';
-import PureComponent from 'react-pure-render/component';
-import { Col, Row } from 'react-bootstrap';
-
-import MapHeader from './Header.jsx';
-import SuperBlock from './Super-Block.jsx';
-import { fetchChallenges } from '../../redux/actions';
-import { updateTitle } from '../../../../redux/actions';
-
-const mapStateToProps = state => ({
- superBlocks: state.challengesApp.superBlocks
-});
-const mapDispatchToProps = { fetchChallenges, updateTitle };
-const fetchOptions = {
- fetchAction: 'fetchChallenges',
- isPrimed({ superBlocks }) {
- return Array.isArray(superBlocks) && superBlocks.length > 1;
- }
-};
-const propTypes = {
- fetchChallenges: PropTypes.func.isRequired,
- params: PropTypes.object,
- superBlocks: PropTypes.array,
- updateTitle: PropTypes.func.isRequired
-};
-
-export class ShowMap extends PureComponent {
- componentWillMount() {
- // if no params then map is open in drawer
- // do not update title
- if (!this.props.params) {
- return;
- }
- this.props.updateTitle(
- 'A Map to Learn to Code and Become a Software Engineer'
- );
- }
-
- renderSuperBlocks(superBlocks) {
- if (!Array.isArray(superBlocks) || !superBlocks.length) {
- return
-
-
-
-
-
-
- { this.renderSearchAddon(filter) }
-
-
-
-
-
- Challenges required for certifications are marked with a *
--
No Super Blocks
;
- }
- return superBlocks.map(dashedName => (
-
- { this.renderSuperBlocks(superBlocks) }
-
-
-
- -
-
+
+