Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor-66: Disable other option when three categories is selected #69

Closed
wants to merge 3 commits into from
Closed

refactor-66: Disable other option when three categories is selected #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1dce2de
refactor-66: Disable other option when three categories is selected
Dec 3, 2023
2523580
refactor: Disable other options if three categories are selected whil…
Dec 3, 2023
9e2a8da
refacor: changes the arrow when 3 categories is selected
Dec 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 8 additions & 12 deletions frontend/src/pages/add-blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,12 @@ function AddBlog() {
};

const handleCategoryClick = (category: string) => {
if (formData.categories.includes(category)) {
if (formData.categories.length <= 2 || formData.categories.includes(category)) {
setFormData({
...formData,
categories: formData.categories.filter((cat) => cat !== category),
});
} else {
setFormData({
...formData,
categories: [...formData.categories, category],
categories: formData.categories.includes(category) ? formData.categories.filter((cat) => cat !== category) : [...formData.categories, category],
});
return;
}
};
const handleselector = () => {
Expand Down Expand Up @@ -121,6 +117,7 @@ function AddBlog() {
mediaQuery.removeListener(handleThemeChange);
};
}, []);
const isDisable = formData.categories.length === 3;

return (
<div className="min-h-screen bg-white p-4 px-16 font-[Poppins] dark:bg-dark">
Expand Down Expand Up @@ -198,11 +195,10 @@ function AddBlog() {
{CATEGORIES.map((category) => (
<span
key={category}
className={`cursor-pointer
${
formData.categories.includes(category)
? categoryProps(category, true)
: categoryProps(category, false)
className={`${isDisable && !formData.categories.includes(category) ? "cursor-not-allowed" : "cursor-pointer"}
${formData.categories.includes(category)
? categoryProps(category, true, isDisable ? true : false)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you kindly optimize this even further, refactoring it to a new function which would simplify this process further.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok @krishnaacharyaa I will do that

: categoryProps(category, false, isDisable ? true : false)
}`}
onClick={() => handleCategoryClick(category)}
>
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/utils/category-props.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
let commonProps: string = 'px-3 py-1 rounded-3xl font-normal text-sm';
export const categoryProps = (category: string, selected: boolean = false) => {
export const categoryProps = (category: string, selected: boolean = false, disable: boolean = false) => {
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`}`;

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sir @krishnaacharyaa, can I remove category-props. and fixed it?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sir @krishnaacharyaa Plz let me know whenver #67 is merged I will fixed the above comment and push it.

Copy link
Owner

@krishnaacharyaa krishnaacharyaa Dec 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

case 'Nature':
return `${commonProps} ${selected ? `bg-green-500` : `bg-green-100`}`;
return `${commonProps} ${selected ? `bg-green-500` : disable ? `bg-slate-100 text-slate-400` : `bg-green-100`}`;

case 'City':
return `${commonProps} ${selected ? `bg-yellow-500` : `bg-yellow-100`}`;
return `${commonProps} ${selected ? `bg-yellow-500` : disable ? `bg-slate-100 text-slate-400` : `bg-yellow-100`}`;

case 'Adventure':
return `${commonProps} ${selected ? `bg-blue-500` : `bg-blue-100`}`;
return `${commonProps} ${selected ? `bg-blue-500` : disable ? `bg-slate-100 text-slate-400` : `bg-blue-100`}`;

case 'Beaches':
return `${commonProps} ${selected ? `bg-purple-500` : `bg-purple-100`}`;
return `${commonProps} ${selected ? `bg-purple-500` : disable ? `bg-slate-100 text-slate-400` : `bg-purple-100`}`;

case 'Landmarks':
return `${commonProps} ${selected ? `bg-red-500` : `bg-red-100`}`;
return `${commonProps} ${selected ? `bg-red-500` : disable ? `bg-slate-100 text-slate-400` : `bg-red-100`}`;

default:
return `${commonProps} ${selected ? `bg-orange-500` : `bg-orange-100`}`;
return `${commonProps} ${selected ? `bg-orange-500` : disable ? `bg-slate-100 text-slate-400` : `bg-orange-100`}`;
}
};