First iteration of a Star component

[gmarty]

This is only a first iteration of this component. Things missing include:

• Wiring with Redux (needs discussion with @wilsonpage)
• Persist state locally on RealmDB
• Styling and design (make star yellow, but let's make this depend on Generate PNG icons from SVG #27)

[arcturus]

Looking gorgeos btw :)

[arcturus]

Left some questions, basically on how we plan to use this.

So far looking amazing.

[arcturus]

This change should be out of this pr, but we have seen others things in this repo right ? ;)

[gmarty]

I can make this change part of the eslint pr.

[arcturus]

Isn't it easy to read something like:

const imgSource = this.state.value ? './assets/star.png' : './assets/star-border.png';
...
<Image source={require(imgSource)}/>```

[gmarty]

Does it work this way? I tried a few days ago and it didn't work. require() has to be static.

[wilsonpage]

Correct dynamic require doesn't work. I think it might be best to import the assets at the top of the file to make this clear.

const images = {
  empty: require('./assets/star-empty.png'),
  full: require('./assets/star-full.png'),
};

... later

render() {
  return <Image source={ this.state.value ? images.full : images.empty }/>
}

[arcturus]

Should we add a callback property to inform the user of this component that the toggle happened therefore an action following that 'starred' can happened?

Or do you prefer the opposite logic, perform an action in the parent component and when that action is finished change the property used to show the start?

[gmarty]

I think the component can communicate directly with Redux. This way there's no other wiring required than passing an itemId to this component.

Or... was it your question?

[wilsonpage]

I spoke with @arcturus about an idea for component design. We can have a dumb component that is just a <Star selected={true}/> that toggles between trueandfalse. But then we can wrap that in a ` component that wires the component into the app's Redux store.

This means that we could drop a <MagnetStar> anywhere in the app and it'll "just work".

[wilsonpage]

I think in Redux world they call <MagnetStar> style components: "container components". The don't have any visual properties, they just act as a data provider.

[gmarty]

Yes that makes sense.
I would only argue that the scenes are container components and we don't need to wrap this Star component inside another container.

[arcturus]

Forgot to mention, once this work is done (with all iterations) we can close #14

[wilsonpage]

@gmarty can you check-in the source SVG too so that anyone can export different sizes/colours if need be?

[gmarty]

I did the change requested.
I made it a dumb component with no logic and reuse the same signature than the <Switch/> component (value and onValueChange props).

We can implement the logic in a subsequent pull request.