Keywords Filters

The Keywords Filters in Replyke allow developers to filter entities in an entity list based on keywords. This filtering mechanism provides a way to include or exclude entities whose keywords match specific criteria. Let’s dive into how it works and how you can utilize it effectively.

Overview of Keywords Filters

The keywordsFilters property can be passed to the fetchEntities function as part of the filters object with the following structure:

export interface KeywordsFilters {
  includes?: string[];
  doesNotInclude?: string[];
}

• includes: Specifies keywords that must be present in an entity’s keywords array for it to be included in the list.
• doesNotInclude: Specifies keywords that must not be present in an entity’s keywords array for it to be included in the list.

You can apply these filters by calling the fetchEntities function with the desired filter configuration.

Applying Keywords Filters

Developers can apply keywords filters by calling the fetchEntities function with the desired filter configuration.

const entityList = useEntityList({ listId: "filtered-feed" });
 
// Apply keywords filters
entityList.fetchEntities({
  sortBy: "hot",
  keywordsFilters: { includes: ["React"], doesNotInclude: ["Vue"] }
});
 
// Reset keywords filters
entityList.fetchEntities({
  sortBy: "hot",
  keywordsFilters: null
});

How Keywords Filters Work

When the entity list is queried, the keywords filters are applied as follows:

1. Includes: If the includes array contains keywords, only entities whose keywords property contains all these keywords will be included in the list.
2. Does Not Include: If the doesNotInclude array contains keywords, entities whose keywords property contains any of these keywords will be excluded from the list.
3. Combined: When both includes and doesNotInclude are specified, entities must satisfy both conditions—they must include all keywords from includes and exclude all keywords from doesNotInclude.

Example Use Cases

Passing Static Filters to the EntityListProvider

If you want to set static filters as a starting point for your list, you can pass them directly into the EntityListProvider:

<EntityListProvider
  keywordsFilters={{ includes: ["JavaScript", "React"], doesNotInclude: ["Angular"] }}
>
  <MyFeedComponent />
</EntityListProvider>

This setup ensures that the list is pre-configured to show only posts about “JavaScript” or “React” while excluding posts that mention “Angular.”

Dynamically Updating Filters Based on User Interaction

To dynamically change the filters, such as when a user clicks a keyword button, use the fetchEntities function:

const entityList = useEntityList({ listId: "filtered-feed" });
 
const handleKeywordClick = (keyword: string) => {
  entityList.fetchEntities({
    sortBy: "hot",
    keywordsFilters: { includes: [keyword] }
  });
};
 
const excludeKeyword = (keyword: string) => {
  entityList.fetchEntities({
    sortBy: "hot",
    keywordsFilters: { doesNotInclude: [keyword] }
  });
};
 
return (
  <div>
    <h1>Filtered Blog Posts</h1>
    <div>
      <button onClick={() => handleKeywordClick("JavaScript")}>JavaScript</button>
      <button onClick={() => handleKeywordClick("React")}>React</button>
      <button onClick={() => excludeKeyword("Angular")}>Exclude Angular</button>
    </div>
    <ul>
      {entityList.entities.map((entity) => (
        <li key={entity.id}>
          <h2>{entity.title}</h2>
          <p>{entity.content}</p>
        </li>
      ))}
    </ul>
    <button onClick={entityList.loadMore}>Load More</button>
  </div>
);

In this example, clicking a button dynamically updates the entity list by applying keyword filters.

Important Notes

• The filter updates are applied immediately and reset the list to ensure that the updated filter conditions are reflected in the data.
• Invalid or empty keyword values are ignored.
• Combining includes and doesNotInclude provides a powerful mechanism for fine-tuning the list results.

Conclusion

The Keywords Filters offer a flexible way to include or exclude entities based on their associated keywords. By leveraging the keywordsFilters property and the updateKeywordsFilters function, you can dynamically tailor the list to meet your application’s needs. Whether you’re building a blogging platform, an e-commerce site, or a custom app, this filter can help you surface the most relevant content for your users.