Create ImageCluster Component

[kwokwilliam]

https://github.com/uwigem/uwigem.com/wiki/Formatting-of-components

ImageCluster is only the images that are on top of each other in some sort of grid format, like on Slack's home page. This means they are not the images with the small design behind them (though if you want to integrate them with that, that'd be cool. I will be making a separate issue for those, and will probably name it ImageWithStyleBehind or something. We will worry about this a bit later)

You will receive as props:

• images: an array of javascript objects in this format:

{
  image: image url,
  priority: number that is either 0, 1, or 2 (0 is top priority)
}

The image url will be imported in React like so: https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files, and it will be passed as a prop like that.

Feel free to add additional props as needed for configuration purposes.

[etruong]

ImageCluster Parent Component Issue:

I asked about this before during a meeting, but I realized that it was not really addressed properly due to my poorly wording the question. When creating the ImageCluster, I am given the image props which is the array of information pertaining to images. Although I realize that this may be an issue because order and priority within the ImageCluster component will change.

Therefore instead of handling the changes within ImageCluster shouldn't I be within the parent component of ImageCluster? Thus when being passed in the image props, all I would need to do is generate the image elements. The change function of the state would be in the parent component and the order at which the images are are also within the parent component?

Is this the correct way to think about this?

[kwokwilliam]

You're right in that you would likely be "modifying" this array or images prop array in some way. However, if you imagine this is a firebase application, we would want to probably be doing all our database calls at the very top component instead of inside something that may be lower in the component tree structure like ImageCluster. For example:

Basically what you want to do is on component mount, set a state to this prop:

constructor(props) {
  this.state = {
    imgarr: props.imgarr
  }
}

[etruong]

This is a comment to communicate that this is component is ready to review, although I was unable to figure out how to make this work within the iGEM react application. I was able to make this work within a separate application.