El usuario puede ver si un item esta en su lista o no

src/components/EntityList.jsx

@@ -28,8 +28,14 @@ const EntityPlaceholder = (props) => {
 
 const EntityItem = (props) => {
   const item = props.item;
+  let className = 'entity-item ' + (item.selected ? 'selected' : '');
+
+  if(item.className){
+    className += ' ' + item.className;
+  }
+
   return (
-    <li className={'entity-item ' + (item.selected ? 'selected' : '')} id={item.id}>
+    <li className={className} id={item.id}>
       <div className="entity-container">
         <Link to={item.link}>
           {item.cover && item.cover}

src/components/EntityList.scss

@@ -98,7 +98,7 @@ ul.entity-list {
 
 // Highligth Column
 .entity-list.column{
-  .entity-item {
+  .entity-item:not(.disabled) {
     border-bottom: solid var(--line-width) var(--gray-1);
     transition: background-color 300ms ease-in;
 
@@ -154,3 +154,20 @@ ul.entity-list {
     }
   }
 }
+
+
+// When an item is disabled
+.entity-item.disabled{
+  position: relative;
+  &:before{
+    content: ""; // ::before and ::after both require content
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--gray-1);
+    opacity: .7;
+  }
+
+}

src/components/Nav.jsx

@@ -38,7 +38,7 @@ export const Nav = (props) => {
       </ul>
     } else {
       return <ul className='nav-links'>
-        <li><Link to={`/user/${user.id}`}>{capitalize(user.username)}</Link></li>
+        <li><a href={`/user/${user.id}`}>{capitalize(user.username)}</a></li>
         <li className='link'>
           <Link to='/logout'>Cerrar Sesión</Link>
         </li>

src/views/User.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Grid, RowCol} from "../components/Grid";
 import {getUser} from "../services/user_service";
 import {capitalize} from "../services/utils";
@@ -9,6 +9,12 @@ import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 import {NoRoute} from "../components/NoRoute";
 import {getArtist, getDisc, getRelease, getSong} from "../services/entity_service";
 import {CoverArt} from "../components/CoverArt";
+import {useStateValue} from "../services/State";
+import {FaCheck} from 'react-icons/fa';
+
+const InList = (props) => {
+  return <div>Ya esta en tu lista! <FaCheck/></div>
+}
 
 const ArtistsList = (props) => {
   const ids = props.ids;
@@ -21,13 +27,13 @@ const ArtistsList = (props) => {
     })
   }
 
-  console.log(artists);
-
   const items = artists.map((artist) => ({
     'cover': null,
     'link': `/artist/${artist.id}`,
     'title': artist.name,
-    'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
+    'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
+    'widget': props.logged_ids.includes(artist.id) ? <InList/> : null,
+    'className': props.logged_ids.includes(artist.id) ? 'disabled' : null
   }))
 
   const list = [{'items': items}]
@@ -50,7 +56,9 @@ const ReleasesList = (props) => {
     'cover': (<CoverArt release={release} size={3}/>),
     'link': `/release/${release.id}`,
     'title': release.title,
-    'subtitle': [release.artist.name, release.date].filter(Boolean).join(' - ')
+    'subtitle': [release.artist.name, release.date].filter(Boolean).join(' - '),
+    'widget': props.logged_ids.includes(release.id) ? <InList/> : null,
+    'className': props.logged_ids.includes(release.id) ? 'disabled' : null
   }))
 
   const list = [{'items': items}]
@@ -73,7 +81,9 @@ const DiscsList = (props) => {
     'cover': (<CoverArt disc={disc} size={3}/>),
     'link': `/disc/${disc.id}`,
     'title': disc.title,
-    'subtitle': disc.artist.name
+    'subtitle': disc.artist.name,
+    'widget': props.logged_ids.includes(disc.id) ? <InList/> : null,
+    'className': props.logged_ids.includes(disc.id) ? 'disabled' : null
   }))
 
   const list = [{'items': items}]
@@ -92,11 +102,13 @@ const SongsList = (props) => {
     })
   }
 
-  const items = songs.map((disc) => ({
+  const items = songs.map((song) => ({
     'cover': null,
-    'link': `/song/${disc.id}`,
-    'title': disc.title,
-    'subtitle': disc.artist.name
+    'link': `/song/${song.id}`,
+    'title': song.title,
+    'subtitle': song.artist.name,
+    'widget': props.logged_ids.includes(song.id) ? <InList/> : null,
+    'className': props.logged_ids.includes(song.id) ? 'disabled' : null
   }))
 
   const list = [{'items': items}]
@@ -135,10 +147,10 @@ const ListTabs = (props) => {
         <Tab className='tab' selectedClassName='selected'>Lanzamientos</Tab>
         <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
       </TabList>
-      <TabPanel><ArtistsList ids={props.artists}/></TabPanel>
-      <TabPanel><DiscsList ids={props.discs}/></TabPanel>
-      <TabPanel><ReleasesList ids={props.releases}/></TabPanel>
-      <TabPanel><SongsList ids={props.songs}/></TabPanel>
+      <TabPanel><ArtistsList ids={props.artists} logged_ids={props.logged_list}/></TabPanel>
+      <TabPanel><DiscsList ids={props.discs} logged_ids={props.logged_list}/></TabPanel>
+      <TabPanel><ReleasesList ids={props.releases} logged_ids={props.logged_list}/></TabPanel>
+      <TabPanel><SongsList ids={props.songs} logged_ids={props.logged_list}/></TabPanel>
     </Tabs>
   )
 }
@@ -151,28 +163,46 @@ const UserList = (props) => {
   const release_list = props.list.filter((item) => item.entity.type === 'release').map((item => item.entity.mbid));
   const song_list = props.list.filter((item) => item.entity.type === 'recording').map((item => item.entity.mbid));
 
+  let logged_list = []
+  if (props.logged_list !== null) {
+    logged_list = props.logged_list.map(item => item.entity.mbid)
+  }
+
   return (
     <div>
       <h2>Lista</h2>
-      <ListTabs artists={artist_list} discs={disc_list} releases={release_list} songs={song_list}/>
+      <ListTabs artists={artist_list} discs={disc_list} releases={release_list}
+                songs={song_list} logged_list={logged_list}/>
     </div>
   )
 }
 
 export const UserView = (props) => {
+  const context = useStateValue()[0];
   const [user, setUser] = useState(null);
   const [list, setList] = useState(null);
+  const [logged_list, setLoggedList] = useState(null);
 
-  if (user === null) {
+  useEffect(() => {
     getUser(null, props.match.params.id).then(setUser)
-  }
+  }, [props.match.params.id])
+
 
   if (user === null) {
     return <NoRoute/>
   }
 
-  if (list === null) {
-    get_list(user.id).then((response) => setList(response.data.list)).catch((error) => {
+  if (list === null || list.user_id !== user.id) {
+    get_list(user.id).then((response) => setList(response.data)).catch((error) => {
+      console.log(error);
+    })
+  }
+
+  const logged_user = JSON.parse(window.localStorage.getItem('user'))
+  if ((logged_list === null && context.user.auth) && (user.id !== logged_user.id)) {
+    get_list(logged_user.id).then((response) => {
+      setLoggedList(response.data.list)
+    }).catch((error) => {
       console.log(error)
     })
   }
@@ -186,7 +216,7 @@ export const UserView = (props) => {
         <SocialNetworks user={user.id}/>
       </RowCol>
       <RowCol>
-        <UserList list={list}/>
+        {list && <UserList list={list.list} logged_list={logged_list}/>}
       </RowCol>
     </Grid>
   )