add 'hidden' tab in profile page, listing all blocked addresses in account file

[plebeius-eth]

911fa767c5295bfdcc3b7d222352d1f9a2138609

[estebanabaroa]

const Profile = () => {
  const { t } = useTranslation();
  const account = useAccount();
  const location = useLocation();
  const params = useParams();
  let { accountComments } = useAccountComments();
  accountComments = [...accountComments].reverse();
  const { accountVotes } = useAccountVotes();
  const isInProfileUpvotedView = isProfileUpvotedView(location.pathname);
  const isInProfileDownvotedView = isProfileDownvotedView(location.pathname);
  const isInProfileHiddenView = isProfileHiddenView(location.pathname);
  const isInCommentsView = isProfileCommentsView(location.pathname);
  const isInSubmittedView = isProfileSubmittedView(location.pathname);
  const isMobile = useWindowWidth() < 640;

  // get comments for upvoted/downvoted/comments/submitted pages
  const postComments = useMemo(() => accountComments?.filter((comment) => !comment.parentCid) || [], [accountComments]);
  const replyComments = useMemo(() => accountComments?.filter((comment) => comment.parentCid) || [], [accountComments]);
  const upvotedCommentCids = useMemo(() => accountVotes?.filter((vote) => vote.vote === 1).map((vote) => vote.commentCid) || [], [accountVotes]);
  const downvotedCommentCids = useMemo(() => accountVotes?.filter((vote) => vote.vote === -1).map((vote) => vote.commentCid) || [], [accountVotes]);
  const hiddenCommentCids = useMemo(() => Object.keys(account?.blockedCids ?? {}), [account?.blockedCids]);

  const { comments: upvotedComments } = useComments({ commentCids: upvotedCommentCids });
  const { comments: downvotedComments } = useComments({ commentCids: downvotedCommentCids });
  const { comments: hiddenComments } = useComments({ commentCids: hiddenCommentCids });

this will destroy performance, every time the user goes to the profile page, even if he doesnt want to see his hidden posts, all the hidden posts will be loaded one by one, it will queue hundreds or thousands of ipfs gateway requests and the user won't be able to load anything else.

in general you should never use useComments with more than maybe 10 comments at a time. because it does 1 request for each comment, and they are super slow, and they clog up the maximum amount of ipfs gateway requests that the browser can do and it makes it impossible to load the rest of the app.

so what I suggest is to make a component <Upvoted> <Downvoted> <Hidden> that is only rendered when the user is on the correct route, and it should be paginated to only load 10 comments at a time (10 per page) using useComments, I wouldnt use infinite scroll, I would do profile/upvoted/page/2, you cannot pass all comments, there could be thousands, it will break the app to try to load all of them at once.

in general you should never use useComments, it has extremely bad performance. if you have to use it, like for example for the plebchan home page, or to load hidden/upvoted/downvoted, it should only be done with less than 10 comments at a time, and it should only be done if the user actually visits the page, it should never be done for no reason as it will render the web app unusable

[estebanabaroa]

also I think you can use <Routes> inside the view, I dont think you need to create your own routing components like isProfileUpvotedView(). I'm not 100% sure.

or it might just be easier to create a new view for hidden, upvoted and downvoted. the code would be mostly duplicated but I don't think it matters much if you're just importing a few reusable components from components/