Skip to content

Refactor BlogPost functionality to manage views automatically and update BlogFormData structure #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codeunia-dev merged 1 commit into from
Jul 5, 2025
Merged

Refactor BlogPost functionality to manage views automatically and update BlogFormData structure #61

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions app/admin/blog-posts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ interface BlogFormData {
tags: string;
featured: boolean;
image: string;
views: string;
views?: string; // Optional since it's managed by the views API
likes?: number; // Optional since it's calculated from blog_likes table
}

Expand Down Expand Up @@ -66,8 +66,7 @@ const getEmptyPost = (): BlogFormData => ({
tags: "",
featured: false,
image: "",
views: "0",
likes: 0, // This will be calculated automatically from blog_likes table
// views and likes are managed automatically
})

// custom hooks
Expand Down Expand Up @@ -98,8 +97,8 @@ const useBlogPosts = () => {
}

if (postsData) {
// Fetch real like counts for each blog post
const postsWithRealLikes = await Promise.all(
// Fetch real like counts and ensure views are up-to-date for each blog post
const postsWithRealCounts = await Promise.all(
postsData.map(async (post) => {
// Get the real like count from blog_likes table
const { count: likeCount, error: likeError } = await supabase
Expand All @@ -109,14 +108,28 @@ const useBlogPosts = () => {

if (likeError) {
console.error('Error fetching likes for post:', post.title, likeError)
return { ...post, likes: 0 }
}

return { ...post, likes: likeCount || 0 }
// Get the most up-to-date view count from blogs table
const { data: viewData, error: viewError } = await supabase
.from('blogs')
.select('views')
.eq('id', post.id)
.single()

if (viewError) {
console.error('Error fetching views for post:', post.title, viewError)
}

return {
...post,
likes: likeCount || 0,
views: viewData?.views?.toString() || post.views || '0'
}
})
)

setBlogPosts(postsWithRealLikes as BlogPost[])
setBlogPosts(postsWithRealCounts as BlogPost[])
}
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Failed to fetch blog posts"
Expand Down Expand Up @@ -337,16 +350,7 @@ const BlogPostForm = ({
</div>
</div>

<div className="grid gap-2">
<Label htmlFor="views">Views</Label>
<Input
id="views"
placeholder="e.g., 0"
value={formData.views}
onChange={handleInputChange('views')}
className="text-sm"
/>
</div>
{/* Views are managed automatically by the views API */}

<div className="grid gap-2">
<Label htmlFor="tags">Tags</Label>
Expand Down Expand Up @@ -497,7 +501,6 @@ export default function AdminBlogPage() {
tags: parseTags(formData.tags),
featured: Boolean(formData.featured),
image: formData.image.trim(),
views: formData.views.toString(),
// Generate slug from title if needed
slug: formData.title.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
}
Expand Down Expand Up @@ -553,7 +556,6 @@ export default function AdminBlogPage() {
tags: parseTags(formData.tags),
featured: Boolean(formData.featured),
image: formData.image.trim(),
views: formData.views.toString(),
}

console.log('Update data:', updateData) // Debug log
Expand Down