added attchments
All checks were successful
CI/CD Pipeline / test (push) Successful in 3s
CI/CD Pipeline / deploy (push) Successful in 24s

This commit is contained in:
2026-01-28 19:34:25 +01:00
parent 2409feb06f
commit c33cde6f04
32 changed files with 4618 additions and 213 deletions

View File

@@ -1,7 +1,15 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { Button, Container, Form } from 'react-bootstrap'
import { Button, Container, Form, Modal } from 'react-bootstrap'
import { useParams } from 'react-router-dom'
import { createPost, getThread, listPostsByThread, updateThreadSolved } from '../api/client'
import {
createPost,
getThread,
listPostsByThread,
updateThreadSolved,
uploadAttachment,
listAttachmentExtensionsPublic,
previewBbcode,
} from '../api/client'
import { useAuth } from '../context/AuthContext'
import { useTranslation } from 'react-i18next'
@@ -15,6 +23,25 @@ export default function ThreadView() {
const [body, setBody] = useState('')
const [saving, setSaving] = useState(false)
const [solving, setSolving] = useState(false)
const [threadFiles, setThreadFiles] = useState([])
const [threadUploading, setThreadUploading] = useState(false)
const [replyFiles, setReplyFiles] = useState([])
const [replyUploading, setReplyUploading] = useState(false)
const [allowedAttachmentExtensions, setAllowedAttachmentExtensions] = useState([])
const [attachmentValidationError, setAttachmentValidationError] = useState('')
const [replyDropActive, setReplyDropActive] = useState(false)
const [showPreview, setShowPreview] = useState(false)
const [previewHtml, setPreviewHtml] = useState('')
const [previewLoading, setPreviewLoading] = useState(false)
const [previewUrls, setPreviewUrls] = useState([])
const [replyAttachmentTab, setReplyAttachmentTab] = useState('options')
const [replyAttachmentOptions, setReplyAttachmentOptions] = useState({
disableBbcode: false,
disableSmilies: false,
disableAutoUrls: false,
attachSignature: true,
notifyReplies: false,
})
const { t } = useTranslation()
const replyRef = useRef(null)
@@ -29,6 +56,16 @@ export default function ThreadView() {
.finally(() => setLoading(false))
}, [id])
useEffect(() => {
listAttachmentExtensionsPublic()
.then((data) => {
if (Array.isArray(data)) {
setAllowedAttachmentExtensions(data.map((item) => String(item).toLowerCase()))
}
})
.catch(() => {})
}, [])
useEffect(() => {
if (!thread && posts.length === 0) return
const hash = window.location.hash
@@ -46,13 +83,21 @@ export default function ThreadView() {
setSaving(true)
setError('')
try {
await createPost({ body, threadId: id })
const created = await createPost({ body, threadId: id })
if (replyFiles.length > 0 && created?.id) {
setReplyUploading(true)
for (const entry of replyFiles) {
await uploadAttachment({ postId: created.id, file: entry.file })
}
}
setBody('')
setReplyFiles([])
const updated = await listPostsByThread(id)
setPosts(updated)
} catch (err) {
setError(err.message)
} finally {
setReplyUploading(false)
setSaving(false)
}
}
@@ -67,11 +112,369 @@ export default function ThreadView() {
const year = String(date.getFullYear())
return `${day}.${month}.${year}`
}
const formatBytes = (bytes) => {
if (!bytes && bytes !== 0) return ''
if (bytes < 1024) return `${bytes} B`
const kb = bytes / 1024
if (kb < 1024) return `${kb.toFixed(1)} KB`
const mb = kb / 1024
return `${mb.toFixed(1)} MB`
}
const handleInlineInsert = (entry) => {
const marker = `[attachment]${entry.file.name}[/attachment]`
setBody((prev) => (prev ? `${prev}\n${marker}` : marker))
}
const clearPreviewUrls = () => {
previewUrls.forEach((url) => URL.revokeObjectURL(url))
setPreviewUrls([])
}
const buildPreviewBody = (rawBody, entries) => {
if (!entries || entries.length === 0) {
return { body: rawBody, urls: [] }
}
const urls = []
const map = new Map()
entries.forEach((entry) => {
const file = entry.file
if (!file) return
const url = URL.createObjectURL(file)
urls.push(url)
map.set(String(file.name || '').toLowerCase(), { url, mime: file.type || '' })
})
const replaced = rawBody.replace(/\[attachment\](.+?)\[\/attachment\]/gi, (match, name) => {
const key = String(name || '').trim().toLowerCase()
if (!map.has(key)) return match
const { url, mime } = map.get(key)
if (mime.startsWith('image/')) {
return `[img]${url}[/img]`
}
return `[url=${url}]${name}[/url]`
})
return { body: replaced, urls }
}
const handlePreview = async () => {
setPreviewLoading(true)
setError('')
try {
clearPreviewUrls()
const { body: previewBody, urls } = buildPreviewBody(body || '', replyFiles)
const result = await previewBbcode(previewBody || '')
setPreviewHtml(result?.html || '')
setShowPreview(true)
setPreviewUrls(urls)
} catch (err) {
setError(err.message)
} finally {
setPreviewLoading(false)
}
}
const applyReplyFiles = (files) => {
const fileList = Array.from(files || [])
const allowed = allowedAttachmentExtensions
const rejected = []
const accepted = fileList.filter((file) => {
const ext = file.name.split('.').pop()?.toLowerCase() || ''
if (!ext || (allowed.length > 0 && !allowed.includes(ext))) {
rejected.push(file.name)
return false
}
return true
})
if (rejected.length > 0) {
setAttachmentValidationError(
t('attachment.invalid_extensions', { names: rejected.join(', ') })
)
} else {
setAttachmentValidationError('')
}
setReplyFiles(
accepted.map((file) => ({
id: `${file.name}-${file.lastModified}`,
file,
comment: '',
}))
)
setReplyAttachmentTab('attachments')
}
const appendReplyFiles = (files) => {
const fileList = Array.from(files || [])
const allowed = allowedAttachmentExtensions
const rejected = []
const accepted = fileList.filter((file) => {
const ext = file.name.split('.').pop()?.toLowerCase() || ''
if (!ext || (allowed.length > 0 && !allowed.includes(ext))) {
rejected.push(file.name)
return false
}
return true
})
if (rejected.length > 0) {
setAttachmentValidationError(
t('attachment.invalid_extensions', { names: rejected.join(', ') })
)
} else if (accepted.length > 0) {
setAttachmentValidationError('')
}
if (accepted.length === 0) return
setReplyFiles((prev) => [
...prev,
...accepted.map((file) => ({
id: `${file.name}-${file.lastModified}`,
file,
comment: '',
})),
])
setReplyAttachmentTab('attachments')
}
const handleReplyPaste = (event) => {
const items = Array.from(event.clipboardData?.items || [])
if (items.length === 0) return
const imageItems = items.filter((item) => item.type?.startsWith('image/'))
if (imageItems.length === 0) return
event.preventDefault()
const files = imageItems
.map((item) => item.getAsFile())
.filter(Boolean)
.map((file) => {
const ext = file.type?.split('/')[1] || 'png'
const name = `pasted-${Date.now()}-${Math.floor(Math.random() * 1000)}.${ext}`
return new File([file], name, { type: file.type })
})
appendReplyFiles(files)
if (files.length > 0) {
const marker = `[attachment]${files[0].name}[/attachment]`
setBody((prev) => (prev ? `${prev}\n${marker}` : marker))
}
}
const renderAttachmentFooter = () => (
<div className="bb-attachment-panel">
<div className="bb-attachment-tabs">
<button
type="button"
className={`bb-attachment-tab ${replyAttachmentTab === 'options' ? 'is-active' : ''}`}
onClick={() => setReplyAttachmentTab('options')}
>
{t('attachment.tab_options')}
</button>
<button
type="button"
className={`bb-attachment-tab ${replyAttachmentTab === 'attachments' ? 'is-active' : ''}`}
onClick={() => setReplyAttachmentTab('attachments')}
>
{t('attachment.tab_attachments')}
</button>
</div>
<div className="bb-attachment-body">
{replyAttachmentTab === 'options' && (
<div className="bb-attachment-options">
<Form.Check
type="checkbox"
id="bb-reply-option-disable-bbcode"
label={t('attachment.option_disable_bbcode')}
checked={replyAttachmentOptions.disableBbcode}
onChange={(event) =>
setReplyAttachmentOptions((prev) => ({
...prev,
disableBbcode: event.target.checked,
}))
}
/>
<Form.Check
type="checkbox"
id="bb-reply-option-disable-smilies"
label={t('attachment.option_disable_smilies')}
checked={replyAttachmentOptions.disableSmilies}
onChange={(event) =>
setReplyAttachmentOptions((prev) => ({
...prev,
disableSmilies: event.target.checked,
}))
}
/>
<Form.Check
type="checkbox"
id="bb-reply-option-disable-auto-urls"
label={t('attachment.option_disable_auto_urls')}
checked={replyAttachmentOptions.disableAutoUrls}
onChange={(event) =>
setReplyAttachmentOptions((prev) => ({
...prev,
disableAutoUrls: event.target.checked,
}))
}
/>
<Form.Check
type="checkbox"
id="bb-reply-option-attach-signature"
label={t('attachment.option_attach_signature')}
checked={replyAttachmentOptions.attachSignature}
onChange={(event) =>
setReplyAttachmentOptions((prev) => ({
...prev,
attachSignature: event.target.checked,
}))
}
/>
<Form.Check
type="checkbox"
id="bb-reply-option-notify-replies"
label={t('attachment.option_notify_replies')}
checked={replyAttachmentOptions.notifyReplies}
onChange={(event) =>
setReplyAttachmentOptions((prev) => ({
...prev,
notifyReplies: event.target.checked,
}))
}
/>
</div>
)}
{replyAttachmentTab === 'attachments' && (
<>
<p className="bb-muted mb-2">
{t('attachment.hint')}
</p>
<p className="bb-muted mb-3">
{t('attachment.max_size', { size: '25 MB' })}
</p>
<div className="bb-attachment-actions">
<Button
type="button"
size="sm"
variant="outline-secondary"
onClick={() => document.getElementById('bb-reply-attachment-input')?.click()}
>
{t('attachment.add_files')}
</Button>
</div>
{attachmentValidationError && (
<p className="text-danger mb-2">{attachmentValidationError}</p>
)}
<table className="table bb-attachment-table">
<thead className="tr-header">
<tr>
<th scope="col" className="text-start">{t('attachment.filename')}</th>
<th scope="col" className="text-start">{t('attachment.file_comment')}</th>
<th scope="col" className="text-start">{t('attachment.size')}</th>
<th scope="col" className="text-start">{t('attachment.status')}</th>
<th scope="col" className="text-start">{t('attachment.actions')}</th>
</tr>
</thead>
<tbody>
{replyFiles.length === 0 && (
<tr>
<td colSpan={5} className="bb-attachment-empty">
{t('attachment.empty')}
</td>
</tr>
)}
{replyFiles.map((entry) => (
<tr key={entry.id} className="bb-attachment-row">
<td className="bb-attachment-name text-start" style={{ color: 'var(--bb-accent)' }}>
{entry.file.name}
</td>
<td className="bb-attachment-cell-comment">
<Form.Control
className="bb-attachment-comment"
value={entry.comment}
onChange={(event) =>
setReplyFiles((prev) =>
prev.map((item) =>
item.id === entry.id
? { ...item, comment: event.target.value }
: item
)
)
}
placeholder={t('attachment.file_comment_placeholder')}
/>
</td>
<td className="bb-attachment-size text-start" style={{ color: 'var(--bb-accent)' }}>
{formatBytes(entry.file.size)}
</td>
<td className="bb-attachment-status text-center">
<i className="bi bi-check-circle-fill text-success" aria-hidden="true" />
</td>
<td>
<div className="bb-attachment-row-actions">
<button
type="button"
className="bb-attachment-action"
onClick={() => handleInlineInsert(entry)}
title={t('attachment.place_inline')}
aria-label={t('attachment.place_inline')}
>
<i className="bi bi-paperclip" aria-hidden="true" />
</button>
<button
type="button"
className="bb-attachment-action"
onClick={() =>
setReplyFiles((prev) =>
prev.filter((item) => item.id !== entry.id)
)
}
title={t('attachment.delete_file')}
aria-label={t('attachment.delete_file')}
>
<i className="bi bi-trash" aria-hidden="true" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</>
)}
</div>
</div>
)
const renderAttachments = (attachments) => {
if (!attachments || attachments.length === 0) return null
return (
<div className="bb-attachment-list">
{attachments.map((attachment) => (
<a
key={attachment.id}
href={attachment.download_url}
className="bb-attachment-item"
download
>
<i className="bi bi-paperclip" aria-hidden="true" />
<span className="bb-attachment-name">{attachment.original_name}</span>
<span className="bb-attachment-meta">
{attachment.mime_type}
{attachment.size_bytes ? ` · ${formatBytes(attachment.size_bytes)}` : ''}
</span>
</a>
))}
</div>
)
}
const allPosts = useMemo(() => {
if (!thread) return posts
const rootPost = {
id: `thread-${thread.id}`,
body: thread.body,
body_html: thread.body_html,
created_at: thread.created_at,
user_id: thread.user_id,
user_name: thread.user_name,
@@ -85,6 +488,7 @@ export default function ThreadView() {
user_rank_badge_type: thread.user_rank_badge_type,
user_rank_badge_text: thread.user_rank_badge_text,
user_rank_badge_url: thread.user_rank_badge_url,
attachments: thread.attachments || [],
isRoot: true,
}
return [rootPost, ...posts]
@@ -98,6 +502,10 @@ export default function ThreadView() {
&& thread
&& (Number(thread.user_id) === Number(userId) || isAdmin)
const canUploadThread = token
&& thread
&& (Number(thread.user_id) === Number(userId) || isAdmin)
const handleToggleSolved = async () => {
if (!thread || solving) return
setSolving(true)
@@ -112,6 +520,25 @@ export default function ThreadView() {
}
}
const handleThreadUpload = async () => {
if (!thread || threadFiles.length === 0 || threadUploading) return
setThreadUploading(true)
setError('')
try {
for (const file of threadFiles) {
await uploadAttachment({ threadId: thread.id, file })
}
setThreadFiles([])
const [threadData, postData] = await Promise.all([getThread(id), listPostsByThread(id)])
setThread(threadData)
setPosts(postData)
} catch (err) {
setError(err.message)
} finally {
setThreadUploading(false)
}
}
const totalPosts = allPosts.length
return (
@@ -175,6 +602,7 @@ export default function ThreadView() {
</div>
</div>
<div className="bb-posts">
{allPosts.map((post, index) => {
const authorName = post.author?.username
@@ -297,7 +725,11 @@ export default function ThreadView() {
)}
</div>
</div>
<div className="bb-post-body">{post.body}</div>
<div
className="bb-post-body"
dangerouslySetInnerHTML={{ __html: post.body_html || post.body }}
/>
{renderAttachments(post.attachments)}
<div className="bb-post-footer">
<div className="bb-post-actions">
<a href="#top" className="bb-post-action bb-post-action--round" aria-label={t('portal.portal')}>
@@ -325,19 +757,101 @@ export default function ThreadView() {
placeholder={t('form.reply_placeholder')}
value={body}
onChange={(event) => setBody(event.target.value)}
onPaste={handleReplyPaste}
disabled={!token || saving}
required
/>
</Form.Group>
<Form.Control
id="bb-reply-attachment-input"
type="file"
multiple
className="bb-attachment-input"
disabled={!token || saving || replyUploading}
onChange={(event) => {
applyReplyFiles(event.target.files)
event.target.value = ''
}}
/>
<div
className={`bb-attachment-drop ${replyDropActive ? 'is-dragover' : ''}`}
role="button"
tabIndex={0}
onClick={() => document.getElementById('bb-reply-attachment-input')?.click()}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
document.getElementById('bb-reply-attachment-input')?.click()
}
}}
onDragOver={(event) => {
event.preventDefault()
setReplyDropActive(true)
}}
onDragLeave={() => setReplyDropActive(false)}
onDrop={(event) => {
event.preventDefault()
setReplyDropActive(false)
applyReplyFiles(event.dataTransfer.files)
}}
>
<span>
{t('attachment.drop_hint')}{' '}
<button
type="button"
className="bb-attachment-drop-link"
onClick={(event) => {
event.stopPropagation()
document.getElementById('bb-reply-attachment-input')?.click()
}}
>
{t('attachment.drop_browse')}
</button>
</span>
</div>
{renderAttachmentFooter()}
<div className="bb-thread-reply-actions">
<Button type="submit" className="bb-accent-button" disabled={!token || saving}>
{saving ? t('form.posting') : t('form.post_reply')}
</Button>
<div className="d-flex gap-2 justify-content-end">
<Button
type="button"
variant="outline-secondary"
onClick={handlePreview}
disabled={!token || saving || replyUploading || previewLoading}
>
{t('form.preview')}
</Button>
<Button
type="submit"
className="bb-accent-button"
disabled={!token || saving || replyUploading}
>
{saving || replyUploading ? t('form.posting') : t('form.post_reply')}
</Button>
</div>
</div>
</Form>
</div>
</div>
)}
<Modal
show={showPreview}
onHide={() => {
setShowPreview(false)
clearPreviewUrls()
}}
centered
size="lg"
>
<Modal.Header closeButton>
<Modal.Title>{t('form.preview')}</Modal.Title>
</Modal.Header>
<Modal.Body>
<div
className="bb-post-body"
dangerouslySetInnerHTML={{ __html: previewHtml || '' }}
/>
</Modal.Body>
</Modal>
</Container>
)
}