71 lines
2.6 KiB
TypeScript
71 lines
2.6 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 from '../../../articleeditor/Editor';
|
||
import {
|
||
createPost,
|
||
setGroupFeedStatus,
|
||
} from '../../../../redux/slices/groupfeed';
|
||
|
||
interface ModalCreateProps {
|
||
groupId: number;
|
||
active: boolean;
|
||
setActive: (value: boolean) => void;
|
||
}
|
||
|
||
const ModalCreate: FC<ModalCreateProps> = ({ active, setActive, groupId }) => {
|
||
// const [name, setName] = useState<string>('');
|
||
const [content, setContent] = useState<string>('');
|
||
const status = useAppSelector((state) => state.groupfeed.createPost.status);
|
||
const dispatch = useAppDispatch();
|
||
|
||
useEffect(() => {
|
||
if (status == 'successful') {
|
||
setActive(false);
|
||
dispatch(setGroupFeedStatus({ key: 'createPost', status: 'idle' }));
|
||
}
|
||
}, [status]);
|
||
|
||
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">
|
||
<div className="font-bold text-[30px]">Создать пост</div>
|
||
|
||
<div className="h-[calc(100%-45px-60px)]">
|
||
<MarkdownEditor
|
||
onChange={(v) => {
|
||
setContent(v);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
|
||
<PrimaryButton
|
||
onClick={() => {
|
||
dispatch(
|
||
createPost({ name: '', content, groupId }),
|
||
);
|
||
}}
|
||
text={status == 'idle' ? 'Опубликовать' : 'Загрузка...'}
|
||
disabled={status == 'loading'}
|
||
/>
|
||
<SecondaryButton
|
||
onClick={() => {
|
||
setActive(false);
|
||
}}
|
||
text="Отмена"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default ModalCreate;
|