notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Fix:Made fully functional by fetching the data from backend

Browse Source
This commit is contained in:
Atharva
2025-02-22 22:36:01 +05:30
parent b805b8e34e
commit 982fbba413
2 changed files with 60 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/FarmList.jsx
+33 -103
View File
@@ -1,122 +1,52 @@
import { useEffect, useState } from "react";
import Td from "./Td";
const FarmList = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch("http://localhost:8000/api/v1/farm", {
credentials: "include",
method: "GET",
headers: { "Content-Type": "application/json" },
})
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error(error));
}, []);
return (
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
<th scope="col" className="px-6 py-3">
Farm name
</th>
<th scope="col" class="px-6 py-3">
<th scope="col" className="px-6 py-3">
Location
</th>
<th scope="col" class="px-6 py-3">
<th scope="col" className="px-6 py-3">
Type
</th>
<th scope="col" class="px-6 py-3">
<th scope="col" className="px-6 py-3">
Size (acres)
</th>
<th scope="col" class="px-6 py-3">
<th scope="col" className="px-6 py-3">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Green Valley Farms
</th>
<td class="px-6 py-4">California</td>
<td class="px-6 py-4">Organic</td>
<td class="px-6 py-4">150</td>
<td class="px-6 py-4">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Sunny Acres
</th>
<td class="px-6 py-4">Texas</td>
<td class="px-6 py-4">Conventional</td>
<td class="px-6 py-4">200</td>
<td class="px-6 py-4">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Riverside Estates
</th>
<td class="px-6 py-4">Florida</td>
<td class="px-6 py-4">Hydroponic</td>
<td class="px-6 py-4">120</td>
<td class="px-6 py-4">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Blueberry Hill
</th>
<td class="px-6 py-4">Oregon</td>
<td class="px-6 py-4">Berry</td>
<td class="px-6 py-4">80</td>
<td class="px-6 py-4">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
<tr>
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Sunnybrook Meadows
</th>
<td class="px-6 py-4">Washington</td>
<td class="px-6 py-4">Dairy</td>
<td class="px-6 py-4">300</td>
<td class="px-6 py-4">
<a
href="#"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
{data.length > 0 ? (
data.map((item) => <Td key={item.id} children={item} />)
) : (
<tr>
<td colSpan={5} className="text-center">
No data available
</td>
</tr>
)}
</tbody>
</table>
</div>