update
This commit is contained in:
250
gnx-react/lib/hooks/useBlog.ts
Normal file
250
gnx-react/lib/hooks/useBlog.ts
Normal file
@@ -0,0 +1,250 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
blogService,
|
||||
BlogPost,
|
||||
BlogPostListResponse,
|
||||
BlogCategory,
|
||||
BlogTag,
|
||||
BlogAuthor
|
||||
} from '../api/blogService';
|
||||
|
||||
// Hook for fetching all blog posts
|
||||
export const useBlogPosts = (params?: {
|
||||
category?: string;
|
||||
tag?: string;
|
||||
author?: number;
|
||||
search?: string;
|
||||
featured?: boolean;
|
||||
ordering?: string;
|
||||
page?: number;
|
||||
page_size?: number;
|
||||
}) => {
|
||||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const [pagination, setPagination] = useState<{
|
||||
count: number;
|
||||
next: string | null;
|
||||
previous: string | null;
|
||||
}>({ count: 0, next: null, previous: null });
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPosts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getPosts(params);
|
||||
setPosts(data.results);
|
||||
setPagination({
|
||||
count: data.count,
|
||||
next: data.next,
|
||||
previous: data.previous
|
||||
});
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setPosts([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPosts();
|
||||
}, [params?.category, params?.tag, params?.author, params?.search, params?.page, params?.page_size]);
|
||||
|
||||
return { posts, loading, error, pagination, totalCount: pagination.count };
|
||||
};
|
||||
|
||||
// Hook for fetching a single blog post by slug
|
||||
export const useBlogPost = (slug: string | null) => {
|
||||
const [post, setPost] = useState<BlogPost | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!slug) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchPost = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getPostBySlug(slug);
|
||||
setPost(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setPost(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPost();
|
||||
}, [slug]);
|
||||
|
||||
return { post, loading, error };
|
||||
};
|
||||
|
||||
// Hook for fetching featured blog posts
|
||||
export const useFeaturedPosts = () => {
|
||||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchFeaturedPosts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getFeaturedPosts();
|
||||
setPosts(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setPosts([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFeaturedPosts();
|
||||
}, []);
|
||||
|
||||
return { posts, loading, error };
|
||||
};
|
||||
|
||||
// Hook for fetching latest blog posts
|
||||
export const useLatestPosts = (limit: number = 5) => {
|
||||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLatestPosts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getLatestPosts(limit);
|
||||
setPosts(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setPosts([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLatestPosts();
|
||||
}, [limit]);
|
||||
|
||||
return { posts, loading, error };
|
||||
};
|
||||
|
||||
// Hook for fetching popular blog posts
|
||||
export const usePopularPosts = (limit: number = 5) => {
|
||||
const [posts, setPosts] = useState<BlogPost[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPopularPosts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getPopularPosts(limit);
|
||||
setPosts(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setPosts([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPopularPosts();
|
||||
}, [limit]);
|
||||
|
||||
return { posts, loading, error };
|
||||
};
|
||||
|
||||
// Hook for fetching blog categories
|
||||
export const useBlogCategories = () => {
|
||||
const [categories, setCategories] = useState<BlogCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getCategories();
|
||||
setCategories(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setCategories([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCategories();
|
||||
}, []);
|
||||
|
||||
return { categories, loading, error };
|
||||
};
|
||||
|
||||
// Hook for fetching blog tags
|
||||
export const useBlogTags = () => {
|
||||
const [tags, setTags] = useState<BlogTag[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getTags();
|
||||
setTags(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setTags([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTags();
|
||||
}, []);
|
||||
|
||||
return { tags, loading, error };
|
||||
};
|
||||
|
||||
// Hook for fetching blog authors
|
||||
export const useBlogAuthors = () => {
|
||||
const [authors, setAuthors] = useState<BlogAuthor[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAuthors = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await blogService.getAuthors();
|
||||
setAuthors(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err as Error);
|
||||
setAuthors([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAuthors();
|
||||
}, []);
|
||||
|
||||
return { authors, loading, error };
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user