From 83aa76490179c8c1cd4066cbc03ddc77c2123c9b Mon Sep 17 00:00:00 2001
From: Lucas Molinari <91815333+molhinari@users.noreply.github.com>
Date: Mon, 17 Feb 2025 17:56:32 -0300
Subject: [PATCH 1/3] =?UTF-8?q?Arquivos=20do=20Modal=20criados=20(por?=
 =?UTF-8?q?=C3=A9m=20a=20postagem=20inteira=20est=C3=A1=20clic=C3=A1vel)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/elements/Feed/index.js         | 67 +++++++++++++------
 .../elements/ModalPostagem/index.js           | 43 ++++++++++++
 .../elements/ModalPostagem/styles.js          | 33 +++++++++
 3 files changed, 123 insertions(+), 20 deletions(-)
 create mode 100644 src/components/elements/ModalPostagem/index.js
 create mode 100644 src/components/elements/ModalPostagem/styles.js

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 = (
+          <Postagem
+            item={postagem}
+            user={user}
+            verifiable={canVerifyPost}
+            fetchComments={fetchComments}
+            onCreateComment={onCreateComment}
+            onToggleSelo={onToggleSelo}
+          />
+        );
+
         if (index === value.length - 1 && hasMorePosts) {
           return (
             <div key={postagem.id} ref={loaderRef}>
-              <Postagem
-                item={postagem}
-                user={user}
-                verifiable={canVerifyPost}
-                fetchComments={fetchComments}
-                onCreateComment={onCreateComment}
-                onToggleSelo={onToggleSelo}
-              />
+              <Box onClick={() => handlePostClick(postagem)} cursor="pointer">
+                {postContent}
+              </Box>
               {loadMore && (
                 <Box w="100%" textAlign="center" mt={5}>
                   <Spinner colorScheme="primary" />
@@ -74,17 +87,31 @@ const Feed = ({
           );
         }
         return (
-          <Postagem
+          <Box
             key={postagem.id}
-            item={postagem}
-            user={user}
-            verifiable={canVerifyPost}
-            fetchComments={fetchComments}
-            onCreateComment={onCreateComment}
-            onToggleSelo={onToggleSelo}
-          />
+            onClick={() => handlePostClick(postagem)}
+            cursor="pointer">
+            {postContent}
+          </Box>
         );
       })}
+
+      {/* Renderiza o modal de visualização se houver uma postagem selecionada */}
+      {selectedPost && (
+        <PostViewModal
+          isOpen={isOpen}
+          onClose={() => {
+            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 (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl" isCentered>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{post.title}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Postagem
+            item={post}
+            user={user}
+            verifiable={verifiable}
+            fetchComments={fetchComments}
+            onCreateComment={onCreateComment}
+            onToggleSelo={onToggleSelo}
+          />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+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

From 720012c654f2a0541cc4fe1aee7f6e13e8ba951f Mon Sep 17 00:00:00 2001
From: Lucas Molinari <91815333+molhinari@users.noreply.github.com>
Date: Wed, 19 Feb 2025 16:49:34 -0300
Subject: [PATCH 2/3] =?UTF-8?q?arrumando=20componente=20Postagem=20-=20n?=
 =?UTF-8?q?=C3=A3o=20abre=20mais=20modal=20ao=20clicar=20na=20se=C3=A7?=
 =?UTF-8?q?=C3=A3o=20de=20abrir=20coment=C3=A1rios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                     | 6 +++---
 src/components/elements/Postagem/index.js | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

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/Postagem/index.js b/src/components/elements/Postagem/index.js
index 0f4599e..c7a145c 100644
--- a/src/components/elements/Postagem/index.js
+++ b/src/components/elements/Postagem/index.js
@@ -286,7 +286,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'}

From 994621cc0d2671ed52d74fa5c94061635497cdb5 Mon Sep 17 00:00:00 2001
From: Lucas Molinari <91815333+molhinari@users.noreply.github.com>
Date: Wed, 19 Feb 2025 17:34:52 -0300
Subject: [PATCH 3/3] =?UTF-8?q?atualiza=C3=A7=C3=A3o=20no=20onClick=20da?=
 =?UTF-8?q?=20lixeira=20-=20agora=20tamb=C3=A9m=20n=C3=A3o=20abre=20o=20mo?=
 =?UTF-8?q?dal=20ao=20clicar=20no=20bot=C3=A3o=20da=20lixeira?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/elements/Postagem/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/elements/Postagem/index.js b/src/components/elements/Postagem/index.js
index c7a145c..4b50ef5 100644
--- a/src/components/elements/Postagem/index.js
+++ b/src/components/elements/Postagem/index.js
@@ -243,7 +243,12 @@ const Postagem = ({
               </Stack>
             </Flex>
             {checkIfUserCanDeletePost() ? (
-              <FiTrashIcon onClick={() => showDeleteDialog(item.id)} />
+              <FiTrashIcon
+                onClick={(e) => {
+                  e.stopPropagation();
+                  showDeleteDialog(item.id);
+                }}
+              />
             ) : null}
           </Flex>
           <Stack>