Fetching a user profile

const ALGOLIA_REGION = "eu";

async function fetchUserProfile(userID) {
  const fallbackUserProfile = {
    userID,
    type: "basic",
    affinities: [],
    lastUpdatedAt: new Date().toISOString(),
  };

  try {
    const response = await fetch(
      `https://ai-personalization.${ALGOLIA_REGION}.algolia.com/2/users/${encodeURIComponent(userID)}`,
      {
        headers: {
          "X-Algolia-Application-Id": "ALGOLIA_APPLICATION_ID",
          "X-Algolia-API-Key": "ALGOLIA_API_KEY",
        },
      }
    );

    if (!response.ok) {
      const error = await response.text();
      return fallbackUserProfile;
    }

    const userProfile = await response.json();

    return userProfile;
  } catch (error) {
    return fallbackUserProfile;
  }
}

import { createContext, useContext } from "react";

const PersonalizationProfileContext = createContext(null);
PersonalizationProfileContext.displayName = "PersonalizationProfileContext";

function usePersonalizationProfile() {
  const context = useContext(PersonalizationProfileContext);

  if (!context) {
    throw new Error(
      "usePersonalizationProfile() must be used within a <PersonalizationProfileProvider>."
    );
  }

  return context;
}

function PersonalizationProfileProvider({ userProfile, children }) {
  return (
    <PersonalizationProfileContext.Provider value={userProfile}>
      {children}
    </PersonalizationProfileContext.Provider>
  );
}

function App({ userProfile }) {
  return (
    <PersonalizationProfileProvider userProfile={userProfile}>
      <Page />
    </PersonalizationProfileProvider>
  );
}

function Page() {
  const { userID, affinities } = usePersonalizationProfile();

  return <>{/* Your React */}</>;
}