Reactified Success Modal #11253

Bouncey · 2016-10-17T22:44:12Z

Pre-Submission Checklist

Your pull request targets the staging branch of FreeCodeCamp.
Branch starts with either fix/, feature/, or translate/ (e.g. fix/signin-issue)
You have only one commit (if not, squash them into one commit).
All new and existing tests pass the command npm run test-challenges. Use git commit --amend to amend any fixes.

Type of Change

Small bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds new functionality)
Breaking change (fix or feature that would change existing functionality)
Add new translation (feature adding new translations)

Checklist:

Tested changes locally.
Closes currently open issue (replace XXXX with an issue no): Closes Toast with "Submit" button should not go away until clicked #10628 , Closes Pressing CTRL + Enter should take me to next challenge as per current behaviour #9850

Description

Added a react version of the current success modal

camperbot · 2016-10-18T10:11:25Z

@Bouncey updated the pull request.

Bouncey · 2016-10-18T10:12:32Z

This is ready for QA

SandraMonroe · 2016-10-18T11:59:39Z

Can you please remove my information, wi don't want to this is way out of my league
Thanks in advance Sandra Monroe
Sent from Yahoo Mail on Android

On Tue, Oct 18, 2016 at 6:15 AM, Stuart Taylornotifications@github.com wrote:
this is ready for QA

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

dhcodes · 2016-10-18T12:35:20Z

@SandraMonroe you are likely receiving notifications based on how you follow freecodecamp. You can go into your settings, then notifications and turn off notifications for repositories that you are "watching". That should keep you from getting emails.

ghost · 2016-10-18T15:48:56Z

❤️

camperbot · 2016-10-18T21:30:40Z

@Bouncey updated the pull request.

Bouncey · 2016-10-18T21:31:30Z

Now with Ctrl + Enter to advance to the next challenge, else it just wouldn't be the same modal

👍

common/app/routes/challenges/components/Classic-Modal.jsx

+      modalTitle,
+      onModalExit
+    } = this.props;
+    let _buttonText = (buttonText) ? buttonText : 'Submit',


common/app/routes/challenges/components/Classic-Modal.jsx

+    let _buttonText = (buttonText) ? buttonText : 'Submit',
+        _customClass = (customClass) ? customClass : '',
+        _modalTitle = (modalTitle) ? modalTitle : '',
+        _onModalExit = (onModalExit) ? onModalExit : this.noOp.bind(this),


common/app/routes/challenges/components/Classic-Modal.jsx

+import PureComponent from 'react-pure-render/component';
+
+export default class ClassicModal extends PureComponent {
+  static propTypes = {


common/app/routes/challenges/components/Classic-Modal.jsx

+    if (this.props.onModalClick) {
+      return this.props.onModalClick();
+    }
+    throw new Error('Expected an "onClick" handler for "onModalClick"');


client/less/classic-modal.less

@@ -0,0 +1,45 @@
+.success {


common/app/routes/challenges/components/Classic-Modal.jsx

@@ -0,0 +1,69 @@
+import React, { PropTypes } from 'react';


common/app/routes/challenges/redux/completion-saga.js

-          actionCreator: 'submitChallenge',
-          timeout: 10000
-        })
+      return Observable.just(


camperbot · 2016-10-22T09:55:59Z

@Bouncey updated the pull request.

common/app/routes/challenges/redux/completion-saga.js

-          timeout: 10000
-        })
-      );
+      return Observable.just(null);


camperbot · 2016-10-22T10:02:45Z

@Bouncey updated the pull request.

client/less/classic-modal.less

