From 10e2934b182f7e2321d558a1664dd62f7f856ea4 Mon Sep 17 00:00:00 2001
From: BuildTools <clayloneman@gmail.com>
Date: Wed, 10 Mar 2021 14:35:02 -0600
Subject: [PATCH] fix blank images flag for no profile photo/album cover

---
 src/components/ArtWork/component.js       | 15 +++++++++++----
 src/components/UserDetails/component.js   | 15 +++++++++------
 src/components/UserPlaylists/component.js | 16 ++++++++--------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/ArtWork/component.js b/src/components/ArtWork/component.js
index af73ef1..bd7146f 100644
--- a/src/components/ArtWork/component.js
+++ b/src/components/ArtWork/component.js
@@ -3,14 +3,21 @@ import PropTypes from 'prop-types';
 import './ArtWork.css';
 
 const ArtWork = (albumArtwork) => (
-  <div className='album-artwork-container'>
-    <img alt="artwork" className='album-artwork' src={albumArtwork.albumImage} />
+  <div className="album-artwork-container">
+    <img
+      alt="artwork"
+      className="album-artwork"
+      src={
+        albumArtwork.albumImage
+          ? albumArtwork.albumImage
+          : 'https://via.placeholder.com/500/000000/FFFFFF?text=Not+Playing'
+      }
+    />
   </div>
 );
 
-
 ArtWork.propTypes = {
-  albumArtwork: PropTypes.string
+  albumArtwork: PropTypes.string,
 };
 
 export default ArtWork;
diff --git a/src/components/UserDetails/component.js b/src/components/UserDetails/component.js
index 073444b..59ab360 100644
--- a/src/components/UserDetails/component.js
+++ b/src/components/UserDetails/component.js
@@ -1,18 +1,21 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./UserDetails.css";
+import React from 'react';
+import PropTypes from 'prop-types';
+import './UserDetails.css';
 
 const UserDetails = ({ userImage, displayName }) => (
   <div className="user-details-container">
-    <img alt="user" className="user-image" src={userImage} />
+    <img
+      alt="user"
+      className="user-image"
+      src={userImage ? userImage : 'https://via.placeholder.com/100'}
+    />
     <p className="user-name">{displayName}</p>
   </div>
 );
 
-
 UserDetails.propTypes = {
   userImage: PropTypes.string,
-  displayName: PropTypes.string
+  displayName: PropTypes.string,
 };
 
 export default UserDetails;
diff --git a/src/components/UserPlaylists/component.js b/src/components/UserPlaylists/component.js
index e18087c..b2c886d 100644
--- a/src/components/UserPlaylists/component.js
+++ b/src/components/UserPlaylists/component.js
@@ -1,16 +1,16 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import "./UserPlaylists.css";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './UserPlaylists.css';
 
 class UserPlaylists extends Component {
   componentWillReceiveProps(nextProps) {
-    if (nextProps.userId !== "" && nextProps.token !== "") {
+    if (nextProps.userId !== '' && nextProps.token !== '') {
       this.props.fetchPlaylistsMenu(nextProps.userId, nextProps.token);
     }
   }
 
   renderPlaylists() {
-    return this.props.playlistMenu.map(playlist => {
+    return this.props.playlistMenu.map((playlist) => {
       const getPlaylistSongs = () => {
         this.props.fetchPlaylistSongs(
           playlist.owner.id,
@@ -25,8 +25,8 @@ class UserPlaylists extends Component {
           onClick={getPlaylistSongs}
           className={
             this.props.title === playlist.name
-              ? "active side-menu-item"
-              : "side-menu-item"
+              ? 'active side-menu-item'
+              : 'side-menu-item'
           }
           key={playlist.id}
         >
@@ -53,7 +53,7 @@ UserPlaylists.propTypes = {
   playlistMenu: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   fetchPlaylistsMenu: PropTypes.func,
   fetchPlaylistSongs: PropTypes.func,
-  updateHeaderTitle: PropTypes.func
+  updateHeaderTitle: PropTypes.func,
 };
 
 export default UserPlaylists;