Issue #20 Solucionados errores mostrados por consola

src/components/Auth.jsx

@@ -5,8 +5,8 @@ import queryString from "query-string";
 import {auth, logout} from "../services/auth_service";
 import {useStateValue} from "../services/State";
 
-export const AuthMiddleware = (props) => {
-    const match = useRouteMatch('*')
+export const AuthMiddleware = () => {
+    useRouteMatch('*');
     return null;
 }
 
@@ -20,8 +20,6 @@ export const AuthLogin = (props) => {
 
     const params = queryString.parse(props.location.search);
     auth(params).then((response) => {
-        console.debug(response, window.localStorage);
-
         if(response.status === 'redirect_to_code'){
             // Se va o ya se redirigió hacia la pagina que obtiene el código, no hay nada que hacer.
             return null;
@@ -42,16 +40,16 @@ export const AuthLogin = (props) => {
     return null;
 }
 
-export const AuthLogout = (props) => {
+export const AuthLogout = () => {
     const [context, dispatch] = useStateValue();
+
     if (!context.user.auth) {
-        return <Redirect to='/'/>
+        return <Redirect to={'/'}/>;
     }
 
-    logout(context.user.access_token).then(result => {
-        console.log(result);
+    logout(context.user.access_token).then(() => {
+        dispatch({type: 'logout', user: {auth: false}})
     });
 
-    dispatch({type: 'logout', user: {auth: false}})
-    return <Redirect to='/'/>
+    return <Redirect to={'/'}/>;
 }

src/components/Comments.jsx

@@ -6,14 +6,14 @@ import Faker from 'faker';
 import './Comments.scss'
 
 const Comment = (props) => (
-  <div class='comment'>
-    <div class='avatar-container'>
+  <div className='comment'>
+    <div className='avatar-container'>
       <img className='avatar' src={props.avatar} alt='Avatar'/>
     </div>
     <div className='body'>
       <span className='username'>{props.user}</span>
       <p>{props.text}</p>
-      <div class='buttons'>
+      <div className='buttons'>
         <button><FaThumbsUp/></button>
         <button><FaThumbsDown/></button>
         <button><FaLaughSquint/></button>

src/components/EntityList.jsx

@@ -13,11 +13,11 @@ const EntityHeader = (props) => {
 const EntityPlaceholder = (props) => {
   return (
     <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
-      <div class="entity-container">
-        <Link to={props.link}>
+      <div className="entity-container">
+        <Link to={'#'}>
           {props.cover && <div className='cover pulsating'/>}
           <div className='body'>
-            <span class='title'>&nbsp;</span>
+            <span className='title'>&nbsp;</span>
             <span className='subtitle'>&nbsp;</span>
           </div>
         </Link>
@@ -30,16 +30,16 @@ const EntityItem = (props) => {
   const item = props.item;
   return (
     <li className={'entity-item ' + (item.selected ? 'selected' : '')} id={item.id}>
-      <div class="entity-container">
+      <div className="entity-container">
         <Link to={item.link}>
           {item.cover && item.cover}
           <div className='body'>
-            <span class='title'>{item.title}</span>
+            <span className='title'>{item.title}</span>
             <span className='subtitle'>{item.subtitle}</span>
           </div>
         </Link>
         { item.widget &&
-          <div class="widget">
+          <div className="widget">
             {item.widget}
           </div>
         }
@@ -59,7 +59,7 @@ export const EntityList = (props) => {
   }else{
     let mapped = props.list.map(group => {
       let header = group.header ? <EntityHeader title={group.header}/> : null;
-      let items = group.items.map(item => <EntityItem item={item}/>);
+      let items = group.items.map((item, index) => <EntityItem key={index} item={item}/>);
       items.unshift(header);
       return items;
     });

src/services/State.jsx

@@ -3,8 +3,6 @@ import React, {createContext, useContext, useReducer} from 'react';
 const initialState = {user: {auth: false}};
 
 const reducer = (state, action) => {
-    console.log(state, action);
-
     switch (action.type) {
         case 'login':
             return {
@@ -24,9 +22,10 @@ const reducer = (state, action) => {
 export const StateContext = createContext(null);
 
 export const StateProvider = ({children}) => {
+    const value = useReducer(reducer, initialState);
 
     return (
-        <StateContext.Provider value={useReducer(reducer, initialState)}>
+        <StateContext.Provider value={value}>
             {children}
         </StateContext.Provider>
     );

src/services/auth_service.js

@@ -68,7 +68,6 @@ export const auth = async (params) => {
         if (expires > new Date()) {
             const refresh_token = window.localStorage.getItem('refresh_token');
             response = await do_refresh(refresh_token);
-            console.log('refresh response', response);
         }
     }
 

src/services/entity_service.js

@@ -3,56 +3,69 @@ import axios from 'axios';
 let baseUrl = `${process.env.REACT_APP_API_SERVER}/api/brainz`;
 
 export async function getArtist(mbid) {
-  const url = `${baseUrl}/artist/${mbid}`;
-  const response = await axios.get(url)
-  return response.data
+    const url = `${baseUrl}/artist/${mbid}`;
+    const response = await axios.get(url)
+    return response.data
 }
 
 export async function getArtistDiscs(mbid, page = 1, per_page = 10) {
-  const url = `${baseUrl}/artist/${mbid}/discs?per_page=${per_page}&page=${page}`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/artist/${mbid}/discs?per_page=${per_page}&page=${page}`;
+    const response = await axios.get(url);
+    return response.data
 }
 
 export async function getDisc(mbid) {
-  const url = `${baseUrl}/disc/${mbid}`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/disc/${mbid}`;
+    const response = await axios.get(url);
+    return response.data
 }
 
 export async function getDiscVersions(mbid, page = 1, per_page = 10) {
-  const url = `${baseUrl}/disc/${mbid}/releases`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/disc/${mbid}/releases`;
+    const response = await axios.get(url);
+    return response.data
 }
 
 export async function getRelease(mbid) {
-  const url = `${baseUrl}/release/${mbid}`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/release/${mbid}`;
+    const response = await axios.get(url);
+    return response.data
 }
 
 export async function getReleaseSongs(mbid) {
-  const url = `${baseUrl}/release/${mbid}/recordings`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/release/${mbid}/recordings`;
+    const response = await axios.get(url);
+    return response.data
 }
 
 export async function getSong(mbid) {
-  const url = `${baseUrl}/recording/${mbid}`;
-  const response = await axios.get(url);
-  console.log(response.data);
-  return response.data;
+    const url = `${baseUrl}/recording/${mbid}`;
+    const response = await axios.get(url);
+    return response.data;
 }
 
 export async function getDiscCoverArt(mbid) {
-  const url = `${baseUrl}/disc/${mbid}/coverart`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/disc/${mbid}/coverart`;
+    try{
+        const response = await axios.get(url);
+        return response.data;
+    } catch (error) {
+        // 404 es un caso común asi que es ignorado
+        if(error.response.status !== 404){
+            return error;
+        }
+    }
 }
 
 export async function getReleaseCoverArt(mbid) {
-  const url = `${baseUrl}/release/${mbid}/coverart`;
-  const response = await axios.get(url);
-  return response.data
+    const url = `${baseUrl}/release/${mbid}/coverart`;
+    try{
+        const response = await axios.get(url);
+        return response.data;
+    } catch (error) {
+        // 404 es un caso común asi que es ignorado
+        if(error.response.status !== 404){
+            return error;
+        }
+    }
 }

src/views/Recomended.jsx

@@ -21,7 +21,7 @@ const PopularArtists = () => {
     return <EntityList placeholder={true} size={4}/>
   } else {
     const items = artists.map((artist) => {
-      const widget = (<span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>);
+      const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>);
       return {
         'cover': null,
         'link': `/artist/${artist.id}`,
@@ -50,7 +50,7 @@ const PopularDiscs = () => {
   }else {
     const items = discs.map((disc) => {
       const cover = (<CoverArt disc={disc} size={2}/>);
-      const widget = (<span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>)
+      const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>)
       return {
         'cover': cover,
         'link': `/disc/${disc.id}`,
@@ -80,7 +80,7 @@ const PopularSongs = () => {
     return <EntityList placeholder={true} size={4}/>
   }else {
     const items = songs.map((song) => {
-      const widget = (<span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>);
+      const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>);
       return {
         'cover': null,
         'link': `/song/${song.id}`,