Skip to content

Commit c70873f

Browse files
shakhzodkudratovshakhzodkudratov
committed
giscus
1 parent 6d94be2 commit c70873f

File tree

1 file changed

+104
-104
lines changed

1 file changed

+104
-104
lines changed

‎components/article-footer.tsx

Lines changed: 104 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -3,128 +3,128 @@ import { useLocalStorage } from '@uidotdev/usehooks';
33
import axios from 'axios';
44
import { useRouter } from 'next/router';
55
import React from 'react';
6-
// import Giscus from '@giscus/react'
6+
import Giscus from '@giscus/react'
77

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

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

1212
const Button: React.FC<
13-
{
14-
children: React.ReactNode;
15-
isActive: boolean;
16-
} & React.HTMLProps<HTMLButtonElement>
13+
{
14+
children: React.ReactNode;
15+
isActive: boolean;
16+
} & React.HTMLProps<HTMLButtonElement>
1717
> = ({ children, isActive, ...props }) => (
18-
<button
19-
type={'button' as any}
20-
className={[
21-
'border-2 p-1 rounded hover:disabled:opacity-50 hover:disabled:cursor-not-allowed transition-all',
22-
isActive
23-
? 'border-blue-500 text-blue-500'
24-
: 'border-black/40 dark:border-white/20',
25-
].join(' ')}
26-
{...props}
27-
>
28-
{children}
29-
</button>
18+
<button
19+
type={'button' as any}
20+
className={[
21+
'border-2 p-1 rounded hover:disabled:opacity-50 hover:disabled:cursor-not-allowed transition-all',
22+
isActive
23+
? 'border-blue-500 text-blue-500'
24+
: 'border-black/40 dark:border-white/20',
25+
].join(' ')}
26+
{...props}
27+
>
28+
{children}
29+
</button>
3030
);
3131

