App.tsx

import { useEffect, useState } from "react";

interface PaymentResponse {
  transactionId: string;
  date: string;
  description: string;
  amount: number;
}

const mockedData: PaymentResponse[] = [
  {
    transactionId: "1",
    date: "2025/01/01",
    description: "transaction 1",
    amount: 10,
  },
  {
    transactionId: "2",
    date: "2025/01/02",
    description: "transaction 2",
    amount: 20,
  },
  {
    transactionId: "3",
    date: "2025/01/03",
    description: "transaction 3",
    amount: 30,
  },
  {
    transactionId: "4",
    date: "2025/01/04",
    description: "transaction 4",
    amount: 40,
  },
];

const sleep = (ms = 1000) => {
  return new Promise((resolve) => setTimeout(() => resolve(""), ms));
};

const fetchData = async () => {
  await sleep();

  return mockedData;
};

type RequestStatus = "idle" | "loading" | "error" | "succcess";

function filterPaymentByDate(
  paymentItems: PaymentResponse[],
  filterValue: string
) {
  if (!filterValue) {
    return paymentItems;
  }

  return paymentItems.filter((paymentItem) => {
    return paymentItem.date.startsWith(filterValue);
  });
}

function App() {
  const [paymentData, setPaymentData] = useState<PaymentResponse[]>([]);
  const [resquestStatus, setRequestStatus] = useState<RequestStatus>("idle");
  const [filterValue, setFilterValue] = useState("");

  useEffect(() => {
    setRequestStatus("loading");
    const initializePaymentData = async () => {
      fetchData()
        .then((response) => {
          setPaymentData(response);
          setRequestStatus("succcess");
        })
        .catch(() => setRequestStatus("error"));
    };

    initializePaymentData();
  }, []);

  if (resquestStatus === "loading") {
    return <h1>Loading...</h1>;
  }

  if (resquestStatus === "error") {
    return <h1>An error raised</h1>;
  }

  return (
    <>
      <div>
        <input
          value={filterValue}
          onChange={(event) => setFilterValue(event.target.value)}
        />
      </div>

      <table>
        <thead>
          <tr>
            <th>Transaction ID</th>
            <th>Date</th>
            <th>Description</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          {filterPaymentByDate(paymentData, filterValue).map((paymentItem) => (
            <tr key={paymentItem.transactionId}>
              <td>{paymentItem.transactionId}</td>
              <td>{paymentItem.date}</td>
              <td>{paymentItem.description}</td>
              <td>{paymentItem.amount}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default App;