Issue 32 - Modal de Postagem adicionado

.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"
   },
 }

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}
+        />
+      )}
     </>
   );
 };

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;

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,
+};

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>
@@ -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'}