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


فهاد الجزء الثالت من هاد التحديث على BLOG APP ب REACT JS غادي نكملوا système ديال login لي زدنا من قبل غادي نشوفوا كيفاش نتسجلوا ف firebase وأيضا كيفاش نتكونيكطا و ديكونيكطا.

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

1- إضافة الفورم الرئيسية

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

ف dossier widgets زيد fichier جديد سميه Form.js لي غادي تكون فيه الفورم ديالنا فكنخدم ب fonction سميتها renderForm لي كتاخد type لي بيه كنعرف واش نعرض ل connexion ولا ل inscription فهادشي سبق درناه ف notes app.

الجديد هنا هو ل validation ديال les champs فزدت objet valid ف state لي فيه الحقول لي عندنا وعطيتهم false وفاش كنسترجع القيم من الحقول يلا كان الحقل عامر كنبدل لقيمة ديال لحقل لي ف valid ل true.

وعندي أيضا ل validation ديال ل email لي درتها بل fonction ValidateEmail وعندي أيضا fonction checkValidation لي كنتحقق بها واش الحقول عامرين وبها كنحدد الوضع ديال ل bouton valider يلا كان كلشي عامر كنحيدلو ل class disabled مكانوش كنخليها.

من بعد عندي ل fonction submitForm لي كنرسل بها الفورم فكنتحقق يلا كانت ديال ل connexion كنخدم بل fonction signInWithEmailAndPassword ديال  firebase لي كتمكن من تسجيل الدخول ديال مستخدم كنعطيها الإمايل وكلمة المرور باش نتكونيكطا كانت ديال ل inscription كنخدم بل fonction createUserWithEmailAndPassword ديال firebase ولي كتمكن من تسجيل مستخدم جديد.

الكود ديال الملف Form.js هو :

                                //
import React,{Component} from 'react';
import {firebase} from '../../firebase';

class Form extends Component{
    state = {
        valid : {
            name : false,
            email : false,
            password : false
        },
        formData : {
            name : '',
            email : '',
            password : ''
        }
    }
    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
            })
        }
    }
    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{
            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
                })
            })
        }
    }
    checkValidation = () => {
        return this.state.valid.email && this.state.valid.password;
    }
    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() ?
                                            '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() ?
                                    '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- تعديل القائمة الرئيسية

فغادي نديرو تعديل على القائمة الجانبية ديالنا غادي نزيدو الروابط الخاصين بتسجيل الدخول والتسجيل وأيضا الخروج.

فغادي نمشي للملف sideNav.js تما فين عندي القائمة ديالي غادي نزيد فل array items الروابط لي هما inscription connexion & déconnexion وزدت propriété جديدة سميتها display وعطيتها true وهي لي غادي تمكني من تحديد واش لمستخدم connecté او لا لا.

يلا كان connecté غادي نعرض غير déconnexion من بعد فل fonction navbarItems لي بها كنعرض القائمة كنتحقق واش ل item عندو ف display true عاد كنعرضوا.

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

                                //
import React from 'react'
import SideNav from 'react-simple-sidenav';
import {Link} from 'react-router-dom';
import './sideNav.css';


const SideNavBar = (props) => {
    const items = [
        {
            text : 'Home',
            icon : 'fas fa-home',
            link : '/',
            display : true
        },
        {
            text : 'Articles',
            icon : 'fas fa-list-ul',
            link : '/articles',
            display : true
        },
        {
            text : 'Inscription',
            icon : 'fas fa-user-plus',
            link : '/register',
            display : props.user == null ? true : false
        },
        {
            text : 'Connexion',
            icon : 'fas fa-sign-in-alt',
            link : '/login',
            display : props.user == null ? true : false
        },
        {
            text : 'Déconnexion',
            icon : 'fas fa-sign-out-alt',
            link : '/logout',
            display : props.user == null ? false : true
        }
    ];
    const navbarItems = () => {
        return items.map((item,i)=>{
            if(item.display){
                return(
                    <div key={i}   className="link">
                       <Link to={item.link}>
                            <i className={item.icon}></i>
                            <span>{item.text}</span>
                       </Link>
                    </div>
                );
            }
        }); 
    }
    return(
        <div>
            <SideNav
                showNav={props.showNav}
                onHideNav={props.onHideNav}
                navStyle={{
                    background : '#242424',
                    maxWidth : '250px'
                }}
            >
                {navbarItems()}
            </SideNav>
        </div>
    )
}

export default SideNavBar;
                            

3- التحقق من ان المستخدم متصل

باش نتحقق واش المستخدم متصل يعني connecté غادي نمشي للملف index.js وف onAuthStateChanged لي هي fonction ديال firebase كنتحقق واش متصل أو لا يلا كان فل user لي هو ل paramètre لي كتاخدو ل fonction كيكون فيه المعلومات الخاصة بالمستخدم مكانش كيكون خاوي.

منبعد ل user كنعطيه ل component App لي كيرسلوا ل Routes ومنهم كيمشي ل sideNav.js لي فيها كيف شفنا قبل كنتحقق واش عندي ل user أو لا لا ومنتما كيتحدد الوضع ديال display لي كيمكن من تغيير العرض ديال القائمة. 

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

                                //
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from './route';
import {firebase} from './firebase';

const App = (props) => {
    return(
        <BrowserRouter>
            <Routes {...props}/>
        </BrowserRouter>
    );
};

firebase.auth().onAuthStateChanged((user) => {
    ReactDOM.render(<App user={user}/>,document.getElementById('root'));
})
                            

4- تسجيل خروج المستخدم ب firebase

فبقات حاجة أخيرة هي déconnexion غادي نزيد ملف جديد ف dossier Auth سميه logout.js فيه كنخدم بل fonction signOut ديال firebase لي غادي تمكن المستخدم باش يخرج من بعد مكيخرج كنرجعوا للصفحة الرئيسية.

الكود ديال الملف logout.js هو :


                                    //
import React from 'react';
import {firebase} from '../../firebase';

const Logout = (props) =>{
    const signOut = () =>{
        firebase.auth().signOut()
        .then(() =>{
            props.history.push('/');
        })
    }
    return(
        <div>
            {signOut()}
        </div>
    );
};


export default Logout;
                                


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

بحث في الموقع


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