@@ -0,0 +1,45 @@
+.success {


common/app/routes/challenges/redux/reducer.js

@@ -81,7 +82,13 @@ const mainReducer = handleActions(
    }),
    [types.updateTests]: (state, { payload: tests }) => ({
      ...state,
-      tests
+      tests,
+      isChallengePassed: (tests.length > 0 &&


common/app/routes/challenges/components/classic/Classic.jsx

+
+    // A map of 'keydown' events
+    let map = {};
+    let keyBindings = (event) => {


common/app/routes/challenges/components/classic/Classic.jsx

+      return false;
+    };
+
+    let successMessage = randomCompliment();


common/app/routes/challenges/components/Classic-Modal.jsx

+
+  onClickHandler() {
+    this.props.onModalClick();
+  }


common/app/routes/challenges/components/Classic-Modal.jsx

+          block={ true }
+          bsSize='large'
+          bsStyle='primary'
+          onClick={this.onClickHandler.bind(this)}


common/app/routes/challenges/components/Classic-Modal.jsx

+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+          block={ true }


common/app/routes/challenges/components/classic/Classic.jsx

@@ -111,6 +141,13 @@ export class Challenge extends PureComponent {
        </Col>
        { this.renderPreview(showPreview) }
        <BugModal />
+        <ClassicModal
+          keyBindings={ keyBindings }


common/app/routes/challenges/components/classic/Classic.jsx

+          modalShow={ isChallengePassed }
+          modalTitle={ successMessage }
+          onModalClick={ submitChallenge }
+          onModalExit={ testsInvalid }


common/app/routes/challenges/redux/actions.js

@@ -22,6 +22,7 @@ export const fetchChallengeCompleted = createAction(
  (_, challenge) => challenge,
  entities => ({ entities })
 );
+export const testsInvalid = createAction(types.testsInvalid);


common/app/routes/challenges/redux/reducer.js

@@ -42,7 +42,8 @@ const initialUiState = {
  isPressed: false,
  isCorrect: false,
  shouldShakeQuestion: false,
-  shouldShowQuestions: false
+  shouldShowQuestions: false,
+  isChallengePassed: false


common/app/routes/challenges/redux/types.js

@@ -21,6 +21,7 @@ export default createTypes([
  'updateHint',
  'lockUntrustedCode',
  'unlockUntrustedCode',
+  'testsInvalid',


BerkeleyTrue · 2016-10-26T22:35:51Z

I don't think we use modals anywhere else so where I commented isChallengeModalOpen it can just be isModalOpen.

Bouncey · 2016-10-26T22:56:38Z

We use a modal for bug reporting so I will try to avoid name clashes with these store values.

Comments regarding the key bindings and modal click handler have already been refactored but not pushed due to the isChallengePassed concern 👍

We are getting there 😄

BerkeleyTrue · 2016-10-26T22:58:07Z

Oh yeah forget about that bugger. 👍

camperbot · 2016-10-27T23:09:08Z

@Bouncey updated the pull request.

camperbot · 2016-10-27T23:12:17Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Classic-Modal.jsx

+        show={ show }
+        >
+        <Modal.Header className='challenge-list-header' closeButton={ true }>
+          <Modal.Title>{ this.renderSuccessMessage() }</Modal.Title>


common/app/routes/challenges/components/Classic-Modal.jsx

+export default class ClassicModal extends PureComponent {
+
+  renderIcon() {
+    return (


common/app/routes/challenges/components/classic/Classic.jsx

@@ -81,15 +99,30 @@ export class Challenge extends PureComponent {
    );
  }

+  keyBindings(event) {


common/app/routes/challenges/components/classic/Classic.jsx

+  keyBindings(event) {
+    const map = this.props.keyMap;
+    const { mapKeys, isChallengeModalOpen, submitChallenge } = this.props;
+    map[event.keyCode] = event.type === 'keydown';


common/app/routes/challenges/components/classic/Classic.jsx

@@ -81,15 +99,30 @@ export class Challenge extends PureComponent {
    );
  }

+  keyBindings(event) {
+    const map = this.props.keyMap;


camperbot · 2016-10-28T13:51:49Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Classic-Modal.jsx

+export default class ClassicModal extends PureComponent {
+
+  keyBindings(event) {
+    const map = Object.assign({}, this.props.keyMap);


common/app/routes/challenges/redux/reducer.js

@@ -81,7 +84,21 @@ const mainReducer = handleActions(
    }),
    [types.updateTests]: (state, { payload: tests }) => ({
      ...state,
-      tests
+      tests,
+      isChallengeModalOpen: (tests.length > 0 &&


camperbot · 2016-10-29T05:37:01Z

@Bouncey updated the pull request.

camperbot · 2016-10-30T09:47:34Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Classic-Modal.jsx

+      <Modal
+        animation={ false }
+        dialogClassName='success'
+        id='complete-courseware-dialog'


common/app/routes/challenges/components/Classic-Modal.jsx

+        </Modal.Header>
+        <Modal.Body>
+          <div className='text-center'>
+            <div className='row' id='checkmark-container'>


common/app/routes/challenges/components/Classic-Modal.jsx

+export default class ClassicModal extends PureComponent {
+
+  keyBindings(event) {
+    const map = Object.assign({}, this.props.keyMap);


camperbot · 2016-11-02T13:17:44Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Classic-Modal.jsx

+      <Modal
+        animation={ false }
+        dialogClassName='success'
+        id='complete-courseware-dialog'


common/app/routes/challenges/components/Classic-Modal.jsx

+        keyboard={ true }
+        onHide={ close }
+        onKeyDown={ this.keyBindings.bind(this) }
+        onKeyUp={ this.keyBindings.bind(this) }


common/app/routes/challenges/components/Classic-Modal.jsx

+export default class ClassicModal extends PureComponent {
+
+  keyBindings(event) {
+    const map = Object.assign({}, this.props.keyMap);


camperbot · 2016-11-02T21:42:09Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Classic-Modal.jsx

+        keyboard={ true }
+        onHide={ close }
+        onKeyDown={ this.keyBindings }
+        onKeyUp={ this.keyBindings }


camperbot · 2016-11-05T23:13:36Z

@Bouncey updated the pull request.

camperbot · 2016-11-11T18:27:18Z

@Bouncey updated the pull request.

systimotic · 2016-11-19T08:27:51Z

@Bouncey Is this ready for another QA by @BerkeleyTrue?

Bouncey · 2016-11-19T10:05:10Z

👍

On Saturday, 19 November 2016, Timo notifications@github.com wrote:

@Bouncey https://github.com/Bouncey Is this ready for another QA by
@BerkeleyTrue https://github.com/BerkeleyTrue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11253 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ARtk5uv8kvxazwQAxGYVzYkqNISXkggJks5q_rNPgaJpZM4KZMOY
.

common/app/routes/challenges/components/Classic-Modal.jsx

+    this.keyBindings = this.keyBindings.bind(this);
+  }
+
+  keyBindings(e) {


BerkeleyTrue · 2016-11-29T01:31:31Z

Apologies. Looks like I made some review comments but never submitted them.

camperbot · 2016-11-29T22:55:39Z

@Bouncey updated the pull request.

camperbot · 2016-11-30T21:33:19Z

@Bouncey updated the pull request.

camperbot · 2016-12-05T21:14:13Z

@Bouncey updated the pull request.

camperbot · 2016-12-05T22:54:49Z

@Bouncey updated the pull request.

Bouncey assigned QuincyLarson and BerkeleyTrue Oct 17, 2016

BerkeleyTrue added the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label Oct 17, 2016

Bouncey added the hacktoberfest label Oct 17, 2016

BerkeleyTrue suggested changes Oct 19, 2016

View reviewed changes

Bouncey commented Oct 22, 2016

View reviewed changes

common/app/routes/challenges/redux/completion-saga.js

timeout: 10000

})

);

return Observable.just(null);

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue suggested changes Oct 25, 2016

View reviewed changes

BerkeleyTrue suggested changes Oct 26, 2016

View reviewed changes

BerkeleyTrue suggested changes Oct 27, 2016

View reviewed changes

Bouncey commented Oct 28, 2016

View reviewed changes

BerkeleyTrue reviewed Oct 29, 2016

View reviewed changes

common/app/routes/challenges/redux/reducer.js

@@ -81,7 +84,21 @@ const mainReducer = handleActions(

}),

[types.updateTests]: (state, { payload: tests }) => ({

...state,

tests

tests,

isChallengeModalOpen: (tests.length > 0 &&

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue suggested changes Nov 1, 2016

View reviewed changes

BerkeleyTrue suggested changes Nov 2, 2016

View reviewed changes

Bouncey commented Nov 2, 2016

View reviewed changes

common/app/routes/challenges/components/Classic-Modal.jsx

keyboard={ true }

onHide={ close }

onKeyDown={ this.keyBindings }

onKeyUp={ this.keyBindings }

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

camperbot removed the hacktoberfest label Nov 4, 2016

BerkeleyTrue reviewed Nov 29, 2016

View reviewed changes

common/app/routes/challenges/components/Classic-Modal.jsx

this.keyBindings = this.keyBindings.bind(this);

}

keyBindings(e) {

This comment was marked as off-topic.

Sign in to view

Add reactified challenge success modal

60d46e0

BerkeleyTrue approved these changes Dec 5, 2016

View reviewed changes

BerkeleyTrue merged commit a70b10b into freeCodeCamp:staging Dec 5, 2016

BerkeleyTrue removed the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label Dec 5, 2016

systimotic mentioned this pull request Jan 15, 2017

Community dropdown styling in night mode #12538

Closed

Reactified Success Modal #11253

Reactified Success Modal #11253

Conversation

Bouncey commented Oct 17, 2016 • edited

Pre-Submission Checklist

Type of Change

Checklist:

Description

camperbot commented Oct 18, 2016

Bouncey commented Oct 18, 2016 • edited

SandraMonroe commented Oct 18, 2016

dhcodes commented Oct 18, 2016

ghost commented Oct 18, 2016

camperbot commented Oct 18, 2016

Bouncey commented Oct 18, 2016 • edited

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Oct 22, 2016

This comment was marked as off-topic.

camperbot commented Oct 22, 2016

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

BerkeleyTrue commented Oct 26, 2016

Bouncey commented Oct 26, 2016 • edited

BerkeleyTrue commented Oct 26, 2016

camperbot commented Oct 27, 2016

camperbot commented Oct 27, 2016

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Oct 28, 2016

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Oct 29, 2016

camperbot commented Oct 30, 2016

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

camperbot commented Nov 2, 2016

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

Bouncey commented Oct 17, 2016 •

edited

Bouncey commented Oct 18, 2016 •

edited

Bouncey commented Oct 18, 2016 •

edited

Bouncey commented Oct 26, 2016 •

edited