Viewing Destination Transfers

Step 1: Creating a `getTransfers` function

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

const getTransfers = useGetTransfers(
  fetchToken,  				// fetchToken implementation, takes an ExistingDestination
  "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 `getTransfers`

Use getTransfers created in Step 1 to fetch transfers for the given destination.

// Local state to store transfers
const [transfers, setTransfers] = useState<Transfer[]>();

// Async function fetches transfers from Prequel API
const fetchTransfers = async (existing: ExistingDestination) => {
  const transfersResponse = await getTransfers(existing);
  setTransfers(transfersResponse.data?.transfers);
};

useEffect(() => {
  fetchTransfers(destination);  // Fetch the transfers for selected destination
}, [destination]);

Step 3: Rendering `transfers`

Render the transfers fetched from the Prequel API for inspection.

const Transfers = () => {
  // Transfers fetching elided
  
  return (
    <>
   	  {transfers.map((t) => (
        <div key={d.id}>
          <p>{t.id}</p>
          <p>{t.status}</p>
          <p>{t.log}</p>
					// ...other transfer fields
        </div>
      ))}		
    </>
  );
}

Step 1: Creating a getTransfers function

Step 2: Using getTransfers

Step 3: Rendering transfers

Step 1: Creating a `getTransfers` function

Step 2: Using `getTransfers`

Step 3: Rendering `transfers`