From cc96dfae92592c237db20e6ff458a40f21d4b6e7 Mon Sep 17 00:00:00 2001 From: Sosokker Date: Fri, 7 Mar 2025 02:58:45 +0700 Subject: [PATCH] feat: add dummy api for hub --- frontend/api/hub.ts | 148 +++++++++++++++ frontend/app/(sidebar)/hub/[id]/page.tsx | 219 +++++++---------------- frontend/app/(sidebar)/hub/page.tsx | 104 +++-------- frontend/types.ts | 25 +++ 4 files changed, 265 insertions(+), 231 deletions(-) create mode 100644 frontend/api/hub.ts diff --git a/frontend/api/hub.ts b/frontend/api/hub.ts new file mode 100644 index 0000000..4ed0325 --- /dev/null +++ b/frontend/api/hub.ts @@ -0,0 +1,148 @@ +import axiosInstance from "./config"; +import type { Blog } from "@/types"; + +// Dummy blog data used as a fallback. +const dummyBlogs: Blog[] = [ + { + id: 1, + title: "Sustainable Farming Practices for Modern Agriculture", + description: + "Learn about eco-friendly farming techniques that can increase yield while preserving the environment.", + date: "2023-05-15", + author: "Emma Johnson", + topic: "Sustainability", + image: "/placeholder.svg?height=400&width=600", + readTime: "5 min read", + featured: true, + content: `

Sustainable farming is not just a trend; it's a necessary evolution in agricultural practices. […]

`, + tableOfContents: [ + { id: "importance", title: "The Importance of Sustainable Agriculture", level: 1 }, + { id: "crop-rotation", title: "Crop Rotation and Diversification", level: 1 }, + { id: "ipm", title: "Integrated Pest Management (IPM)", level: 1 }, + { id: "water-conservation", title: "Water Conservation Techniques", level: 1 }, + { id: "soil-health", title: "Soil Health Management", level: 1 }, + { id: "renewable-energy", title: "Renewable Energy Integration", level: 1 }, + { id: "conclusion", title: "Conclusion", level: 1 }, + ], + relatedArticles: [ + { + id: 2, + title: "Optimizing Fertilizer Usage for Maximum Crop Yield", + topic: "Fertilizers", + image: "/placeholder.svg?height=200&width=300", + description: "", + date: "", + author: "", + readTime: "", + featured: false, + }, + { + id: 4, + title: "Water Conservation Techniques for Drought-Prone Areas", + topic: "Sustainability", + image: "/placeholder.svg?height=200&width=300", + description: "", + date: "", + author: "", + readTime: "", + featured: false, + }, + { + id: 5, + title: "Organic Pest Control Methods That Actually Work", + topic: "Organic", + image: "/placeholder.svg?height=200&width=300", + description: "", + date: "", + author: "", + readTime: "", + featured: false, + }, + ], + }, + { + id: 2, + title: "Optimizing Fertilizer Usage for Maximum Crop Yield", + description: "Discover the perfect balance of fertilizers to maximize your harvest without wasting resources.", + date: "2023-06-02", + author: "Michael Chen", + topic: "Fertilizers", + image: "/placeholder.svg?height=400&width=600", + readTime: "7 min read", + featured: false, + }, + { + id: 3, + title: "Seasonal Planting Guide: What to Grow and When", + description: + "A comprehensive guide to help you plan your planting schedule throughout the year for optimal results.", + date: "2023-06-18", + author: "Sarah Williams", + topic: "Plantation", + image: "/placeholder.svg?height=400&width=600", + readTime: "8 min read", + featured: false, + }, + { + id: 4, + title: "Water Conservation Techniques for Drought-Prone Areas", + description: "Essential strategies to maintain your crops during water shortages and drought conditions.", + date: "2023-07-05", + author: "David Rodriguez", + topic: "Sustainability", + image: "/placeholder.svg?height=400&width=600", + readTime: "6 min read", + featured: false, + }, + { + id: 5, + title: "Organic Pest Control Methods That Actually Work", + description: "Natural and effective ways to keep pests at bay without resorting to harmful chemicals.", + date: "2023-07-22", + author: "Lisa Thompson", + topic: "Organic", + image: "/placeholder.svg?height=400&width=600", + readTime: "9 min read", + featured: false, + }, + { + id: 6, + title: "The Future of Smart Farming: IoT and Agriculture", + description: "How Internet of Things technology is revolutionizing the way we monitor and manage farms.", + date: "2023-08-10", + author: "James Wilson", + topic: "Technology", + image: "/placeholder.svg?height=400&width=600", + readTime: "10 min read", + featured: true, + }, +]; + +/** + * Fetches a list of blog posts. + * Simulates a network delay and returns dummy data when the API endpoint is unavailable. + */ +export async function fetchBlogs(): Promise { + await new Promise((resolve) => setTimeout(resolve, 1000)); + try { + const response = await axiosInstance.get("/api/blogs"); + return response.data; + } catch (error) { + return dummyBlogs; + } +} + +/** + * Fetches a single blog post by its id. + * Returns the API result if available; otherwise falls back to dummy data. + */ +export async function fetchBlogById(id: string): Promise { + await new Promise((resolve) => setTimeout(resolve, 500)); + try { + const response = await axiosInstance.get(`/api/blogs/${id}`); + return response.data; + } catch (error) { + const blog = dummyBlogs.find((blog) => blog.id === Number(id)); + return blog || null; + } +} diff --git a/frontend/app/(sidebar)/hub/[id]/page.tsx b/frontend/app/(sidebar)/hub/[id]/page.tsx index 7269159..497e57a 100644 --- a/frontend/app/(sidebar)/hub/[id]/page.tsx +++ b/frontend/app/(sidebar)/hub/[id]/page.tsx @@ -4,110 +4,36 @@ import { useState, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import { ArrowLeft, Calendar, Clock, Share2, Bookmark, ChevronUp } from "lucide-react"; +import { useQuery } from "@tanstack/react-query"; +import { useParams } from "next/navigation"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; -// Sample blog data - in a real app, you would fetch this based on the ID -const blog = { - id: 1, - title: "Sustainable Farming Practices for Modern Agriculture", - description: "Learn about eco-friendly farming techniques that can increase yield while preserving the environment.", - date: "2023-05-15", - author: "Emma Johnson", - authorRole: "Agricultural Specialist", - authorImage: "/placeholder.svg?height=100&width=100", - topic: "Sustainability", - image: "/placeholder.svg?height=600&width=1200", - readTime: "5 min read", - content: ` -

