MUSIC APP REACT JS & DEEZER API الجزء الثالت


فهاد الجزء الثالت والأخير من MUSIC APP REACT JS & DEEZER API غادي نكملوا ل app ديالنا ونزيدو الملف لي غادي يمكنا من عرض المعلومات الخاصة بألبوم ختاريناه مع المقاطع الخاصة به.وأيضا غادي نشوفوا كيفاش نعرضوا الالبومات لي زدنا فالقائمة المفضلة من بعد منسترجعوهم.

نظرة سريعة بالفيديو

1- إضافة ملف عرض ألبوم

ف components غادي تزيد fichier جديد سميه DetailsAlbum.js فيه كنسترجع ل الألبوم بل id ديالو منبعد كنسترجع حتى المقاطع الصوتية وكنزيدها ف variable سميتها tracks.

منبعد عندي ل fonction renderTracks لي كنسترجع بها المقاطع الصوتية وكنعرضها ثم عندي renderAlbum لي كنعرض بها المعلومات الخاصة بالألبوم مع المقاطع الخاصة به.

الكود ديال الملف هو :

                                //DetailsAlbum.js

import React,{Component} from 'react';
import * as actions from '../actions/index';
import Header from '../components/widgets/header/Header';
import Footer from '../components/widgets/footer/Footer';

class DetailsAlbum extends Component{

    state = {
        album : '',
        tracks : []
    }

    componentDidMount = () =>{
        actions.getAlbum(this.props.match.params.id).then(album =>{
            this.setState({album,tracks : album.tracks.data});
        });
    }
    renderTracks = () => {
        const {tracks} = this.state;
        return tracks && tracks.length ? 
            tracks.map((track,index) => (
                <figure key={index}>
                    <figcaption>Ecouter {track.title}</figcaption>
                    <audio
                        controls
                        src={track.preview}>
                            Votre navigateur ne supportes pas
                            <code>audio</code> elemens.
                    </audio>
                </figure>       
            ))
        :
        null;

    }
    renderAlbum = () =>{
        const {album} = this.state;
        return(
            <div className="col-md-12 mb-3">
                <div className="card border-danger">
                    <img src={album.cover_big} className="card-img-top" alt=""/>
                    <div className="card-body">
                        <div className="card-title">
                            <h5 class="text-success">{album.release_date}</h5>
                            <h3 class="text-info">{album.title}</h3>
                        </div>
                    </div>
                    <div className="card-footer">
                        {this.renderTracks()}
                    </div>
                </div> 
            </div>  
        )
    }

    render(){
       console.log(this.state);
       return(
        <div className="container">
            <div className="row mt-4">
                <div className="col-md-8 mx-auto">
                    <Header/>
                    <div className="row"> 
                        {this.renderAlbum()}
                    </div>
                    <Footer/>
                </div>
            </div>
        </div>
       )
    }
}


export default DetailsAlbum;
                            

2- إضافة ملف عرض الألبومات المفضلة

ف components غادي تزيد fichier جديد سميه FavoritesAlbums.js فيه كنسترجع الألبومات لي زدتهم فالقائمة ديال les favoris منبعد كنعرضهم فنفس الكود لي درنا فالصفحة الرئيسية مكاينش شي تغيير.

الكود ديال الملف هو :

                                //FavoritesAlbums.js

import React,{Component} from 'react'
import './Home.css';
import * as actions from '../actions/index';
import {Link} from 'react-router-dom';
import Header from '../components/widgets/header/Header';
import Footer from '../components/widgets/footer/Footer';

class FavoritesAlbums extends Component{
    state = {
        albums : [],
    }
    componentWillMount(){
        let favorites = actions.getFavoritesAlbums();
        this.setState({
            albums : JSON.parse(favorites)
        })
        // console.log(this.state);
    }
    renderAlbums = () => {
        // console.log(this.state);
        const {albums} = this.state;
        return albums && albums.length ? 
            albums.map((item,index) => (
            <div  key={index} className="col-md-4 mb-2">
                <div className="card border-danger">
                    <img src={item.album.cover_big} className="card-img-top" alt=""/>
                    <div className="card-body">
                        <span className="text-primary">{item.artist.name} </span>
                        <div className="card-title">
                            {item.title} 
                        </div>
                    </div>
                    <div className="card-footer">
                        <div className="links">
                            <Link to={`/details/${item.album.id}`} className="link"><i className="fas fa-info text-danger"></i></Link>
                        </div>
                    </div>
                </div> 
            </div>  
        ))
        : null;    
    }
    render(){
        return(
            <div className="container">
                <div className="row mt-4">
                    <div className="col-md-10 mx-auto">
                        <Header/>
                            <div className="row"> 
                                {this.renderAlbums()}
                            </div>
                        <Footer/>
                    </div>
                </div>
            </div>
        )
    }
}

export default FavoritesAlbums;
                            

3- إضافة style css ل app ديالنا

ف components غادي تزيد fichier جديد سميه Home.css فيه غادي يكون style css لي غادي نحتاجوه فالصفحة الرئيسية وفالمفضلة.

الكود ديال الملف هو :

                                //Home.css

body{
    background-color : #d4d4d4;
}
.links{
    display :flex;
    flex-direction: row;
    justify-content: space-between;
}
.links .link {
    background-color: antiquewhite;
    border-radius: 100px;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 6px;
    font-size: 24px;
}
.search .form-group button{
    margin: 5px;
}
.card {
    height: 100%;
}
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد