Build a React app with AEM’s Content Fragment Delivery OpenAPIs

$ cd ~/Code
$ git clone git@github.com:adobe/aem-tutorials.git
$ cd aem-tutorials
$ git fetch --tags
$ git tag
$ git checkout tags/headless_open-api_basic

$ cd ~/Code/aem-tutorials/headless/open-api/basic
$ code .

# AEM Publish (or Preview) service that provides Content Fragments
REACT_APP_HOST_URI=https://publish-p123-e456.adobeaemcloud.com

# AEM Publish (or Preview) service that provides Content Fragments
REACT_APP_HOST_URI=http://localhost:8010/proxy

$ cd ~/Code/aem-tutorials/headless/open-api/basic
$ npm install
$ npm start

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import "./Teams.scss";

function Teams() {

  // The teams folder is the only folder-tree that is allowed to contain Team Content Fragments.
  const TEAMS_FOLDER = '/content/dam/my-project/en/teams';

  // State to store the teams data
  const [teams, setTeams] = useState(null);

  useEffect(() => {
    /**
    * Fetches all teams and their associated member details
    * This is a two-step process:
    * 1. First, get all team content fragments from the specified folder
    * 2. Then, for each team, fetch the full details including hydrated references to get the team member names
    */
    const fetchData = async () => {
      try {
        // Step 1: Fetch all teams from the teams folder
        const response = await fetch(
          `${process.env.REACT_APP_HOST_URI}/adobe/contentFragments?path=${TEAMS_FOLDER}`
        );
        const allTeams = (await response.json()).items || [];

        // Step 2: Fetch detailed information for each team with hydrated references
        const hydratedTeams = [];
        for (const team of allTeams) {
          const hydratedTeamResponse = await fetch(
            `${process.env.REACT_APP_HOST_URI}/adobe/contentFragments/${team.id}?references=direct-hydrated`
          );
          hydratedTeams.push(await hydratedTeamResponse.json());
        }

        setTeams(hydratedTeams);
      } catch (error) {
        console.error("Error fetching content fragments:", error);
      }
    };

    fetchData();
  }, [TEAMS_FOLDER]);

  // Show loading state while teams data is being fetched
  if (!teams) {
    return <div>Loading teams...</div>;
  }

  // Render the teams
  return (
    <div className="teams">
      {teams.map((team, index) => {
        return (
          <Team
            key={index}
            {..team}
          />
        );
      })}
    </div>
  );
}

/**
* Team component - renders a single team with its details and members
* @param {string} fields - The authorable fields
* @param {Object} references - Hydrated references containing member details such as fullName
*/
function Team({ fields, references, path }) {
  if (!fields.title || !fields.teamMembers) {
    return null;
  }

  return (
    <div className="team">
      <h2 className="team__title">{fields.title}</h2>
      {/* Render description as HTML using dangerouslySetInnerHTML */}
      <p
        className="team__description"
        dangerouslySetInnerHTML={{ __html: fields.description.value }}
      />
      <div>
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
          {/* Render each team member as a link to their detail page */}
          {fields.teamMembers.map((teamMember, index) => {
            return (
              <li key={index} className="team__member">
                <Link to={`/person/${teamMember}`}>
                  {/* Display the full name from the hydrated reference */}
                  {references[teamMember].value.fields.fullName}
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

export default Teams;

import "./Person.scss";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

/**
* Person component - displays detailed information about a single person
* Fetches person data from AEM using the ID from the URL parameters
*/
function Person() {
  // Get the person ID from the URL parameter
  const { id } = useParams();

  // State to store the person data
  const [person, setPerson] = useState(null);

  useEffect(() => {
    /**
    * Fetches person data from AEM Content Fragment Delivery API
    * Uses the ID from URL parameters to get the specific person's details
    */
    const fetchData = async () => {
      try {
        /* Hydrate references for access to profilePicture asset path */
        const response = await fetch(
          `${process.env.REACT_APP_HOST_URI}/adobe/contentFragments/${id}?references=direct-hydrated`
        );
        const json = await response.json();
        setPerson(json || null);
      } catch (error) {
        console.error("Error fetching person data:", error);
      }
    };
    fetchData();
  }, [id]); // Re-fetch when ID changes

  // Show loading state while person data is being fetched
  if (!person) {
    return <div>Loading person...</div>;
  }

  return (
    <div className="person">
      {/* Person profile image - Look up the profilePicture reference in the references object */}
      <img
        className="person__image"
        src={process.env.REACT_APP_HOST_URI + person.references[person.fields.profilePicture].value.path}
        alt={person.fields.fullName}
      />
      {/* Display person's occupations */}
      <div className="person__occupations">
        {person.fields.occupation.map((occupation, index) => {
          return (
            <span key={index} className="person__occupation">
              {occupation}
            </span>
          );
        })}
      </div>

      {/* Person's main content: name and biography */}
      <div className="person__content">
        <h1 className="person__full-name">{person.fields.fullName}</h1>
        {/* Render biography as HTML content */}
        <div
          className="person__biography"
          dangerouslySetInnerHTML={{ __html: person.fields.biographyText.value }}
        />
      </div>
    </div>
  );
}

export default Person;