golfworld-river.md

ideas for rendering river on GW landing page

// the following takes place on initial load and subsequent renders
var riverSoloItems = bundle.containers.river[0].items;
var riverSoloComponents = _.map(riverSoloItems, function (item) {
  return <RiverSolo {...item} />;
});

var trioItems = bundle.containers.trio[0].items;
var trioComponents = _.map(trioItems, function (item) {
  return <RiverFeatured {...item} />;
});

// or something?
// remember - first 4 items in the river are consumed by an entirely different component
var section1 = <section>[
  riverSoloComponents.slice(4, 6),
  trioComponents[0],
  riverSoloComponents.slice(6, 8)]
</section>;

var section2 = <section>[
  riverSoloComponents.slice(8, 10),
  trioComponents[1],
  riverSoloComponents.slice(10, 12)]
</section>;
  
var section3 = <section>[
  riverSoloComponents.slice(12, 14),
  trioComponents[2],
  riverSoloComponents.slice(14, 16)]
</section>;

// Okay now it gets really kooky
// How many remaining items are there? Total items minus page size (for first page)
// Iterate and add new sections to nextSections
// Probably cleaner ways to do this - this just captures the concept
var remainingItemsCount = riverSoloItems.length - 16;
var nextSections = [];
for (var i = 15; i < remainingItemsCount, i += 4) {
  var items = riverSoloComponents.slice(i, i + 4);
  nextSections.push(<section>[items]</section>);
}

var riverItems = [section1, section2, section3].concat(nextSections);

var river = <APRiver items={riverItems} />;

Concerns

• max items logic - breaks because itemsPerPage does not match number of "parent" elements we're passing to the river