write feedback

src/Pages/Album.jsx

@@ -11,22 +11,24 @@ import '../styles/PagesStyles/Album.scss'
 const Album = () => {
     const {myId} = useParams();
 
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
     const album = albumLocalStorage.find(item => item.spt_album_id === myId);
-    
+
 //---------------FETCH songs(call to API-songs)------------------------------------//
     const songs = useFetchmusic(myId)
 //---------------storing the songs in the local storage----------------------//
     localStorage.setItem( "SongsList", JSON.stringify( songs ))
-    
+
     return(
         <div className='Album__container'>
             <Playbar />
             <Panel />
             <section className='ContentSection__Album'>
                 <MenuBar />
                 <InfoAlbum data={album} />
-            </section>   
+            </section>
         </div>
     )
 }

src/Pages/AlbumLibrary.jsx

@@ -8,6 +8,8 @@ import MenuBar from '../components/MenuBar'
 import '../styles/PagesStyles/AlbumLibrary.scss'
 
 const AlbumLibrary = () => {
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return (
@@ -20,14 +22,14 @@ const AlbumLibrary = () => {
                             albumLocalStorage.map((data) => (
                                 <BigSquareAlbum data={data} key={data.spt_album_id} {...data}/>
                             ))
-                        } 
+                        }
                     </div>
                 </section>
                 <Playbar />
         </div>
         );
     }
-     
+
 export default AlbumLibrary;
-        
-       
+
+

src/Pages/AnimationLoader.jsx

