For social media platforms, following and being followed is a key aspect of user interaction. It allows users to stay updated with each other’s activities and fosters a sense of community. In this tutorial, we will explore how to retrieve and manage follow information using TypeScript and the Amity Social Cloud SDK. This will enable you to create a robust follow request feature for your application, enhancing your user’s social interaction experience.
Pre-requisites:
Before we begin, ensure that you have the following requirements:
- Basic knowledge of TypeScript
- An installed and configured TypeScript environment
- The Amity SDK installed in your project. You can install it using npm with the command npm install @amityco/ts-sdk
- An Amity Social Cloud Portal account
- An Amity Social Cloud Console Account
Note: If you haven’t already registered for an Amity Social Cloud account, we recommend following our comprehensive step-by-step guide in the Amity Portal to create your new network.
Understanding Connection Status
Before we delve into the steps, it’s important to understand the different types of connection statuses that the Amity SDK provides. The connection status of a user can be one of the following:
- accept: This status means that the target user has already connected.
- pending: This status means that the target user has received a follow request, but has not yet accepted it.
- none: This status means that the target user has not yet connected.
- blocked: This status means that the target user has been blocked by the current user.
These statuses help in understanding the relationship between the current user and the target user, and can be used to manage follow requests effectively.
Step 1: Importing the Required Modules
The first step is to import the necessary modules from the Amity SDK for TypeScript. We will need the UserRepository, getMyFollowersTopic, getMyFollowingsTopic, and subscribeTopic modules.
Step 2: Setting Up the Follow Info Component
Next, we will set up a functional component that will handle the retrieval and management of follow information. We will use the useState and useEffect hooks from React to manage state and side effects.
Step 3: Retrieving and Managing Follow Info
In the useEffect hook, we will use the getFollowInfo method from the UserRepository to retrieve the follow information for the specified user. We will also subscribe to the getMyFollowersTopic and getMyFollowingsTopic topics to get real-time updates on the follower and following counts.
Step 4: Understanding Connection Statuses and Counters
The getFollowInfo method returns an object that contains the connection status and counters. The connection status can be accept, pending, none, or blocked, indicating whether the target user has connected, received a follow request, not connected, or been blocked by the current user, respectively.
The counters include followingCount, followerCount, and pendingCount, representing the total number of users the target user is following, the total number of users following the target user, and the total number of follow requests the target user has received, respectively. These counters provide valuable insights into the user's social connections and can be used to create a more engaging user experience.
Final Thoughts
In this tutorial, we have explored how to retrieve and manage follow information using TypeScript and the Amity SDK. We have learned how to understand the connection statuses and manage connection counters. With this knowledge, you can now create a robust follow request feature for your application, enhancing your user’s social interaction experience.