Adding additional properties to a post item?

🙋Get Help
1

In the List component, each post is identified with three properties:

  • type
  • id
  • link

I’ve made the post category radio buttons with a plugin ensuring that only a single category can be selected per post. Is there a simple way to populate that category information into the post object? So my new post object has:

  • type
  • id
  • link
  • category
2

Not really, because that information belongs to the entity. You could create a hook that returns the info that you want:

import { useConnect } from "frontity";

const usePost = (link) => {
  // Access the state using the hook.
  const { state } = useConnect();
  // If link is not set, use the current link.
  link = link || state.router.link;
  // Get the data and the entity.
  const { id, type } = state.source.get(link);
  const { categories } = state.source.post[data.id];
  // Return the properties.
  return {
    id,
    type,
    link,
    category: categories[0],
  };
};

Then use it later on (don’t forget to connect the component that uses the hook):

import { connect } from "frontity";
import usePost from "../hooks/use-post";

const Post = () => {
  const { type, id, link, category } = usePost();
  return (
    // ...
  )
};

export default connect(Post);

Or in an archive:

import { connect } from "frontity";
import usePost from "../hooks/use-post";

const List = ({ state }) => {
  const data = state.source.get(state.router.link);

  return data.items.map(({ link }) => {
    const { type, id, category } = usePost(link);
    return (
      // ...
    )
  });
};

export default connect(List);