mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
Update Support.tsx
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user