PosterHall: randomize posters if no search query given

[yarikoptic]

trafficstars

to not overpromote the lucky first X and leave the others behind.

randomization sounds like the easiest/best way to give fair exposure

[0xdevalias]

src/components/templates/PosterHall/PosterHall.tsx uses usePosters (src/hooks/posters.ts), which uses usePosterVenues (src/hooks/posters.ts), which uses useConnectPosterVenues / posterVenuesSelector:

• https://github.com/sparkletown/sparkle/blob/staging/src/hooks/posters.ts#L13-L26

Looking at the query loading the data from firebase, we're currently fetching all of the poster venues at once, even if we only display them in 'chunks'.

Therefore, if this were to be implemented, it would probably make sense to do it in usePosters either in its own useMemo that operates on filteredPosterVenues if we want it as a separate export we can use; or otherwise, handled within the existing searchedPosterVenues useMemo, as part of the `if (!searchQuery) 'guard' statement.

Depending on where it's put, we'll need to pay attention to ensure that it doesn't needlessly 're-randomize' things when the user wouldn't expect it to. Eg. if we just put it in the existing searchedPosterVenues useMemo then it will re-randomize when any of [searchQuery, fuseVenues, filteredPosterVenues, displayedPostersCount] change, which is likely undesirable.

I would probably do it in it's own useMemo that relies on just filteredPosterVenues, and possibly searchQuery. If we include searchQuery, then it would have a guard that if (searchQuery) return to avoid needlessly processing things. Including searchQuery means that whenever the search is used (and then cleared again) we would end up with a different set of random posters.

It might also be a good UX to include a button that allows the user to manually trigger a re-randomisation too, then they could use that as a sort of 'lucky dip exploration' of the content.

[yarikoptic]

I thought about simple "diff" like this

diff --git a/src/hooks/posters.ts b/src/hooks/posters.ts
index 62809543..a8a454ae 100644
--- a/src/hooks/posters.ts
+++ b/src/hooks/posters.ts
@@ -87,7 +87,7 @@ export const usePosters = (posterHallId: string) => {
 
   const searchedPosterVenues = useMemo(() => {
     if (!searchQuery)
-      return filteredPosterVenues.slice(0, displayedPostersCount);
+      return filteredPosterVenues.random_sample(displayedPostersCount);
 
     return fuseVenues
       .search({

• it is IMHO ok if for a user/session it would be the same random selection. The main goal is to distribute across users. If there is a cheap way to reset memo upon entering poster page again -- could as well be done.
• did not figure out yet what would be JS implementation for .random_sample needed here. In Python it is random.sample function ;-)
• adding some UI for the desired ordering of posters is really of no pragmatic value. Searching is the way to go

[yarikoptic]

i've got a solution -- sending a PR

[mobilevinay]

migrated to zenhub, check!