mikelambert / dancedeets-monorepo Goto Github PK

When you open the app and it's showing the List view by default, we can be smarter about showing relevant events and their info:

When we retrieve a list of events, we can filter them clientside for:

• events within 5-10 miles
• events that are going on now

If we take those events, we can fetch FB RSVPs for those few events, and find the ones super-relevant to the user. (RSVP data is unfortunately not returned in the server-side result json.)

Then we can offer a better navigation for "relevant events going on now". I'm not sure of the best way here, but:

I'm thinking it'd be useful to have links for "See Event" and "See on Map". We could display these alongside the events in the FlatList.renderItem. We could also have the active events have a subtle pulse/glow to them indicating "active".

We could also show a dismissible pop-up modal overlay on top of the list view, that shows the "Nearby Events Happening Now", with event names, flyers, and the above two links, bringing the focus there.

We continue to use jQuery, and pull in ~100kb (pre-gzip) JS on our site. Ideally we would rewrite these dependencies in React (which we've fully committed to).

The current users of jQuery, in need of React rewrites/equivalents.

These are easier because they exist in React templates already:

• the class results page, including expand/collapse of the navbar, and some scroll-to-selected-element functionality js/classResults.js
• the search box functionality on the results page templates/results.html

These are a bit more complex, since it involves convert this page over to a React template (some small templates/ and python changes, to mirror what is done in our results, event, and class pages...populate a JSON dict in the python code, I can help with this bit)

• the add event page, for selecting and triggering actual event adds templates/add.html. (needs to set up a new react template, so some python and templates/ changes)
• the promote page, to enter the fb event url when clicking on an fb event templates/promote.html. (needs to set up a new react template, so some python and templates/ changes)
• the backstretch functionality on the homepage background, for the auto-fading dynamically-loaded image carousel js/homepage.js. I think this functionality (dynamically load images as we scroll through the backgrounds, without preloading them all up front) might require a bit of custom work, not sure if there's an off-the-shelf npm package for this.

Misc changes:

• various admin pages (i'm fine just sticking a <script src="jquery"></script> on these admin pages though

These are a bit harder, in that they exist in the base html templates, and so require a much larger (ie more infrastructural) migration to React JS to pull these off.

• the app-install banner we show on repeat-usage, using jQuery.modal js/app-install-promo.js
• the top-of-page smart-banner we show on iOS Chrome (and Android). js/common.js

When we open the app, it does a GPS lookup for lat/long (takes a second or so), then uses that to do a reverse geocode to get an address/city (takes another second), then uses that to do a DanceDeets API search for data (which is another few seconds).

A few things can be improved here on loading the "list of events", making everything much faster to load on app startup.

• We can initiate a request to the DD API with lat/long as the location= parameter, at the same time we do the address/city geocode to get the city, and parallelize the two. And then display the city in the search box when it's found, and the event list in the result set once it's returned.

• We can show the cached City / EventList-json immediately, while all the processing is going on in the background and reloading the dataset from the server. Sometimes you open the app in a subway without an internet connection (or without a sim card internationally, while you're on wifi), so it'd be nice to have accessto your last-seen data.

• If we do #2, I worry there might be "jumps" in the result set as you are scrolling-down and about-to-click, which is unfortunate. I don't have great ideas for this....a few ideas:

-- We could look at the current scrolled item, and re-scroll to that item in the new dataset (if it still exists).
-- We could do some "are we online?" check at the very beginning. If we are not online (or the search results fail), we show the cached data. If we are online, we show-nothing, and then show the downloaded data as soon as it arrives.
-- Open to other ideas here if you got them?

The code is in mobile/js/events/list.js code and starts in the initialize() function flow.