Refreshing the browser clears all event data

[amandamartin-dev]

Description

Steps to recreate:

1. Browse to live.eddiehub.io
2. Edit an existing comment in an Eddie hub repo to trigger a new event to show on the map
3. Refresh your browser
4. No event data will be displayed

What should happen: As a user of the site, I would expect the current data to persist on browser refresh or close/reopen

TBD: How much data should persist? This is open for discussion. For now, I suggest same day data so that the map is not overwhelmed with entries. In the future, we could create a filter to be able to see different data views.

Whomever takes this ticket, I would also suggest that once the range of data shown is decided that another ticket is created to add something to the UI that clearly indicates what is being shown.

Screenshots

No response

Additional information

No response

[eddiejaoude]

Currently now the only data shown is from the webhook events, these are lost on a refresh. I think we can get previous data from the API, so maybe we could load recent events from the API so it is not a blank page of events

@Cahllagerfeld what do you think?

[Cahllagerfeld]

This would be a possibility. One thing to consider is that we're having a different data-structure for the data from the api

[amandamartin-dev]

Interesting point @Cahllagerfeld

Perhaps for the time being, adding something to the UI that is more descriptive so it doesn't look like a bug to someone new to the site and then at some point consider a feature improvement for data persistence? wdyt?

[Cahllagerfeld]

Sure! In my opinion, we should overhaul the entire UI. It was more of a 'quick-and-dirty' thing when I built this as a Proof-of-Concept 🫠🫣

[amandamartin-dev]

oooohhh, yeah I would agree with that so maybe hacking on to the UI isn't the best use of time right now. Should I close this as not really a bug or let it sit for revisiting later?

[Cahllagerfeld]

I think we can leave it open as a reminder, and open a new one for overhauling the UI. Do you want to work on this (like should I assign you this issue)?

[amandamartin-dev]

Designing a new UI is definitely outside of my skillset, I'm better at tweaking and implementing. I'm very familiar with what leaflet is capable of though so happy to collaborate if we have any designers in the community.

If there is no one like that right now, I'm also happy to collaborate with anyone interested.

Much respect to designers!

[Cahllagerfeld]

Awesome :D Let's move that design thing to a discussion. Opened #54, I'd love to get your opinion cc @eddiejaoude and @amandamartin-dev

[eddiejaoude]

I am flexible with what people think would be best. In my opinion I think what there is currently is great, yes it is quite minimal, which is good as building on what there is and tweaking/pivoting as we need is probably a viable option. When you say "overhaul", anything in particular?

[Cahllagerfeld]

I feel like especially the orange is too vibrant 😅
I can open a short PR and throw some tailwind classes on it for restyling :D

[amandamartin-dev]

Yeah, I guess less of an overhaul and more of a plan for future changes as opposed to one off ideas we hack in that could get messy if there are many

Some things I noticed are needing marker cluster on leaflet (already a ticket open)
Some info on the UI that explains the site, what you are seeing
Mobile view isn't good with the left panel right now

The color doesn't bother me so much, personally

[Cahllagerfeld]

That's a good plan I guess 👍

[Cahllagerfeld]

I can open a short PR and throw some tailwind classes on it for restyling :D

I opened #55

[eddiejaoude]

thank you both!

[Cahllagerfeld]

Maybe a wild idea here, but what about persisting the three last events in the localstorage? 🤔 We wouldn't need to care about the database, redis or something, but everyone who had events before would get have something displayed 🤔 The downside is, that we're having a huge divergence between users, and this isn't controlled by the app itself

[eddiejaoude]

What about doing that on the server side in memory as a short term solution? If the app is restarted/deployed the data will be lost, but most of the time will be there

Another idea, the API has the data though? Could we expose it?

[amandamartin-dev]

I haven't looked at this yet but perhaps one of you know. Since the app currently is only meant to really be used in the context of a livestream, is there a way to connect the app to YouTube so that it "knows" when the livestream started and saves data in memory OR pulls from the API on a refresh only back to whatever time the livestream started. I'm not sure what the YT API offers without looking though. If this is possible it would also be cool for folks that came into the livestream late to already see what events have happened since the stream started.

[eddiejaoude]

YouTube does have an API, I think Streamyard uses it, also I have a GitHub action that uses the RSS feed - but I hear to work with their API is not very nice

I like the idea of the map always running, I use it sometimes on my spare screen to see the "heart" of our community - but not many people have themselves included yet - when we live stream about it, we can get more people to add themselves to it

[amandamartin-dev]

Ah yes that makes sense. I also keep it open sometimes when I'm working to make sure my changes seems to work well for production outside of me triggering events.

To get more people to join the map could have a link to the request to join the API right on the map. Something like "want to see your contributions on this map, request to be added here" or something along those lines. And definitely mention it during the Livestream too

[eddiejaoude]

To get more people to join the map could have a link to the request to join the API right on the map. Something like "want to see your contributions on this map, request to be added here" or something along those lines. And definitely mention it during the Livestream too

OMG I love that idea 😍

And we can also add it to the GitHub Org in the getting started with EddieHub steps

[amandamartin-dev]

Added an issue to add the link to the map which also relates to a precious issue raised for adding some more context/info to the UI about how the map works and when the data is accurate from
Issues #58 and #73