group posts

2025-11-16 19:46:32 +03:00
parent b949837e13
commit 9cbfd88a23
9 changed files with 364 additions and 60 deletions
--- a/src/views/home/group/posts/ModalUpdate.tsx
+++ b/src/views/home/group/posts/ModalUpdate.tsx
@@ -0,0 +1,140 @@
+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, { MarkDownPattern } from '../../../articleeditor/Editor';
+import {
+    createPost,
+    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(() => {
+        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;