argonlaser / badgeit-front Goto Github PK

For every incoming badges, if browser cache and incoming data are same, then dont rerender the view. Otherwise, alert the user that there are few more badges and upon user's action re-render it.

1. Visit http://badgeit.today/w/https://github.com/Wilfred/remacs
2. It takes some minutes for completion of the computation
3. Wait idle in the results page for that much minutes
4. worker finshes completion and relays the badges to front
5. But badges never appear on the page
6. When I refresh the page I could see badges being rendered. Moreover we are receiving the event data twice,

Also note that, when I refresh one more request for computing the badges is being queued up.

One more observation is it happens only for repos that take long time to compute.

We need to know much time does it actually require to have the results for a user.

It's optional to show these metrics for the user in the result page. But we would at least need a log statement, that will print the time on page load and the payload being received.

May be we could show a statement like "29 badges found in 2 minutes" at the bottom of the result page page. But this is not the main focus of this issue. Main focus is, we need log statements for calculating the time taken for getting the data about the badges to the browser.

Payload will contain data that resembles the following

{
  "badges": [],
  "error": "",
  "remote": ""
}

and the badges array will contain an array of badge object which has payload equivalent to the following

{
    "Name": "github release",
    "ImageURL": "https://img.shields.io/github/release/scriptnull/ds.svg",
    "LinkURL": "https://github.com/scriptnull/ds",
    "Group": "github",
    "Tags": [
        "version",
        "release",
        "github",
        "git",
        "source control management",
        "scm"
    ],
    "Style": "",
    "Label": ""
}

Note the Group variable in each badges object.

This issue is about, just arranging the badges belonging to the same group under one div.
'
So the end result will look something like

UI is important part we need to iterate very consciously and incrementally in small blocks, so that we don't end up in a closed road.

We can track this as very low priority as this is only view issue. We can finish error component rendering as hig priority.,

Now we are copying the svg imageurl from the objects properly. But we have to have the proper hyperlinks from the LinkUrl property in the object in the object.

Eg;: [![GitHub license](ImageUrl)](LinkUrl)

Make sure UI of home page is production ready.

CDNs should speed up page load.

In result.html, we have both the error and badges in the object {error: error, badges: [obj1, obj2]} .
If error is not null, render the error component instead of dynamic object divs.

1. Open three tabs
2. go to badgeit-front.now.sh on all the three tabs
3. choose three different github repos and input them on the search box and press enter one by one.
4. If we open the console in tab1, we should receive the payload only for its respective git repo. But thats not the case right now. Along with the payload result for tab1, tab1 also receives the payload results of tab2 and tab3

http://badgeit.today/w/https://github.com/argonlaser/badgeit-front on HOME button click turned into http://badgeit.today/w/https://github.com/argonlaser/home.html .

We need a way to serve css and clientside js files. We also need to get proper tooling for this in place such as minification, concatenation etc. I think we might need to use gulp plugins to establish the tooling part

badgeit-front

• Redis cache serialisation
• Handle errors gracefully
• Write unit tests for failure cases as well.
• Make /callback route private?
• Buy domain

UI

• Integrate the BIG UI check-in.

This is very important step that we should not be forgetting. We need to measure, how much people are trying to use the web version of badgeit. So we need to add google analytics to badgeit web version. This will help us scale the app, if there is a need for it.

We will be doing

• Dockerise badgeit-front app - Already done by @argonlaser
• Run the docker image on AWS EC2 and fix possible errors

At this point, our API won't be available to the outside world. It will only be accessible to badgeit-front

• Buy domain name
• Make domain to point to badgeit-front running on EC2 machine.
• Deploy latest API Image and close scriptnull/badgeit#6

Please refer to scriptnull/badgeit#24

As a result of it, the response on this line https://github.com/argonlaser/badgeit-front/blob/master/routeHandlers/result.js#L14 is capable of returning back two extra fields, cache and status

We should probably try to use them while rendering the result page.