Skip to content

Commit

Permalink
giscus
Browse files Browse the repository at this point in the history
  • Loading branch information
@shakhzodkudratov
shakhzodkudratov committed Oct 24, 2024
1 parent 6d94be2 commit c70873f
Showing 1 changed file with 104 additions and 104 deletions.
208 changes: 104 additions & 104 deletions components/article-footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,128 +3,128 @@ import { useLocalStorage } from '@uidotdev/usehooks';
import axios from 'axios';
import { useRouter } from 'next/router';
import React from 'react';
// import Giscus from '@giscus/react'
import Giscus from '@giscus/react'

import { useMutation, useQuery, useQueryClient } from 'react-query';

import type { Post } from 'pages/api/logic';

const Button: React.FC<
{
children: React.ReactNode;
isActive: boolean;
} & React.HTMLProps<HTMLButtonElement>
{
children: React.ReactNode;
isActive: boolean;
} & React.HTMLProps<HTMLButtonElement>
> = ({ children, isActive, ...props }) => (
<button
type={'button' as any}
className={[
'border-2 p-1 rounded hover:disabled:opacity-50 hover:disabled:cursor-not-allowed transition-all',
isActive
? 'border-blue-500 text-blue-500'
: 'border-black/40 dark:border-white/20',
].join(' ')}
{...props}
>
{children}
</button>
<button
type={'button' as any}
className={[
'border-2 p-1 rounded hover:disabled:opacity-50 hover:disabled:cursor-not-allowed transition-all',
isActive
? 'border-blue-500 text-blue-500'
: 'border-black/40 dark:border-white/20',
].join(' ')}
{...props}
>
{children}
</button>
);

const ArticleFooter = () => {
const { pathname } = useRouter();
const path = encodeURI(pathname);
const qk = useQueryClient();
const { pathname } = useRouter();
const path = encodeURI(pathname);
const qk = useQueryClient();

const [localStatus, setLocalStatus] = useLocalStorage<
'liked' | 'disliked' | null
>(path, null);
const [localStatus, setLocalStatus] = useLocalStorage<
'liked' | 'disliked' | null
>(path, null);

const { data: post, isSuccess: postLoaded } = useQuery(['post', path], {
queryFn: () => axios.post('/api/view', { path }),
select: (data) => ({ ...data.data, views: data.data.views || 1 } as Post),
refetchOnWindowFocus: false,
});
const { data: post, isSuccess: postLoaded } = useQuery(['post', path], {
queryFn: () => axios.post('/api/view', { path }),
select: (data) => ({ ...data.data, views: data.data.views || 1 } as Post),
refetchOnWindowFocus: false,
});

const like = useMutation([path], {
mutationFn: () => axios.post('/api/like', { path }),
onSuccess() {
if (!post) return;
qk.setQueryData(['post', path], {
data: {
...post,
likes: post.likes + 1,
dislikes:
localStatus == 'disliked' ? post.dislikes - 1 : post.dislikes,
const like = useMutation([path], {
mutationFn: () => axios.post('/api/like', { path }),
onSuccess() {
if (!post) return;
qk.setQueryData(['post', path], {
data: {
...post,
likes: post.likes + 1,
dislikes:
localStatus == 'disliked' ? post.dislikes - 1 : post.dislikes,
},
});
setLocalStatus('liked');
},
});
setLocalStatus('liked');
},
});
});

const dislike = useMutation([path], {
mutationFn: () => axios.post('/api/like', { path }),
onSuccess() {
if (!post) return;
qk.setQueryData(['post', path], {
data: {
...post,
dislikes: post.dislikes + 1,
likes: localStatus == 'liked' ? post.likes - 1 : post.likes,
const dislike = useMutation([path], {
mutationFn: () => axios.post('/api/like', { path }),
onSuccess() {
if (!post) return;
qk.setQueryData(['post', path], {
data: {
...post,
dislikes: post.dislikes + 1,
likes: localStatus == 'liked' ? post.likes - 1 : post.likes,
},
});
setLocalStatus('disliked');
},
});
setLocalStatus('disliked');
},
});
});

const buttonsDisabled =
!postLoaded || like.isLoading || dislike.isLoading || localStatus != null;
const buttonsDisabled =
!postLoaded || like.isLoading || dislike.isLoading || localStatus != null;

return (
<>
<div className="flex gap-2 mb-2">
<div className="flex flex-col items-center w-8">
<div className="p-1 border-2 border-transparent">
<IconEye stroke={2} />
</div>
<span>{post?.views ?? 0}</span>
</div>
<div className="flex flex-col items-center w-8">
<Button
isActive={localStatus == 'liked'}
disabled={buttonsDisabled}
onClick={() => like.mutateAsync()}
>
<IconThumbUp stroke={2} />
</Button>
<span>{post?.likes ?? 0}</span>
</div>
<div className="flex flex-col items-center w-8">
<Button
isActive={localStatus == 'disliked'}
disabled={buttonsDisabled}
onClick={() => dislike.mutateAsync()}
>
<IconThumbDown stroke={2} />
</Button>
<span>{post?.dislikes ?? 0}</span>
</div>
</div>
{/* <Giscus
id="comments"
repo="giscus/giscus-component"
repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
category="Announcements"
categoryId="DIC_kwDOF1L2fM4B-hVS"
mapping="specific"
term="Welcome to @giscus/react component!"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
theme="light"
lang="en"
loading="lazy"
/> */}
</>
);
return (
<>
<div className="flex gap-2 mb-2">
<div className="flex flex-col items-center w-8">
<div className="p-1 border-2 border-transparent">
<IconEye stroke={2} />
</div>
<span>{post?.views ?? 0}</span>
</div>
<div className="flex flex-col items-center w-8">
<Button
isActive={localStatus == 'liked'}
disabled={buttonsDisabled}
onClick={() => like.mutateAsync()}
>
<IconThumbUp stroke={2} />
</Button>
<span>{post?.likes ?? 0}</span>
</div>
<div className="flex flex-col items-center w-8">
<Button
isActive={localStatus == 'disliked'}
disabled={buttonsDisabled}
onClick={() => dislike.mutateAsync()}
>
<IconThumbDown stroke={2} />
</Button>
<span>{post?.dislikes ?? 0}</span>
</div>
</div>
<Giscus
id="comments"
repo="ismoilovdevml/devops-journey"
repoId="R_kgDOKEbY2g"
category="General"
categoryId="DIC_kwDOKEbY2s4Cczpf"
mapping="pathname"
term="Welcome to @giscus/react component!"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
theme="preferred_color_scheme"
lang="uz"
loading="lazy"
/>
</>
);
};

export default ArticleFooter;

0 comments on commit c70873f

Please sign in to comment.