Add Prayer Times, Dhikr counter, Quran tracker with mobile UI overhaul
- Prayer times page: arc progress ring, next-prayer countdown, clean prayer list - Dhikr counter: SVG ring with glow, 3-phase sequence (SubhanAllah/Alhamdulillah/AllahuAkbar), streak tracking - Daily Quran reading tracker API routes (GET/POST) - Bottom nav updated: Prayer + Dhikr tabs, Repeat2 icon for dhikr, Moon for prayer - Home page redirects to /prayer as primary entry point - Dockerfile: openssl added to builder stage, explicit prisma schema path fixes build - Schema: dhikrStreak, quranStreak on User; DhikrSession and QuranReading models - Stub wallet top-up checkout to fix TypeScript build error Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
FalahMobile
@@ -0,0 +1,177 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useAuth } from '@/lib/AuthContext'
|
||||
import { ArrowLeft, ShieldCheck, ShieldAlert, Send, MessageCircle } from 'lucide-react'
|
||||
|
||||
interface Thread {
|
||||
id: string
|
||||
title: string
|
||||
content: string
|
||||
author: { id: string; name: string }
|
||||
category: { id: string; name: string }
|
||||
shariahStatus: string
|
||||
shariahFlags: string | null
|
||||
pinned: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface Post {
|
||||
id: string
|
||||
content: string
|
||||
author: { id: string; name: string }
|
||||
shariahStatus: string
|
||||
shariahFlags: string | null
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export default function ThreadDetailPage() {
|
||||
const { threadId } = useParams<{ threadId: string }>()
|
||||
const router = useRouter()
|
||||
const { token, user } = useAuth()
|
||||
const [thread, setThread] = useState<Thread | null>(null)
|
||||
const [posts, setPosts] = useState<Post[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [reply, setReply] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [replyError, setReplyError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!threadId) return
|
||||
setLoading(true)
|
||||
Promise.all([
|
||||
fetch(`/api/forum/threads?id=${threadId}`).then(r => r.json()),
|
||||
fetch(`/api/forum/posts?threadId=${threadId}`).then(r => r.json()),
|
||||
])
|
||||
.then(([threadData, postsData]) => {
|
||||
const t = threadData.threads?.[0] || threadData.thread
|
||||
if (!t) { setError('Thread not found'); return }
|
||||
setThread(t)
|
||||
setPosts(postsData.posts || [])
|
||||
})
|
||||
.catch(() => setError('Failed to load thread'))
|
||||
.finally(() => setLoading(false))
|
||||
}, [threadId])
|
||||
|
||||
const handleReply = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!token || !reply.trim()) return
|
||||
setSubmitting(true)
|
||||
setReplyError(null)
|
||||
const res = await fetch('/api/forum/posts', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ threadId, content: reply.trim() }),
|
||||
})
|
||||
const data = await res.json()
|
||||
setSubmitting(false)
|
||||
if (!res.ok) { setReplyError(data.error || 'Failed to post reply'); return }
|
||||
setPosts(prev => [...prev, data.post])
|
||||
setReply('')
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4 sm:p-6">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-4 bg-gray-800 rounded w-24" />
|
||||
<div className="h-8 bg-gray-800 rounded w-3/4" />
|
||||
<div className="h-4 bg-gray-800 rounded w-1/3" />
|
||||
<div className="h-32 bg-gray-800 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !thread) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4 sm:p-6">
|
||||
<button onClick={() => router.push('/forum')} className="flex items-center gap-1 text-[#D4AF37] hover:underline mb-4 text-sm">
|
||||
<ArrowLeft size={16} /> Back to Forum
|
||||
</button>
|
||||
<div className="bg-[#111118] border border-gray-800 rounded-lg p-8 text-center">
|
||||
<MessageCircle size={40} className="mx-auto text-gray-600 mb-3" />
|
||||
<p className="text-gray-400">{error || 'Thread not found'}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-6">
|
||||
<button onClick={() => router.push('/forum')} className="flex items-center gap-1 text-[#D4AF37] hover:underline text-sm">
|
||||
<ArrowLeft size={16} /> Back to Forum
|
||||
</button>
|
||||
|
||||
<div className="bg-[#111118] border border-gray-800 rounded-lg p-5 space-y-3">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="bg-[#D4AF37]/10 text-[#D4AF37] text-xs font-semibold px-2 py-0.5 rounded">{thread.category.name}</span>
|
||||
{thread.shariahStatus === 'approved' ? (
|
||||
<span className="flex items-center gap-1 text-green-500 text-xs"><ShieldCheck size={14} /> Shariah Approved</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1 text-yellow-500 text-xs"><ShieldAlert size={14} /> {thread.shariahStatus === 'pending' ? 'Pending Review' : 'Flagged'}</span>
|
||||
)}
|
||||
</div>
|
||||
<h1 className="text-xl font-bold">{thread.title}</h1>
|
||||
<div className="text-sm text-gray-500">
|
||||
By <span className="text-gray-300">{thread.author.name}</span> · {new Date(thread.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 whitespace-pre-wrap leading-relaxed">{thread.content}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||
<MessageCircle size={18} className="text-[#D4AF37]" />
|
||||
Replies ({posts.length})
|
||||
</h2>
|
||||
|
||||
{posts.length === 0 ? (
|
||||
<div className="bg-[#111118] border border-gray-800 rounded-lg p-6 text-center">
|
||||
<p className="text-gray-500 text-sm">No replies yet. Be the first to respond.</p>
|
||||
</div>
|
||||
) : (
|
||||
posts.map(post => (
|
||||
<div key={post.id} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-semibold">{post.author.name}</span>
|
||||
<span className="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 whitespace-pre-wrap">{post.content}</p>
|
||||
{post.shariahStatus !== 'approved' && (
|
||||
<div className="flex items-center gap-1 text-yellow-500 text-xs pt-1">
|
||||
<ShieldAlert size={12} /> Pending shariah review
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{token ? (
|
||||
<form onSubmit={handleReply} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-3">
|
||||
<textarea
|
||||
placeholder="Write your reply..."
|
||||
value={reply}
|
||||
onChange={e => setReply(e.target.value)}
|
||||
required
|
||||
rows={3}
|
||||
className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none resize-none"
|
||||
/>
|
||||
{replyError && <p className="text-red-500 text-xs">{replyError}</p>}
|
||||
<button type="submit" disabled={submitting || !reply.trim()}
|
||||
className="flex items-center gap-1 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2 rounded text-sm font-semibold disabled:opacity-50 hover:bg-[#C9A84C] transition">
|
||||
<Send size={16} /> {submitting ? 'Posting...' : 'Post Reply'}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="bg-[#111118] border border-gray-800 rounded-lg p-4 text-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
<a href="/login" className="text-[#D4AF37] hover:underline font-semibold">Sign in</a> to reply to this thread.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user