@@ -6,10 +6,12 @@ import LogoAnimate from '../components/LogoAnimate'
 const AnimationLoader = () => {
     const history = useHistory();
 
+    // TODO:
+    // Apply a setTimeout it's a bad practice
     setTimeout(() => {
         history.push("/signin");
       }, 6000);
-    
+
     return(
         <LogoAnimate />
         )

src/Pages/ArtistSection.jsx

@@ -8,6 +8,9 @@ import '../styles/PagesStyles/ArtistSection.scss'
 
 
 const ArtistSection = () => {
+
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return(
@@ -20,7 +23,7 @@ const ArtistSection = () => {
                         albumLocalStorage.map((data) => (
                             <ArtistImage data={data} key={data.spt_album_id} {...data}/>
                         ))
-                    } 
+                    }
                 </div>
                 </section>
                 <Playbar />

src/Pages/Home.jsx

@@ -14,15 +14,19 @@ import MenuBar from '../components/MenuBar'
 
 const Home = () => {
     //-----------------FETCH Albums (call toAPI)------------------------------//
-    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')       
-
+    // TODO:
+    // The API URL should be a global variable
+    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')
+
     //-----------------storing the album in the local storage----------------------//
-           localStorage.setItem( "albums", JSON.stringify( albumList ))
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
+    localStorage.setItem( "albums", JSON.stringify( albumList ))
 
     useEffect(() => {
         window.scroll(0, 0)
       }, []);
-      
+
         return(
             <div className='Home__container'>
                     <Panel />
@@ -34,7 +38,7 @@ const Home = () => {
                         <RectangleAlbumGarden SectionName='Escuchado recientemente'/>
                         <TopTracks />
                     </section>
-                    <Playbar />                    
+                    <Playbar />
                 </div>
         )
 }

src/Pages/Register.jsx

@@ -18,19 +18,23 @@ export default function Register () {
 
     const handleSubmit = (e) => {
         e.preventDefault();
-
+
+        // TODO:
+        // The API URL should be a global variable
         fetch('https://mastersound-backend.azurewebsites.net/api/auth/signup', {
             method: 'post',
-            mode: 'cors', 
+            mode: 'cors',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
                 given_name,
                 last_name,
-                email, 
+                email,
                 password,
                 country_id,
+                // TODO:
+                // Why this image is set by default?
                 image_url: 'https://i.scdn.co/image/23009960c33ef08d5973440cca17985a6c70a515',
                 sex
             })
@@ -41,59 +45,59 @@ export default function Register () {
                 console.log('Success:', response);
                 history.push('/signin');
             }
-        } 
+        }
     )};
 
-    
+
     return(
         <main className='mainRegister'>
             <img src={Logo} alt='Logo' />
             <form onSubmit={handleSubmit} className='mainSignIn__form'>
                 <label>Nombre de Usuario</label>
                 <Input
-                    type='text' 
-                    placeholder='Nombre' 
+                    type='text'
+                    placeholder='Nombre'
                     name='given_name'
                     onChange={(e) => setGiven_name(e.target.value)}
-                    value={given_name} 
+                    value={given_name}
                 />
                 <label>Apellido del Usuario</label>
                 <Input
-                    type='text' 
-                    placeholder='Apellido' 
+                    type='text'
+                    placeholder='Apellido'
                     name='last_name'
                     onChange={(e) => setLast_name(e.target.value)}
-                    value={last_name} 
+                    value={last_name}
                 />
                 <label>e-mail</label>
                 <Input
-                    type='email' 
-                    placeholder='e-mail' 
+                    type='email'
+                    placeholder='e-mail'
                     name='email'
                     onChange={(e) => setEmail(e.target.value)}
-                    value={email} 
+                    value={email}
                 />
                 <label>Password</label>
                 <Input
-                    type='password' 
-                    placeholder='Password' 
-                    name='password' 
+                    type='password'
+                    placeholder='Password'
+                    name='password'
                     onChange={(e) => setPassword(e.target.value)}
-                    value={password} 
-                />      
+                    value={password}
+                />
                 <label>Pais de Origen</label>
                 <select className='select' value={country_id} onChange={(e) => setCountry_id(e.target.value)}>
                     <option>Seleccionar País</option>
                     <option value='137'>Mexico</option>
                     <option value='47'>Colombia</option>
                     <option value='55'>Cuba</option>
-                </select>  
+                </select>
                 <label>Sexo</label>
                 <select className='select' value={sex} onChange={(e) => setSex(e.target.value)}>
                     <option>Seleccionar Genero</option>
                     <option value='M'>Hombre</option>
                     <option value='F'>Mujer</option>
-                </select>  
+                </select>
                 <ButtonWhite text='Crear Cuenta' />
             </form>
         </main>

src/Pages/SignIn.jsx

@@ -9,8 +9,12 @@ import { useFetchAlbum } from '../hooks/useFetchAlbum';
 
 export default function SingIn() {
     //-----------------FETCH Albums (call toAPI)------------------------------//
-    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')       
+    // TODO:
+    // The API URL should be a global variable
+    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')
     //-----------------storing the album in the local storage----------------------//
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     localStorage.setItem( "albums", JSON.stringify( albumList ))
 
     const history = useHistory();
@@ -19,9 +23,11 @@ export default function SingIn() {
 
     const handleSubmit = (e) => {
         e.preventDefault();
+        // TODO:
+        // The API URL should be a global variable
         fetch('https://mastersound-backend.azurewebsites.net/api/auth/login', {
             method: 'post',
-            mode: 'cors', 
+            mode: 'cors',
             headers: {
                 'Content-Type': 'application/json'
             },
@@ -33,39 +39,39 @@ export default function SingIn() {
                 console.log('Success:', response);
                 history.push('/home');
             }
-        } 
+        }
     )};
 
     return(
-        
+
         <main className='mainSignIn'>
         <img src={Logo} alt='Logo' />
         <form onSubmit={handleSubmit} className='mainSignIn__form'>
             <label>e-mail</label>
             <Input
-                type='email' 
-                placeholder='e-mail' 
+                type='email'
+                placeholder='e-mail'
                 name='email'
                 onChange={(e) => setEmail(e.target.value)}
-                value={email} 
+                value={email}
             />
             <label>Password</label>
             <Input
-                type='password' 
-                placeholder='Password' 
-                name='password' 
+                type='password'
+                placeholder='Password'
+                name='password'
                 onChange={(e) => setPassword(e.target.value)}
-                value={password} 
-            />   
+                value={password}
+            />
             <div className="theme-switch-wrapper">
                 <p>Mantener la sesion abierta</p>
                 <label className="theme-switch">
                 <input type="checkbox" id="checkbox" />
                     <div className="slider round"></div>
                 </label>
-            </div>    
+            </div>
             <ButtonWhite text='Iniciar Sesion' />
-            
+
             <section className='mainSignIn__form--link'>
                 <Link to='/'>Olvide mi contraseña</Link>
                 <Link to='/register'>Crear una cuenta</Link>

src/components/ArtistImage.jsx

@@ -4,9 +4,14 @@ import { Link } from 'react-router-dom';
 import '../styles/componentsStyles/ArtistImage.scss'
 
 const ArtistImage = ({ data }) => {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
+
+    // TODO:
+    // ArtistPortrait is a array but in the HTML show as string
     const ArtistPortrait = data.artists.map((data) => {
         return data.cover_image_url;
     })

src/components/BigSquareAlbum.jsx

@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 import '../styles/componentsStyles/BigSquareAlbum.scss'
 
 const BigSquareAlbum = ({ data }) => {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
@@ -19,7 +21,7 @@ const BigSquareAlbum = ({ data }) => {
                 </div>
             </div>
          </Link>
-        
+
     )
 }
 

src/components/CircleAlbum.jsx

@@ -5,6 +5,8 @@ import '../styles/componentsStyles/CircleAlbum.scss'
 
 
 const CircleAlbum = ({data}) => {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })

src/components/CirculeAlbumGarden.jsx

@@ -5,6 +5,8 @@ import '../styles/componentsStyles/CircleAlbumGarden.scss'
 
 
 const CircleAlbumGarden = ({ SectionName }) => {
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return(

src/components/InfoAlbum.jsx

@@ -9,13 +9,17 @@ const size = {
     height: 300,
 };
 const view = 'list'; // or 'coverart'
-const theme = 'black'; // or 'white' 
+const theme = 'black'; // or 'white'
 
 function InfoAlbum({ data }) {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
 //----------------------getting songs from local storage-----------------------//
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const musicLocalstorage = JSON.parse( localStorage.getItem("SongsList"))
     const idAlbum = data.spt_album_id;
 
@@ -28,11 +32,11 @@ function InfoAlbum({ data }) {
                     <p className='InfoAlbum__Subtitle--NameAlbum'>{data.album_name}</p>
                     <p className='InfoAlbum__Subtitle--Artist'>{nameArtists}</p>
                     <p className='InfoAlbum__Subtitle--Description'>{data.name}</p>
-                        <MySpotifyPlayer 
+                        <MySpotifyPlayer
                             uri= {`spotify:album:${idAlbum}`}
                             size={size}
                             view={view}
-                            theme={theme} 
+                            theme={theme}
                         />
                         {
                             musicLocalstorage.map( (item) => (
@@ -44,5 +48,5 @@ function InfoAlbum({ data }) {
         </Fragment>
     );
 }
- 
+
 export default InfoAlbum;