Blog App ب react js تحديث المحتوى الجزء الخامس


فهاد الجزء الخامس من Blog app ب react js غادي نزيدو الفورم ديالنا ولي غادي تمكنا من إضافة des articles لقاعدة البيانات كما غادي نشوفوا كيفاش نزيدو لفورم لي غادي تمكن من إضافة الصورة ديال كل article زدناه.

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

1- إضافة الفورم الخاص بإضافة article

فكيف قلنا قبل الفورم مشتركة فقط ل variable type لي غادي نحددوا بها لفورم لي غادي تعرض.

فال component Dashboard زدنا type لي حددناه ف addArticle.

ف dossier widgets عندي fichier Form.js لي فيه الفورم ديالنا كنخدم ب type كيف قلنا يلا كان addArticle كنزيد الفورم لي فيها كيف شفنا فالفيديو titre,description,auteur,image بالنسبة ل image غادي نزيدو component خاص بها من بعد.

الجديد هنا هو ل validation ديال les champs فزدت variable type لي بها كنحدد الفورم والحقول لي غادي نتحقق منهم 
دائما بل fonction checkValidation هادشي راه شفناه قبل.

من بعد فل fonction submitForm لي كنرسل بها الفورم كنتحقق يلا كان type addArticle أول حاجة كنسترجع آخر id ديال les articles لي عندي فقاعدة البيانات وكنزيد objet سميتو dataToSubmit لي كنعطيه الحقول مع القيم ديالهم وكن incrémenter ل id بواحد حيت ف firebase معنديش بحال mysql ل id كيتزاد بواحد أتوماتيكيا.

من بعد ميتزاد ل article كنوجه المستخدم ل article لي تزاد.

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

                                //
import React,{Component} from 'react';
import {firebase,firebaseArticles} from '../../firebase';
import Uploader from '../Widgets/FileUploader/fileUploader';

