group posts

src/views/home/group/posts/ModalCreate.tsx

@@ -0,0 +1,72 @@
+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 { Input } from '../../../../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import { createGroup } from '../../../../redux/slices/groups';
+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;