Fetching User Info Without API Calls in a React Component for Sitecore Content Hub

In modern web applications, fetching user information typically involves making API calls to a backend service. However, in Sitecore Content Hub, there's a more efficient way to access user data without the overhead of additional API requests. This blog post will guide you through creating a React component that displays user information by leveraging the context provided by Sitecore Content Hub, eliminating the need for explicit API calls.

Setting Up Your React Component

To begin with, we will create a new component in our React repo called UserInfo. Here’s how to structure your project:

1. Create a new folder named UserInfo inside your src/components directory.
2. Inside this folder, create two files:
   • UserInfo.tsx
   • index.tsx

In index.tsx, we will handle rendering our UserInfo component using a context that passes the user data directly to the component. Here’s the code:

import { createRoot } from "react-dom/client";
import { User } from "../../model/User";
import UserInfo from "./UserInfo";

interface Context {
  user: User;
}

export default function createExternalRoot(container: HTMLElement) {
  const root = createRoot(container);

  return {
    render(context: Context) {
      root.render(
        <UserInfo
        user={context.user}
        />
      );
    },

    unmount() {
      root.unmount();
    },
  };
}

This code defines the createExternalRoot function, which takes a DOM element as input (container). The render() method accepts a context object containing the user data (user) and renders the UserInfo component, passing the user details as props.

Now, let’s define the UserInfo component. This component will accept the user object as a prop and display the user’s details such as User ID, Username, User Groups, and Privileges.

import React from "react";
import { User } from "../../model/User";

interface UserInfoProps {
  user: User 
}

const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
  if (!user) {
    return <div>User information is not available.</div>;
  }

  return (
    <div>
      <h2>User Information</h2>
      <p>
        <strong>User ID:</strong> {user.id}
      </p>
      <p>
        <strong>Username:</strong> {user.userName}
      </p>
      <div>
        <strong>User Groups:</strong>
        <ul>
          {user.userGroups.map((group, index) => (
            <li key={index}>{group}</li>
          ))}
        </ul>
      </div>
      <div>
        <strong>Privileges:</strong>
        <ul>
          {user.privileges.map((privilege, index) => (
            <li key={index}>{privilege}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default UserInfo;

In the above code:

• We first check if the user prop is available. If not, we display a message saying "User information is not available."
• If user data is present, it’s displayed in a structured format, with lists for User Groups and Privileges.

Build the Component

To build the component, use the following command:

npm run build --component=UserInfo

This command builds the component and generates a minified JavaScript file, which you can find in the dist folder.

Adding the Component in Sitecore Content Hub

To test the component, follow these steps:

1. Create a Test Page: In Sitecore Content Hub, I created a new page named "User Info" with a basic layout.
2. Add External Component: Go to your created page (User Info), and in the main zone, add an external component. Name it something like "UserInfo" and make it visible by toggling the visibility option.
3. Upload the Component: Click on the component and choose the path to your minified JS file (located in the dist folder after building). 
4. Test the Page: Once you’ve added the component, navigate to the page to see your UserInfo component in action. The page will now display the user’s details without making any API calls.

Conclusion

By using this approach, we can fetch and display user information directly within a React component in Sitecore Content Hub without needing any API calls. This technique can be quite useful for performance optimization and quick implementations where the user data is available through the context.😊