Add place for special badges on dashboard

[ajefts]

We have an upcoming SRM event(s) that will yield some special badges that we want to put on the member's dashboard if they have the badge. Let's modify the top of the page a bit to accommodate it.

[ajefts]

@birdofpreyru We probably need to do this in both topcoder-app and community-app so we're ready with it in either case.

Let's talk about the api calls when you have time..

[birdofpreyru]

@ajefts This is not how the dashboard looks now. In the current version, in the row under header menu, we have avatar / handle / earnings on left; and DASHBOARD label on right. Though, there is many space between them, where we can add the badge.

How do we get it? Will be exposed as some of the fields in profile object?
When exactly do we need it ready?

[ajefts]

Can we update the top part to look like the design?

For getting the data, I'm thinking of a couple options. Can you mock it for a couple users for now?

[birdofpreyru]

Ok, running as an F2F for topcoder-app case: https://www.topcoder.com/challenge-details/30059314/?type=develop&noncache=true

[ajefts]

@sushilshinde I'd like you to follow this one and when @birdofpreyru has the submission tested locally, you can manage the PR for it and make sure it's verified in dev...and then we'll push to prod...

[birdofpreyru]

@sushilshinde Ok, as @ajefts wants you to take care about this issue from this point, here is the winning submission, commited as a separate branch to topcoder-app: https://github.com/appirio-tech/topcoder-app/commits/f2f-dashboard-ronakkaria-3

I have no idea, though, what badge Tony wants to display in Dashboard :) What that update does is (1) it restyles header part of dashboard, (2) it allows to specify that some of the badges from user profile, if user has them, should be also rendered in the dashboard. So, we still should add the to the app the badge Tony wants to add, and configure it to show in dashboard

[birdofpreyru]

@sushilshinde I got an email from the winner of this F2F, pointing out that both him and me, we have overlooked that dashboard header directive, that he has modified, is also used in other dashboard / profile pages, probably somewhere else. So, you shoud check whether the update works fine there, or we need some further modifications for that.

[sushilshinde]

Started looking into this.

[sushilshinde]

Question @birdofpreyru @ajefts

Are we pushing this to dev/prod before the badge logic integration?

[ajefts]

@sushilshinde How is the logic setup/mocked to show the badge right now?

[ajefts]

fyi, I setup some data in dev. I'll chat on slack for how to test...

[sushilshinde]

@ajefts There is a logic to show badge with the mock data. I was able to render badge, with some change in mock data. To make it live, we need dashboard badge names as a part of response from API call /part of achievements API. Are we showing multiple badges or a single badge on a dashboard?

Currently, mock data code ({<user_handle>:<badge_name>}) suggest for another API call for dashboard badge names, my guess is it doesn't exist right now. As I mentioned earlier it should be a part of achievement API.

@birdofpreyru your comments.

Code Reference:
https://github.com/appirio-tech/topcoder-app/blob/bf7d1992e9b4f2d3fe1604f1109442baacb5ad3c/app/directives/page-state-header/page-state-header.directive.js#L70

PS: Do we have a directory of Rest APIs with its specs and versions?

[birdofpreyru]

@sushilshinde @ajefts
Yeah, right, to render a badge on Dashboard we just need: (1) to add the badge image for Dashboard into topcoder-app repo; (2) to add this badge ID into the response of the same API that returns badges for profile pages.

Currently, mock data code ({<user_handle>:<badge_name>}) suggest for another API call for dashboard badge names, my guess is it doesn't exist right now.

We just slightly modify that code there. Now that mock allows to inject specified badge for specified users only, for testing. We simply update it to work for arbitrary users. I.e. we'll hard-code a set of badge IDs (just one for now), that should be rendered in the Dashboard, if present in API response for any user; we filter achievements against that set, and if something matches we render