Viewing Existing Destinations

Step 1: Creating a getDestinations function

In your frontend, call the useGetDestinationsForRecipient hook to generate a function that fetches a scoped auth token and uses it to get destinations for the recipient scoped by the token. Leverage one of the fetchToken functions you wrote in Building an "Add Destination" Connection Form here to create one.

const getDestinations = useGetDestinations(
  fetchTokent,        // fetchToken implementation, takes no parameters
  "app.example.co",   // the origin of your React app (used to allow CORS),
  PREQUEL_HOST        // Optional (default api.prequel.co): the host url of your Prequel API
);

Step 2: Using getDestinations

Use getDestinations created in Step 1 to fetch destinations for the given recipient.

// Local state to store existing destinations
const [destinations, setDestinations] = useState<ExistingDestination[]>();

// Async function fetches existing destinations from Prequel API
const fetchDestinations = async (id: string) => {
  const destinations = await getDestinations(id);
  setDestinations(destinations);
};

useEffect(() => {
  fetchDestinations();  // Fetch the destinations for active user's recipient
}, []);

Step 3: Rendering destinations

Render the destinations fetched from the Prequel API for inspection.

const RecipientDestinations = () => {
  // Recipient fetching elided

  return (
    <>
      {destinations.map((d) => (
        <div key={d.id}>
          <p>{d.id}</p>
          <p>{d.name}</p>
          <p>{d.vendor}</p>
          // ...other destination fields
        </div>
      ))}
    </>
  );
}