class Form extends Component{
    state = {
        valid : {
            name : false,
            email : false,
            password : false,
            title : false,
            body : false,
            author : false,
            image : false
        },
        formData : {
            name : '',
            email : '',
            password : '',
            title : '',
            body : '',
            author : '',
            image : ''
        }
    }
    handleEmail = (event) => {
        let email = event.target.value;
        if(email.length && this.ValidateEmail(email)){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.email = true;
            oldForm.email = event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.email = false;
            oldForm.email = event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    handlePassword = (event) => {
        let password = event.target.value;
        if(password.length){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.password = true;
            oldForm.password = event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.password = false;
            oldForm.password = event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    handleName = (event) => {
        let name= event.target.value;
        if(name.length){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.name= true;
            oldForm.name= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.name= false;
            oldForm.name= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    handleTitle = (event) => {
        let title= event.target.value;
        if(title.length){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.title= true;
            oldForm.title= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.title= false;
            oldForm.title= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    handleAuthor = (event) => {
        let author= event.target.value;
        if(author.length){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.author= true;
            oldForm.author= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.author= false;
            oldForm.author= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    handleBody = (event) => {
        let body= event.target.value;
        if(body.length){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.body= true;
            oldForm.body= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.body= false;
            oldForm.body= event.target.value;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    handleImage = (image) => {
        if(image.length){
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.image= true;
            oldForm.image= image;
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }else{
            let oldForm = this.state.formData;
            let oldValid = this.state.valid;
            oldValid.image= false;
            oldForm.image= '';
            this.setState({
                formData : oldForm,
                valid : oldValid
            })
        }
    }
    storeFileName = (filename) => {
        this.handleImage(filename);
    }
    submitForm = (event,type) => {
        event.preventDefault();
        if(type === 'login'){
            firebase.auth().signInWithEmailAndPassword(
                this.state.formData.email,
                this.state.formData.password
            ).then(() => {
                this.props.history.push('/')
            }).catch(error => {
                this.setState({
                    loading : false,
                    registerError : error.message
                })
            })
        }else if(type === 'register'){
            firebase.auth().createUserWithEmailAndPassword(
                this.state.formData.email,
                this.state.formData.password
            ).then(() => {
                this.props.history.push('/')
            }).catch(error => {
                this.setState({
                    loading : false,
                    registerError : error.message
                })
            })
        }else if(type === 'addArticle'){
            let dataToSubmit = {};
             //get the last article id from firebase
            firebaseArticles.orderByChild("id").limitToLast(1).once('value')
                .then(article => {
                    let articleId = null;
                    article.forEach(item => {
                        articleId = item.val().id
                    })
                    
                    dataToSubmit = {
                        'title' : this.state.formData.title,
                        'body' : this.state.formData.body,
                        'author' : this.state.formData.author,
                        'date' : firebase.database.ServerValue.TIMESTAMP,
                        'id' : articleId++,
                        'image' : this.state.formData.image
                    }

                    firebaseArticles.push(dataToSubmit)
                        .then(article => {
                            this.props.history.push(`/articles/${article.key}`)
                        }).catch(error => {
                            console.log(error.message)
                        })
             })
        }
    }
    checkValidation = (type) => {
        if(type === 'login'){
            return this.state.valid.email && this.state.valid.password;
        }else if(type === 'register'){
            return this.state.valid.name && this.state.valid.email && this.state.valid.password;
        }else if (type === 'addArticle'){
            return this.state.valid.author && this.state.valid.title && this.state.valid.body && this.state.valid.image;
        }
    }
    ValidateEmail = (email) => 
    {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
        {
            return true
        }
        return false
    }   
    renderForm = (type) =>{
        let template = null;
        switch(type){
            case 'login' : 
                template = (
                    <form onSubmit={(event) => this.submitForm(event,'login')}>
                        <div className="form_elements">
                            <h3>Connexion</h3>
                            <input type="email"
                                onChange={(event) => this.handleEmail(event)}
                                placeholder="Email" 
                                value={this.state.formData.email}
                            />
                            <input
                                onChange={(event) => this.handlePassword(event)}
                                type="password" placeholder="Mot de passe"
                                value={this.state.formData.password}    
                            />
                            <button type="submit"
                               className={ !this.checkValidation('login') ?
                                            'disabled' : ''
                                         }
                            >Valider</button>
                        </div>
                    </form>
                )
            break;
            case 'register' :
                template = (
                    <form onSubmit={(event) => this.submitForm(event,'register')}>
                        <div className="form_elements">
                            <h3>Inscription</h3>
                            <input type="text"
                                onChange={(event) => this.handleName(event)}
                                placeholder="Nom & Prénom" 
                                value={this.state.formData.name}
                            />
                            <input type="email"
                                onChange={(event) => this.handleEmail(event)}
                                placeholder="Email" 
                                value={this.state.formData.email}
                            />
                            <input
                                onChange={(event) => this.handlePassword(event)}
                                type="password" placeholder="Mot de passe"
                                value={this.state.formData.password}    
                            />
                            <button type="submit" 
                                className={ !this.checkValidation('register') ?
                                    'disabled' : ''
                                }>Valider</button>
                        </div>
                    </form>
                )
            break;
            case 'addArticle' :
                template = (
                    <form onSubmit={(event) => this.submitForm(event,'addArticle')}>
                        <div className="form_elements">
                            <h3>Ajouter un article</h3>
                            <input type="text"
                                onChange={(event) => this.handleAuthor(event)}
                                placeholder="Auteur" 
                                value={this.state.formData.author}
                            />
                            <input type="text"
                                onChange={(event) => this.handleTitle(event)}
                                placeholder="Titre" 
                                value={this.state.formData.title}
                            />
                            <textarea
                                rows="5"
                                cols="30"
                                onChange={(event) => this.handleBody(event)}
                                placeholder="Description"
                                value={this.state.formData.body}    
                            />
                            <Uploader storeFileName = {(filename) => this.storeFileName(filename)}/>
                            <button type="submit" 
                                className={ !this.checkValidation('addArticle') ?
                                    'disabled' : ''
                                }>Valider</button>
                        </div>
                    </form>
                )
            break;
            default : 
            template = null;
        }
        return template;
           
    }
    render(){
        console.log(this.state);
        return(
            <div>
                {this.renderForm(this.props.type)}
            </div>
        );
    }
};


export default Form;
                            

2- إضافة حقل الصور

كيف قلنا قبل باش نزيد الصورة ديال ال article غادي نزيد واحد ل component سميتو Uploader ف dossier widgets زيد dossier سميه FileUploader فيه زيد fichier جديد سميه fileUploader.js.

منبعد باش نزيد الصورة ف firebase غادي نخدم بواحد ل package سميتو react-firebase-file-uploader باش تزيدو سير ل cmd ودير هاد ل commande :

npm i react-firebase-file-uploader

منبعد فل fichier fileUploader.js غادي نزيدوا لكود لي غادي يمكنا باش نزيدو الصورة فقاعدة البيانات فيلا تبعتي الرابط ديال ل package لي قلنا غادي تلقى نفس الكود لي زدت أنا هو لي دايرين ف description.

عندي ل component FileUploader لي هو الحقل لي كيمكني من إختيار الصورة لي بغيت كنعطيه شنو يقبل هنا حددت */image يعني جميع الصور.

عندي أيضا storageRef لي حددناها ف dossier images لي ف firebase كيف شفنا فالفيديو.

والبقية des fonctions لي أهمهم handleUploadSuccess لي فاش الصورة كتزاد كنسترجع الرابط ديالها وكنفذ fonction سميتها storeFileName ولي عندي ف Form.js ولي كتاخذ ل url ديال الصورة وكتعطيه ل image لي هي ل propriété لي عندي ف state.

فاش كنسترجع الرابط ديال الصورة كنعرضها ف img كيف شفنا فالفيديو.

الكود ديال fileUploader.js هو :

                                //
import React, { Component } from 'react';
import {firebase} from '../../../firebase';
import FileUploader from "react-firebase-file-uploader";

class Uploader extends Component{
    state = {
        name: "",
        isUploading: false,
        progress: 0,
        fileURL: ""
    };
    handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
    handleProgress = progress => this.setState({ progress });
    handleUploadError = error => {
        this.setState({ isUploading: false });
        console.error(error);
    };
    handleUploadSuccess = filename => {
        this.setState({ name: filename, progress: 100, isUploading: false });
        //get the file saved url and save it into the fileUrl 
        firebase.storage().ref("images").child(filename).getDownloadURL()
            .then(url => this.setState({ fileURL: url }));
            this.props.storeFileName(filename);
    };
    render(){
        return(
            <div>
                <FileUploader
                    accept="image/*"
                    name="image"
                    randomizeFilename
                    storageRef={firebase.storage().ref("images")}
                    onUploadStart={this.handleUploadStart}
                    onUploadError={this.handleUploadError}
                    onUploadSuccess={this.handleUploadSuccess}
                    onProgress={this.handleProgress}
                />
                {
                    this.state.isUploading ? 
                        <p>Téléchargement : {this.state.progress} %</p>
                    : null
                }
                {
                    this.state.fileURL ? 
                        <img src={this.state.fileURL} style={{
                            width : '300px'
                        }}  alt=""/>
                        : null
                }
            </div>
        )
    }
}


export default Uploader;
                            

3- عرض les articles بالصور ديالهم

غادي نمشي ل home.js غادي ندير تغيير باش نعرض les articles بالصور ديالهم زدت fonction سميتها storeArticles فقط كتخزن les articles ف array منبعد مكنسترجعهم.

منبعد فل fonction getArticles كنسترجع les articles وكنسترجع أيضا رابط الصورة ديال كل واحد فيهم لي كنعطيه منبعد للصورة ديال كل article حيت فقاعدة البيانات عندي فقط إسم الصورة وباش نعرضها خصني الرابط ديالها من firebase.

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

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


class Home 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 Home;
                            


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

بحث في الموقع


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