Update Support.tsx

This commit is contained in:
Egor
2026-01-19 07:58:00 +03:00
committed by GitHub
parent 34ec53495e
commit 5e41c2a8b4

View File

@@ -1,4 +1,4 @@
import { useState, useRef, useCallback, useEffect } from 'react' import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ticketsApi } from '../api/tickets' import { ticketsApi } from '../api/tickets'
@@ -91,7 +91,6 @@ function MessageMedia({ message, t }: { message: TicketMessage; t: (key: string)
<button <button
className="absolute top-4 right-4 text-white/70 hover:text-white" className="absolute top-4 right-4 text-white/70 hover:text-white"
onClick={() => setShowFullImage(false)} onClick={() => setShowFullImage(false)}
aria-label="Close fullscreen"
> >
<CloseIcon /> <CloseIcon />
</button> </button>
@@ -142,29 +141,6 @@ export default function Support() {
const createFileInputRef = useRef<HTMLInputElement>(null) const createFileInputRef = useRef<HTMLInputElement>(null)
const replyFileInputRef = useRef<HTMLInputElement>(null) const replyFileInputRef = useRef<HTMLInputElement>(null)
// Cleanup function to revoke object URLs and prevent memory leaks
const clearAttachment = useCallback((
attachment: MediaAttachment | null,
setAttachment: (a: MediaAttachment | null) => void
) => {
if (attachment?.preview) {
URL.revokeObjectURL(attachment.preview)
}
setAttachment(null)
}, [])
// Cleanup on unmount to prevent memory leaks
useEffect(() => {
return () => {
if (createAttachment?.preview) {
URL.revokeObjectURL(createAttachment.preview)
}
if (replyAttachment?.preview) {
URL.revokeObjectURL(replyAttachment.preview)
}
}
}, []) // Empty deps - only run on unmount
// Get support configuration // Get support configuration
const { data: supportConfig, isLoading: configLoading } = useQuery({ const { data: supportConfig, isLoading: configLoading } = useQuery({
queryKey: ['support-config'], queryKey: ['support-config'],
@@ -186,14 +162,8 @@ export default function Support() {
// Handle file selection // Handle file selection
const handleFileSelect = async ( const handleFileSelect = async (
file: File, file: File,
setAttachment: (a: MediaAttachment | null) => void, setAttachment: (a: MediaAttachment | null) => void
currentAttachment: MediaAttachment | null
) => { ) => {
// Revoke old object URL before creating new one
if (currentAttachment?.preview) {
URL.revokeObjectURL(currentAttachment.preview)
}
// Validate file type // Validate file type
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'] const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
if (!allowedTypes.includes(file.type)) { if (!allowedTypes.includes(file.type)) {
@@ -254,7 +224,7 @@ export default function Support() {
setShowCreateForm(false) setShowCreateForm(false)
setNewTitle('') setNewTitle('')
setNewMessage('') setNewMessage('')
clearAttachment(createAttachment, setCreateAttachment) setCreateAttachment(null)
setSelectedTicket(ticket) setSelectedTicket(ticket)
}, },
}) })
@@ -272,7 +242,7 @@ export default function Support() {
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['ticket', selectedTicket?.id] }) queryClient.invalidateQueries({ queryKey: ['ticket', selectedTicket?.id] })
setReplyMessage('') setReplyMessage('')
clearAttachment(replyAttachment, setReplyAttachment) setReplyAttachment(null)
}, },
}) })
@@ -348,7 +318,7 @@ export default function Support() {
if (webApp?.openLink) { if (webApp?.openLink) {
log.debug('Using openLink') log.debug('Using openLink')
try { try {
webApp.openLink(webUrl) webApp.openLink(webUrl, { try_browser: true })
return return
} catch (e) { } catch (e) {
log.error('openLink failed:', e) log.error('openLink failed:', e)
@@ -370,7 +340,7 @@ export default function Support() {
buttonAction: () => { buttonAction: () => {
const webApp = window.Telegram?.WebApp const webApp = window.Telegram?.WebApp
if (webApp?.openLink) { if (webApp?.openLink) {
webApp.openLink(supportConfig.support_url!) webApp.openLink(supportConfig.support_url!, { try_browser: true })
} else { } else {
window.open(supportConfig.support_url!, '_blank') window.open(supportConfig.support_url!, '_blank')
} }
@@ -402,7 +372,7 @@ export default function Support() {
webApp.openTelegramLink(webUrl) webApp.openTelegramLink(webUrl)
} else if (webApp?.openLink) { } else if (webApp?.openLink) {
log.debug('Fallback using openLink') log.debug('Fallback using openLink')
webApp.openLink(webUrl) webApp.openLink(webUrl, { try_browser: true })
} else { } else {
log.debug('Fallback using window.open') log.debug('Fallback using window.open')
window.open(webUrl, '_blank') window.open(webUrl, '_blank')
@@ -473,7 +443,7 @@ export default function Support() {
onClick={() => { onClick={() => {
setShowCreateForm(true) setShowCreateForm(true)
setSelectedTicket(null) setSelectedTicket(null)
clearAttachment(createAttachment, setCreateAttachment) setCreateAttachment(null)
}} }}
className="btn-primary" className="btn-primary"
> >
@@ -499,7 +469,7 @@ export default function Support() {
onClick={() => { onClick={() => {
setSelectedTicket(ticket as unknown as TicketDetail) setSelectedTicket(ticket as unknown as TicketDetail)
setShowCreateForm(false) setShowCreateForm(false)
clearAttachment(replyAttachment, setReplyAttachment) setReplyAttachment(null)
}} }}
className={`w-full text-left p-4 rounded-xl border transition-all ${ className={`w-full text-left p-4 rounded-xl border transition-all ${
selectedTicket?.id === ticket.id selectedTicket?.id === ticket.id
@@ -585,14 +555,14 @@ export default function Support() {
className="hidden" className="hidden"
onChange={(e) => { onChange={(e) => {
const file = e.target.files?.[0] const file = e.target.files?.[0]
if (file) handleFileSelect(file, setCreateAttachment, createAttachment) if (file) handleFileSelect(file, setCreateAttachment)
e.target.value = '' e.target.value = ''
}} }}
/> />
{createAttachment ? ( {createAttachment ? (
<AttachmentPreview <AttachmentPreview
attachment={createAttachment} attachment={createAttachment}
onRemove={() => clearAttachment(createAttachment, setCreateAttachment)} onRemove={() => setCreateAttachment(null)}
/> />
) : ( ) : (
<button <button
@@ -634,7 +604,7 @@ export default function Support() {
type="button" type="button"
onClick={() => { onClick={() => {
setShowCreateForm(false) setShowCreateForm(false)
clearAttachment(createAttachment, setCreateAttachment) setCreateAttachment(null)
}} }}
className="btn-secondary" className="btn-secondary"
> >
@@ -734,14 +704,14 @@ export default function Support() {
className="hidden" className="hidden"
onChange={(e) => { onChange={(e) => {
const file = e.target.files?.[0] const file = e.target.files?.[0]
if (file) handleFileSelect(file, setReplyAttachment, replyAttachment) if (file) handleFileSelect(file, setReplyAttachment)
e.target.value = '' e.target.value = ''
}} }}
/> />
{replyAttachment ? ( {replyAttachment ? (
<AttachmentPreview <AttachmentPreview
attachment={replyAttachment} attachment={replyAttachment}
onRemove={() => clearAttachment(replyAttachment, setReplyAttachment)} onRemove={() => setReplyAttachment(null)}
/> />
) : ( ) : (
<button <button