Create 2 modes of selection: ChoiceMode or LikeMode

[tiagostutz]

@rafamarts this issue was created for you. Please, feel free to ask if you have any doubts and post your suggestions here so we can discuss.

The solution should support 2 modes of interaction: ChoiceMode between options or LikeMode where the user mark as like or deslike. This mode could be a URL parameter so all the components can autoconfigure based on this parameter.

At this issue you don't need to take care of the styling aspects. We will deal with it in another issue. The main goal here is to make possible for the component to have this 2 interaction modes.

Choice Mode

Two (or more) cards, side by side and the user is choosing sequentially between 2 options

LikeMode

One card with two options: like and deslike and the user is judging sequentially the itens. There could be the option to drag the card to left or right as an option of interaction/

This video illustrates this "like by dragging" interaction. The video has more interactions that are out of scope, but it definetly shows some potential of stop-analyzing use.

[rafamarts]

Hello,

I just committed the both model in static version, and now I will implement the Drag&Drop and the images reload when the user choose an image. Also, I'll add the tests.

Please, if someone (@tiagostutz ) could check and comment about the implementation.

Thank you!

[rafamarts]

Hi,

I've added the Choice Mode. Please, check out if it is what you had in your mind.

Thank you!

[tiagostutz]

Nice. I've just added some review notes in your commit.
One thing I mentioned there and I noticed I forgot to discuss here is that I think we should keep this Choice component we are building in this issue to 2 cards options, like the one shown in https://github.com/bancodobrasil/stop-analyzing/blob/master/README.md. This will simplify our design and code and still have great value. We can discuss later, on another issue, a multiple option/multiple choice approach.

What do you think?

[rafamarts]

You are right, I think only 2 cards for now is enough. Just made it. Please, review the commit and let me know if need something else for ChoiceMode.

I will work on LikeMode right now. Any suggestion for implement drag&drop? Should we use some library, if so, did you already work with some? I could review some and brings options.

Thank you!

[rafamarts]

Hi Tiago,

I have finished the LikeMode. I made a simple drag&drop, please, if you have suggestion to do it in different way, let me know. I will work on tests.

Thank you!

[tiagostutz]

Awesome, @rafamarts !
I'll wait for the PR to review the drag&drop feature. Thanks for the surprise! Drag&Drop will be a very handy interaction.

[tiagostutz]

@rafamarts I'm a bit worried with your PR as the project is growing. That's my fault because I opened an issue too big for you, sorry about that.

So, if you want to open the PR with the LikeMode only, I think that's a good ideia. I don't know if you have checked the CONTRIBUTING.md lately, but I updated it with some guildelines on how to keep your fork up to date with the master/origin. I think it would be a good ideia to update your fork (if you haven't done so).

Again, sorry for the low quality issue I opened for you. Let's fix this. 💪

[beatrizrezener]

Hello, @rafamarts!
As suggested by @tiagostutz and given that this issue has a big amount of work, can I help you in any way?

[rafamarts]

Hi @beatrizrezener !

Thank you! I've finished the rebase right now, and I will push it soon. Could you please review and check if is missing something? We can make a to-do list and divide the work. Maybe, @tiagostutz could also review it and help us to make the to-do list. Is it good for you?

[rafamarts]

@tiagostutz

Wow! It was a huge rebase. I left the ChoiceMode as it was. The merge only added the id in ChoiceCardProps, and also passed through the cards props to onClick function.

I didn't worry about the design (CSS), maybe it could be done by @beatrizrezener in a new issue. What do you think? (Sorry, seems that @bearcub3 is already working on that)

Please, let me know if I can create a PR, or if we will review and make a to-do list.

Thank you!

[tiagostutz]

Hi @rafamarts !! Yoo.. huge rebase indeed! Thanks for your patience on that... ehehehehe...

You can plase open the PR and then we will review together there. I think it will be smoother now.! 😄