Issue #4 Comentarios falsos

package-lock.json

@@ -5704,6 +5704,11 @@
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
+    "faker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz",
+      "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8="
+    },
     "fast-deep-equal": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "axios": "^0.19.2",
+    "faker": "^4.1.0",
     "node-sass": "^4.14.1",
     "query-string": "^6.12.1",
     "react": "^16.13.1",

src/components/Comments.jsx

@@ -1,10 +1,48 @@
 import React from "react";
+import {FaThumbsUp, FaThumbsDown, FaLaughSquint} from 'react-icons/fa';
+
+import Faker from 'faker';
+
+import './Comments.scss'
+
+const Comment = (props) => (
+  <div class='comment'>
+    <div class='avatar-container'>
+      <img className='avatar' src={props.avatar} alt='Avatar'/>
+    </div>
+    <div className='body'>
+      <span className='username'>{props.user}</span>
+      <p>{props.text}</p>
+      <div class='buttons'>
+        <button><FaThumbsUp/></button>
+        <button><FaThumbsDown/></button>
+        <button><FaLaughSquint/></button>
+      </div>
+    </div>
+  </div>
+)
 
 export const Comments = (props) => {
+  let comentarios = [];
+
+  let comment_count = Math.floor(Math.random() * 20)
+
+  for(let i = 0; i < comment_count; i++){
+    comentarios.push({
+      user: Faker.internet.userName(),
+      avatar: Faker.internet.avatar(),
+      text: Faker.lorem.paragraph(20)
+    });
+  }
+
+  comentarios = comentarios.map((comentario, index) => (
+    <Comment key={index} user={comentario.user} avatar={comentario.avatar} text={comentario.text}/>
+  ));
+
   return (
-    <div>
-      <h3>Comentarios</h3>
-      <p>No aun :3</p>
+    <div className='comments'>
+      <h2>Comentarios</h2>
+      {comentarios}
     </div>
   )
 }

src/components/Comments.scss

@@ -0,0 +1,42 @@
+.comments {
+  .comment {
+    display: flex;
+    padding-bottom: 1em;
+    margin-top: 1em;
+    border-bottom: var(--line-width) solid var(--accent);
+
+    .avatar-container {
+      flex-shrink: 0;
+      width: 75px;
+      height: 75px;
+      margin-right: 1em;
+      outline: 1px var(--gray-2) solid;
+
+      .avatar {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+
+    }
+
+    .body {
+      .username {
+        font-weight: 500;
+      }
+      p {
+      }
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: row;
+
+      button {
+        border: none;
+        padding: 0 1em;
+        background-color: transparent;
+      }
+    }
+  }
+}

src/views/Artist.jsx

@@ -7,6 +7,7 @@ import {CoverArt} from '../components/CoverArt';
 import {Paginate} from "../components/Paginate";
 import {EntityList} from "../components/EntityList";
 import {Entity} from "../components/Entity";
+import {Comments} from "../components/Comments";
 
 
 const Discs = (props) => {
@@ -112,6 +113,7 @@ export const ArtistView = (props) => {
     <div className='artist-view'>
       <Artist artist={artist}/>
       {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
+      <Comments/>
     </div>
   );
 }

src/views/Disc.jsx

@@ -9,6 +9,7 @@ import {CoverArt} from "../components/CoverArt";
 import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
 import {Paginate} from "../components/Paginate";
+import {Comments} from "../components/Comments";
 
 const Versions = (props) => {
   const versions = props.versions ? props.versions : null;
@@ -115,6 +116,7 @@ export const DiscView = (props) => {
                   onPageChanged={handleVersionPageChanged} makeLink={makeLink}
                   navigateToVersion={handleNavigateToVersion}/>
       }
+      <Comments/>
     </Fragment>
   )
 }

src/views/Release.jsx

@@ -7,6 +7,7 @@ import {getRelease, getReleaseSongs} from "../services/entity_service";
 import {CoverArt} from "../components/CoverArt";
 import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
+import {Comments} from "../components/Comments";
 
 
 const Recordings = (props) => {
@@ -92,6 +93,7 @@ export const ReleaseView = (props) => {
                     makeLink={makeLink}
                     navigateToRecording={handleNavigateToRecording}/>
       }
+      <Comments/>
     </Fragment>
   )
 }