Implementadas opiniones reales

src/components/AddToList.jsx

@@ -3,7 +3,7 @@ import Modal from 'react-modal';
 import {Button} from './Button';
 import './AddToList.scss';
 import {useStateValue} from "../services/State";
-import {AiFillStar, AiOutlineStar} from "react-icons/all";
+import {AiFillStar, AiOutlineStar} from "react-icons/ai";
 import {add_to_list} from "../services/list_service";
 
 const Star = (props) => {

src/components/Comments.jsx

@@ -1,52 +1,130 @@
-import React from "react";
-import {FaThumbsUp, FaThumbsDown, FaLaughSquint} from 'react-icons/fa';
+import React, {useState} from "react";
 
-import Faker from 'faker';
+import {AiFillStar, AiOutlineStar} from "react-icons/ai";
+import {FaUser, FaThumbsUp, FaThumbsDown, FaLaughSquint} from 'react-icons/fa';
 
 import './Comments.scss'
+import {get_opinions} from "../services/list_service";
+import {Link} from "react-router-dom";
+
+const Opinions = (props) => {
+  const [pressed, setPressed] = useState(null);
+
+  let Y = props.helpful.Y;
+  let N = props.helpful.N;
+  let F = props.helpful.F;
+
+  switch (pressed) {
+    case 'Y':
+      Y++;
+      break;
+    case 'N':
+      N++;
+      break;
+    case 'F':
+      F++;
+      break;
+    default:
+      break;
+  }
+
+  if(!Y) Y = '';
+  if(!N) N = '';
+  if(!F) F = '';
+
+  const handleClick = (type) => () => {
+    if(type === pressed){
+      setPressed(null)
+    }else{
+      setPressed(type)
+    }
+  };
+
+  return (
+    <div className='opinions'>
+      <button className={pressed === 'Y' ? 'selected' : ''} onClick={handleClick('Y')}>
+        <span><FaThumbsUp/> {Y}</span>
+      </button>
+      <button className={pressed === 'N' ? 'selected' : ''} onClick={handleClick('N')}>
+        <span><FaThumbsDown/> {N}</span>
+      </button>
+      <button className={pressed === 'F' ? 'selected' : ''} onClick={handleClick('F')}>
+        <span><FaLaughSquint/> {F}</span>
+      </button>
+    </div>
+  )
+}
+
+const Star = (props) => {
+  return (
+    <div onClick={props.onClick}>
+      {props.selected ?
+        <AiFillStar className={'star selected'}/> :
+        <AiOutlineStar className={'star'}/>
+      }
+    </div>
+  )
+}
+
+const Stars = (props) => {
+  const getSelected = (i) => {
+    return i <= props.stars
+  }
+
+  const stars = [
+    <Star key={1} selected={getSelected(1)}/>,
+    <Star key={2} selected={getSelected(2)}/>,
+    <Star key={3} selected={getSelected(3)}/>,
+    <Star key={4} selected={getSelected(4)}/>,
+    <Star key={5} selected={getSelected(5)}/>,
+  ]
+
+  return (
+    <div className={'stars'}>
+      {stars}
+    </div>
+  )
+}
 
 const Comment = (props) => (
   <div className='comment'>
     <div className='avatar-container'>
-      <img className='avatar' src={props.avatar} alt='Avatar'/>
+      <FaUser/>
     </div>
     <div className='body'>
-      <span className='username'>{props.user}</span>
-      <p>{props.text}</p>
-      <div className='buttons'>
-        <button><FaThumbsUp/></button>
-        <button><FaThumbsDown/></button>
-        <button><FaLaughSquint/></button>
+      <Link to={`/user/${props.user.id}`} className='username'>{props.user.username}</Link>
+      <p>{props.opinion}</p>
+      <div className={'acciones'}>
+        <Stars stars={props.stars}/>
+        <Opinions helpful={props.helpful}/>
       </div>
     </div>
   </div>
 )
 
 export const Comments = (props) => {
-  if(!props.render) {
+  const [comments, setComments] = useState(null);
+
+  if (props.entity !== null && comments === null) {
+    get_opinions(props.entity).then((response) => {
+      setComments(response.data.opinions)
+    }).catch((error) => {
+      console.log(error)
+    })
+  }
+
+  if (comments === null) {
     return null;
   }
 
-  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}/>
+  const comments_component = comments.map((comment, index) => (
+    <Comment key={index} user={comment.user} opinion={comment.opinion} stars={comment.stars} helpful={comment.helpful}/>
   ));
 
   return (
     <div className='comments'>
       <h2>Comentarios</h2>
-      {comentarios}
+      {comments_component}
     </div>
   )
 }

src/components/Comments.scss

@@ -11,11 +11,13 @@
       height: 75px;
       margin-right: 1em;
       outline: 1px var(--gray-2) solid;
+      background-color: rgb(230, 230, 230);
 
-      .avatar {
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
+      svg {
+        padding-top: 10%;
+        width: 90%;
+        height: 90%;
+        color: rgb(250, 250, 250);
       }
 
     }
@@ -24,18 +26,50 @@
       .username {
         font-weight: 500;
       }
-      p {
-      }
     }
 
-    .buttons {
+    .acciones {
+      display: flex;
+      flex-direction: row;
+
+      &>*{
+        margin-right: 1em;
+      }
+
+      .opinions {
         display: flex;
         flex-direction: row;
 
         button {
           border: none;
-        padding: 0 1em;
           background-color: transparent;
+          cursor: pointer;
+
+          span > *{
+            display: inline;
+          }
+
+          &:hover, &.selected {
+            color: var(--accent);
+          }
+
+        }
+      }
+
+      .stars {
+        display: flex;
+        justify-content: flex-start;
+
+        .star {
+          margin: inherit;
+          width: 1.5em;
+          height: 1.5em;
+          cursor: auto;
+        }
+
+        .star.selected {
+          color: var(--accent);
+        }
       }
     }
   }

src/services/list_service.js

@@ -19,3 +19,7 @@ export function add_to_list(token, user_id, entity, entity_type, tags, opinion,
     headers: {'AUTHORIZATION': `Bearer ${token}`}
   });
 }
+
+export function get_opinions(mbid) {
+  return axios.get(`${baseUrl}/entity/${mbid}/opinions`)
+}

src/views/Artist.jsx

@@ -128,7 +128,7 @@ export const ArtistView = (props) => {
           onPageChanged={handleDiscPageChanged} makeLink={makeLink}
           navigateToDisc={handleNavigateToDisc}/>
       </RowCol>
-      <RowCol><Comments render={artist}/></RowCol>
+      {artist && <RowCol><Comments entity={mbid}/></RowCol>}
     </Grid>
   );
 }