blake.app

Documenting working on a programming task

Just for fun I thought I would document one of the tasks that I need to get done for work today.

I’m currently in the process of removing all uses of our custom render buffer and the navigation-item.js.es6 file happens to be one of the last remaining 4 files that still use it.

Well, since I’m not really sure yet where in the app this code is being used I’m going to start first searching for navigation-item which should reveal which handlebar templates are calling this component:

app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs
10:    {{navigation-item content=navItem filterMode=filterMode category=category}}

app/assets/javascripts/discourse/templates/components/navigation-bar.hbs
2:  {{navigation-item content=navItem filterMode=filterMode category=category}}

I’m pretty sure this is the feature this file affects:

Before I completely break things as I start to make changes it looks like there is support for icons but I don’t totally understand how it currently works:

  70 ˰˰¦˰¦˰if (content.get("hasIcon")) {
  71 ˰˰¦˰¦˰¦˰buffer.push("<span class='" + content.get("name") + "'></span>");
  72 ˰˰¦˰¦˰}

I wonder if I can easily create my own menu item with an icon to test with or if I have to make a theme component for it.

Okay, not really sure a good way to test icons, but I see how the html is working now so I guess it is time to move on and make the actual handlebar file needed to replace the buffered render logic.

Look like it is set to re-render on count

rerenderTriggers: ["content.count"],

Does this live update? Yes it does. So I need to make sure those numbers still update without a refresh.

Okay, I’ve made my template change, and the page still renders, but it looks like I broke the active class.

Oh, I wonder if it is this: return contentFilterType === filterType;?

Hmm maybe not:

image

Okay weird. I just saved my changes off in a branch and went back to the master branch and indeed active is set on the latest button:

image

(false is for all the other nav items)

Oh I wonder if I’m loading the mixin incorrectly?

app/assets/javascripts/discourse/components/navigation-item.js.es6
4:import FilterModeMixin from "discourse/mixins/filter-mode";
7:  FilterModeMixin,

app/assets/javascripts/discourse/components/navigation-bar.js.es6
9:import FilterModeMixin from "discourse/mixins/filter-mode";
11:export default Component.extend(FilterModeMixin, {

Yep that was it!

And now I’m all done. Here is my commit: