138 lines
5.1 KiB
TypeScript
138 lines
5.1 KiB
TypeScript
import { FC, useEffect, useState } from 'react';
|
||
import { Modal } from '../../../../components/modal/Modal';
|
||
import { PrimaryButton } from '../../../../components/button/PrimaryButton';
|
||
import { SecondaryButton } from '../../../../components/button/SecondaryButton';
|
||
import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
|
||
import MarkdownEditor, { MarkDownPattern } from '../../../articleeditor/Editor';
|
||
import {
|
||
deletePost,
|
||
fetchPostById,
|
||
setGroupFeedStatus,
|
||
updatePost,
|
||
} from '../../../../redux/slices/groupfeed';
|
||
import { ReverseButton } from '../../../../components/button/ReverseButton';
|
||
import { cn } from '../../../../lib/cn';
|
||
|
||
interface ModalUpdateProps {
|
||
groupId: number;
|
||
postId: number;
|
||
active: boolean;
|
||
setActive: (value: boolean) => void;
|
||
}
|
||
|
||
const ModalUpdate: FC<ModalUpdateProps> = ({
|
||
active,
|
||
setActive,
|
||
groupId,
|
||
postId,
|
||
}) => {
|
||
// const [name, setName] = useState<string>('');
|
||
const [content, setContent] = useState<string>('');
|
||
const status = useAppSelector((state) => state.groupfeed.updatePost.status);
|
||
const statusDelete = useAppSelector(
|
||
(state) => state.groupfeed.deletePost.status,
|
||
);
|
||
const { post, status: statusPost } = useAppSelector(
|
||
(state) => state.groupfeed.fetchPostById,
|
||
);
|
||
const dispatch = useAppDispatch();
|
||
|
||
useEffect(() => {
|
||
if (status == 'successful') {
|
||
setActive(false);
|
||
dispatch(setGroupFeedStatus({ key: 'updatePost', status: 'idle' }));
|
||
}
|
||
}, [status]);
|
||
|
||
useEffect(() => {
|
||
if (statusDelete == 'successful') {
|
||
setActive(false);
|
||
dispatch(setGroupFeedStatus({ key: 'deletePost', status: 'idle' }));
|
||
}
|
||
}, [statusDelete]);
|
||
|
||
useEffect(() => {
|
||
if (postId) dispatch(fetchPostById({ groupId, postId }));
|
||
}, [postId]);
|
||
|
||
return (
|
||
<Modal
|
||
className="bg-liquid-background h-[calc(100vh-30%)] border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white overflow-hidden"
|
||
onOpenChange={setActive}
|
||
open={active}
|
||
backdrop="blur"
|
||
>
|
||
<div className="max-w-[1400px] h-full overflow-hidden transition-all duratoin-300">
|
||
<div className="font-bold text-[30px]">
|
||
Обновить пост #{post?.id}
|
||
</div>
|
||
<div
|
||
className={cn(
|
||
' absolute z-10 h-[calc(100%-100px)] w-[calc(100%-50px)] flex items-center justify-center text-transparent transition-all pointer-events-none ',
|
||
statusPost == 'loading' && 'text-liquid-white',
|
||
)}
|
||
>
|
||
<div>Загрузка...</div>
|
||
</div>
|
||
<div
|
||
className={cn(
|
||
'h-[calc(100%-45px-60px)] opacity-50 pointer-events-none transition-all ',
|
||
statusPost == 'successful' &&
|
||
'text-liquid-white pointer-events-auto opacity-100',
|
||
)}
|
||
>
|
||
<MarkdownEditor
|
||
defaultValue={
|
||
statusPost == 'successful'
|
||
? post?.content
|
||
: MarkDownPattern
|
||
}
|
||
onChange={(v) => {
|
||
setContent(v);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
|
||
<PrimaryButton
|
||
onClick={() => {
|
||
dispatch(
|
||
updatePost({
|
||
name: '',
|
||
content,
|
||
groupId,
|
||
postId,
|
||
}),
|
||
);
|
||
}}
|
||
text={status == 'idle' ? 'Сохранить' : 'Загрузка...'}
|
||
disabled={
|
||
status == 'loading' || statusPost != 'successful'
|
||
}
|
||
/>
|
||
<ReverseButton
|
||
onClick={() => {
|
||
dispatch(deletePost({ groupId, postId }));
|
||
}}
|
||
color="error"
|
||
text={
|
||
statusDelete == 'idle' ? 'Удалить' : 'Загрузка...'
|
||
}
|
||
disabled={
|
||
statusDelete == 'loading' ||
|
||
statusPost != 'successful'
|
||
}
|
||
/>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setActive(false);
|
||
}}
|
||
text="Отмена"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default ModalUpdate;
|