diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3eb8b78..22fa4db 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,8 +11,8 @@
"editor.codeActionsOnSaveTimeout": 1000,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
- "source.fixAll": false,
- "source.organizeImports": false,
- "source.fixAll.eslint": true
+ "source.fixAll": "never",
+ "source.organizeImports": "never",
+ "source.fixAll.eslint": "explicit"
},
}
\ No newline at end of file
diff --git a/src/components/elements/Feed/index.js b/src/components/elements/Feed/index.js
index 7495f33..0eee510 100644
--- a/src/components/elements/Feed/index.js
+++ b/src/components/elements/Feed/index.js
@@ -1,10 +1,9 @@
import React, {useEffect, useRef, useState} from 'react';
import PropTypes from 'prop-types';
import {isNull} from 'lodash';
-
-import {Spinner, Box} from '@chakra-ui/react';
+import {Spinner, Box, useDisclosure} from '@chakra-ui/react';
import Postagem from '../Postagem';
-
+import PostViewModal from '../ModalPostagem';
import * as User from '../../../domain/usuarios';
const Feed = ({
@@ -19,6 +18,8 @@ const Feed = ({
} = {}) => {
const loaderRef = useRef(null);
const [loadMore, setLoadMore] = useState(false);
+ const {isOpen, onOpen, onClose} = useDisclosure();
+ const [selectedPost, setSelectedPost] = useState(null);
useEffect(() => {
const observer = new IntersectionObserver(
@@ -41,7 +42,7 @@ const Feed = ({
observer.unobserve(loaderRef.current);
}
};
- }, [value, loaderRef]);
+ }, [value, loaderRef, fetchNextPage]);
if (isNull(value)) {
return (
@@ -51,20 +52,32 @@ const Feed = ({
);
}
+ const handlePostClick = (postagem) => {
+ setSelectedPost(postagem);
+ onOpen();
+ };
+
return (
<>
{value.map((postagem, index) => {
+ // Envolva cada postagem em um Box clicável
+ const postContent = (
+
+ );
+
if (index === value.length - 1 && hasMorePosts) {
return (
-
+
handlePostClick(postagem)} cursor="pointer">
+ {postContent}
+
{loadMore && (
@@ -74,17 +87,31 @@ const Feed = ({
);
}
return (
-
+ onClick={() => handlePostClick(postagem)}
+ cursor="pointer">
+ {postContent}
+
);
})}
+
+ {/* Renderiza o modal de visualização se houver uma postagem selecionada */}
+ {selectedPost && (
+
{
+ setSelectedPost(null);
+ onClose();
+ }}
+ post={selectedPost}
+ user={user}
+ verifiable={canVerifyPost}
+ fetchComments={fetchComments}
+ onCreateComment={onCreateComment}
+ onToggleSelo={onToggleSelo}
+ />
+ )}
>
);
};
diff --git a/src/components/elements/ModalPostagem/index.js b/src/components/elements/ModalPostagem/index.js
new file mode 100644
index 0000000..9150a5f
--- /dev/null
+++ b/src/components/elements/ModalPostagem/index.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+} from '@chakra-ui/react';
+import Postagem from '../Postagem';
+
+const PostViewModal = ({
+ isOpen,
+ onClose,
+ post, // Dados da postagem
+ user,
+ verifiable,
+ fetchComments,
+ onCreateComment,
+ onToggleSelo,
+}) => {
+ return (
+
+
+
+ {post.title}
+
+
+
+
+
+
+ );
+};
+
+export default PostViewModal;
diff --git a/src/components/elements/ModalPostagem/styles.js b/src/components/elements/ModalPostagem/styles.js
new file mode 100644
index 0000000..19fd7c3
--- /dev/null
+++ b/src/components/elements/ModalPostagem/styles.js
@@ -0,0 +1,33 @@
+import {Text} from '@chakra-ui/layout';
+import {FiTrash} from 'react-icons/fi';
+import styled from 'styled-components';
+
+export const TextAnchor = styled(Text)`
+ a,
+ a:link {
+ text-decoration: underline;
+ color: var(--chakra-colors-blue-500);
+
+ &:hover {
+ color: var(--chakra-colors-blue-600);
+ }
+
+ &:visited {
+ color: var(--chakra-colors-purple-700);
+
+ &:hover {
+ color: var(--chakra-colors-purple-800);
+ }
+ }
+ }
+ white-space: pre-wrap;
+ word-break: break-word;
+`;
+
+export const FiTrashIcon = styled(FiTrash)`
+ cursor: pointer;
+`;
+
+export default {
+ TextAnchor,
+};
\ No newline at end of file
diff --git a/src/components/elements/Postagem/index.js b/src/components/elements/Postagem/index.js
index 0f4599e..4b50ef5 100644
--- a/src/components/elements/Postagem/index.js
+++ b/src/components/elements/Postagem/index.js
@@ -243,7 +243,12 @@ const Postagem = ({
{checkIfUserCanDeletePost() ? (
- showDeleteDialog(item.id)} />
+ {
+ e.stopPropagation();
+ showDeleteDialog(item.id);
+ }}
+ />
) : null}
@@ -286,7 +291,10 @@ const Postagem = ({
py={2}
borderTop="1px solid #eee"
borderBottom={openComments ? '1px solid #eee' : ''}
- onClick={() => setOpenComments(!openComments)}>
+ onClick={(e) => {
+ e.stopPropagation(); // Não abrir modal se clicado em comentários
+ setOpenComments(!openComments);
+ }}>
{numberOfComments > 0
? `${numberOfComments} Comentários`
: 'Comentar'}