109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
import { useEffect } from 'react'
|
||
import { useForumData } from './useForumData'
|
||
import { AdminView } from './admin/AdminView'
|
||
import { Container } from '@/components/shared'
|
||
import { Helmet } from 'react-helmet'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
import { APP_NAME } from '@/constants/app.constant'
|
||
import { Button } from '@/components/ui'
|
||
|
||
export function Management() {
|
||
const {
|
||
categories,
|
||
topics,
|
||
posts,
|
||
loading,
|
||
error,
|
||
createCategory,
|
||
updateCategory,
|
||
updateCategoryLockState,
|
||
updateCategoryActiveState,
|
||
deleteCategory,
|
||
createTopic,
|
||
updateTopic,
|
||
deleteTopic,
|
||
pinTopic,
|
||
unpinTopic,
|
||
lockTopic,
|
||
unlockTopic,
|
||
solvedTopic,
|
||
unsolvedTopic,
|
||
createPost,
|
||
updatePost,
|
||
deletePost,
|
||
markPostAsAcceptedAnswer,
|
||
unmarkPostAsAcceptedAnswer,
|
||
clearError,
|
||
} = useForumData()
|
||
const { translate } = useLocalization()
|
||
|
||
useEffect(() => {
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||
e.preventDefault()
|
||
// Search modal will be opened by Header component
|
||
}
|
||
}
|
||
document.addEventListener('keydown', handleKeyDown)
|
||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (error) {
|
||
const timer = setTimeout(() => {
|
||
clearError()
|
||
}, 5000)
|
||
return () => clearTimeout(timer)
|
||
}
|
||
}, [error, clearError])
|
||
|
||
return (
|
||
<Container>
|
||
<Helmet
|
||
titleTemplate={`%s | ${APP_NAME}`}
|
||
title={translate('::' + 'App.ForumManagement')}
|
||
defaultTitle={APP_NAME}
|
||
></Helmet>
|
||
|
||
{error && (
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
<div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded relative">
|
||
<strong className="font-bold">Error: </strong>
|
||
<span className="block sm:inline">{error}</span>
|
||
<Button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3 text-red-700 dark:text-red-200">
|
||
<span className="sr-only">Dismiss</span>×
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<AdminView
|
||
categories={categories}
|
||
topics={topics}
|
||
posts={posts}
|
||
loading={loading}
|
||
onCreateCategory={(data) => createCategory(data).then(() => {})}
|
||
onUpdateCategory={(id, data) => updateCategory(id, data).then(() => {})}
|
||
onUpdateCategoryLockState={(id) => updateCategoryLockState(id).then(() => {})}
|
||
onUpdateCategoryActiveState={(id) => updateCategoryActiveState(id).then(() => {})}
|
||
onDeleteCategory={(id) => deleteCategory(id).then(() => {})}
|
||
onCreateTopic={(data) => createTopic(data).then(() => {})}
|
||
onUpdateTopic={(id, data) => updateTopic(id, data).then(() => {})}
|
||
onDeleteTopic={(id) => deleteTopic(id).then(() => {})}
|
||
onPinTopic={(id) => pinTopic(id).then(() => {})}
|
||
onUnpinTopic={(id) => unpinTopic(id).then(() => {})}
|
||
onLockTopic={(id) => lockTopic(id).then(() => {})}
|
||
onUnlockTopic={(id) => unlockTopic(id).then(() => {})}
|
||
onMarkTopicAsSolved={(id) => solvedTopic(id).then(() => {})}
|
||
onMarkTopicAsUnsolved={(id) => unsolvedTopic(id).then(() => {})}
|
||
onCreatePost={(data) => createPost(data).then(() => {})}
|
||
onUpdatePost={(id, data) => updatePost(id, data).then(() => {})}
|
||
onDeletePost={(id) => deletePost(id).then(() => {})}
|
||
onMarkPostAsAcceptedAnswer={(id) => markPostAsAcceptedAnswer(id).then(() => {})}
|
||
onUnmarkPostAsAcceptedAnswer={(id) => unmarkPostAsAcceptedAnswer(id).then(() => {})}
|
||
/>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default Management
|