From b50478a76cb2ced8568cc8d89446223683ddcf7c Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Tue, 14 Jul 2020 21:19:07 -0400 Subject: [PATCH] El usuario puede ver si un item esta en su lista o no --- src/components/EntityList.jsx | 8 +++- src/components/EntityList.scss | 19 ++++++++- src/components/Nav.jsx | 2 +- src/views/User.jsx | 70 ++++++++++++++++++++++++---------- 4 files changed, 76 insertions(+), 23 deletions(-) diff --git a/src/components/EntityList.jsx b/src/components/EntityList.jsx index c915e06..49d1410 100644 --- a/src/components/EntityList.jsx +++ b/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 ( -
  • +
  • {item.cover && item.cover} diff --git a/src/components/EntityList.scss b/src/components/EntityList.scss index a9b16e5..90ce092 100644 --- a/src/components/EntityList.scss +++ b/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; + } + +} diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 6ac18bc..e728423 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -38,7 +38,7 @@ export const Nav = (props) => { } else { return
      -
    • {capitalize(user.username)}
      • +
    • {capitalize(user.username)}
    • Cerrar Sesión
      • diff --git a/src/views/User.jsx b/src/views/User.jsx index 7837b37..723e0e9 100644 --- a/src/views/User.jsx +++ b/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
      Ya esta en tu lista!
      +} 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) ? : null, + 'className': props.logged_ids.includes(artist.id) ? 'disabled' : null })) const list = [{'items': items}] @@ -50,7 +56,9 @@ const ReleasesList = (props) => { 'cover': (), '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) ? : null, + 'className': props.logged_ids.includes(release.id) ? 'disabled' : null })) const list = [{'items': items}] @@ -73,7 +81,9 @@ const DiscsList = (props) => { 'cover': (), 'link': `/disc/${disc.id}`, 'title': disc.title, - 'subtitle': disc.artist.name + 'subtitle': disc.artist.name, + 'widget': props.logged_ids.includes(disc.id) ? : 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) ? : null, + 'className': props.logged_ids.includes(song.id) ? 'disabled' : null })) const list = [{'items': items}] @@ -135,10 +147,10 @@ const ListTabs = (props) => { Lanzamientos Canciones - - - - + + + + ) } @@ -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 (

      Lista

      - +
      ) } 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 } - 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) => { - + {list && } )