make challenges easier to navigate #10239

sachinmour · 2016-08-16T16:33:07Z

Pre-Submission Checklist

Your pull request targets the staging branch of FreeCodeCamp.
Branch starts with either fix/, feature/, or translate/.
You have only one commit.
All new and existing tests pass the command npm run test-challenges.

Type of Change

New feature (non-breaking change which adds new functionality)

Checklist:

Tested changes locally.
Closes currently open issue : Closes Make "Learn how FCC Works" challenge easier to navigate (UX) #10056

Description

Added two functions in mouse-trap-saga.js which makes navigation easier by allowing user to navigate through left and right key.
set a fixed height to step challenge images so as to always keep navigation buttons in the view.

common/app/routes/challenges/components/step/Step.jsx

@@ -111,6 +111,7 @@ export class StepChallenge extends PureComponent {
          href={ action }
          onClick={ completeAction }
          target='_blank'
+          className='unlockStep'


raisedadead · 2016-08-16T17:03:05Z

Tested changes locally.

Please ensure you actually test the things locally by manual testing, and executing npm test

camperbot · 2016-08-16T17:27:41Z

@sachinmour updated the pull request.

sachinmour · 2016-08-16T17:36:25Z

@raisedadead why is snyk checks are failing... it is not showing in my local branch..

common/app/routes/challenges/components/step/Step.jsx

@@ -134,7 +135,7 @@ export class StepChallenge extends PureComponent {
      <Button
        bsSize='large'
        bsStyle='primary'
-        className='col-sm-4 col-xs-12'
+        className='col-sm-4 col-xs-12 previousStep'


sachinmour · 2016-08-17T02:40:36Z

To do it with react and redux....
We have to dispatch an action named goToStep(stepNo.) In Step.jsx
But then we have to bound keys with mousetrap eveytime it reloads.

QuincyLarson · 2016-08-17T08:54:46Z

@sachinmour Awesome - once you are done with that let me know - I'm excited to try it out :)

What happens when there's a "click here to open link in new tab" button on the slide?

camperbot · 2016-08-17T12:03:16Z

@sachinmour updated the pull request.

camperbot · 2016-08-17T12:15:50Z

@sachinmour updated the pull request.

camperbot · 2016-08-17T12:26:41Z

@sachinmour updated the pull request.

sachinmour · 2016-08-17T12:32:22Z

@QuincyLarson when there's a click - button "click here to open link in new tab" slides into view.

common/app/routes/challenges/components/step/Step.jsx

+	const { Mousetrap } = global;
+	Mousetrap.bind('right', this.handleNextClick);
+	Mousetrap.bind('left', this.handleBackClick);
+  }


sachinmour · 2016-08-20T16:22:10Z

@BerkeleyTrue can i use dom to get current Index.(i.e from counters).
If not how do i get current index.

BerkeleyTrue · 2016-08-20T17:14:44Z

Through the getState function. The whole app is a function of the state. You then use actions dispatched through redux to change the view, which in turn update the state

sachinmour · 2016-08-20T18:37:48Z

ok.. now i can get current index from the state.. but don't have total number of steps in the state... how do i get that..

BerkeleyTrue · 2016-08-31T01:32:02Z

It's the number of items in the description array.
https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/common/app/routes/challenges/components/step/Step.jsx#L40

sachinmour · 2016-08-31T04:17:08Z

I saw that too.. but it isn't showing in getState...

BerkeleyTrue · 2016-08-31T04:32:04Z

It's coming from the challengeSelector, which in-turn gets it from the entities.

I might need to add a step epic to handle step transitions as there is to much info needed ahead of time and would make the mouse trap epic coupled with the step challenge.

BerkeleyTrue · 2016-08-31T04:33:05Z

see: https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/common/app/routes/challenges/redux/selectors.js#L39

BerkeleyTrue · 2016-08-31T21:09:14Z

@sachinmour This PR should make it easier #10417 once it is merged

BerkeleyTrue · 2016-09-02T02:04:02Z

@sachinmour That PR has been merged. It should now be trivial to add those navigation traps without needing to access state.

common/app/routes/challenges/components/step/Step.jsx

@@ -178,6 +190,7 @@ export class StepChallenge extends PureComponent {
        key={ imgUrl }
        >
        <a
+          className='fixed-height'


BerkeleyTrue · 2016-09-07T21:00:12Z

@sachinmour Are you still working on this?

sachinmour · 2016-09-07T22:52:42Z

I don't have total number of steps in the state... i am not able to get that even after the change..

BerkeleyTrue · 2016-09-08T05:28:34Z

you don't need them. That was the point of the change.

sachinmour · 2016-09-08T05:54:16Z

ok.. but then if i don't know if the user is on the last step and i call stepForward instead of submitChallenge, that results in an error.

BerkeleyTrue · 2016-09-08T06:19:12Z

That shouldn't be the case. StepForward should submit the challenge on the last step

sachinmour · 2016-09-08T11:09:16Z

You are right about that.. but there is this error whenever i call stepForward on the last step..

submitChallenge is firing

BerkeleyTrue · 2016-09-08T18:58:04Z

Can you provide a stack trace?

sachinmour · 2016-09-09T02:14:52Z

Its a very long stack trace...
It's divided into parts one after the other..

BerkeleyTrue · 2016-09-09T03:33:14Z

@sachinmour I can't replicate. Looks like you are going to need to do some debugging to figure out the issue on your end.

BerkeleyTrue · 2016-09-28T04:26:33Z

@sachinmour Are you still able to work on this?

sachinmour · 2016-09-28T10:47:54Z

@BerkeleyTrue i am not able to figure out what my machine is doing wrong.. as you don't see any errors in your machine.. can you fix this..

BerkeleyTrue · 2016-09-28T16:09:22Z

Try blowing away your node_modules. rebase off of current staging, and npm install. Also make sure you are using node 6 and npm 3

camperbot · 2016-10-03T07:48:21Z

@sachinmour updated the pull request.

ghost · 2016-10-07T15:42:20Z

@sachinmour, what's the status of this PR @sachinmour ?

sachinmour · 2016-10-07T16:08:30Z

@atjonathan this doesn't work.. i have tried all possible ways.. blowing my node modules folder and everything..
part of the functionality works.. i can move around with left and right arrow keys but as soon as you reach the last step and i press right key.. the above mentioned error pops up... i haven't been able to figure that out..

ghost · 2016-10-07T20:19:29Z

@sachinmour try asking in the Contributors room for help, otherwise we can reopen this issue as help wanted.

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

raisedadead reviewed Aug 16, 2016
View reviewed changes

common/app/routes/challenges/components/step/Step.jsx

@@ -111,6 +111,7 @@ export class StepChallenge extends PureComponent {

href={ action }

onClick={ completeAction }

target='_blank'

className='unlockStep'

This comment was marked as off-topic.

Sign in to view

raisedadead added status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. and removed status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. labels Aug 16, 2016

sachinmour force-pushed the feature/easy_navigation branch from 9e70440 to 695acb1 Compare August 16, 2016 17:27

BerkeleyTrue reviewed Aug 16, 2016
View reviewed changes

BerkeleyTrue self-assigned this Aug 16, 2016

sachinmour force-pushed the feature/easy_navigation branch from e6a74e3 to 9ebe4bb Compare August 17, 2016 12:26

BerkeleyTrue reviewed Aug 17, 2016
View reviewed changes

common/app/routes/challenges/components/step/Step.jsx

const { Mousetrap } = global;

Mousetrap.bind('right', this.handleNextClick);

Mousetrap.bind('left', this.handleBackClick);

}

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue reviewed Sep 2, 2016
View reviewed changes

common/app/routes/challenges/components/step/Step.jsx

@@ -178,6 +190,7 @@ export class StepChallenge extends PureComponent {

key={ imgUrl }

>

<a

className='fixed-height'

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

sachinmour closed this Oct 3, 2016

sachinmour force-pushed the feature/easy_navigation branch from 9ebe4bb to 5412b61 Compare October 3, 2016 07:48

BerkeleyTrue removed the status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. label Oct 3, 2016

make challenges easier to navigate #10239

make challenges easier to navigate #10239

Conversation

sachinmour commented Aug 16, 2016 • edited

Pre-Submission Checklist

Type of Change

Checklist:

Description

This comment was marked as off-topic.

raisedadead commented Aug 16, 2016

camperbot commented Aug 16, 2016

sachinmour commented Aug 16, 2016

This comment was marked as off-topic.

sachinmour commented Aug 17, 2016

QuincyLarson commented Aug 17, 2016

camperbot commented Aug 17, 2016

camperbot commented Aug 17, 2016

camperbot commented Aug 17, 2016

sachinmour commented Aug 17, 2016

This comment was marked as off-topic.

sachinmour commented Aug 20, 2016 • edited

BerkeleyTrue commented Aug 20, 2016

sachinmour commented Aug 20, 2016

BerkeleyTrue commented Aug 31, 2016

sachinmour commented Aug 31, 2016

BerkeleyTrue commented Aug 31, 2016

BerkeleyTrue commented Aug 31, 2016

BerkeleyTrue commented Aug 31, 2016

BerkeleyTrue commented Sep 2, 2016

This comment was marked as off-topic.

This comment was marked as off-topic.

BerkeleyTrue commented Sep 7, 2016

sachinmour commented Sep 7, 2016

BerkeleyTrue commented Sep 8, 2016

sachinmour commented Sep 8, 2016 • edited

BerkeleyTrue commented Sep 8, 2016

sachinmour commented Sep 8, 2016

BerkeleyTrue commented Sep 8, 2016

sachinmour commented Sep 9, 2016 • edited

BerkeleyTrue commented Sep 9, 2016

BerkeleyTrue commented Sep 28, 2016

sachinmour commented Sep 28, 2016

BerkeleyTrue commented Sep 28, 2016

camperbot commented Oct 3, 2016

ghost commented Oct 7, 2016

sachinmour commented Oct 7, 2016

ghost commented Oct 7, 2016

sachinmour commented Aug 16, 2016 •

edited

sachinmour commented Aug 20, 2016 •

edited

sachinmour commented Sep 8, 2016 •

edited

sachinmour commented Sep 9, 2016 •

edited