@razvan Expanding on our mentoring session, thursday 5th of july

complex problem approach.md

Hi Razvan,

I was thinking about your multifile upload component and how I can give you some handles before I'm off to my vacation :)

So what I think might help is thinking about your problem a bit more in a reactive fashion (the React way) and strictly separating the presentational and logic part. I think more often than not, flowcharts make our reasoning about the problem more complex than need be. They're useful, but more so for testing your solutation and documenting edge-cases, not so much serving as a blueprint for your solution.

First worry about what you are going to show on the screen, (the presentational part). There's a droparea with some states, and there's the uploading/uploaded files. Both are contained within a component which handles the logic.

The droparea has some fixed amount of variables (not sure what the warning state was about anymore):

state = {
  isEnabled: Boolean, // Whether to show the area grey and allow uploads
  hasError: Boolean, // If there's an error, turn the border red
  hasWarning: Boolean, // If there's a warning, but no error, turn the border yellow
  fileDropHandler: Function
}

Each file has some fixed amount of variables as well:

state = {
  id: Number,
  isValid: Boolean,
  isUploading: Boolean,
  fileType: String,
  fileLocation: String, // If you have a location, you can show the eye icon
  uploadProgress: Number,
  uploadCompleteHandler: Function, // Uploading done
  cancelHandler: Function, // Cancel uploading
  removeHandler: Function // You can handle outside of the presentational component whether this maps to a server call (e.g. the LinkedIn data) or just removes the file from the list (multifile upload)
}

When you've abstracted this away into their own presentational components, the 'container' component can worry about the logic: validating, persisting changes to the server, etc. It's divides your problem up in several smaller problems. The presenational problems are generally easy to handle, but removing them from the logic handling part make it easier to reason about the logic: you don't have to worry how it translates to the DOM, only how it will modify these well thought out properties which you pass to the presentational component.

In the logic handling container component, you would specify how actions communicated through the presentational components handler functions would affect the state of it internally, and translate that to a new state for the presentational components. E.g.:

• The filedrop handler may cause { isEnabled: false }, when it maxes out allowed amount of files
• A remove handler in a file may cause { hasError: false }, if it means there are no invalid files anymore
• The filedrop handler may cause { hasWarning: true } because it was rejected due to local validation rules
• The upload complete handler may cause { hasError: true } in the droparea because it's invalidated by the server

It allow you to think about these logic rules, separated from all else that's going on in your component.

Hope it helps, let me know if I worded it clearly enough to get across what I mean :)