3232
const ArticleFooter = () => {
33-
const { pathname } = useRouter();
34-
const path = encodeURI(pathname);
35-
const qk = useQueryClient();
33+
const { pathname } = useRouter();
34+
const path = encodeURI(pathname);
35+
const qk = useQueryClient();
3636

37-
const [localStatus, setLocalStatus] = useLocalStorage<
38-
'liked' | 'disliked' | null
39-
>(path, null);
37+
const [localStatus, setLocalStatus] = useLocalStorage<
38+
'liked' | 'disliked' | null
39+
>(path, null);
4040

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

47-
const like = useMutation([path], {
48-
mutationFn: () => axios.post('/api/like', { path }),
49-
onSuccess() {
50-
if (!post) return;
51-
qk.setQueryData(['post', path], {
52-
data: {
53-
...post,
54-
likes: post.likes + 1,
55-
dislikes:
56-
localStatus == 'disliked' ? post.dislikes - 1 : post.dislikes,
47+
const like = useMutation([path], {
48+
mutationFn: () => axios.post('/api/like', { path }),
49+
onSuccess() {
50+
if (!post) return;
51+
qk.setQueryData(['post', path], {
52+
data: {
53+
...post,
54+
likes: post.likes + 1,
55+
dislikes:
56+
localStatus == 'disliked' ? post.dislikes - 1 : post.dislikes,
57+
},
58+
});
59+
setLocalStatus('liked');
5760
},
58-
});
59-
setLocalStatus('liked');
60-
},
61-
});
61+
});
6262

63-
const dislike = useMutation([path], {
64-
mutationFn: () => axios.post('/api/like', { path }),
65-
onSuccess() {
66-
if (!post) return;
67-
qk.setQueryData(['post', path], {
68-
data: {
69-
...post,
70-
dislikes: post.dislikes + 1,
71-
likes: localStatus == 'liked' ? post.likes - 1 : post.likes,
63+
const dislike = useMutation([path], {
64+
mutationFn: () => axios.post('/api/like', { path }),
65+
onSuccess() {
66+
if (!post) return;
67+
qk.setQueryData(['post', path], {
68+
data: {
69+
...post,
70+
dislikes: post.dislikes + 1,
71+
likes: localStatus == 'liked' ? post.likes - 1 : post.likes,
72+
},
73+
});
74+
setLocalStatus('disliked');
7275
},
73-
});
74-
setLocalStatus('disliked');
75-
},
76-
});
76+
});
7777

78-
const buttonsDisabled =
79-
!postLoaded || like.isLoading || dislike.isLoading || localStatus != null;
78+
const buttonsDisabled =
79+
!postLoaded || like.isLoading || dislike.isLoading || localStatus != null;
8080

81-
return (
82-
<>
83-
<div className="flex gap-2 mb-2">
84-
<div className="flex flex-col items-center w-8">
85-
<div className="p-1 border-2 border-transparent">
86-
<IconEye stroke={2} />
87-
</div>
88-
<span>{post?.views ?? 0}</span>
89-
</div>
90-
<div className="flex flex-col items-center w-8">
91-
<Button
92-
isActive={localStatus == 'liked'}
93-
disabled={buttonsDisabled}
94-
onClick={() => like.mutateAsync()}
95-
>
96-
<IconThumbUp stroke={2} />
97-
</Button>
98-
<span>{post?.likes ?? 0}</span>
99-
</div>
100-
<div className="flex flex-col items-center w-8">
101-
<Button
102-
isActive={localStatus == 'disliked'}
103-
disabled={buttonsDisabled}
104-
onClick={() => dislike.mutateAsync()}
105-
>
106-
<IconThumbDown stroke={2} />
107-
</Button>
108-
<span>{post?.dislikes ?? 0}</span>
109-
</div>
110-
</div>
111-
{/* <Giscus
112-
id="comments"
113-
repo="giscus/giscus-component"
114-
repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
115-
category="Announcements"
116-
categoryId="DIC_kwDOF1L2fM4B-hVS"
117-
mapping="specific"
118-
term="Welcome to @giscus/react component!"
119-
reactionsEnabled="1"
120-
emitMetadata="0"
121-
inputPosition="top"
122-
theme="light"
123-
lang="en"
124-
loading="lazy"
125-
/> */}
126-
</>
127-
);
81+
return (
82+
<>
83+
<div className="flex gap-2 mb-2">
84+
<div className="flex flex-col items-center w-8">
85+
<div className="p-1 border-2 border-transparent">
86+
<IconEye stroke={2} />
87+
</div>
88+
<span>{post?.views ?? 0}</span>
89+
</div>
90+
<div className="flex flex-col items-center w-8">
91+
<Button
92+
isActive={localStatus == 'liked'}
93+
disabled={buttonsDisabled}
94+
onClick={() => like.mutateAsync()}
95+
>
96+
<IconThumbUp stroke={2} />
97+
</Button>
98+
<span>{post?.likes ?? 0}</span>
99+
</div>
100+
<div className="flex flex-col items-center w-8">
101+
<Button
102+
isActive={localStatus == 'disliked'}
103+
disabled={buttonsDisabled}
104+
onClick={() => dislike.mutateAsync()}
105+
>
106+
<IconThumbDown stroke={2} />
107+
</Button>
108+
<span>{post?.dislikes ?? 0}</span>
109+
</div>
110+
</div>
111+
<Giscus
112+
id="comments"
113+
repo="ismoilovdevml/devops-journey"
114+
repoId="R_kgDOKEbY2g"
115+
category="General"
116+
categoryId="DIC_kwDOKEbY2s4Cczpf"
117+
mapping="pathname"
118+
term="Welcome to @giscus/react component!"
119+
reactionsEnabled="1"
120+
emitMetadata="0"
121+
inputPosition="top"
122+
theme="preferred_color_scheme"
123+
lang="uz"
124+
loading="lazy"
125+
/>
126+
</>
127+
);
128128
};
129129

130130
export default ArticleFooter;

0 commit comments

Comments
 (0)