From 2d77dc00b60b2b8e56527a2e4b5445fd7adaadb4 Mon Sep 17 00:00:00 2001 From: Stuart Taylor Date: Fri, 23 Mar 2018 12:59:49 +0000 Subject: [PATCH] chore(challenges): Normalise challengeTypes --- .../react-and-redux.json | 20 ++-- challenges/03-front-end-libraries/react.json | 96 +++++++++---------- challenges/03-front-end-libraries/redux.json | 34 +++---- test-challenges.js | 6 +- 4 files changed, 79 insertions(+), 77 deletions(-) diff --git a/challenges/03-front-end-libraries/react-and-redux.json b/challenges/03-front-end-libraries/react-and-redux.json index f4a99fc64e..ccc3f310b2 100644 --- a/challenges/03-front-end-libraries/react-and-redux.json +++ b/challenges/03-front-end-libraries/react-and-redux.json @@ -56,7 +56,7 @@ "solutions": [ "class DisplayMessages extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n }\n render() {\n return
\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -114,7 +114,7 @@ "solutions": [ "class DisplayMessages extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n const currentMessage = this.state.input;\n this.setState({\n input: '',\n messages: this.state.messages.concat(currentMessage)\n });\n }\n render() {\n return (\n
\n

Type in a new Message:

\n
\n \n
    \n {this.state.messages.map( (message, idx) => {\n return (\n
  • {message}
    • \n )\n })\n }\n
\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -151,7 +151,7 @@ "solutions": [ "const ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -265,7 +265,7 @@ "solutions": [ "// Redux Code:\nconst ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);\n\n// React Code:\n\nclass DisplayMessages extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n const currentMessage = this.state.input;\n this.setState({\n input: '',\n messages: this.state.messages.concat(currentMessage)\n });\n }\n render() {\n return (\n
\n

Type in a new Message:

\n
\n \n
    \n {this.state.messages.map( (message, idx) => {\n return (\n
  • {message}
    • \n )\n })\n }\n
\n
\n );\n }\n};\n\nconst Provider = ReactRedux.Provider;\n\nclass AppWrapper extends React.Component {\n // change code below this line\n render() {\n return (\n \n \n \n );\n }\n // change code above this line\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -303,7 +303,7 @@ "solutions": [ "const state = [];\n\n// change code below this line\n\nconst mapStateToProps = (state) => {\n return {\n messages: state\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -346,7 +346,7 @@ "solutions": [ "const addMessage = (message) => {\n return {\n type: 'ADD',\n message: message\n }\n};\n\n// change code below this line\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: function(message) {\n dispatch(addMessage(message));\n }\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -429,7 +429,7 @@ "solutions": [ "const addMessage = (message) => {\n return {\n type: 'ADD',\n message: message\n }\n};\n\nconst mapStateToProps = (state) => {\n return {\n messages: state\n }\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: (message) => {\n dispatch(addMessage(message));\n }\n }\n};\n\nclass Presentational extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return

This is a Presentational Component

\n }\n};\n\nconst connect = ReactRedux.connect;\n// change code below this line\n\nconst ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational); \n" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -560,7 +560,7 @@ "solutions": [ "// Redux:\nconst ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message: message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);\n\n// React:\nclass Presentational extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n const currentMessage = this.state.input;\n this.setState({\n input: '',\n messages: this.state.messages.concat(currentMessage)\n });\n }\n render() {\n return (\n
\n

Type in a new Message:

\n
\n \n
    \n {this.state.messages.map( (message, idx) => {\n return (\n
  • {message}
    • \n )\n })\n }\n
\n
\n );\n }\n};\n\n// React-Redux:\nconst mapStateToProps = (state) => {\n return { messages: state }\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: (newMessage) => {\n dispatch(addMessage(newMessage))\n }\n }\n};\n\nconst Provider = ReactRedux.Provider;\nconst connect = ReactRedux.connect;\n\n// define the Container component here:\nconst Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);\n\nclass AppWrapper extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n // complete the return statement:\n return (\n \n \n \n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -694,7 +694,7 @@ "solutions": [ "// Redux:\nconst ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message: message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);\n\n// React:\nconst Provider = ReactRedux.Provider;\nconst connect = ReactRedux.connect;\n\n// Change code below this line\nclass Presentational extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n this.props.submitNewMessage(this.state.input);\n this.setState({\n input: ''\n });\n }\n render() {\n return (\n
\n

