Results Event Selector Widget Inconsistencies

[kr-matthews]

Describe the bug If you go to Results > All for a competition with results posted (example), there are two event selector widgets. One is in the left side-bar and the other is at the top of the first table of results. There are multiple inconsistencies here:

1. The former has the selected event icon as grey and the un-selected event icons are orange, while the later does the opposite.
2. When you first click on All in the left sidebar, the main event (I assume) of the competition is automatically selected (and added to the url) but is not indicated in the side-bar widget (they all remain orange).
3. When you use the widget in the page to select a new event, the widget in the side-bar does not update to highlight the new event selection (but the reverse does work properly).
4. If you move the cursor towards event icons in either widget, they first get darker when you get close, and then go to grey when you're on top.
5. It's not possible via the UI that I can see, but you can change the url to 'event=all' to get all results displayed at once. If you do this, no icons are highlighted (as opposed to all being highlighted).

Finally, it might make more sense if the side bar sub-options under Results were Podiums, By Event (instead of All), and By Person.

To Reproduce

1. Go to any finished competition which has results already posted -- example.
2. Click on Results in the left side-bar, then click on All.
3. See event selector widget just under where you just clicked, and also above the first table in the page.
4. Click on icons in either widget, or change the event directly in the url.

Expected behavior

1. In both widgets, the selected event icon should be orange, and the rest should be grey. (And these should both be up-to-date with the event shown in the tables.)
2. Hovering near/on icons in the widgets should change the icon from grey to black (or stay orange if already selected), and make the name appear via a tool tip.
3. Possibly: There should be an icon in (both) widgets to select all events.

Screenshots Side-bar widget doesn't indicate current event (3x3): Widgets use orange/grey backwards: Side-bar widget doesn't update when page widget is used (megaminx vs 7x7):

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome
• Version 95.0.4638.69

Additional context

There's a similar set of issues going on when you go to Scrambles in the side-bar, except that there's no event selector widget in the side-bar. It would make sense to have Scrambles and Results > All have the same setup and functionality (as described above).

There's also an event selector widget in the schedule. It would make sense if that was also consistent with the above, but note that it does behave slightly differently since there it's possible to select multiple events at once, whereas in results (and scrambles) you probably only need to be able to select either one event or all events.

Edit: There are also event selector widgets on the rankings page, records page, and competitions page, all of which function slightly differently. The first two are similar to the main two event selector widgets in this issue, while the last one is similar to the schedule event selector widget.

Finally, there are also event icons on the main info page of any competition (the events the competition is holding), and hovering over them changes the cursor and their colour, even though you can't click on them.

(First time adding an issue, so please let me know if I could/should be doing anything different.)

[dunkOnIT]

Could this be solved using an "event selector" React component which is reused across all these different pages?

[dunkOnIT]

(Anyone implementing a Reach component to solve this should consider 6811 at the same time.)

[gregorbg]

We already do have a React component which is the horizontal bar in the above pictures. The vertical(ish) sidebar selector is still written in Ruby afaik so this is a matter of frankensteining together the Ruby state and React state. In the interest of developer sanity, I'd rather not explicitly tackle this. If we wait until the sidebar is also ported to React this issue solves itself.