feat: field to assign a member to a task

[maxceem]

• Autocomplete implemented as an independent and reusable component based on react-select.
• Action loadMemberDetails can be used to load details about any user by userId. It stores data in Redux Store members path. So this functionality could be reused to show handle for any other user by userId.
  • Potentially, this functionality could be converted to a single reusable hook so we don't have to pass members from the store everywhere where we need user details, but I guess we would have to update React 16.7 to 16.8.3+ together with react-redux from 6 till 7.1+ for this.

[vikasrohit]

Looks good to me. Will merge it to develop to test out feature in dev.

single reusable hook

What exact React construct you are referring here @maxceem? Could you please point me the docs, if it is something new feature that has recently enabled in latest react as you suggested.

[vikasrohit]

@maxceem can you please share a quick pros and cons list for making the SelectUserAutocomplete self sufficient instead of using the redux actions.

[maxceem]

@vikasrohit

What exact React construct you are referring here @maxceem?

In the recent version of react-redux there is a new hook useSelector which let us connect to the store from inside the functional component from anywhere.

At the moment, to get member details, we have to pass members from the redux store down to every component where we want to display details. If we could use useSelector we could create a hook which would return user details from Redux Store without any additional code like this:

function SomeComponentDeepInside() {
  // we create custom hook `useMemberDetails` that will take details about the user with id `123456` 
  // from ReduxStore and put it into `memberDetails`
  // so we can just use them inside this component
  // if member details are not loaded yet, `useMemberDetails` would trigger loading of user details, 
  // and would update `memberDetails` as soon as details are loaded
  const memberDetails = useMemberDetails(123456) 
}

Could you please point me the docs, if it is something new feature that has recently enabled in latest react as you suggested.

The new version of react-redux which has useSelector hook requires React 16.8.3+, not sure what exactly it uses from the recent React.

[maxceem]

@vikasrohit

@maxceem can you please share a quick pros and cons list for making the SelectUserAutocomplete self sufficient instead of using the redux actions.

Pros (not using Redux)

• The biggest pros, is that using local component state we can have multiple instances of this component at the same time. If we use Redux Store, we would only support one instance on the page, as we would have only one place in Store to keep the state of this component.

  store: {
     suggestions: [...]
  }

  Theoretically, we could fix it, and generate unique id for each instance of this component and save states for multiple components, but it would make the code more complex:

  store: {
     suggestionInstances: {
       uid123: [...]
       uid456: [...]
     }
  }

• Another thing, we would have to "spread" the code of so small component across the multiple files: actions, reducers, views, containers. So small and clear code would become big and harder to understand.

Cons (not using Redux)

• The biggest cons of not using redux/actions: If everyone decides how to implement things, eventually code would become too diverse. If we use Redux for everything we keep consistency and structure.

TLDR for small local states it makes sense not to use Redux Store and keep data in Redux only for main global things like pages.

[vikasrohit]

In the recent version of react-redux there is a new hook useSelector which let us connect to the store from inside the functional component from anywhere.

Interesting. Thanks for sharing, didn't know it.

for small local states it makes sense not to use Redux Store and keep data in Redux only for main global things like pages.

Thanks for sharing it as well. I was having the same concept in my mind.