實作個人收藏、個人活動紀錄
This commit is contained in:
496
components/reviews/review-system-fixed.tsx
Normal file
496
components/reviews/review-system-fixed.tsx
Normal file
@@ -0,0 +1,496 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Star, MessageSquare, ThumbsUp, ThumbsDown, Edit, Trash2, MoreHorizontal } from "lucide-react"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
|
||||
interface Review {
|
||||
id: string
|
||||
userId: string
|
||||
userName: string
|
||||
userAvatar?: string
|
||||
userDepartment: string
|
||||
rating: number
|
||||
comment: string
|
||||
createdAt: string
|
||||
updatedAt?: string
|
||||
helpful: number
|
||||
notHelpful: number
|
||||
userHelpfulVotes: string[] // user IDs who voted helpful
|
||||
userNotHelpfulVotes: string[] // user IDs who voted not helpful
|
||||
}
|
||||
|
||||
interface ReviewSystemProps {
|
||||
appId: string
|
||||
appName: string
|
||||
currentRating: number
|
||||
onRatingUpdate: (newRating: number, reviewCount: number) => void
|
||||
}
|
||||
|
||||
export function ReviewSystem({ appId, appName, currentRating, onRatingUpdate }: ReviewSystemProps) {
|
||||
const { user, updateAppRating } = useAuth()
|
||||
|
||||
// Load reviews from database
|
||||
const [reviews, setReviews] = useState<Review[]>([])
|
||||
const [isLoadingReviews, setIsLoadingReviews] = useState(true)
|
||||
|
||||
const [showReviewForm, setShowReviewForm] = useState(false)
|
||||
const [newRating, setNewRating] = useState(5)
|
||||
const [newComment, setNewComment] = useState("")
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [editingReview, setEditingReview] = useState<string | null>(null)
|
||||
const [sortBy, setSortBy] = useState<"newest" | "oldest" | "helpful">("newest")
|
||||
|
||||
// Load reviews from database
|
||||
const loadReviews = async () => {
|
||||
try {
|
||||
setIsLoadingReviews(true)
|
||||
const response = await fetch(`/api/apps/${appId}/reviews?limit=100`) // 載入更多評論
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
// Transform database format to component format
|
||||
const transformedReviews = data.data.reviews.map((review: any) => ({
|
||||
id: review.id,
|
||||
userId: review.user_id || 'unknown',
|
||||
userName: review.userName || review.user_name || '未知用戶',
|
||||
userAvatar: review.userAvatar || review.user_avatar,
|
||||
userDepartment: review.userDepartment || review.user_department || '未知部門',
|
||||
rating: review.rating,
|
||||
comment: review.review || review.comment || '',
|
||||
createdAt: review.ratedAt || review.rated_at || new Date().toISOString(),
|
||||
helpful: 0,
|
||||
notHelpful: 0,
|
||||
userHelpfulVotes: [],
|
||||
userNotHelpfulVotes: [],
|
||||
}))
|
||||
setReviews(transformedReviews)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('載入評論錯誤:', error)
|
||||
} finally {
|
||||
setIsLoadingReviews(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Load reviews on component mount
|
||||
useEffect(() => {
|
||||
loadReviews()
|
||||
}, [appId])
|
||||
|
||||
const userReview = reviews.find((review) => review.userId === user?.id)
|
||||
const canReview = user && !userReview
|
||||
|
||||
// Update rating when reviews change
|
||||
useEffect(() => {
|
||||
if (reviews.length > 0) {
|
||||
const avgRating = reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length
|
||||
const newAvgRating = Number(avgRating.toFixed(1))
|
||||
updateAppRating(appId, newAvgRating)
|
||||
onRatingUpdate(newAvgRating, reviews.length)
|
||||
} else {
|
||||
updateAppRating(appId, 0)
|
||||
onRatingUpdate(0, 0)
|
||||
}
|
||||
}, [reviews, appId, updateAppRating, onRatingUpdate])
|
||||
|
||||
const handleSubmitReview = async () => {
|
||||
if (!user || !newComment.trim()) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/apps/${appId}/reviews`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userId: user.id,
|
||||
rating: newRating,
|
||||
comment: newComment.trim(),
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
// Reload reviews from database
|
||||
await loadReviews()
|
||||
setNewComment("")
|
||||
setNewRating(5)
|
||||
setShowReviewForm(false)
|
||||
} else {
|
||||
console.error('提交評論失敗:', data.error)
|
||||
alert('提交評論失敗，請稍後再試')
|
||||
}
|
||||
} else {
|
||||
console.error('提交評論失敗:', response.statusText)
|
||||
alert('提交評論失敗，請稍後再試')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交評論錯誤:', error)
|
||||
alert('提交評論時發生錯誤，請稍後再試')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditReview = async (reviewId: string) => {
|
||||
if (!user || !newComment.trim()) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/apps/${appId}/reviews`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userId: user.id,
|
||||
rating: newRating,
|
||||
comment: newComment.trim(),
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
// Reload reviews from database
|
||||
await loadReviews()
|
||||
setEditingReview(null)
|
||||
setNewComment("")
|
||||
setNewRating(5)
|
||||
} else {
|
||||
console.error('更新評論失敗:', data.error)
|
||||
alert('更新評論失敗，請稍後再試')
|
||||
}
|
||||
} else {
|
||||
console.error('更新評論失敗:', response.statusText)
|
||||
alert('更新評論失敗，請稍後再試')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新評論錯誤:', error)
|
||||
alert('更新評論時發生錯誤，請稍後再試')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteReview = async (reviewId: string) => {
|
||||
// For now, we'll just reload reviews since we don't have a delete API yet
|
||||
// In a real implementation, you would call a DELETE API endpoint
|
||||
await loadReviews()
|
||||
}
|
||||
|
||||
const handleHelpfulVote = (reviewId: string, isHelpful: boolean) => {
|
||||
if (!user) return
|
||||
|
||||
// For now, we'll just reload reviews since we don't have a helpful vote API yet
|
||||
// In a real implementation, you would call an API endpoint to handle helpful votes
|
||||
loadReviews()
|
||||
}
|
||||
|
||||
const startEdit = (review: Review) => {
|
||||
setEditingReview(review.id)
|
||||
setNewRating(review.rating)
|
||||
setNewComment(review.comment)
|
||||
setShowReviewForm(true)
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingReview(null)
|
||||
setNewComment("")
|
||||
setNewRating(5)
|
||||
setShowReviewForm(false)
|
||||
}
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
return name.split("").slice(0, 2).join("").toUpperCase()
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("zh-TW", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
const renderStars = (rating: number, interactive = false, onRate?: (rating: number) => void) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={`w-4 h-4 ${
|
||||
star <= rating ? "text-yellow-400 fill-current" : "text-gray-300"
|
||||
} ${interactive ? "cursor-pointer hover:text-yellow-400" : ""}`}
|
||||
onClick={() => interactive && onRate && onRate(star)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const sortedReviews = [...reviews].sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case "oldest":
|
||||
return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
|
||||
case "helpful":
|
||||
return b.helpful - a.helpful
|
||||
case "newest":
|
||||
default:
|
||||
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Review Summary */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<MessageSquare className="w-5 h-5" />
|
||||
<span>用戶評價</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{isLoadingReviews ? (
|
||||
"載入評價中..."
|
||||
) : reviews.length > 0 ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{renderStars(Math.round(currentRating))}
|
||||
<span className="font-semibold">{Number(currentRating).toFixed(1)}</span>
|
||||
<span className="text-gray-500">({reviews.length} 則評價)</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
"尚無評價，成為第一個評價的用戶！"
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Rating Distribution */}
|
||||
{reviews.length > 0 && (
|
||||
<div className="space-y-2 mb-6">
|
||||
{[5, 4, 3, 2, 1].map((rating) => {
|
||||
const count = reviews.filter((r) => r.rating === rating).length
|
||||
const percentage = (count / reviews.length) * 100
|
||||
return (
|
||||
<div key={rating} className="flex items-center space-x-3">
|
||||
<div className="flex items-center space-x-1 w-12">
|
||||
<span className="text-sm">{rating}</span>
|
||||
<Star className="w-3 h-3 text-yellow-400 fill-current" />
|
||||
</div>
|
||||
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-yellow-400 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500 w-8">{count}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Review Button */}
|
||||
{canReview && (
|
||||
<Button
|
||||
onClick={() => setShowReviewForm(true)}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
|
||||
>
|
||||
<Star className="w-4 h-4 mr-2" />
|
||||
撰寫評價
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{userReview && (
|
||||
<Alert>
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
<AlertDescription>您已經評價過此應用。您可以編輯或刪除您的評價。</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Review Form */}
|
||||
<Dialog open={showReviewForm} onOpenChange={setShowReviewForm}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingReview ? "編輯評價" : "撰寫評價"}</DialogTitle>
|
||||
<DialogDescription>分享您對 {appName} 的使用體驗</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">評分</label>
|
||||
{renderStars(newRating, true, setNewRating)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-2 block">評價內容</label>
|
||||
<Textarea
|
||||
placeholder="請分享您的使用體驗..."
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
rows={4}
|
||||
maxLength={500}
|
||||
/>
|
||||
<div className="text-xs text-gray-500 mt-1">{newComment.length}/500 字元</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<Button
|
||||
onClick={editingReview ? () => handleEditReview(editingReview) : handleSubmitReview}
|
||||
disabled={isSubmitting || !newComment.trim()}
|
||||
className="flex-1"
|
||||
>
|
||||
{isSubmitting ? "提交中..." : editingReview ? "更新評價" : "提交評價"}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={cancelEdit}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Reviews List */}
|
||||
{isLoadingReviews ? (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center text-gray-500">載入評價中...</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : reviews.length > 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>所有評價 ({reviews.length})</CardTitle>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-gray-500">排序：</span>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as any)}
|
||||
className="text-sm border rounded px-2 py-1"
|
||||
>
|
||||
<option value="newest">最新</option>
|
||||
<option value="oldest">最舊</option>
|
||||
<option value="helpful">最有幫助</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
{sortedReviews.map((review, index) => (
|
||||
<div key={review.id}>
|
||||
<div className="flex items-start space-x-4">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarImage src={review.userAvatar || "/placeholder.svg"} alt={review.userName} />
|
||||
<AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||
{getInitials(review.userName)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="font-medium">{review.userName}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{review.userDepartment}
|
||||
</Badge>
|
||||
{renderStars(review.rating)}
|
||||
</div>
|
||||
|
||||
{user?.id === review.userId && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => startEdit(review)}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
編輯
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDeleteReview(review.id)} className="text-red-600">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
刪除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700">{review.comment}</p>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>
|
||||
{formatDate(review.createdAt)}
|
||||
{review.updatedAt && " (已編輯)"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{user && user.id !== review.userId && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleHelpfulVote(review.id, true)}
|
||||
className={`text-xs ${
|
||||
review.userHelpfulVotes.includes(user.id)
|
||||
? "text-green-600 bg-green-50"
|
||||
: "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<ThumbsUp className="w-3 h-3 mr-1" />
|
||||
有幫助 ({review.helpful})
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleHelpfulVote(review.id, false)}
|
||||
className={`text-xs ${
|
||||
review.userNotHelpfulVotes.includes(user.id)
|
||||
? "text-red-600 bg-red-50"
|
||||
: "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
<ThumbsDown className="w-3 h-3 mr-1" />
|
||||
沒幫助 ({review.notHelpful})
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{index < sortedReviews.length - 1 && <Separator className="mt-6" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user