Type in a new Message:

\n
\n \n
    \n {this.props.messages.map( (message, idx) => {\n return (\n
  • {message}
    • \n )\n })\n }\n
\n
\n );\n }\n};\n// Change code above this line\n\nconst mapStateToProps = (state) => {\n return {messages: state}\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: (message) => {\n dispatch(addMessage(message))\n }\n }\n};\n\nconst Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);\n\nclass AppWrapper extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true @@ -749,7 +749,7 @@ "solutions": [ "console.log('Now I know React and Redux!');" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "reactRedux": true diff --git a/challenges/03-front-end-libraries/react.json b/challenges/03-front-end-libraries/react.json index ed2ea3e868..2066c5ebaa 100644 --- a/challenges/03-front-end-libraries/react.json +++ b/challenges/03-front-end-libraries/react.json @@ -46,7 +46,7 @@ "solutions": [ "const JSX =

Hello JSX!

;" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -92,7 +92,7 @@ "solutions": [ "const JSX = (\n
\n

Hello JSX!

\n

Some info

\n
    \n
  • An item
    • \n
  • Another item
    • \n
  • A third item
    • \n
\n
);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -132,7 +132,7 @@ "solutions": [ "const JSX = (\n
\n

This is a block of JSX

\n { /* this is a JSX comment */ }\n

Here's a subtitle

\n
);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -174,7 +174,7 @@ "solutions": [ "const JSX = (\n
\n

Hello World

\n

Lets render this to the DOM

\n
\n);\n// change code below this line\nReactDOM.render(JSX, document.getElementById('challenge-node'));" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -213,7 +213,7 @@ "solutions": [ "const JSX = (\n
\n

Add a class to this div

\n
);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -259,7 +259,7 @@ "solutions": [ "const JSX = (\n
\n {/* change code below this line */}\n

Welcome to React!


\n

Be sure to close all tags!

\n
\n {/* change code above this line */}\n
\n);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -302,7 +302,7 @@ "solutions": [ "\nconst MyComponent = function() {\n // change code below this line\n return (\n
\n Demo Solution\n
\n );\n // change code above this line\n}" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -350,7 +350,7 @@ "solutions": [ "\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n // change code below this line\n return (\n
\n

Hello React!

\n
\n );\n // change code above this line\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -410,7 +410,7 @@ "solutions": [ "const ChildComponent = () => {\n return (\n
\n

I am the child

\n
\n );\n};\n\nclass ParentComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

I am the parent

\n { /* change code below this line */ }\n \n { /* change code above this line */ }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -484,7 +484,7 @@ "solutions": [ "const TypesOfFruit = () => {\n return (\n
\n

Fruits:

\n
    \n
  • Apples
    • \n
  • Blueberries
    • \n
  • Strawberries
    • \n
  • Bananas
    • \n
\n
\n );\n};\n\nconst Fruits = () => {\n return (\n
\n { /* change code below this line */ }\n \n { /* change code above this line */ }\n
\n );\n};\n\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n
\n

Types of Food:

\n { /* change code below this line */ }\n \n { /* change code above this line */ }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -596,7 +596,7 @@ "solutions": [ "class Fruits extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

Fruits:

\n { /* change code below this line */ }\n \n \n { /* change code above this line */ }\n
\n )\n }\n}\n\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

Types of Food:

\n { /* change code below this line */ }\n \n { /* change code above this line */ }\n \n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -686,7 +686,7 @@ "solutions": [ "\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

Types of Food:

\n {/* change code below this line */}\n \n \n {/* change code above this line */}\n
\n );\n }\n};\n\n// change code below this line\nReactDOM.render(, document.getElementById('challenge-node'));" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -720,7 +720,7 @@ "solutions": [ "// change code below this line\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

