Task_3_Done_Hook

Author: rolandszoke

src/Components/Post.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Query } from '@apollo/react-components';
+import { useQuery } from '@apollo/react-hooks';
 import {
   Button, Container, Card, Row, Jumbotron, Spinner, Form,
 } from 'react-bootstrap';
@@ -13,6 +13,17 @@ const Post = ({ postId }) => {
   const [commentContent, setCommentContent] = useState('');
   const [commentCreateIsLoading] = useState(false);
 
+  const {
+    loading: postIsLoading,
+    data: postsData,
+  } = useQuery(queries.post.GET_POSTS_QUERY, {
+    variables: {
+      filters: [{ field: 'id', operation: 'eq', value: postId }],
+      limit: 1,
+    },
+  });
+  const post = get(postsData, 'posts.edges[0].node', {});
+
   // TODO: TASK 4. query comments
   const commentIsLoading = false;
   const comments = [];
@@ -26,25 +37,20 @@ const Post = ({ postId }) => {
 
   return (
     <Container className="post">
-      <Query query={queries.post.GET_POSTS_QUERY} variables={{ filters: [{ field: 'id', operation: 'eq', value: postId }], limit: 1 }}>
-        {({ loading: postIsLoading, data: postsData }) => {
-          const post = get(postsData, 'posts.edges[0].node', {});
-          return (postIsLoading
-            ? <div className="post-loader"><Spinner animation="border" /></div>
-            : (
-              <Jumbotron>
-                <h1>{post.title}</h1>
-                <footer className="blockquote-footer">
-                  {get(post, 'author.username')}
-                  <div>{DateTime.fromISO(post.timestamp).toFormat('HH:mm - dd/LL/yyyy')}</div>
-                </footer>
-                <br />
-                <p>{post.description}</p>
-                <p>{post.content}</p>
-              </Jumbotron>
-            ));
-        }}
-      </Query>
+      {postIsLoading
+        ? <div className="post-loader"><Spinner animation="border" /></div>
+        : (
+          <Jumbotron>
+            <h1>{post.title}</h1>
+            <footer className="blockquote-footer">
+              {get(post, 'author.username')}
+              <div>{DateTime.fromISO(post.timestamp).toFormat('HH:mm - dd/LL/yyyy')}</div>
+            </footer>
+            <br />
+            <p>{post.description}</p>
+            <p>{post.content}</p>
+          </Jumbotron>
+        )}
       <div className="post-commentForm">
         <h4>Write a comment</h4>
         <Form onSubmit={handleCreateComment}>