useSelectedItems

useSelectedItems.js

// Default use:
const [selectedMedias, addId, removeId] = useSelectedItems(medias)

// Example of how to select an item
map(medias, ({ id, title }) => <a onClick={() => addId(id)}>{ id } { title }</a>)

// Example of how to deselect an item
map(selectedMedias, ({ id, title }) => <a onClick={() => removeId(id)}>{ id } { title } is selected!</a>)


// Optional Arguments:

// Optional 4th return if you need a list of all selected ids
const [selectedMedias, addId, removeId, allSelectedIds /* (optional) */] = useSelectedItems(medias)

// Optional 2nd arg to decide if the item is selected, if different from { id }. Default if not provided: `(ids, { id }) => ids.include(id)`
const [selectedMedias, addId, removeId] = useSelectedItems(medias, (ids, { someForeignKey }) => ids.include(someForeignKey))

Once we agree on an API for multiple selected items, we could have one for single selected item.

Would allow us to replace stuff like this:

https://github.com/Vydia/d2/blob/0ddf2b68a511c55a58e75770245b6a2d4cfb99ee/src/screens/Publish/AdditionalServices/template.js#L48

const [networkExtraIdForMoreInfo, setNetworkExtraIdForMoreInfo]: * = useState<?string>()

const networkExtraForMoreInfo: * = useMemo(
  () => find(networkExtras, ({ id }) => id === networkExtraIdForMoreInfo),
  [networkExtras, networkExtraIdForMoreInfo]
)