My First React Component!

\n
\n );\n }\n};\n\nReactDOM.render(, document.getElementById('challenge-node'));" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -784,7 +784,7 @@ "solutions": [ "\nconst CurrentDate = (props) => {\n return (\n
\n { /* change code below this line */ }\n

The current date is: {props.date}

\n { /* change code above this line */ }\n
\n );\n};\n\nclass Calendar extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

What date is it?

\n { /* change code below this line */ }\n \n { /* change code above this line */ }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -850,7 +850,7 @@ "solutions": [ "const List= (props) => {\n return

{props.tasks.join(', ')}

\n};\n\nclass ToDo extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

To Do Lists

\n

Today

\n \n

Tomorrow

\n \n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -890,7 +890,7 @@ "solutions": [ "const ShoppingCart = (props) => {\n return (\n
\n

Shopping Cart Component

\n
\n )\n};\n\n// change code below this line\nShoppingCart.defaultProps = {\n items: 0\n}" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -941,7 +941,7 @@ "solutions": [ "const Items = (props) => {\n return

Current Quantity of Items in Cart: {props.quantity}

\n}\n\nItems.defaultProps = {\n quantity: 0\n}\n\nclass ShoppingCart extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n { /* change code below this line */ }\n return \n { /* change code above this line */ }\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1004,7 +1004,7 @@ "solutions": [ "const Items = (props) => {\n return

Current Quantity of Items in Cart: {props.quantity}

\n};\n\n// change code below this line\nItems.propTypes = {\n quantity: PropTypes.number.isRequired\n};\n// change code above this line\n\nItems.defaultProps = {\n quantity: 0\n};\n\nclass ShoppingCart extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return \n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1073,7 +1073,7 @@ "solutions": [ "class ReturnTempPassword extends React.Component {\n constructor(props) {\n super(props);\n\n }\n render() {\n return (\n
\n

Your temporary password is: {this.props.tempPassword}

\n
\n );\n }\n};\n\nclass ResetPassword extends React.Component {\n constructor(props) {\n super(props);\n\n }\n render() {\n return (\n
\n

Reset Password

\n

We've generated a new temporary password for you.

\n

Please reset this password from your account settings ASAP.

\n { /* change code below this line */ }\n \n { /* change code above this line */ }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1128,7 +1128,7 @@ "solutions": [ "class CampSite extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n \n
\n );\n }\n};\n// change code below this line\n\nconst Camper = (props) => {\n return (\n
\n

{props.name}

\n
\n );\n};\n\nCamper.propTypes = {\n name: PropTypes.string.isRequired\n};\n\nCamper.defaultProps = {\n name: 'CamperBot'\n};\n" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1179,7 +1179,7 @@ "solutions": [ "\nclass StatefulComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp!'\n }\n }\n render() {\n return (\n
\n

{this.state.name}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1232,7 +1232,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp'\n }\n }\n render() {\n return (\n
\n { /* change code below this line */ }\n

{this.state.name}

\n { /* change code above this line */ }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1286,7 +1286,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp'\n }\n }\n render() {\n // change code below this line\n const name = this.state.name;\n // change code above this line\n return (\n
\n { /* change code below this line */ }\n

{name}

