Update PostInfo.tsx

src/components/PostInfo/PostInfo.tsx

@@ -1,33 +1,36 @@
 import React from 'react';
-import { PostData } from '../../types/PostData';
+import { Post } from '../../types/api.types';
+import { UserInfo } from '../UserInfo/UserInfo';
 import { CommentList } from '../CommentList';
-import { UserInfo } from '../UserInfo';
+import './PostInfo.scss';
 
-type PostProp = {
-  post: PostData,
+type PostInfoProps = {
+  post: Post,
 };
 
-export const PostInfo: React.FC<PostProp> = ({ post }) => (
-  <div className="PostInfo">
-    <div className="PostInfo__header">
-      <h3 className="PostInfo__title">{post.title}</h3>
+export const PostInfo: React.FC<PostInfoProps> = ({ post }) => {
+  return (
+    <div className="PostInfo">
+      <div className="PostInfo__header">
+        <h3 className="PostInfo__title">{post.title}</h3>
 
-      <p>
-        {' Posted by  '}
+        <p>
+          {' Posted by  '}
 
-        {post.user && <UserInfo user={post.user} />}
+          {post.user !== null && <UserInfo user={post.user} />}
+        </p>
+      </div>
 
+      <p className="PostInfo__body">
+        {post.body}
       </p>
-    </div>
 
-    <p className="PostInfo__body">
-      {post.body}
-    </p>
+      <hr />
 
-    <hr />
+      {post.comments.length
+        ? <CommentList key={post.id} comments={post.comments} />
+        : <b data-cy="NoCommentsMessage">No comments yet</b>}
 
-    {post.comments.length > 0
-      ? <CommentList comments={post.comments} />
-      : <b data-cy="NoCommentsMessage">No comments yet</b>}
-  </div>
-);
+    </div>
+  );
+};