auth checkpoint
auth dependecies not instaled in dev container
This commit is contained in:
dimitar committed
1 parent
7378d37b36
commit
42002f8e6f
50 files changed
+3680
-636
No files matched your search
@@ -0,0 +1,130 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { useComments, useCreateComment } from '../../../queries/comments';
|
||||
import { Button } from '../../ui/button';
|
||||
import { Textarea } from '../../ui/textarea';
|
||||
import { Card, CardContent } from '../../ui/card';
|
||||
import { format } from 'date-fns';
|
||||
import { mk } from 'date-fns/locale';
|
||||
|
||||
interface CommentSectionProps {
|
||||
articleId?: string;
|
||||
liveBlogId?: string;
|
||||
}
|
||||
|
||||
export function CommentSection({ articleId, liveBlogId }: CommentSectionProps) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
const [newComment, setNewComment] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const { data: commentsData, isLoading } = useComments({
|
||||
articleId,
|
||||
liveBlogId,
|
||||
limit: 50,
|
||||
});
|
||||
|
||||
const createCommentMutation = useCreateComment();
|
||||
|
||||
const comments = commentsData?.data || [];
|
||||
|
||||
const handleSubmitComment = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!newComment.trim() || !isAuthenticated) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await createCommentMutation.mutateAsync({
|
||||
content: newComment,
|
||||
articleId,
|
||||
liveBlogId,
|
||||
});
|
||||
setNewComment('');
|
||||
} catch (error) {
|
||||
console.error('Failed to post comment:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-12 pt-8 border-t">
|
||||
<h2 className="text-2xl font-bold mb-6">Коментари</h2>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<Card className="mb-8">
|
||||
<CardContent className="pt-6">
|
||||
<form onSubmit={handleSubmitComment}>
|
||||
<Textarea
|
||||
placeholder="Што мислите за овој напис?"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="min-h-[100px] mb-4"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!newComment.trim() || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Поставување...' : 'Постави коментар'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="mb-8">
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Најавете се за да можете да коментирате
|
||||
</p>
|
||||
<Button asChild>
|
||||
<a href="/auth">Најави се</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">Вчитување коментари...</p>
|
||||
</div>
|
||||
) : comments.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
Сè уште нема коментари. Бидете првиот што ќе коментира!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{comments.map((comment) => (
|
||||
<Card key={comment.id}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{comment.user?.username || 'Анонимен корисник'}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{format(new Date(comment.createdAt), 'dd MMMM yyyy, HH:mm', { locale: mk })}
|
||||
</div>
|
||||
</div>
|
||||
{comment.user?.role === 'admin' && (
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">
|
||||
Администратор
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap">{comment.content}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import { useAuth } from '../../../contexts/AuthContext';
|
||||
import { useReactionCounts, useUserReaction, useAddReaction } from '../../../queries/comments';
|
||||
import { Button } from '../../ui/button';
|
||||
import { ThumbsUp, ThumbsDown } from 'lucide-react';
|
||||
|
||||
interface ReactionButtonsProps {
|
||||
articleId?: string;
|
||||
liveBlogId?: string;
|
||||
commentId?: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export function ReactionButtons({
|
||||
articleId,
|
||||
liveBlogId,
|
||||
commentId,
|
||||
compact = false
|
||||
}: ReactionButtonsProps) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
const { data: counts } = useReactionCounts(articleId, liveBlogId, commentId);
|
||||
const { data: userReaction } = useUserReaction(articleId, liveBlogId, commentId);
|
||||
const addReactionMutation = useAddReaction();
|
||||
|
||||
const userReactionType = userReaction?.type;
|
||||
|
||||
const handleReaction = async (type: 'like' | 'dislike') => {
|
||||
if (!isAuthenticated) {
|
||||
window.location.href = '/auth';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await addReactionMutation.mutateAsync({
|
||||
type,
|
||||
articleId,
|
||||
liveBlogId,
|
||||
commentId,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to add reaction:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const likes = counts?.likes || 0;
|
||||
const dislikes = counts?.dislikes || 0;
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleReaction('like')}
|
||||
className={`h-8 px-2 ${userReactionType === 'like' ? 'text-primary' : ''}`}
|
||||
>
|
||||
<ThumbsUp className="w-4 h-4 mr-1" />
|
||||
{likes > 0 && <span>{likes}</span>}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleReaction('dislike')}
|
||||
className={`h-8 px-2 ${userReactionType === 'dislike' ? 'text-destructive' : ''}`}
|
||||
>
|
||||
<ThumbsDown className="w-4 h-4 mr-1" />
|
||||
{dislikes > 0 && <span>{dislikes}</span>}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={userReactionType === 'like' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => handleReaction('like')}
|
||||
className="gap-2"
|
||||
>
|
||||
<ThumbsUp className="w-4 h-4" />
|
||||
<span>Допаѓа ми</span>
|
||||
{likes > 0 && (
|
||||
<span className="ml-1 bg-primary/20 px-2 py-0.5 rounded-full text-xs">
|
||||
{likes}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={userReactionType === 'dislike' ? 'destructive' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => handleReaction('dislike')}
|
||||
className="gap-2"
|
||||
>
|
||||
<ThumbsDown className="w-4 h-4" />
|
||||
<span>Не ми се допаѓа</span>
|
||||
{dislikes > 0 && (
|
||||
<span className="ml-1 bg-destructive/20 px-2 py-0.5 rounded-full text-xs">
|
||||
{dislikes}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user