How to show feed and create a post with followed topics?

In the feed, providing users with personalized content is crucial for engagement. One effective way to achieve this is by showing a feed based on topics users have followed, and allowing them to create posts under those topics. This guide will walk you through the process of displaying a feed tailored to a user's followed topics and implementing a feature to create posts within those topics.

Getting Followed Topics

To fetch the topics followed by a user, you can use the method getFollowedTopics of the LMFeedClient's instance.

import { initiateFeedClient } from "@likeminds.community/likeminds-feed-reactjs";
import { GetUserTopicsRequest } from "@likeminds.community/feed-js";
// initiate an instance for the LMFeedClient
const lmFeedClient = initiateClient();

async function getUserTopics() {
  const request: GetUserTopicsRequest = {
    // List of UUIDs
    uuids: [""],
  };
  const followedTopics = await lmFeedClient.getUserTopics(userTopics);
  // Parse the response as needed
}

Showing universal feed with followed topics

To automatically load feeds with user followed topics, you will have to wrap the LMFeedUniversalFeed component with a custom wrapper, which will fetch the user followed topics as explained in the previous step, and then pass the list to the LMFeedUniversalFeed.

Steps to show universal feed with followed topics

Step 1: Create a wrapper component

Create a new React component CustomLMFeedUniversalFeed and return LMFeedUniversalFeed from it.

import { LMFeedUniversalFeed } from "@likeminds.community/likeminds-feed-reactjs";

export function CustomLMFeedUniversalFeed() {
  return <LMFeedUniversalFeed />;
}

Step 2: Make API calls with client instance

In your newly created wrapper component, get an instance of LMFeedClient. This should be the same instance you use to pass in LMSocialFeed, Here we will receive it from a prop

import { LMFeedUniversalFeed } from "@likeminds.community/likeminds-feed-reactjs";

interface CustomLMFeedUniversalFeedProps {
  lmFeedClient: LMFeedClient;
}

export function CustomLMFeedUniversalFeed({
  lmFeedClient,
}: CustomLMFeedUniversalFeedProps) {
  const [followedTopics, setFollowedTopics] = useState([]);
  useEffect(() => {
    async function getUserTopics() {
      const request: GetUserTopicsRequest = {
        // List of UUIDs
        uuids: [""],
      };
      const followedTopics = await lmFeedClient.getUserTopics(userTopics);
      // Parse the response and save it to the followedTopics state.
    }

    getUserTopics();
  }, []);

  return <LMFeedUniversalFeed followedTopics={followedTopics} />;
}

Step 3: Pass the custom wrapper to LMSocialFeed

Now you need to pass CustomUniversalFeed to LMSocialFeed as a custom component.

<LMSocialFeed
  //   Other props
  CustomComponents={{
    CustomUniversalFeed: <CustomUniversalFeed />,
  }}
></LMSocialFeed>

info

To get the list of all the required props, check out this guide.

Create post with followed topics

You can automatically assign topics by default when creating post, by providing your own custom callback for adding post.

<LMSocialFeed
  //   Other props
  PostCreationCustomCallbacks={{
    postFeedCustomAction: async (store) => {
      // Retrieve the followed topics using the LMFeedClient's instance
      const request: GetUserTopicsRequest = {
        // List of UUIDs
        uuids: [""],
      };
      const followedTopics = await lmFeedClient.getUserTopics(userTopics);
      const followedTopicIds: string[] = followedTopics?.data?.topics;
      store.postCreationDataStore.setSelectedTopicIds(followedTopicIds);
      store.defaultActions.postFeed();
    },
  }}
></LMSocialFeed>

info

To get the list of all the required props, check out this guide.