Feature/Block names added to challenge and document titles by Bouncey · Pull Request #11251 · freeCodeCamp/freeCodeCamp

Bouncey · 2016-10-17T20:44:52Z

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 Add challenge names and potentially breadcrumbs #11061

Description

Re-opend under new branch name

Credit for the original idea goes to @andmckvr13

BerkeleyTrue

Use the property block already on the challenge object instead of creating a new property.

common/app/redux/reducer.js

  {
-    [types.updateTitle]: (state, { payload = 'Learn To Code' }) => ({
+    [types.updateTitle]:
+    (state,


common/app/redux/reducer.js

-      title: payload + ' | Free Code Camp'
-    }),
-
+      title: `${updatedTitle} | Free Code Camp`


common/app/routes/challenges/components/Show.jsx

  state => state.challengesApp.challenge,
  state => state.challengesApp.superBlocks,
-  ({ challenge: { title } = {}, viewType }, challenge, superBlocks = []) => ({
+  ({ challenge: { title = 'Learn to Code', blockType } = {},


common/app/routes/challenges/components/classic/Side-Panel.jsx

  state => state.challengesApp.isCodeLocked,
  (
-    { challenge: { title, description, hints = [] } = {} },
+    { challenge: { title, description, hints = [], blockType } = {} },


common/app/routes/challenges/components/classic/Side-Panel.jsx

      style.height = height + 'px';
    }
+
+    let titleString = () => {


common/app/routes/challenges/components/project/Side-Panel.jsx

  render() {
-    const { title, description, isCompleted } = this.props;
+    const { title, description, isCompleted, blockType } = this.props;
+    let titleString = () => {


common/app/routes/challenges/components/video/Video.jsx

-    const { updateTitle } = this.props;
-    updateTitle(this.props.title);
+    const { updateTitle, title, blockType } = this.props;
+    updateTitle({blockType, title});


camperbot · 2016-10-19T19:38:55Z

@Bouncey updated the pull request.

Bouncey · 2016-10-19T19:40:25Z

I couldn't find block on any challenge object, but found it on the entities object

BerkeleyTrue · 2016-10-19T19:47:57Z

It's challenge.block

Bouncey · 2016-10-20T21:06:18Z

challenges.block refers to the block used in the path

I want to use challengeSpec.name, which is only available from state.entities.block[block].name

Looking at ./seed/index.js, it looks like it should be on the challenge object passed to the updateCurrentChallenge action, but when I log that object as it goes through the reducer, it's not there:

{ id: 'bd7123c8c441eddfaeb5bdef',
  name: 'Say Hello to HTML Elements',
  title: 'Say Hello to HTML Elements',
  type: 'waypoint',
  order: 2,
  suborder: 1,
  checksum: 3097141541,
  isBeta: false,
  isComingSoon: false,
  dashedName: 'say-hello-to-html-elements',
  superBlock: 'Front End Development Certification',
  superOrder: 1,
  hint: [],
  block: 'html5-and-css',
  difficulty: undefined,
  description: 
   [ 'Welcome to Free Code Camp\'s first coding challenge.',
     'You can edit <code>code</code> in your <code>text editor</code>, which we\'ve embedded into this web page.',
     'Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That\'s an HTML <code>element</code>.',
     'Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.',
     'Opening tags look like this:',
     '<code>&#60;h1&#62;</code>',
     'Closing tags look like this:',
     '<code>&#60;/h1&#62;</code>',
     'Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.',
     'Each challenge has tests that you can run at any time by clicking the "Run tests" button. Once you get all tests passing, you can advance to the next challenge.',
     'To pass the test on this challenge, change your <code>h1</code> element\'s text to say "Hello World" instead of "Hello". Then click the "Run tests" button.' ],
  tests: 
   [ { text: 'Your <code>h1</code> element should have the text "Hello World".',
       testString: 'assert.isTrue((/hello(\\s)+world/gi).test($(\'h1\').text()), \'Your <code>h1</code> element should have the text "Hello World".\');' } ],
  head: [],
  tail: [],
  helpRoom: 'Help',
  fileName: '01-front-end-development-certification/html5-and-css.json',
  challengeSeed: [ '<h1>Hello</h1>' ],
  challengeType: 0,
  MDNlinks: undefined,
  solutions: [],
  releasedOn: undefined,
  required: [],
  blockId: 5807cf87d8438f138bf14304,
  isLocked: false,
  time: '5 hours' }

@BerkeleyTrue, if you can shed some light on how state.entities.block[block].name comes to be, I will certainly update the challenge object with challengeSpec.name.

I've followed it back as far as fetch-challenges-saga.js, but I get lost from there.

BerkeleyTrue · 2016-10-21T05:16:57Z

think of entities as a database of documents

entities: { challenge, block }

challenge is a map of challenge dashedNames to challenge objects.

{
 "say-hello-to-css": { ... }
  ....
}

Same with block

{ 
  "html-css": { ... },
 ...
}

challenge.block is the dashedName of the block that challenge belongs to. to get the title of the block you need access to the block itself.

Check out https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/common/app/routes/challenges/components/map/Block.jsx#L18

To get the title of the block

const block = entites.block[challenge.block]

const blockTitle = block.title;

camperbot · 2016-10-21T15:19:02Z

@Bouncey updated the pull request.

Bouncey · 2016-10-21T15:21:34Z

The nice title like HMTL5 and CSS and Basic Javascript (challengeSpec.name) is not on entities.challenge[dashedname].

I am using entities.block[challenge.block].name which relates to challengeSpec.name

seed/challenges/01-front-end-development-certification/basic-javascript.json

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

common/app/utils/challengeTitle.js

camperbot · 2016-10-21T19:53:25Z

@Bouncey updated the pull request.

camperbot · 2016-10-28T23:47:13Z

@Bouncey updated the pull request.

seed/index.js

camperbot · 2016-10-30T05:58:42Z

@Bouncey updated the pull request.

camperbot · 2016-10-30T06:00:53Z

@Bouncey updated the pull request.

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

camperbot · 2016-10-30T06:04:53Z

@Bouncey updated the pull request.

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

common/app/routes/challenges/utils.js

common/app/routes/challenges/components/video/Video.jsx

camperbot · 2016-11-01T23:58:32Z

@Bouncey updated the pull request.

camperbot · 2016-11-02T00:31:25Z

@Bouncey updated the pull request.

seed/challenges/04-video-challenges/bigonotation.json

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

common/app/routes/challenges/components/video/Video.jsx

camperbot · 2016-11-02T22:57:35Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Show.jsx

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

camperbot · 2016-11-07T22:49:06Z

@Bouncey updated the pull request.

camperbot · 2016-11-07T23:00:44Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Show.jsx

common/app/routes/challenges/components/classic/Side-Panel.jsx

common/app/routes/challenges/components/project/Project.jsx

common/app/routes/challenges/components/video/Video.jsx

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

camperbot · 2016-11-17T22:32:15Z

@Bouncey updated the pull request.

camperbot · 2016-11-17T23:11:55Z

@Bouncey updated the pull request.

camperbot · 2016-11-20T13:02:24Z

@Bouncey updated the pull request.

common/app/routes/challenges/components/Show.jsx

camperbot · 2016-11-20T13:11:04Z

@Bouncey updated the pull request.

server/utils/blockNameify.js

camperbot · 2016-12-13T21:11:00Z

@Bouncey updated the pull request.

Bouncey · 2016-12-13T21:15:28Z

I have refactored the challenge selector to act more like the server when constructing the title. entities.block was taking too long to resolve, and it was noticeable from the UI. Plus, after the rebase, it started to return undefined constantly. I think this was in part because entities.block wasn't resloved in time.

I had to move blockNameify to common/app/utils because I was getting that weird Unexpected token export again when trying to import from server/utils

PR has been rebased to clear merge conflicts

camperbot · 2016-12-13T21:30: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 mentioned this pull request Oct 17, 2016

Added type to challenge and document title #11238

Closed

10 tasks

Bouncey added the hacktoberfest label Oct 17, 2016

BerkeleyTrue suggested changes Oct 18, 2016

View reviewed changes

BerkeleyTrue suggested changes Oct 21, 2016

View reviewed changes

Bouncey commented Oct 28, 2016

View reviewed changes

seed/index.js Outdated

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue suggested changes Oct 29, 2016

View reviewed changes

seed/index.js Outdated

This comment was marked as off-topic.

Sign in to view

Bouncey commented Oct 30, 2016

View reviewed changes

common/app/routes/challenges/redux/selectors.js Outdated

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue suggested changes Nov 1, 2016

View reviewed changes

Bouncey commented Nov 2, 2016

View reviewed changes

seed/challenges/04-video-challenges/bigonotation.json Outdated

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue suggested changes Nov 2, 2016

View reviewed changes

common/app/routes/challenges/redux/selectors.js Outdated

This comment was marked as off-topic.

Sign in to view

common/app/routes/challenges/components/video/Video.jsx Outdated

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 suggested changes Nov 7, 2016

View reviewed changes

common/app/routes/challenges/components/Show.jsx Outdated

This comment was marked as off-topic.

Sign in to view

common/app/routes/challenges/redux/selectors.js Outdated

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue suggested changes Nov 8, 2016

View reviewed changes

Bouncey commented Nov 20, 2016

View reviewed changes

common/app/routes/challenges/components/Show.jsx Outdated

This comment was marked as off-topic.

Sign in to view

Bouncey commented Nov 20, 2016

View reviewed changes

common/app/routes/challenges/components/Show.jsx Outdated

This comment was marked as off-topic.

Sign in to view

BerkeleyTrue reviewed Dec 12, 2016

View reviewed changes

server/utils/blockNameify.js Outdated

This comment was marked as off-topic.

Sign in to view

Add blockName to titles

0ac0264

BerkeleyTrue approved these changes Dec 15, 2016

View reviewed changes

BerkeleyTrue merged commit b08fd05 into freeCodeCamp:staging Dec 15, 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 15, 2016

Bouncey deleted the Feature/BlockNamesAddedToTitles branch December 15, 2016 23:39

Uh oh!

Conversation

Bouncey commented Oct 17, 2016

Pre-Submission Checklist

Type of Change

Checklist:

Description

Uh oh!

BerkeleyTrue left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

camperbot commented Oct 19, 2016

Uh oh!

Bouncey commented Oct 19, 2016

Uh oh!

BerkeleyTrue commented Oct 19, 2016

Uh oh!

Bouncey commented Oct 20, 2016

Uh oh!

BerkeleyTrue commented Oct 21, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

camperbot commented Oct 21, 2016

Uh oh!

Bouncey commented Oct 21, 2016

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

camperbot commented Oct 21, 2016

Uh oh!

camperbot commented Oct 28, 2016

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

camperbot commented Oct 30, 2016

Uh oh!

camperbot commented Oct 30, 2016

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

This comment was marked as off-topic.

Uh oh!

camperbot commented Oct 30, 2016

Uh oh!

This comment was marked as off-topic.

Uh oh!

BerkeleyTrue commented Oct 21, 2016 •

edited

Loading