Sustainable farming is not just a trend; it's a necessary evolution in agricultural practices to ensure food security for future generations while minimizing environmental impact. This article explores practical, eco-friendly farming techniques that can increase yield while preserving our precious natural resources.

- -

The Importance of Sustainable Agriculture

- -

As the global population continues to grow, the demand for food increases, putting pressure on farmers to produce more. However, conventional farming methods often lead to soil degradation, water pollution, and biodiversity loss. Sustainable farming addresses these challenges by working with natural processes rather than against them.

- -

Key benefits of sustainable farming include:

- -
    -
  • Reduced environmental impact
    • -
  • Improved soil health and fertility
    • -
  • Conservation of water resources
    • -
  • Enhanced biodiversity
    • -
  • Long-term economic viability
    • -
- -

Crop Rotation and Diversification

- -

One of the simplest yet most effective sustainable farming practices is crop rotation. By alternating different crops in the same area across growing seasons, farmers can break pest cycles, improve soil structure, and enhance nutrient availability.

- -

Diversification goes hand in hand with rotation. Growing a variety of crops rather than practicing monoculture helps spread risk, improves ecological balance, and can provide multiple income streams for farmers.

- -

Integrated Pest Management (IPM)

- -

IPM is an ecosystem-based approach that focuses on long-term prevention of pests through a combination of techniques such as biological control, habitat manipulation, and resistant crop varieties. Chemical pesticides are used only when monitoring indicates they are needed according to established guidelines.

- -

This approach reduces pesticide use, minimizes environmental impact, and helps prevent the development of pesticide-resistant pests.

- -

Water Conservation Techniques

- -

Water is a precious resource, and sustainable farming emphasizes its efficient use. Drip irrigation systems deliver water directly to plant roots, reducing evaporation and runoff. Rainwater harvesting systems capture and store rainfall for later use during dry periods.

- -

Additionally, selecting drought-resistant crop varieties and implementing proper soil management practices can significantly reduce water requirements.

- -

Soil Health Management

- -

