mirror of
https://github.com/ForFarmTeam/ForFarm.git
synced 2025-12-19 14:04:08 +01:00
feat: use react query to fetch farm
This commit is contained in:
parent
54bc4c33a3
commit
ba4c2ce1b4
@ -1,13 +1,17 @@
|
||||
import axiosInstance from "./config";
|
||||
import type { Crop, CropAnalytics, Farm } from "@/types";
|
||||
|
||||
/**
|
||||
* Fetch mock crop data by id.
|
||||
* @param id - The crop identifier.
|
||||
* @returns A promise that resolves to a Crop object.
|
||||
* Fetch a specific crop by id using axios.
|
||||
* Falls back to dummy data on error.
|
||||
*/
|
||||
export async function fetchCropById(id: string): Promise<Crop> {
|
||||
// Simulate an API delay if needed.
|
||||
return Promise.resolve({
|
||||
try {
|
||||
const response = await axiosInstance.get<Crop>(`/api/crops/${id}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// Fallback dummy data
|
||||
return {
|
||||
id,
|
||||
farmId: "1",
|
||||
name: "Monthong Durian",
|
||||
@ -17,16 +21,20 @@ export async function fetchCropById(id: string): Promise<Crop> {
|
||||
expectedHarvest: new Date("2024-07-15"),
|
||||
area: "2.5 hectares",
|
||||
healthScore: 85,
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch mock crop analytics data by crop id.
|
||||
* @param id - The crop identifier.
|
||||
* @returns A promise that resolves to a CropAnalytics object.
|
||||
* Fetch crop analytics by crop id using axios.
|
||||
* Returns dummy analytics if the API call fails.
|
||||
*/
|
||||
export async function fetchAnalyticsByCropId(id: string): Promise<CropAnalytics> {
|
||||
return Promise.resolve({
|
||||
try {
|
||||
const response = await axiosInstance.get<CropAnalytics>(`/api/crops/${id}/analytics`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
return {
|
||||
cropId: id,
|
||||
growthProgress: 45,
|
||||
humidity: 75,
|
||||
@ -44,24 +52,23 @@ export async function fetchAnalyticsByCropId(id: string): Promise<CropAnalytics>
|
||||
phosphorus: 65,
|
||||
potassium: 75,
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulates an API call to fetch farms.
|
||||
* Introduces a delay and a random error to emulate network conditions.
|
||||
*
|
||||
* @returns A promise that resolves to an array of Farm objects.
|
||||
* Fetch an array of farms using axios.
|
||||
* Simulates a delay and a random error; returns dummy data if the API is unavailable.
|
||||
*/
|
||||
export async function fetchFarms(): Promise<Farm[]> {
|
||||
// Simulate network delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// Simulate a random error (roughly 1 in 10 chance)
|
||||
if (Math.random() < 0.1) {
|
||||
throw new Error("Failed to fetch farms. Please try again later.");
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axiosInstance.get<Farm[]>("/api/farms");
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// Optionally, you could simulate a random error here. For now we return fallback data.
|
||||
return [
|
||||
{
|
||||
id: "1",
|
||||
@ -91,26 +98,44 @@ export async function fetchFarms(): Promise<Farm[]> {
|
||||
crops: 2,
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulates an API call to fetch farm details along with its crops.
|
||||
* This function adds a delay and randomly generates an error to mimic real-world conditions.
|
||||
*
|
||||
* @param farmId - The unique identifier of the farm to retrieve.
|
||||
* @returns A promise resolving with an object that contains the farm details and an array of crops.
|
||||
* @throws An error if the simulated network call fails or if the farm is not found.
|
||||
* Simulates creating a new farm.
|
||||
* Waits for 800ms and then uses dummy data.
|
||||
*/
|
||||
export async function createFarm(data: Partial<Farm>): Promise<Farm> {
|
||||
await new Promise((resolve) => setTimeout(resolve, 800));
|
||||
// In a real implementation you might call:
|
||||
// const response = await axiosInstance.post<Farm>("/api/farms", data);
|
||||
// return response.data;
|
||||
return {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
name: data.name!,
|
||||
location: data.location!,
|
||||
type: data.type!,
|
||||
createdAt: new Date(),
|
||||
area: data.area || "0 hectares",
|
||||
crops: 0,
|
||||
};
|
||||
}
|
||||
|
||||
// Additional functions for fetching crop details remain unchanged...
|
||||
|
||||
/**
|
||||
* Fetch detailed information for a specific farm (including its crops) using axios.
|
||||
* If the API call fails, returns fallback dummy data.
|
||||
*/
|
||||
export async function fetchFarmDetails(farmId: string): Promise<{ farm: Farm; crops: Crop[] }> {
|
||||
// Simulate network delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1200));
|
||||
|
||||
// Randomly simulate an error (about 1 in 10 chance)
|
||||
if (Math.random() < 0.1) {
|
||||
throw new Error("Failed to fetch farm details. Please try again later.");
|
||||
}
|
||||
|
||||
// Simulate a not found error if the given farmId is "999"
|
||||
try {
|
||||
const response = await axiosInstance.get<{ farm: Farm; crops: Crop[] }>(`/api/farms/${farmId}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
// If the given farmId is "999", simulate a not found error.
|
||||
if (farmId === "999") {
|
||||
throw new Error("FARM_NOT_FOUND");
|
||||
}
|
||||
@ -123,6 +148,7 @@ export async function fetchFarmDetails(farmId: string): Promise<{ farm: Farm; cr
|
||||
createdAt: new Date("2023-01-15"),
|
||||
area: "12.5 hectares",
|
||||
crops: 3,
|
||||
// Additional details such as weather can be included if needed.
|
||||
weather: {
|
||||
temperature: 28,
|
||||
humidity: 75,
|
||||
@ -168,4 +194,5 @@ export async function fetchFarmDetails(farmId: string): Promise<{ farm: Farm; cr
|
||||
];
|
||||
|
||||
return { farm, crops };
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ const farmFormSchema = z.object({
|
||||
area: z.string().optional(),
|
||||
});
|
||||
|
||||
interface AddFarmFormProps {
|
||||
export interface AddFarmFormProps {
|
||||
onSubmit: (data: Partial<Farm>) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ export function FarmCard({ variant, farm, onClick }: FarmCardProps) {
|
||||
<Sprout className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-medium mb-1">{farm.name}</h3>
|
||||
<h3 className="text-xl font-medium mb-1 truncate">{farm.name}</h3>
|
||||
<div className="flex items-center text-sm text-muted-foreground mb-2">
|
||||
<MapPin className="h-3.5 w-3.5 mr-1 flex-shrink-0" />
|
||||
<span className="truncate">{farm.location}</span>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Search, Plus, Filter, SlidersHorizontal, Leaf, Calendar, AlertTriangle, Loader2 } from "lucide-react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
@ -23,70 +24,37 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { FarmCard } from "./farm-card";
|
||||
import { AddFarmForm } from "./add-farm-form";
|
||||
import type { Farm } from "@/types";
|
||||
import { fetchFarms } from "@/api/farm";
|
||||
import { fetchFarms, createFarm } from "@/api/farm";
|
||||
|
||||
/**
|
||||
* FarmSetupPage component allows users to search, filter, sort, and add farms.
|
||||
*/
|
||||
export default function FarmSetupPage() {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Component state
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [farms, setFarms] = useState<Farm[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeFilter, setActiveFilter] = useState<string>("all");
|
||||
const [sortOrder, setSortOrder] = useState<"newest" | "oldest" | "alphabetical">("newest");
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
|
||||
// Load farms when the component mounts.
|
||||
useEffect(() => {
|
||||
async function loadFarms() {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const data = await fetchFarms();
|
||||
setFarms(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "An unknown error occurred");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
const {
|
||||
data: farms,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery<Farm[]>({
|
||||
queryKey: ["farms"],
|
||||
queryFn: fetchFarms,
|
||||
staleTime: 60 * 1000,
|
||||
});
|
||||
|
||||
loadFarms();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Handles adding a new farm.
|
||||
*
|
||||
* @param data - Partial Farm data from the form.
|
||||
*/
|
||||
const handleAddFarm = async (data: Partial<Farm>) => {
|
||||
try {
|
||||
// Simulate an API call delay for adding a new farm.
|
||||
await new Promise((resolve) => setTimeout(resolve, 800));
|
||||
|
||||
const newFarm: Farm = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
name: data.name!,
|
||||
location: data.location!,
|
||||
type: data.type!,
|
||||
createdAt: new Date(),
|
||||
area: data.area || "0 hectares",
|
||||
crops: 0,
|
||||
};
|
||||
|
||||
setFarms((prev) => [newFarm, ...prev]);
|
||||
const mutation = useMutation({
|
||||
mutationFn: (data: Partial<Farm>) => createFarm(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["farms"] });
|
||||
setIsDialogOpen(false);
|
||||
} catch (err) {
|
||||
setError("Failed to add farm. Please try again.");
|
||||
}
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
// Filter and sort farms based on the current state.
|
||||
const filteredAndSortedFarms = farms
|
||||
const filteredAndSortedFarms = (farms || [])
|
||||
.filter(
|
||||
(farm) =>
|
||||
(activeFilter === "all" || farm.type === activeFilter) &&
|
||||
@ -96,16 +64,20 @@ export default function FarmSetupPage() {
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (sortOrder === "newest") {
|
||||
return b.createdAt.getTime() - a.createdAt.getTime();
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
} else if (sortOrder === "oldest") {
|
||||
return a.createdAt.getTime() - b.createdAt.getTime();
|
||||
return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
|
||||
} else {
|
||||
return a.name.localeCompare(b.name);
|
||||
}
|
||||
});
|
||||
|
||||
// Get available farm types for filters.
|
||||
const farmTypes = ["all", ...new Set(farms.map((farm) => farm.type))];
|
||||
// Get distinct farm types.
|
||||
const farmTypes = ["all", ...new Set((farms || []).map((farm) => farm.type))];
|
||||
|
||||
const handleAddFarm = async (data: Partial<Farm>) => {
|
||||
await mutation.mutateAsync(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b">
|
||||
@ -187,11 +159,11 @@ export default function FarmSetupPage() {
|
||||
<Separator className="my-2" />
|
||||
|
||||
{/* Error state */}
|
||||
{error && (
|
||||
{isError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
<AlertDescription>{(error as Error)?.message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
@ -204,7 +176,7 @@ export default function FarmSetupPage() {
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && !error && filteredAndSortedFarms.length === 0 && (
|
||||
{!isLoading && !isError && filteredAndSortedFarms.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-12 bg-muted/20 rounded-lg border border-dashed">
|
||||
<div className="bg-green-100 p-3 rounded-full mb-4">
|
||||
<Leaf className="h-6 w-6 text-green-600" />
|
||||
@ -223,7 +195,7 @@ export default function FarmSetupPage() {
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setActiveFilter("all");
|
||||
if (!farms.length) {
|
||||
if (!farms || farms.length === 0) {
|
||||
setIsDialogOpen(true);
|
||||
}
|
||||
}}
|
||||
@ -241,7 +213,7 @@ export default function FarmSetupPage() {
|
||||
)}
|
||||
|
||||
{/* Grid of farm cards */}
|
||||
{!isLoading && !error && filteredAndSortedFarms.length > 0 && (
|
||||
{!isLoading && !isError && filteredAndSortedFarms.length > 0 && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
@ -252,7 +224,6 @@ export default function FarmSetupPage() {
|
||||
className="col-span-1">
|
||||
<FarmCard variant="add" onClick={() => setIsDialogOpen(true)} />
|
||||
</motion.div>
|
||||
|
||||
{filteredAndSortedFarms.map((farm, index) => (
|
||||
<motion.div
|
||||
key={farm.id}
|
||||
@ -285,9 +256,7 @@ export default function FarmSetupPage() {
|
||||
}
|
||||
|
||||
/**
|
||||
* A helper component to render the Check icon.
|
||||
*
|
||||
* @param props - Optional className for custom styling.
|
||||
* A helper component for the Check icon.
|
||||
*/
|
||||
function Check({ className }: { className?: string }) {
|
||||
return (
|
||||
|
||||
@ -170,7 +170,7 @@ export default function KnowledgeHubPage() {
|
||||
</CardContent>
|
||||
<CardFooter className="p-4 pt-0 flex justify-between items-center">
|
||||
<div className="text-sm text-muted-foreground">By {blog.author}</div>
|
||||
<Link href={`/blog/${blog.id}`}>
|
||||
<Link href={`/hub/${blog.id}`}>
|
||||
<Button variant="ghost" size="sm" className="gap-1">
|
||||
Read <ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user