\n { /* change code above this line */ }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1344,7 +1344,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'Initial State'\n };\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick() {\n // change code below this line\n this.setState({\n name: 'React Rocks!'\n });\n // change code above this line\n }\n render() {\n return (\n
\n \n

{this.state.name}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1406,7 +1406,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n itemCount: 0\n };\n this.addItem = this.addItem.bind(this);\n }\n addItem() {\n this.setState({\n itemCount: this.state.itemCount + 1\n });\n }\n render() {\n return (\n
\n \n

Current Item Count: {this.state.itemCount}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1471,7 +1471,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visibility: false\n };\n this.toggleVisibility = this.toggleVisibility.bind(this);\n }\n toggleVisibility() {\n this.setState({\n visibility: !this.state.visibility\n });\n }\n render() {\n if (this.state.visibility) {\n return (\n
\n \n

Now you see me!

\n
\n );\n } else {\n return (\n
\n \n
\n );\n }\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1530,7 +1530,7 @@ "solutions": [ "class Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n this.increment = this.increment.bind(this);\n this.decrement = this.decrement.bind(this);\n this.reset = this.reset.bind(this);\n }\n reset() {\n this.setState({\n count: 0\n });\n }\n increment() {\n this.setState({\n count: this.state.count + 1\n });\n }\n decrement() {\n this.setState({\n count: this.state.count - 1\n });\n }\n render() {\n return (\n
\n \n \n \n

Current Count: {this.state.count}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1591,7 +1591,7 @@ "solutions": [ "class ControlledInput extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n };\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n render() {\n return (\n
\n \n

Controlled Input:

\n\n

{this.state.input}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1664,7 +1664,7 @@ "solutions": [ "class MyForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n submit: ''\n };\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n handleSubmit(event) {\n event.preventDefault()\n this.setState({\n submit: this.state.input\n });\n }\n render() {\n return (\n
\n
\n \n \n \n

{this.state.submit}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1726,7 +1726,7 @@ "solutions": [ "class MyApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'CamperBot'\n }\n }\n render() {\n return (\n
\n \n
\n );\n }\n};\nclass Navbar extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

Hello, my name is: {this.props.name}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1814,7 +1814,7 @@ "solutions": [ "class MyApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n inputValue: ''\n }\n this.handleChange = this.handleChange.bind(this); \n }\n handleChange(event) {\n this.setState({\n inputValue: event.target.value\n });\n }\n render() {\n return (\n
\n \n \n
\n );\n }\n};\n\nclass GetInput extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

Get Input:

\n \n
\n );\n }\n};\n\nclass RenderInput extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n
\n

Input Render:

\n

