Opiniones !

src/components/Comments.jsx

@@ -10,6 +10,8 @@ import {Link} from "react-router-dom";
 const Opinions = (props) => {
   const [pressed, setPressed] = useState(null);
 
+  const user = JSON.parse(window.localStorage.getItem('user'))
+
   let Y = props.helpful.Y;
   let N = props.helpful.N;
   let F = props.helpful.F;
@@ -33,6 +35,8 @@ const Opinions = (props) => {
   if (!F) F = '';
 
   const handleClick = (type) => () => {
+    if (user === null) return
+
     if (type === pressed) {
       setPressed(null)
     } else {
@@ -86,25 +90,27 @@ const Stars = (props) => {
   )
 }
 
-const Comment = (props) => (
-  <div className='comment'>
-    <div className='avatar'>
-      <FaUser/>
-    </div>
-    <div className='content'>
-      <div className="header">
-        <Link to={`/user/${props.user.id}`} className='username'>{props.user.username}</Link>
-        <Stars stars={props.stars}/>
+const Comment = (props) => {
+  return (
+    <div className='comment'>
+      <div className='avatar'>
+        <FaUser/>
       </div>
-      <div className="body">
-        <p>{props.opinion}</p>
-      </div>
-      <div className="footer">
-        <Opinions helpful={props.helpful}/>
+      <div className='content'>
+        <div className="header">
+          <Link to={`/user/${props.user.id}`} className='username'>{props.user.username}</Link>
+          <Stars stars={props.stars}/>
+        </div>
+        <div className="body">
+          <p>{props.opinion}</p>
+        </div>
+        <div className="footer">
+          <Opinions helpful={props.helpful}/>
+        </div>
       </div>
     </div>
-  </div>
-)
+  )
+}
 
 export const Comments = (props) => {
   const [comments, setComments] = useState(null);
@@ -117,13 +123,18 @@ export const Comments = (props) => {
     })
   }
 
-  if (comments === null) {
-    return null;
+  let comments_component = <h5>No hay comentarios :c</h5>
+
+  if (comments !== null) {
+    const filtered_comments = comments.filter(comment => comment.opinion);
+
+    if (filtered_comments.length !== 0) {
+      comments_component = comments.map((comment, index) => (
+        <Comment key={index} user={comment.user} opinion={comment.opinion} stars={comment.stars} helpful={comment.helpful}/>
+      ));
+    }
   }
 
-  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'>

src/views/Disc.jsx

@@ -130,7 +130,7 @@ export const DiscView = (props) => {
           onPageChanged={handleVersionPageChanged} makeLink={makeLink}
           navigateToVersion={handleNavigateToVersion}/>
       </RowCol>
-      <RowCol><Comments render={disc}/></RowCol>
+      {disc && <RowCol><Comments entity={mbid}/></RowCol>}
     </Grid>
   )
 }

src/views/Release.jsx

@@ -96,7 +96,7 @@ export const ReleaseView = (props) => {
     <Grid>
       <RowCol><Release release={release}/></RowCol>
       <RowCol><Recordings render={release}medias={medias} selected={currentRecording}/></RowCol>
-      <RowCol><Comments render={release}/></RowCol>
+      {release && <RowCol><Comments entity={mbid}/></RowCol>}
     </Grid>
   )
 }

src/views/Song.jsx

@@ -38,7 +38,7 @@ export const SongView = (props) => {
   return (
     <Grid>
       <RowCol><Song song={song}/></RowCol>
-      <RowCol><Comments render={song}/></RowCol>
+      {song && <RowCol><Comments entity={mbid}/></RowCol>}
     </Grid>
   )
 }