Show project cards in the public gallery

[davidsbailey]

public gallery v1 spec

This PR pulls data about published projects from the new dashboard api (added in #14848) and displays it in the ProjectCardGrid and ProjectCard (added by @Erin007, thanks Erin!). In the process I made the following changes to ProjectCardGrid and ProjectCard:

• rename projectName to name
• replaced updatedAt with publishedAt
• removed sorting and grouping, since that is done by the server

@Erin007 , I want to call out that most of these changes aren't things that we could have predicted we'd need when you first started working on the project cards. I know it looks like I've made lots of changes to them, but having these components ready was a big help in getting this work done so thanks for your work on those!

To try this in local development, migrate your pegasus db, then publish all of the projects in your local database via the following mysql commands:

update storage_apps set project_type="applab", published_at=updated_at where state = 'active' and value like '%projects/applab%';
update storage_apps set project_type="gamelab", published_at=updated_at where state = 'active' and value like '%projects/gamelab%';
update storage_apps set project_type="playlab", published_at=updated_at where state = 'active' and value like '%projects/playlab%';
update storage_apps set project_type="artist", published_at=updated_at where state = 'active' and value like '%projects/artist%';

Caveats:

• there is a bit of weirdness left over in the ProjectCardGrid storybook in that it renders classroom and private galleries that have a bunch of empty sections. I didn't want to remove these entirely since they show that the ProjectCardGrid is configurable by gallery type, but I also didn't want to spend too much time touching them up too much since we aren't trying to ship those right now.
• We currently fetch 100 rows of each type, without any mechanism to fetch more data from the DB. This should be enough data for now to build out the UI, and the fetching of additional data can be implemented later.
• some stuff (e.g. sorting and grouping, as well as sorting by updatedAt) I'm cutting out now, but we'll definitely need later when we implement project cards for the section projects and My Projects views. I think it will be easy enough to resurrect these from the git history later, rather than trying to pull these out now into a different component that isn't organized by project type.
• student name and age are not included yet. we will add those later.

visible changes:

[Bjvanminnen]

nit: most places lately we've been using i18n instead of msg

[Bjvanminnen]

Lot of repeated code across these. Wonder if we should just make a simple ProjectCardList class (maybe even in the same file). Could be as simple as:

const ProjectCardList = ({list}) => ({
  list.map((project, index) => (
    <div ...>
      <ProjectCard .../>
   </div>
  )
})

[Bjvanminnen]

nit (and feel free to ignore) - i tend to find these sorts of things to be easier to read if I do it more functionally, i.e.:

publicProjects.type = _.range(5).map(index => {
   // etc
});
``

[davidsbailey]

👍 I looked for a way to also map the projectTypes array directly into an object, but I didn't see any syntax that I loved. Or maybe I just couldn't find any that totally avoided using = or semicolons

[Bjvanminnen]

few small comments, but generally 👍

[Erin007]

Should the Stories also reflect that the sorting/grouping isn't happening yet? Or is it still applicable since they are sorted/grouped server side?

[davidsbailey]

@Erin007 I've reworded these, feel free to take another look

[Erin007]

Looks like some of the cards are smaller than others? For example, the second card in the PlayLab row. Is that just because the placeholder image is smaller than thumbnails?

[Erin007]

Wahoo! Happy my start on the cards was useful. Looks awesome, Dave.

[davidsbailey]

Good catch Erin, the playlab card you're talking about appears smaller because it doesn't have a project name. We'll probably want to specify a fixed size on the area below the thumbnail.

[davidsbailey]

Thanks @Bjvanminnen and @Erin007 for the feedback. I've addressed all of your comments. Feel free to add any more, otherwise I'll go ahead and merge once I have a green circle run.