Add theme class to sidebar--menu--sub-header

[IsaacAbrahamson]

Hey @no-stack-dub-sack, can you do a quick fix for me so I can keep working on my layout tweaks?

I need the details summary to have the theme name on it so I can style it correctly, could you do this for me?

I was able to get this in menuMap.js file on line 62 by the following:

render() {
    return (
      <details open>
        <summary className={`sidebar--menu--sub-header ${this.props.theme}`}>
          {this.props.header}
        </summary>
        { _.map(this.props.items, this.renderMenuItem) }
      </details>
    )
  }

However, in menu.js I cannot get this.props.theme, and you are just hardcoding the HTML there:

render() {
  return (
    <section
      className="sidebar--menu top-pane"
      style={{ height: topHeight, transition }}>
      <header className="sidebar--menu--header">
        Contents
      </header>
      <MenuMap
        header="Sorting Algorithms"
        items={SORTING_ALGOS} />
      <MenuMap
        header="Data Structures"
        items={DATA_STRUCTURES} />
      <details open>
        <summary className="sidebar--menu--sub-header"> // <-- right here
          Algorithm Challenges
        </summary>
        <MenuMap
          header="Easy"
          items={EASY_ALGOS}
          xtraClass="sub" />
        <MenuMap
          header="Moderate"
          items={MODERATE_ALGOS}
          xtraClass="sub" />
      </details>
    </section>
  )
}

So, could you add the theme class to this last button, the Algorithm Challenges details summary?

Thanks, would be helpful! I'm trying to have a slightly darker background for the light themes and a slightly lighter for the dark themes. Plus it would benefit theme creators.

[IsaacAbrahamson]

Also, how can I pull in your changes to the js files without overwriting the CSS I've written? Sorry, I'm not the greatest with git.

[no-stack-dub-sack]

Hey @IsaacAbrahamson yes, just about to turn in for the night, but I should be able to do this tomorrow once I get home from work. Thanks for taking a look at this!

I'll leave a note here about rebasing tomorrow too which should allow you to pull in my changes without disrupting what you've already done (as long as there are no major conflicts).

[IsaacAbrahamson]

Ok, great. I just realized I started off all wrong. I didn't even fork the repository 🤓. It's been too long since Hacktoberfest...

[no-stack-dub-sack]

@IsaacAbrahamson Here's how the file should look to make this change, starting at the Menu component (I've noted the lines where there are changes, but it's few enough where it may just be easier to do it on your end without the need for a PR at this point):

const Menu = ({ theme, topHeight, transition }) => { // <-- add `theme` to destructuring of `props` object here
  return (
    <section
      className="sidebar--menu top-pane"
      style={{ height: topHeight, transition }}>
      <header className="sidebar--menu--header">
        Contents
      </header>
      <MenuMap
        header="Sorting Algorithms"
        items={SORTING_ALGOS} />
      <MenuMap
        header="Data Structures"
        items={DATA_STRUCTURES} />
      <details open>
        <summary className={`sidebar--menu--sub-header ${theme}`}> // <-- add brackets and template literal here
          Algorithm Challenges
        </summary>
        <MenuMap
          header="Easy"
          items={EASY_ALGOS}
          xtraClass="sub" />
        <MenuMap
          header="Moderate"
          items={MODERATE_ALGOS}
          xtraClass="sub" />
      </details>
    </section>
  )
}

Menu.propTypes = {
  theme: PropTypes.string.isRequired, // <-- copy this line into Menu.propTypes (tells react component which props to expect, like type checking)
  topHeight: PropTypes.string.isRequired,
  transition: PropTypes.string.isRequired
}

const mapStateToProps = ({ panes, theme }) => ({ // <-- destrucuture `theme` from the state object (redux magic)
  theme: theme.current, // <-- assign it to the theme key to map the theme state to the components local props
  topHeight: panes.topHeight,
  transition: panes.transition,
})

That should do it!

Also, to pull in my changes anyway, since I have made some commits to master in the last couple of days, you could always rebase. You need to have committed changes on your branch first (if you're not ready to commit anything, this can always wait, or you can always modify the commits later by squashing them). This repo should be set up as your local repository's upstream remote.

git remote add upstream https://github.com/no-stack-dub-sack/cs-playground-react/

Once all this is done, you can then use

git pull --rebase upstream master

which should attempt to merge in the upstream changes from my master branch to whatever branch you're working on. This should be ok, but depending on when you forked and cloned the repo, there could be some conflicts. If Git doesn't automatically complete this operation and starts complaining to you (you'll know if it does), just run git rebase --abort and that should abort the rebase attempt.

I don't think this will happen given your changes should be fairly localized, but if it does, no worries, we'll deal with any merge conflicts once you make your PR.

Let me know if you have trouble with anything! Gitter is usually a pretty reliable way to reach me in the evenings EST. Good luck!

[IsaacAbrahamson]

@no-stack-dub-sack, awesome, thanks! I think I'll just make the changes myself locally, it looks pretty basic. I'll send you a message on Gitter if I run into issues, but I'm pretty tied up the next few days, so not sure how much I'll progress.

Closing as it should be added in my upcoming PR.

[no-stack-dub-sack]

@IsaacAbrahamson perfect, thanks man!

[IsaacAbrahamson]

Got it working. Thanks for adding the detailed comments as well. I also reset my git environment so I have my own fork and branch for my changes. Ugh. Maybe one day soon I will "git" this process down 😄

[no-stack-dub-sack]

haha, nice one! And no prob, glad they helped / you got it figured out.

I also reset my git environment so I have my own fork and branch for my changes.

Sweet. Yeah, Git is a pain to learn, but its massively useful once you do. It's like crazy coding magic the things it can do. Git and GitHub never cease to amaze me with the things they can do together. It's a pretty impressive system honestly. I didn't get it down until I started contributing to FCC a lot, which basically forces it on some level (at least the simple stuff). Def a useful skill to have in your toolbox, thought quite a lot of companies still do use other version control systems. Like lot's of .Net shops use TFS (team foundation server) instead, which I just learned as I'm beginning to pick up some stuff for work (I don't work as a dev, but I'm doing a programming "internship" of sorts at work right now, as they know I have an interest in moving over at some point).