mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-16 23:41:21 +08:00
feat: use page view in client side
This commit is contained in:
@ -1,3 +1,5 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface PageViewsProps {
|
||||
@ -6,74 +8,33 @@ interface PageViewsProps {
|
||||
|
||||
export default function PageViews({ slug }: PageViewsProps) {
|
||||
const [views, setViews] = useState<number | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
console.log('PageViews component mounted with slug:', slug);
|
||||
async function updatePageView() {
|
||||
try {
|
||||
// Get initial views
|
||||
const getResponse = await fetch(`/api/pageview/${slug}`);
|
||||
if (!getResponse.ok) {
|
||||
const errorData = await getResponse.json();
|
||||
console.error('Error getting views:', errorData);
|
||||
setError('Failed to get views');
|
||||
return;
|
||||
}
|
||||
const getData = await getResponse.json();
|
||||
setViews(getData.views);
|
||||
|
||||
// Increment views
|
||||
// First increment the view count
|
||||
const postResponse = await fetch(`/api/pageview/${slug}`, {
|
||||
method: 'POST',
|
||||
});
|
||||
if (!postResponse.ok) {
|
||||
const errorData = await postResponse.json();
|
||||
console.error('Error incrementing views:', errorData);
|
||||
return;
|
||||
}
|
||||
const postData = await postResponse.json();
|
||||
setViews(postData.views);
|
||||
if (!postResponse.ok) throw new Error('Failed to increment view count');
|
||||
|
||||
// Then get the updated count
|
||||
const { views } = await postResponse.json();
|
||||
console.log('Updated views:', views);
|
||||
setViews(views);
|
||||
} catch (error) {
|
||||
console.error('Error with page views:', error);
|
||||
setError('Failed to load views');
|
||||
console.error('Error updating page views:', error);
|
||||
setViews(null);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
fetchData();
|
||||
updatePageView();
|
||||
}, [slug]);
|
||||
|
||||
if (error) {
|
||||
console.error('Page views error:', error);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (views === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{views} views</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">
|
||||
Views: {views === null ? '-' : views}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
@ -25,7 +25,7 @@ console.log('Slug:', slug)
|
||||
{
|
||||
!isBlogPost && (
|
||||
<div class='text-center'>
|
||||
<PageViews slug={slug} />
|
||||
<PageViews client:load slug={slug} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
Reference in New Issue
Block a user