Summary

Closes #1879

Checklist

• On the frontend, I've made my strings translate-able.
• [n/a] If I've added shared components, I've added a storybook story.
• I've made pages responsive and look good on mobile.

Screenshots

Known issues

Button design

• The Figma design presents a simple follow/unfollow link for each user, but
• I used the FollowUserButton component instead. Looks better and had preset logic for following users.
• But now its button design is inconsistent vis-a-vis the Following tab. If it were up to me, I'd change that button too. Happy to change either tabs' button to align with the other tab upon request.

No confirmation modal

• The Following tab uses a modal to confirm when a user wants to unfollow something.
• I'm not doing that here. It wasn't part of the Issue/Figma spec.
• any interest in confirmation modal/follow button logic improvements in a subsequent PR?

Dispersed/Stale Logic

This PR implements only what #1879 asks for, but I'm hoping y'all will allow some subsequent PRs where I try to clean some stuff up.

While coding, I kept finding more and more instances of stale code and dispersed/repeated logic that I really wanted to refactor away (my first go at this ticket, in fact, got carried away with refactoring).

If refactor PRs aren't welcome, just let me know.

Steps to test/reproduce

Run application server with yarn dev:up

Note: It's possible the command will fail (as it did with me) due to the recent codebase upgrade to node 20. Use these commands to rebuild your images:

# Stop everything and remove containers/volumes from this project
docker compose -f infra/docker-compose.yml down -v --remove-orphans

# Nuke old build cache so base images get re-pulled
docker builder prune -af

# Rebuild WITH no cache and pull latest base images
docker compose -f infra/docker-compose.yml build --no-cache --pull

# Try again
yarn dev:up

Spoof a Follower

Note: If you know of a better way, be my guest (and teach me how!)

1. Sign in as your test user: [email protected] with password password.
2. Make another user follow your test user: Go to http://localhost:3010/firestore , navigate to the users collection, pick any user other than yours (I recommend user 0BvO7rSlFjRVHuLfd7RlHRYg2DN2), create a collection called activeTopicSubscriptions, with document ID testimony-05lcy6YQrPvPRvVPlZFbCA0O81TF), key userLookup and value of type mapping. The mapping should have key profileId set to your user's profile ID: 05lcy6YQrPvPRvVPlZFbCA0O81TF.

2. Make sure your follower has a public profile page: Navigate to the profiles collection and find your follower's profile. If it doesn't exist, create it, and make sure it at least has the fields public (boolean) and fullName (string).

Check Followers tab in Edit Profile page

1. Go to http://localhost:3000/edit-profile/followers .
2. Ensure that everything looks as expected, according to the Figma design doc. (Note: pagination is considered out of scope for this ticket.)
3. Try following your follower back. Check firestore (http://localhost:3010/firestore/default/data/users/05lcy6YQrPvPRvVPlZFbCA0O81TF) to make sure you are now following your follower.
4. Try unfollowing. Check firestore again to make sure you are not following your follower.

Edge Cases

Private follower

In firestore, set your followers' profile to private. Reload the Followers tab. The follower should now appear as an Anonymous User.

Public follower with no profile

Note: I'm not even sure if this is possible in prod, but in dev there are plenty of users without a profile.

Find a user ID in the dev server firestore that does not exist in the profiles collection and set that user to be a follower, exactly how you did in step 1. Reload the Followers tab. The follower should now appear as an Anonymous User.