import React, { useEffect, useState } from 'react';
import { Auth } from 'aws-amplify';

const fetchData = async () => {
  try {
    // Cognitoから現在のユーザー情報を取得し、トークンを取得
    const session = await Auth.currentSession();
    const idToken = session.getIdToken().getJwtToken();

    // fetch APIを使用してGETリクエストを実行
    const response = await fetch('https://your-api-endpoint.com/data', {
      method: 'GET',
      headers: {
        Authorization: `Bearer ${idToken}`,
        'Content-Type': 'application/json',
      }
    });

    // レスポンスをJSON形式で取得
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data: ', error);
    return null;
  }
};

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h1>Data Fetched</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default App;