Healthy soil is the foundation of sustainable agriculture. Practices such as minimal tillage, cover cropping, and the application of organic matter help maintain soil structure, prevent erosion, and enhance fertility.

- -

Composting farm waste and applying it back to the fields creates a closed-loop system that reduces the need for synthetic fertilizers while improving soil quality.

- -

Renewable Energy Integration

- -

Modern sustainable farms are increasingly incorporating renewable energy sources such as solar panels, wind turbines, and biogas digesters. These technologies reduce dependence on fossil fuels, lower operational costs, and decrease the carbon footprint of agricultural operations.

- -

Conclusion

- -

Transitioning to sustainable farming practices requires knowledge, planning, and sometimes initial investment. However, the long-term benefits for farmers, communities, and the environment make it a worthwhile endeavor.

- -

By adopting these eco-friendly techniques, farmers can ensure the viability of their operations while contributing to a healthier planet for future generations.

- `, - tableOfContents: [ - { id: "importance", title: "The Importance of Sustainable Agriculture", level: 1 }, - { id: "crop-rotation", title: "Crop Rotation and Diversification", level: 1 }, - { id: "ipm", title: "Integrated Pest Management (IPM)", level: 1 }, - { id: "water-conservation", title: "Water Conservation Techniques", level: 1 }, - { id: "soil-health", title: "Soil Health Management", level: 1 }, - { id: "renewable-energy", title: "Renewable Energy Integration", level: 1 }, - { id: "conclusion", title: "Conclusion", level: 1 }, - ], - relatedArticles: [ - { - id: 2, - title: "Optimizing Fertilizer Usage for Maximum Crop Yield", - topic: "Fertilizers", - image: "/placeholder.svg?height=200&width=300", - }, - { - id: 4, - title: "Water Conservation Techniques for Drought-Prone Areas", - topic: "Sustainability", - image: "/placeholder.svg?height=200&width=300", - }, - { - id: 5, - title: "Organic Pest Control Methods That Actually Work", - topic: "Organic", - image: "/placeholder.svg?height=200&width=300", - }, - ], -}; +import { fetchBlogById } from "@/api/hub"; +import type { Blog } from "@/types"; export default function BlogPage() { + // Get the dynamic route parameter. + const params = useParams(); + const blogId = params.id as string; + + // Fetch the blog based on its id. + const { + data: blog, + isLoading, + isError, + } = useQuery({ + queryKey: ["blog", blogId], + queryFn: () => fetchBlogById(blogId), + staleTime: 60 * 1000, + }); + + // Local state for the "scroll to top" button. const [showScrollTop, setShowScrollTop] = useState(false); - // Handle scroll to show/hide scroll to top button useEffect(() => { const handleScroll = () => { setShowScrollTop(window.scrollY > 300); @@ -117,12 +43,10 @@ export default function BlogPage() { return () => window.removeEventListener("scroll", handleScroll); }, []); - // Scroll to top function const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; - // Scroll to section function const scrollToSection = (id: string) => { const element = document.getElementById(id); if (element) { @@ -130,6 +54,14 @@ export default function BlogPage() { } }; + if (isLoading) { + return
Loading...
; + } + + if (isError || !blog) { + return
Error loading blog.
; + } + return (
{/* Header */} @@ -175,15 +107,10 @@ export default function BlogPage() {
{/* Article content */}
- {/* Topic badge */}
{blog.topic}
- - {/* Article title */}

{blog.title}

- - {/* Article meta */}
@@ -195,30 +122,11 @@ export default function BlogPage() {
By {blog.author}
- - {/* Featured image */}
{blog.title}
- - {/* Article description */}

{blog.description}

- - {/* Article content */} -
- - {/* Author bio */} -
-
-
- {blog.author} -
-
-

{blog.author}

-

{blog.authorRole}

-
-
-
+
{/* Sidebar */} @@ -231,12 +139,13 @@ export default function BlogPage() {
diff --git a/frontend/app/(sidebar)/hub/page.tsx b/frontend/app/(sidebar)/hub/page.tsx index 787a2d4..4ade3d6 100644 --- a/frontend/app/(sidebar)/hub/page.tsx +++ b/frontend/app/(sidebar)/hub/page.tsx @@ -4,6 +4,7 @@ import { useState } from "react"; import Link from "next/link"; import Image from "next/image"; import { CalendarIcon, ChevronRight, Leaf, Search } from "lucide-react"; +import { useQuery } from "@tanstack/react-query"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -11,86 +12,36 @@ import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; -// Sample blog data -const blogs = [ - { - id: 1, - title: "Sustainable Farming Practices for Modern Agriculture", - description: - "Learn about eco-friendly farming techniques that can increase yield while preserving the environment.", - date: "2023-05-15", - author: "Emma Johnson", - topic: "Sustainability", - image: "/placeholder.svg?height=400&width=600", - readTime: "5 min read", - featured: true, - }, - { - id: 2, - title: "Optimizing Fertilizer Usage for Maximum Crop Yield", - description: "Discover the perfect balance of fertilizers to maximize your harvest without wasting resources.", - date: "2023-06-02", - author: "Michael Chen", - topic: "Fertilizers", - image: "/placeholder.svg?height=400&width=600", - readTime: "7 min read", - featured: false, - }, - { - id: 3, - title: "Seasonal Planting Guide: What to Grow and When", - description: - "A comprehensive guide to help you plan your planting schedule throughout the year for optimal results.", - date: "2023-06-18", - author: "Sarah Williams", - topic: "Plantation", - image: "/placeholder.svg?height=400&width=600", - readTime: "8 min read", - featured: false, - }, - { - id: 4, - title: "Water Conservation Techniques for Drought-Prone Areas", - description: "Essential strategies to maintain your crops during water shortages and drought conditions.", - date: "2023-07-05", - author: "David Rodriguez", - topic: "Sustainability", - image: "/placeholder.svg?height=400&width=600", - readTime: "6 min read", - featured: false, - }, - { - id: 5, - title: "Organic Pest Control Methods That Actually Work", - description: "Natural and effective ways to keep pests at bay without resorting to harmful chemicals.", - date: "2023-07-22", - author: "Lisa Thompson", - topic: "Organic", - image: "/placeholder.svg?height=400&width=600", - readTime: "9 min read", - featured: false, - }, - { - id: 6, - title: "The Future of Smart Farming: IoT and Agriculture", - description: "How Internet of Things technology is revolutionizing the way we monitor and manage farms.", - date: "2023-08-10", - author: "James Wilson", - topic: "Technology", - image: "/placeholder.svg?height=400&width=600", - readTime: "10 min read", - featured: true, - }, -]; - -// Extract unique topics from blogs -const topics = ["All", ...new Set(blogs.map((blog) => blog.topic))]; +import { fetchBlogs } from "@/api/hub"; +import type { Blog } from "@/types"; export default function KnowledgeHubPage() { const [selectedTopic, setSelectedTopic] = useState("All"); const [searchQuery, setSearchQuery] = useState(""); - // Filter blogs based on selected topic and search query + // Fetch blogs using react-query. + const { + data: blogs, + isLoading, + isError, + } = useQuery({ + queryKey: ["blogs"], + queryFn: fetchBlogs, + staleTime: 60 * 1000, + }); + + if (isLoading) { + return
Loading...
; + } + + if (isError || !blogs) { + return
Error loading blogs.
; + } + + // Derive the list of topics from the fetched blogs. + const topics = ["All", ...new Set(blogs.map((blog) => blog.topic))]; + + // Filter blogs based on selected topic and search query. const filteredBlogs = blogs.filter((blog) => { const matchesTopic = selectedTopic === "All" || blog.topic === selectedTopic; const matchesSearch = @@ -104,7 +55,6 @@ export default function KnowledgeHubPage() { return (
- {/* Main content */}
@@ -156,7 +106,7 @@ export default function KnowledgeHubPage() {
By {blog.author}
- + diff --git a/frontend/types.ts b/frontend/types.ts index 60be4ef..e9f34a0 100644 --- a/frontend/types.ts +++ b/frontend/types.ts @@ -71,3 +71,28 @@ export type InventoryItem = { }; export type CreateInventoryItemInput = Omit; + +export interface Blog { + id: number; + title: string; + description: string; + date: string; + author: string; + topic: string; + image: string; + readTime: string; + featured: boolean; + content?: string; + tableOfContents?: { id: string; title: string; level: number }[]; + relatedArticles?: { + id: number; + title: string; + topic: string; + image: string; + description?: string; + date?: string; + author?: string; + readTime?: string; + featured?: boolean; + }[]; +}