109 lines
3.6 KiB
TypeScript
109 lines
3.6 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'
|
|||
|
|
|
|||
|
|
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 border border-red-400 text-red-700 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">
|
|||
|
|
<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
|