[Spritelab][Poem Bot HOC] Initial Poem Bank prototype

[ajpal]

Behind experiment flag poemBot

Modal to pick a poem from the poem bank

Selected poem is displayed under the playspace:

For now poem bank is defined in poems.json but my guess is that at some point we may want to build a LB edit page similar to http://levelbuilder-studio.code.org/datasets for managing poems.

The UI is completely non-finalized, the main purpose is to just get a working prototype for Amy BW to be able to write lessons around.

Links

jira

Testing story

Going to hold off on unit tests until we finalize design

Deployment strategy

Follow-up work

• Make poem bank per-level configurable

Privacy

Security

Caching

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[maddiedierker]

not sure how much we care about this, but we could check isSpritelab as part of this conditional to make sure <PoemBank/> is only displayed in spritelab

[maddiedierker]

nit: this line would be more readable if we first destructured onSelect, name, author, and lines from props

[maddiedierker]

this component doesn't have any state, so i think we should refactor it to a functional component. react is standardizing on functional over class components, so i'm trying to move us toward functional components wherever we can

[maddiedierker]

for functional components, i usually set them up like this:

function MyComponent(props) {
  function otherFunction() {
    // i still have access to `props`
  }

  return <div>{props.text}</div>;
}

MyComponent.propTypes = {
  text: PropTypes.string.isRequired
};

MyComponent.defaultProps = {
  text: 'Hello, world!'
};

[ajpal]

thanks! that feels very clean for a component as small and simple as this :)

[maddiedierker]

nit: this line can be removed if we don't have any props for this component

[maddiedierker]

nit: when we finalize this, we should use colors from our color constants

[ajpal]

Yeah definitely, this is not at all the finalized design- I just added a black border so I could see the components better :)