Split UserCard into FollowCard/FollowRequestCard and Rewrite FollowList using HOCs

Closes #398 (closed)

I've split the current UserCard component into two based on its purpose (following/unfollowing user or accepting/rejecting follow request). Based on that, I've redefined the FollowList component using component composition technique with HOCs and the FollowCard component.

To make FollowCard and BlockCard consistent visually, I've added minor css changes.

Screenshots:

• FollowList

• FollowRequestList

• BlockList

I really want to look into it a bit more in-depth to see what exactly is going on and if it's even worth it using HOCs here, because it could be a bit over-engineering at work.

I'll look into it later today or this week.

I see the button is now next to names instead of below. How is it on mobile now? especially with longer names and usernames. There's a reason why I made it the other way previously.

@hj I don't think the higher-order components are over-engineering in cases like this, it removes a lot of copy-paste tier code while also being able to split components into smaller ones, instead of monolith components that look and work different in different contexts.

I mean there still should be balance between code readability and architecture.

added 1 commit

• 74a861f1 - Update naming

Compare with previous version

added 1 commit

• c3a0d307 - Improve mobile layout of user card

Compare with previous version

changed the description

resolved all discussions

broken on firefox

I really think FollowCard and BlockCard should be merged into one. Somebody might want to go over their followers and block out nazis bots or haters.

added 2 commits

• f360786a - Shorten a classname
• 8ed00eae - Use native filter function

Compare with previous version

I think Primary/Secondary/Tertiary are very bad naming for slots, it's nearly same as naming them foo, bar, baz.

Looking into what is actually going on there i see 2 problems:

1. We need to hide "follows you" for followers list (questionable tbh) and probably on Follow request (not that it will ever be visible there)
2. We need to show either block/unblock+follow/unfollow or accept/reject buttons.

If we follow my suggestion to merge followcard with block card into one UserCard then we can just toggle "follows you" via prop if we need or don't need them. Also hide "Follow" button if user is blocked.

Buttons should have their own slot "buttons" that is shown on the rightmost side of card and wraps below screen name if width gets too small, but still should be right-aligned.