WS-2956 POC - FOllow topic module with UAS endpoints

[jinidev]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2956

Summary

This pull request introduces a new "Follow Topic" button feature, allowing users to follow or unfollow topics, with personalized behavior for authenticated and guest users. The implementation leverages a new generic UAS (User Activity Service) status hook, adds new API utility functions and configuration. The changes also refactor and generalize UAS status fetching for both "favourites" and "follows" activities.

Code changes

Follow Topic Button Feature

• Added a new FollowTopicButton component that conditionally renders an authenticated or guest version based on personalization availability and user status. The authenticated version allows following/unfollowing topics, while the guest version prompts sign-in.

UAS Status Hook Refactor and Extension

• Introduced a generic useUASStatusHook factory to handle fetching "status" (e.g., isSaved, isFollowed) for arbitrary UAS activities, reducing duplication and simplifying both "favourites" and "follows" logic.
• Refactored useUASFetchSaveStatus to use the new generic status hook.
• Added a new useTopicFollowStatus hook using the generic status hook for topics.
• Implemented useTopicFollowButton to handle follow/unfollow mutations and update TanStack Query cache.

UAS API Utilities and Configuration

• Added FOLLOWS_CONFIG for the new "follows" activity type, mirroring the existing "favourites" config, and utility functions for topic follow payloads and metadata.
• Updated query key utilities to support follows/followStatus/followsList.

Testing

Visit any topic page in localhost
Make sure user is signed in
Follow button would be visible at the top.
Can test follow and unfollow.
Can check REACT_QUERY_CACHE

Screen.Recording.2026-08-05.at.17.16.13.mov

[jinidev]

This hook has significant structural duplication with useUASFetchSaveStatus hook, that could be unified.
So created a shared factory function (createUASStatusHook) that returns a hook for fetch functions

[Copilot]

Pull request overview

Adds a POC “Follow Topic” capability on Topic pages backed by UAS (User Activity Service), reusing existing UAS patterns (payload building + TanStack Query caching) and generalising status fetching across activities.

Changes:

• Introduces FollowTopicButton (authenticated + guest experiences) and wires it into TopicPage.
• Adds a generic useUASStatusHook factory and refactors saved-article status fetching to use it; adds topic follow status + mutation hooks.
• Extends UAS utilities/config and query keys to support a new follows activity type and topic metadata payloads.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/app/pages/TopicPage/TopicPage.jsx	Renders the Follow Topic button on topic pages and passes topic metadata.
src/app/models/types/translations.ts	Adds followTopicButton translation typing.
src/app/lib/uasApi/uasUtility.ts	Adds FOLLOWS_CONFIG, topic-follow payload + metadata helpers.
src/app/lib/uasApi/queryKeys.ts	Adds TanStack Query keys for follows status/list to avoid cache collisions.
src/app/lib/config/services/hindi.ts	Adds Hindi translations for Follow Topic button.
src/app/hooks/useUASStatusHook.ts	Introduces generic factory for UAS “status” queries (saved/followed).
src/app/hooks/useUASFetchSaveStatus/index.ts	Refactors saved-article status hook to use the generic status factory.
src/app/hooks/useTopicFollowStatus/index.ts	Adds a topic-specific wrapper hook for follow status.
src/app/hooks/useTopicFollowButton/index.ts	Adds follow/unfollow mutation hook with cache updates.
src/app/components/SaveButton/index.tsx	Adds TODO note about icon support for multiple button types.
src/app/components/FollowTopicButton/index.tsx	New feature component deciding between authenticated vs guest experiences.
src/app/components/FollowTopicButton/index.styles.ts	Layout styling for the Follow Topic button wrapper.
src/app/components/FollowTopicButton/FollowTopicButtonGuest/index.tsx	Guest follow CTA that opens sign-in modal and tracks clicks/views.
src/app/components/FollowTopicButton/FollowTopicButtonAuthenticated/lazy.tsx	Client-only lazy loading for authenticated follow button.
src/app/components/FollowTopicButton/FollowTopicButtonAuthenticated/index.tsx	Signed-in follow/unfollow UI with analytics and accessibility labels.

[elvinasv]

Looks good, just one small nuance:

The UI message gets stuck with following..., but useTopicFollowButton(topicData) is already resolved.