BLOG APP ب REACT JS تحديث المحتوى الجزء السادس


فهاد الجزء السادس من Blog App  ب React Js غادي نكملوا العرض ديال les articles بالصورديالهم وأيضا غادي نشوفوا كيفاش نعرضوا المعلومات الخاصة ب article ضغطنا عليه مع الصورة الخاصة به.

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

1- عرض LES ARTICLES بالصور ديالهم تتمة

غادي نمشي ل dossier Posts فل fichier articles.js غادي ندير تعديل على الكود فنفس الشي لي درت ف home.js غادي نديرو هنا.

الكود ديال articles.js  بعد التعديل هو :

                                //
import React,{Component} from 'react';
import {firebase,firebaseArticles} from '../../firebase';
import PostCard from '../Widgets/postCard';


class Articles extends Component{
    constructor(props){
        super(props);
        this.state = {
            articles : []
        }
    }
    componentWillMount(){
        this.getArticles();
    }
    storeArticles = (items) =>{
        const data = [];
        items.forEach((item) =>{
            data.push({
                ...item.val(),
                id : item.key
            })
        })
        return data;
    }
    getArticles = () =>{
        firebaseArticles.once('value')
            .then((snapshot) => {
                const articles = this.storeArticles(snapshot);
                articles.forEach((item,i) =>{
                    firebase.storage().ref("images").child(item.image)
                        .getDownloadURL()
                        .then(url =>{
                            articles[i].image = url;
                            this.setState({
                                articles
                            })
                        })
                })
                this.setState({
                    articles
                })
            })
    }
    render(){
        return(
            <div>
                <PostCard articles={this.state.articles}/>
            </div>
        )
    }
}   


export default Articles;
                            

2- تعديل الملف postCard.js

فالملف postCard.js غادي ندير تعديل على العرض ديال الصورة فغادي نحيد الرابط ل dossier images لي كنا زايدين غادي نخلي غير الرابط ديال الصورة الخاصة بل article.

الكود ديال الملف بعد التعديل هو :

                                //
import React from 'react';
import './postCard.css';
import {Link} from 'react-router-dom';

const PostCard = (props) =>{
    const showData = () => {
        let template = props.articles.map((article,i)=>{
            return  <div key={i} className="post_item">
                <img src={`${article.image}`} height="200" width="390" alt=""/>
                <Link to={`/articles/${article.id}`}>
                    <h4>{article.title}</h4>
                </Link>
                <p>{article.body}</p>
            </div>;
        });
        return template;
    }
    return(
        <div>
            {showData()}
        </div>
    );
};


export default PostCard;
                            

3- تعديل الملف article.js

فالملف article.js الخاص بعرض المعلومات الخاصة ب article غادي ندير تعديل زدت fonction سميتها getImageUrl لي كتاخد السمية ديال الصورة وكترجعلي الرابط ديالها.

هاد ال fonction غادي تنفذ من بعد مكنسترجع ل article بل id ديالو كنعطيها السمية ديال الصورة ومنبعد مكترجع الرابط كنعطيه ل variable سميتها imageURL زدتها ف state.

منبعد كنعطي الرابط ديال الصورة  ل component ArticleCard مع ل article لي غادي يتعرض.

الكود ديال article.js  بعد التعديل هو :

                                //
import React,{Component} from 'react';
import ArticleCard from '../Widgets/articleCard';
import {firebase,firebaseDB} from '../../firebase';


class Article extends Component{
    constructor(props){
        super(props);
        this.state = {
            article : [],
            comments : [],
            imageURL : ''
        }
    }
    componentWillMount(){
        this.getArticle();
    }
    getArticle = () =>{
        firebaseDB.ref(`articles/${this.props.match.params.id}`).once('value')
            .then((snapshot) =>{
                let article = snapshot.val();
                this.setState({
                    article
                });
                this.getImageUrl(article.image)
            })
    }
    getImageUrl = (filename) => {
        firebase.storage().ref('images')
            .child(filename).getDownloadURL()
            .then(url =>{
                this.setState({
                    imageURL : url
                })
            });
    }
    getArticleComments = () =>{
       
    }
    render(){
        return(
            <div>
                <ArticleCard comments={this.state.comments} image={this.state.imageURL} article={this.state.article}/>
            </div>
        )
    }
}   


export default Article;
                            

4- تعديل الملف articleCard.js

فالملف articleCard.js غادي ندير تعديل على العرض ديال الصورة فغادي نحيد الرابط ل dossier images لي كنا زايدين غادي نزيد فبلاصتو ل variable image لي جاتني من article.js ولي فيها رابط الصورة الخاصة بل article.

الكود ديال الملف بعد التعديل هو :

                                    //
import React from 'react';
import './postCard.css';

const ArticleCard = ({article,comments,image}) =>{
    const showData = () => {
        let template = <div className="post_item">
                <img src={`${image}`} height="500" width="390" alt=""/>
                <h4>{article.title}</h4>
                <p>{article.body}</p>
            </div>;
        return template;
    }
    const showArticleComments = () => {
        console.log(article);
        let template = comments.map((comment)=>{
            return <div className="post_item">
                        <div className="user_info">
                            <h4>{comment.name}</h4> 
                            <h4>{comment.email}</h4>
                        </div>
                        <p>{comment.body}</p>
                    </div>;
        });
        return template;
    }
    return(
        <div>
            {showData()}
            <div className="comments">
                <h3>Commentaires</h3>
                {showArticleComments()}
            </div>
        </div>
    );
};


export default ArticleCard;
                                


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

بحث في الموقع


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