apps/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reading from blog api

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2025-11-07 20:17:19 +05:30
parent e660c2bcb1
commit 939a7eaba2
1 changed files with 35 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/blog/providers/Article.tsx
View File

@@ -2,18 +2,26 @@ import React, { createContext, useState, useContext, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
interface Author { interface Author {
_id?: string | null;
username: string;
name: string; name: string;
email: string;
avatar: string; avatar: string;
is_active: boolean;
created_at?: string;
updated_at?: string;
} }
export interface Article { export interface Article {
id: string; _id?: string | null;
created_at: string;
updated_at: string;
img: string;
tag: string; tag: string;
title: string; title: string;
description: string; description: string;
img: string; content: string;
authors: Author[]; authors: Author[];
date?: string;
} }
interface ArticleContextType { interface ArticleContextType {
@@ -23,7 +31,12 @@ interface ArticleContextType {
refreshArticles: () => Promise<void>; refreshArticles: () => Promise<void>;
} }
const Article = createContext<ArticleContextType | undefined>(undefined); const ArticleContext = createContext<ArticleContextType | undefined>(undefined);
// You can configure this through an .env or fallback to localhost
const API_BASE =
import.meta?.env?.VITE_API_BASE_URL ||
'http://localhost:8000'; // Matches your OpenAPI "local development server"
export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [articles, setArticles] = useState<Article[]>([]); const [articles, setArticles] = useState<Article[]>([]);
@@ -32,88 +45,23 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
const fetchArticles = async () => { const fetchArticles = async () => {
try { try {
// ✅ Use static defaults first
const defaults = [
{
img: 'https://picsum.photos/800/450?random=1',
tag: 'Engineering',
title: 'Revolutionizing software development with cutting-edge tools',
description:
'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.',
content:
'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.',
authors: [
{ name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
],
},
{
img: 'https://picsum.photos/800/450?random=2',
tag: 'Product',
title: 'Innovative product features that drive success',
description:
'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.',
content:
'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.',
authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }],
},
{
img: 'https://picsum.photos/800/450?random=3',
tag: 'Design',
title: 'Designing for the future: trends and insights',
description:
'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
content:
'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
},
{
img: 'https://picsum.photos/800/450?random=4',
tag: 'Company',
title: "Our company's journey: milestones and achievements",
description:
"Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
content:
"Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
},
{
img: 'https://picsum.photos/800/450?random=45',
tag: 'Engineering',
title: 'Pioneering sustainable engineering solutions',
description:
"Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
content:
"Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
authors: [
{ name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
{ name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
],
},
{
img: 'https://picsum.photos/800/450?random=6',
tag: 'Product',
title: 'Maximizing efficiency with our latest product updates',
description:
'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
content:
'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
},
];
// ✅ For now: only use defaults
// @ts-ignore
setArticles(defaults);
setLoading(false);
// 🔜 Optional: uncomment this to fetch from API when backend is ready
/*
setLoading(true); setLoading(true);
const res = await axios.get('/articles'); setError(null);
setArticles(res.data);
*/ // ✅ Use correct full endpoint from OpenAPI spec
const res = await axios.get<Article[]>(`${API_BASE}/articles`, {
params: { skip: 0, limit: 10 },
});
// ✅ Normalize if backend sends _id instead of id
const formatted = res.data.map((a) => ({
...a,
id: a._id || undefined,
}));
setArticles(formatted);
} catch (err: any) { } catch (err: any) {
console.error('Failed to fetch articles:', err);
setError(err.message || 'Failed to fetch articles'); setError(err.message || 'Failed to fetch articles');
} finally { } finally {
setLoading(false); setLoading(false);
@@ -125,14 +73,14 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
}, []); }, []);
return ( return (
<Article.Provider value={{ articles, loading, error, refreshArticles: fetchArticles }}> <ArticleContext.Provider value={{ articles, loading, error, refreshArticles: fetchArticles }}>
{children} {children}
</Article.Provider> </ArticleContext.Provider>
); );
}; };
export const useArticles = (): ArticleContextType => { export const useArticles = (): ArticleContextType => {
const ctx = useContext(Article); const ctx = useContext(ArticleContext);
if (!ctx) throw new Error('useArticles must be used inside ArticleProvider'); if (!ctx) throw new Error('useArticles must be used inside ArticleProvider');
return ctx; return ctx;
}; };