[Frontend]: Add Some Basic Validations For Better UX

[Mayank0255]

1. Max length limit for Tag Name while creation: 25 Characters
2. All Tag Names Should Be In English, So Translate it or don't allow it
3. Users Per Page Should Be 15, not 16
4. Validate the language users are inputting, dont allow any abuses or curses

[ozair-dev]

You can assign this to me.

[Mayank0255]

@ozair-dev
Ya sure, go ahead. Looking forward to it

Btw, how much time do you think it might take you for this? There is no hurry just wanted to know an estimate

[ozair-dev]

I think I'll finish it within next 24 hrs hopefully.

[Mayank0255]

Cool, Good Luck!

[ozair-dev]

Hi,
I did a little digging and working and found out that some validations are already applied on the backend for post title and post body input fields, e.g, title should be minimum 15 characters etc.

I would'hv suggested that tags should also be validate on the backend so the frontend code would be less messier.
But as you have quoted

Add Some Basic Validations For Better UX

So I applied some validation on form submit. If there are errors, it will prevent the post from actually getting posted.

How do you feel about it?

[ozair-dev]

And I also set 15 users per page. I am assuming you want to see perfectly squared out grid of users, but you should note that after setting 15 users per page!

On normal screen zoom level (100 %), I see two columns for users like this

And at 90% zoom level, this

And on your README.md screenshots, I also see 3 grid columns

So I guess different users are gonna see different amount of grid columns

[ozair-dev]

And to deal with the inappropriate words, I can make a function like cleanAbusiveWords(formData) which will traverse through the object and clean the inappropriate words before posting
e.g,

cleanAbusiveWrods({
    body: "This is bullshi*"
})

{
body: "This is ********"
}

[Mayank0255]

And I also set 15 users per page. I am assuming you want to see perfectly squared out grid of users, but you should note that after setting 15 users per page!

On normal screen zoom level (100 %), I see two columns for users like this

And at 90% zoom level, this

And on your README.md screenshots, I also see 3 grid columns

So I guess different users are gonna see different amount of grid columns

Can you make it dynamic based on media queries?
so that it aligns on both the screen sizes

[ozair-dev]

Actually you don't need to worry about it. The users grid columns already change dynamically.
But If we set the users count to 18, then we can avoid this empty area when two columns are shown because we will have even number of users.

Is it okay if I set users count to 18 instead of 15?

[Mayank0255]

@ozair-dev I think you didn't get it,

I am saying to change the count to 16 if it's two columns, and 15 if it's 3 column

[ozair-dev]

@Mayank0255 sorry, but I think you didn't get my point.

The thing is that two or three columns are viewpoint related thing, they change based on screen size, and users count is a fixed number and fetched once only from database, it is unnecessary to change users count based on the number of columns. But I was suggesting that we set users count to 18 because 18 is multiple of both 2 and 3, so we won't get empty space in the grid because no matter what the number of columns is, users are gonna occupy the whole space and we will get nice squared Grid of users.
Do you get it now?