{this.props.input}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1866,7 +1866,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n componentWillMount() {\n // change code below this line\n console.log('Component is mounting...');\n // change code above this line\n }\n render() {\n return
\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1921,7 +1921,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeUsers: null\n };\n }\n componentDidMount() {\n setTimeout( () => {\n this.setState({\n activeUsers: 1273\n });\n }, 2500);\n }\n render() {\n return (\n
\n

Active Users: {this.state.activeUsers}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -1991,7 +1991,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n message: ''\n };\n this.handleKeyPress = this.handleKeyPress.bind(this);\n this.handleEnter = this.handleEnter.bind(this); }\n componentDidMount() {\n // change code below this line\n document.addEventListener('keydown', this.handleKeyPress);\n // change code above this line\n }\n componentWillUnmount() {\n // change code below this line\n document.removeEventListener('keydown', this.handleKeyPress);\n // change code above this line\n }\n handleEnter() {\n this.setState({\n message: this.state.message + 'You pressed the enter key! '\n });\n }\n handleKeyPress(event) {\n if (event.keyCode === 13) {\n this.handleEnter();\n }\n }\n render() {\n return (\n
\n

{this.state.message}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2064,7 +2064,7 @@ "solutions": [ "class Dialog extends React.Component {\n constructor(props) {\n super(props);\n }\n componentWillUpdate() {\n console.log('Component is about to update...');\n }\n // change code below this line\n componentWillReceiveProps(nextProps) {\n console.log(this.props, nextProps);\n }\n componentDidUpdate() {\n console.log('Component re-rendered');\n }\n // change code above this line\n render() {\n return

{this.props.message}

\n }\n};\n\nclass Controller extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n message: 'First Message'\n };\n this.changeMessage = this.changeMessage.bind(this); \n }\n changeMessage() {\n this.setState({\n message: 'Second Message'\n });\n }\n render() {\n return (\n
\n \n \n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2141,7 +2141,7 @@ "solutions": [ "class OnlyEvens extends React.Component {\n constructor(props) {\n super(props);\n }\n shouldComponentUpdate(nextProps, nextState) {\n console.log('Should I update?');\n // change code below this line\n return nextProps.value % 2 === 0;\n // change code above this line\n }\n componentWillReceiveProps(nextProps) {\n console.log('Receiving new props...');\n }\n componentDidUpdate() {\n console.log('Component re-rendered.');\n }\n render() {\n return

{this.props.value}

\n }\n};\n\nclass Controller extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 0\n };\n this.addValue = this.addValue.bind(this);\n }\n addValue() {\n this.setState({\n value: this.state.value + 1\n });\n }\n render() {\n return (\n
\n \n \n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2188,7 +2188,7 @@ "solutions": [ "\nclass Colorful extends React.Component {\n render() {\n return (\n
Big Red
\n );\n }\n};\n" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2237,7 +2237,7 @@ "solutions": [ "\nconst styles = {\n color: \"purple\",\n fontSize: 40,\n border: \"2px solid purple\"\n};\n// change code above this line\nclass Colorful extends React.Component {\n render() {\n // change code below this line\n return (\n
Style Me!
\n // change code above this line\n );\n }\n};\n" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2348,7 +2348,7 @@ "solutions": [ "\nconst inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass MagicEightBall extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userInput: '',\n randomIndex: ''\n }\n this.ask = this.ask.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n ask() {\n if (this.state.userInput) {\n this.setState({\n randomIndex: Math.floor(Math.random() * 20),\n userInput: ''\n });\n }\n }\n handleChange(event) {\n this.setState({\n userInput: event.target.value\n });\n }\n render() {\n const possibleAnswers = [\n \"It is certain\", \"It is decidedly so\", \"Without a doubt\",\n \"Yes, definitely\", \"You may rely on it\", \"As I see it, yes\",\n \"Outlook good\", \"Yes\", \"Signs point to yes\", \"Reply hazy try again\",\n \"Ask again later\", \"Better not tell you now\", \"Cannot predict now\",\n \"Concentrate and ask again\", \"Don't count on it\", \"My reply is no\",\n \"My sources say no\", \"Outlook not so good\",\"Very doubtful\", \"Most likely\"\n ];\n const answer = possibleAnswers[this.state.randomIndex];\n return (\n
\n
\n
\n

Answer:

\n

\n {answer}\n

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2406,7 +2406,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n display: true\n }\n this.toggleDisplay = this.toggleDisplay.bind(this); \n }\n toggleDisplay() {\n this.setState({\n display: !this.state.display\n });\n }\n render() {\n // change code below this line\n if (this.state.display) {\n return (\n
\n \n

Displayed!

\n
\n );\n } else {\n return (\n
\n \n
\n );\n }\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2464,7 +2464,7 @@ "solutions": [ "class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n display: true\n }\n this.toggleDisplay = this.toggleDisplay.bind(this); \n }\n toggleDisplay() {\n this.setState({\n display: !this.state.display\n });\n }\n render() {\n // change code below this line\n return (\n
\n \n {this.state.display &&

Displayed!

}\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2547,7 +2547,7 @@ "solutions": [ "\nconst inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass CheckUserAge extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userAge: '',\n input: ''\n }\n this.submit = this.submit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(e) {\n this.setState({\n input: e.target.value,\n userAge: ''\n });\n }\n submit() {\n this.setState({\n userAge: this.state.input\n });\n }\n render() {\n const buttonOne = ;\n const buttonTwo = ;\n const buttonThree = ;\n return (\n
\n

Enter Your Age to Continue

\n
\n {\n this.state.userAge === '' ?\n buttonOne :\n this.state.userAge >= 18 ?\n buttonTwo :\n buttonThree\n }\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2627,7 +2627,7 @@ "solutions": [ "class Results extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n

\n {\n this.props.fiftyFifty ?\n 'You Win!' :\n 'You Lose!'\n }\n

\n )\n };\n};\n\nclass GameOfChance extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n counter: 1\n }\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick() {\n this.setState({\n counter: this.state.counter + 1\n });\n }\n render() {\n const expression = Math.random() > .5;\n return (\n
\n \n \n

{'Turn: ' + this.state.counter}

\n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2693,7 +2693,7 @@ "solutions": [ "\nclass GateKeeper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n };\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(event) {\n this.setState({ input: event.target.value })\n }\n render() {\n let inputStyle = {\n border: '1px solid black'\n };\n if (this.state.input.length > 15) {\n inputStyle.border = '3px solid red';\n };\n return (\n
\n

Don't Type Too Much:

\n \n
\n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2774,7 +2774,7 @@ "solutions": [ "\nconst textAreaStyles = {\n width: 235,\n margin: 5\n};\n\nclass MyToDoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toDoList: [],\n userInput: ''\n }\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleSubmit() {\n const itemsArray = this.state.userInput.split(',');\n this.setState({\n toDoList: itemsArray\n });\n }\n handleChange(e) {\n this.setState({\n userInput: e.target.value\n });\n }\n render() {\n const items = this.state.toDoList.map( (item, i) => {\n return
  • {item}
    • \n });\n return (\n
    \n
    \n \n

    My \"To Do\" List:

    \n
      \n {items}\n
    \n
    \n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2830,7 +2830,7 @@ "solutions": [ "\nconst frontEndFrameworks = [\n 'React',\n 'Angular',\n 'Ember',\n 'Knockout',\n 'Backbone',\n 'Vue'\n];\n\nfunction Frameworks() {\n const renderFrameworks = frontEndFrameworks.map((fw, i) => {\n return
  • {fw}
    • \n })\n return (\n
    \n

    Popular Front End JavaScript Frameworks

    \n
      \n {renderFrameworks}\n
    \n
    \n );\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2910,7 +2910,7 @@ "solutions": [ "\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n users: [\n {\n username: 'Jeff',\n online: true\n },\n {\n username: 'Alan',\n online: false\n },\n {\n username: 'Mary',\n online: true\n },\n {\n username: 'Jim',\n online: false\n },\n {\n username: 'Sara',\n online: true\n },\n {\n username: 'Laura',\n online: true\n }\n ]\n }\n }\n render() {\n const usersOnline = this.state.users.filter(user => {\n return user.online;\n });\n const renderOnlineUsers = usersOnline.map(user => {\n return (\n
  • {user.username}
    • \n );\n });\n return (\n
    \n

    Current Online Users:

    \n
      \n {renderOnlineUsers}\n
    \n
    \n );\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true @@ -2956,7 +2956,7 @@ "solutions": [ "\nclass App extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return
    \n }\n};\n\n// change code below this line\nReactDOMServer.renderToString();" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "react": true diff --git a/challenges/03-front-end-libraries/redux.json b/challenges/03-front-end-libraries/redux.json index b29928d515..7a7879fca6 100644 --- a/challenges/03-front-end-libraries/redux.json +++ b/challenges/03-front-end-libraries/redux.json @@ -50,7 +50,7 @@ "solutions": [ "const reducer = (state = 5) => {\n return state;\n}\n\n// Redux methods are available from a Redux object\n// For example: Redux.createStore()\n// Define the store here:\n\nconst store = Redux.createStore(reducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -86,7 +86,7 @@ "solutions": [ "const store = Redux.createStore(\n (state = 5) => state\n);\n\n// change code below this line\nconst currentState = store.getState();" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -119,7 +119,7 @@ "solutions": [ "const action = {\n type: 'LOGIN'\n}" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -155,7 +155,7 @@ "solutions": [ "const action = {\n type: 'LOGIN'\n}\n// Define an action creator here:\nconst actionCreator = () => {\n return action;\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -200,7 +200,7 @@ "solutions": [ "const store = Redux.createStore(\n (state = {login: false}) => state\n);\n\nconst loginAction = () => {\n return {\n type: 'LOGIN'\n }\n};\n\n// Dispatch the action here:\nstore.dispatch(loginAction());" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -250,7 +250,7 @@ "solutions": [ "const defaultState = {\n login: false\n};\n\nconst reducer = (state = defaultState, action) => {\n\n if (action.type === 'LOGIN') {\n return {login: true}\n }\n\n else {\n return state\n }\n\n};\n\nconst store = Redux.createStore(reducer);\n\nconst loginAction = () => {\n return {\n type: 'LOGIN'\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -308,7 +308,7 @@ "solutions": [ "const defaultState = {\n authenticated: false\n};\n\nconst authReducer = (state = defaultState, action) => {\n\n switch (action.type) {\n\n case 'LOGIN':\n return {\n authenticated: true\n }\n\n case 'LOGOUT':\n return {\n authenticated: false\n }\n\n default:\n return state;\n\n }\n\n};\n\nconst store = Redux.createStore(authReducer);\n\nconst loginUser = () => {\n return {\n type: 'LOGIN'\n }\n};\n\nconst logoutUser = () => {\n return {\n type: 'LOGOUT'\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -387,7 +387,7 @@ "solutions": [ "const LOGIN = 'LOGIN';\nconst LOGOUT = 'LOGOUT';\n\nconst defaultState = {\n authenticated: false\n};\n\nconst authReducer = (state = defaultState, action) => {\n\n switch (action.type) {\n\n case LOGIN:\n return {\n authenticated: true\n }\n\n case LOGOUT:\n return {\n authenticated: false\n }\n\n default:\n return state;\n\n }\n\n};\n\nconst store = Redux.createStore(authReducer);\n\nconst loginUser = () => {\n return {\n type: LOGIN\n }\n};\n\nconst logoutUser = () => {\n return {\n type: LOGOUT\n }\n};" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -447,7 +447,7 @@ "solutions": [ "const ADD = 'ADD';\n\nconst reducer = (state = 0, action) => {\n switch(action.type) {\n case ADD:\n return state + 1;\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(reducer);\n let count = 0; \n// change code below this line\n\nstore.subscribe( () =>\n { \n count++; \n } \n);\n\n// change code above this line\n\nstore.dispatch({type: ADD});\nstore.dispatch({type: ADD});\nstore.dispatch({type: ADD});" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -519,7 +519,7 @@ "solutions": [ "const INCREMENT = 'INCREMENT';\nconst DECREMENT = 'DECREMENT';\n\nconst counterReducer = (state = 0, action) => {\n switch(action.type) {\n case INCREMENT:\n return state + 1;\n case DECREMENT:\n return state - 1;\n default:\n return state;\n }\n};\n\nconst LOGIN = 'LOGIN';\nconst LOGOUT = 'LOGOUT';\n\nconst authReducer = (state = {authenticated: false}, action) => {\n switch(action.type) {\n case LOGIN:\n return {\n authenticated: true\n }\n case LOGOUT:\n return {\n authenticated: false\n }\n default:\n return state;\n }\n};\n\nconst rootReducer = Redux.combineReducers({\n count: counterReducer,\n auth: authReducer\n});\n\nconst store = Redux.createStore(rootReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -574,7 +574,7 @@ "solutions": [ "const ADD_NOTE = 'ADD_NOTE';\n\nconst notesReducer = (state = 'Initial State', action) => {\n switch(action.type) {\n // change code below this line\n case ADD_NOTE:\n return action.text;\n // change code above this line\n default:\n return state;\n }\n};\n\nconst addNoteText = (note) => {\n // change code below this line\n return {\n type: ADD_NOTE,\n text: note\n }\n // change code above this line\n};\n\nconst store = Redux.createStore(notesReducer);\n\nconsole.log(store.getState());\nstore.dispatch(addNoteText('Hello Redux!'));\nconsole.log(store.getState());" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -656,7 +656,7 @@ "solutions": [ "const REQUESTING_DATA = 'REQUESTING_DATA'\nconst RECEIVED_DATA = 'RECEIVED_DATA'\n\nconst requestingData = () => { return {type: REQUESTING_DATA} }\nconst receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }\n\nconst handleAsync = () => {\n return function(dispatch) {\n dispatch(requestingData());\n setTimeout(function() {\n let data = {\n users: ['Jeff', 'William', 'Alice']\n }\n dispatch(receivedData(data));\n }, 2500);\n }\n};\n\nconst defaultState = {\n fetching: false,\n users: []\n};\n\nconst asyncDataReducer = (state = defaultState, action) => {\n switch(action.type) {\n case REQUESTING_DATA:\n return {\n fetching: true,\n users: []\n }\n case RECEIVED_DATA:\n return {\n fetching: false,\n users: action.users\n }\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(\n asyncDataReducer,\n Redux.applyMiddleware(ReduxThunk.default)\n);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -700,7 +700,7 @@ "solutions": [ "const INCREMENT = 'INCREMENT';\nconst DECREMENT = 'DECREMENT';\n\nconst counterReducer = (state = 0, action) => {\n switch(action.type) {\n case INCREMENT:\n return state + 1;\n case DECREMENT:\n return state - 1;\n default:\n return state;\n }\n};\n\nconst incAction = () => {\n return {\n type: INCREMENT\n }\n};\n\nconst decAction = () => {\n return {\n type: DECREMENT\n }\n};\n\nconst store = Redux.createStore(counterReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -762,7 +762,7 @@ "solutions": [ "const ADD_TO_DO = 'ADD_TO_DO';\n\n// A list of strings representing tasks to do:\nconst todos = [\n 'Go to the store',\n 'Clean the house',\n 'Cook dinner',\n 'Learn to code',\n];\n\nconst immutableReducer = (state = todos, action) => {\n switch(action.type) {\n case ADD_TO_DO:\n return state.concat(action.todo);\n default:\n return state;\n }\n};\n\n// an example todo argument would be 'Learn React',\nconst addToDo = (todo) => {\n return {\n type: ADD_TO_DO,\n todo\n }\n}\n\nconst store = Redux.createStore(immutableReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -814,7 +814,7 @@ "solutions": [ "const immutableReducer = (state = ['Do not mutate state!'], action) => {\n switch(action.type) {\n case 'ADD_TO_DO':\n return [\n ...state,\n action.todo\n ];\n default:\n return state;\n }\n};\n\nconst addToDo = (todo) => {\n return {\n type: 'ADD_TO_DO',\n todo\n }\n}\n\nconst store = Redux.createStore(immutableReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -863,7 +863,7 @@ "solutions": [ "const immutableReducer = (state = [0,1,2,3,4,5], action) => {\n switch(action.type) {\n case 'REMOVE_ITEM':\n return [\n ...state.slice(0, action.index),\n ...state.slice(action.index + 1)\n ];\n default:\n return state;\n }\n};\n\nconst removeItem = (index) => {\n return {\n type: 'REMOVE_ITEM',\n index\n }\n}\n\nconst store = Redux.createStore(immutableReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true @@ -921,7 +921,7 @@ "solutions": [ "const defaultState = {\n user: 'CamperBot',\n status: 'offline',\n friends: '732,982',\n community: 'freeCodeCamp'\n};\n\nconst immutableReducer = (state = defaultState, action) => {\n switch(action.type) {\n case 'ONLINE':\n return Object.assign({}, state, {\n status: 'online'\n });\n default:\n return state;\n }\n};\n\nconst wakeUp = () => {\n return {\n type: 'ONLINE'\n }\n};\n\nconst store = Redux.createStore(immutableReducer);" ], - "type": "modern", + "challengeType": 6, "isRequired": false, "translations": {}, "redux": true diff --git a/test-challenges.js b/test-challenges.js index 10e10b1107..1f17a2f768 100644 --- a/test-challenges.js +++ b/test-challenges.js @@ -5,6 +5,7 @@ import tape from 'tape'; import { isMongoId } from 'validator'; import getChallenges from './getChallenges'; +import { modern } from '../common/app/utils/challengeTypes'; const notMongoId = id => !isMongoId(id); @@ -139,7 +140,8 @@ function createTest({ document; // Fake Deep Equal dependency - const DeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b); + const DeepEqual = (a, b) => + JSON.stringify(a) === JSON.stringify(b); // Hardcode Deep Freeze dependency const DeepFreeze = (o) => { @@ -225,7 +227,7 @@ Observable.from(getChallenges()) .flatMap(challengeSpec => { return Observable.from(challengeSpec.challenges); }) - .filter(({ type }) => type !== 'modern') + .filter(({ challengeType }) => challengeType !== modern) .flatMap(challenge => { return createTest(challenge); })