refactor-66: Disable other option when three categories is selected #69
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi @SanjeevKrSingh, Thank you for the quick PR, really appreciated. Just couple of things here to add,
|
…e creating a post
There was a problem hiding this comment.
Sadly, we will have to park this PR for now because it tries to make changes to a file which will be deleted in the PR #67, we'll take this up once this PR is merged, so that we don't conflict with the changes
| : categoryProps(category, false) | ||
| className={`${isDisable && !formData.categories.includes(category) ? "cursor-not-allowed" : "cursor-pointer"} | ||
| ${formData.categories.includes(category) | ||
| ? categoryProps(category, true, isDisable ? true : false) |
There was a problem hiding this comment.
Can you kindly optimize this even further, refactoring it to a new function which would simplify this process further.
There was a problem hiding this comment.
Ok @krishnaacharyaa I will do that
| switch (category) { | ||
| case 'Travel': | ||
| return `${commonProps} ${selected ? `bg-pink-500` : `bg-pink-100`}`; | ||
| return `${commonProps} ${selected ? `bg-pink-500` : disable ? `bg-slate-100 text-slate-400` : `bg-pink-100`}`; | ||
|
|
There was a problem hiding this comment.
Okay, I guess we have to figure out a more optimized version of getting this done,
And also we cannot carry with this approach because of #67, in this PR this category-props is totally removed :)
There was a problem hiding this comment.
Sir @krishnaacharyaa, can I remove category-props. and fixed it?
There was a problem hiding this comment.
Sir @krishnaacharyaa Plz let me know whenver #67 is merged I will fixed the above comment and push it.
There was a problem hiding this comment.
Sir @krishnaacharyaa, can I remove category-props. and fixed it?
Actually, we are introducing new component called category-pill if you see the PR, so the way we implement
this feature, would be slightly different.
Sir @krishnaacharyaa Plz let me know whenver #67 is merged I will fixed the above comment and push it.
Sure
|
@SanjeevKrSingh, Kindly rebase, or better would be create new fresh branch and you can work now the PR got merged :) |
|
Hey @SanjeevKrSingh, thanks for working on this. Just to make sure we get this working without making it complicated, I'll walk you through about modifying the Add a prop here called disabled = false like selected = false (don't forget to add disabled: string type after line no. 6).Then, introduce a const disabledColor: string = "bg-slate-100 text-slate-400" in the same file.Then you can simply add disabled ? disabledColor : defaultColor to the twMerge() argument.
Ask me if you have any questions or if I overlooked some logic here :) |
Summary
Disable other option when three categories is selected
Description
To improve the current UX, disable the remaining categories when the user selects three categories while a new blog post is being created.
Current Behavior
Currently if a user selects more than three categories, they won't get any feedback until after clicking on the "Create Blog" button.This degrades the UX as they will have to unselect certain categories and try to click on the submit button again.
##Fixed Behavior
I propose that once the user selects three categories, other categories go into a disabled state.
If the user de-selects one of the three, all the categories will be shown as available again.
Issue(s) Addressed
Closes #66
Prerequisites