# Frontend Rendering
The goal is to now render the transactions in the browser. There are many ways to render this to the user, the first is to list out all the transactions at once the other is to segment them by category. The first is easier to implement but the second is more useful.

Below are some code snippets to help you get started. You'll have to compose them yourself and add additional logic. 

## A Generic Component
```jsx
import React from 'react';

function ComponentName({pro1, prop2}) {
    return (
        <h1>ComponentName</h1>
    )
}

export { ComponentName }
```

## Using a Generic Component
```jsx
import React from 'react';
import {TransactionsList} from './TransactionsList';

function HigherOrderComponent() {
    return (
        <div>
            <TransactionsList prop1={data} />
            <TransactionsList prop1={data} />
        </div>
    );
}
```

## Rendering a Card
```jsx
    <div className="bg-white rounded-lg shadow-lg p-8 mt-6">
        <h1 className="text-2xl font-bold mb-4">Transactions</h1>
        <p className="text-gray-500 mb-4">No transactions to display.</p>
    </div>
```

## Rendering a Table
```jsx
<div className="bg-slate-100 rounded-lg shadow-lg p-8 mt-6">
    <h1 className="text-2xl font-bold mb-4">Title</h1>
    <table className="table-auto">
        <thead>
            <tr>
                <th className="px-4 py-2">Heading 1</th>
                <th className="px-4 py-2">Heading 2</th>
            </tr>
        </thead>
        <tbody>
            {transactions.map((array) => (
                <tr key={arrayItem.id}>
                    <td className="border px-4 py-2">{datavalue1}</td>
                    <td className="border px-4 py-2">{datavalue2}</td>
                </tr>
            ))}
        </tbody>
    </table>
</div>
```



# Helpful Tips
## Capturing State from the Backend
```jsx
const [transactions, setTransactions] = useState([]);

function handleUpload() {
    const formData = new FormData();
    formData.append('file', file);
    fetch('/api/upload/', {
      method: 'POST',
      body: formData,
    })
    .then((response) => response.json())
    .then((data) => {
      setTransactions(data);
    })
  }
```

## Faster Backend Testing
Instead of using OpenAI to process transactions for testing, just return the following json in app.js. This will allow you to test your frontend rendering without having to wait for the OpenAI API to respond and not incur extra charges for API use. 

```js
var tempTransactions = [
  {
    "Status": "Cleared",
    "Date": "02/03/2023",
    "Description": "CRUNCHYROLL *MEMBERSHI 415-503-9235 CA",
    "Debit": "11.03",
    "Credit": "",
    "Category": "Entertainment"
  },
  {
    "Status": "Cleared",
    "Date": "02/02/2023",
    "Description": "CITY OF MARYSVILLE, WA MARYSVILLE WA",
    "Debit": "240.50",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "02/01/2023",
    "Description": "GOOGLE CLOUD XW9DZ4 650-253-0000 CA",
    "Debit": "0.03",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/30/2023",
    "Description": "STATE STREET FAMILY CH MARYSVILLE WA",
    "Debit": "50.00",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/30/2023",
    "Description": "SNOHOMISH COUNTY PUD 425-783-1000 WA",
    "Debit": "89.05",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/28/2023",
    "Description": "HAGGEN 3604 MARYSVILLE WA",
    "Debit": "9.77",
    "Credit": "",
    "Category": "Groceries"
  },
  {
    "Status": "Cleared",
    "Date": "01/28/2023",
    "Description": "SP HIYA HEALTH BOCA RATON FL",
    "Debit": "32.82",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/24/2023",
    "Description": "TARGET.COM * 800-591-3869 MN",
    "Debit": "5.00",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/24/2023",
    "Description": "TARGET.COM * 800-591-3869 MN",
    "Debit": "25.57",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/24/2023",
    "Description": "PINEWOOD FAMILY DENTAL MARYSVILLE WA",
    "Debit": "485.00",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/24/2023",
    "Description": "Amazon.com2I8ZG7YJ3 Amzn.com/bill WA null XXXXXXXXXXXX9998",
    "Debit": "5.62",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/24/2023",
    "Description": "TARGET 00021923 MARYSVILLE WA null XXXXXXXXXXXX8138",
    "Debit": "8.43",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/24/2023",
    "Description": "ONLINE PAYMENT, THANK YOU",
    "Debit": "",
    "Credit": "-4182.23",
    "Category": "",
    "_6": ""
  },
  {
    "Status": "Cleared",
    "Date": "01/23/2023",
    "Description": "STATE STREET FAMILY CH MARYSVILLE WA",
    "Debit": "50.00",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/22/2023",
    "Description": "GOOGLE YouTubePremium 650-253-0000 CA",
    "Debit": "16.57",
    "Credit": "",
    "Category": "Entertainment"
  },
  {
    "Status": "Cleared",
    "Date": "01/20/2023",
    "Description": "PEROT MUSEUM CAFE QPS DALLAS TX",
    "Debit": "25.82",
    "Credit": "",
    "Category": "Restaurants"
  },
  {
    "Status": "Cleared",
    "Date": "01/20/2023",
    "Description": "THE HOME DEPOT #4726 MARYSVILLE WA",
    "Debit": "19.14",
    "Credit": "",
    "Category": "Groceries"
  },
  {
    "Status": "Cleared",
    "Date": "01/20/2023",
    "Description": "Amazon.com4L04G50H3 Amzn.com/bill WA null XXXXXXXXXXXX9998",
    "Debit": "13.12",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/20/2023",
    "Description": "AMZN Mktp US*622L107Y3 Amzn.com/bill WA null XXXXXXXXXXXX9998",
    "Debit": "6.55",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/19/2023",
    "Description": "STARBUCKS STORE 03321 MARYSVILLE WA",
    "Debit": "10.28",
    "Credit": "",
    "Category": "Restaurants"
  },
  {
    "Status": "Cleared",
    "Date": "01/19/2023",
    "Description": "STATE STREET FAMILY CH MARYSVILLE WA",
    "Debit": "50.00",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/19/2023",
    "Description": "TARGET.COM * 800-591-3869 MN",
    "Debit": "52.74",
    "Credit": "",
    "Category": "Shopping"
  },
  {
    "Status": "Cleared",
    "Date": "01/19/2023",
    "Description": "ZIPLY FIBER * INTERNET 866-699-4759 WA",
    "Debit": "50.94",
    "Credit": "",
    "Category": "Bills"
  },
  {
    "Status": "Cleared",
    "Date": "01/18/2023",
    "Description": "7-ELEVEN 39782 DFW AIRPORT TX",
    "Debit": "1.72",
    "Credit": "",
    "Category": "Travel"
  },
  {
    "Status": "Cleared",
    "Date": "01/18/2023",
    "Description": "BUC-EE'S #36 TERRELL TX",
    "Debit": "21.53",
    "Credit": "",
    "Category": "Travel"
  },
  {
    "Status": "Cleared",
    "Date": "01/17/2023",
    "Description": "DALLAS ZOO MANAGEMENT DALLAS TX",
    "Debit": "40.00",
    "Credit": "",
    "Category": "Entertainment"
  }
]
```