Contacts App ب React js الجزء الثاني

imadbelasri Reactjs
RS

فهاد الجزء الثاني من contact app ب react js غادي نكملو الprojet ديالنا غادي نزيدو style css وأيضا غادي نزيدو ل component لي غادي يمكن من عرض المعلومات الخاصة بل contact لي ضغطنا عليه.


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


1- إضافة CSS للصفحة الرئيسية ديالنا

فباش نزيد css للصفحة الرئيسية لي زدنا غادي نزيد fichier جديد سميه ListContacts.css فنفس dossier لي هو components فيه عندي styles css لي غادي نحتاج.

فالكود ديال ل fichier ListContacts.css هو :

                                                    
                                                        //
body{
    background-color: #d4d4d4;
}
.contact-list{
    list-style: none;
    width: 60%;
    background-color: #f8f3f3;
    padding: 10px 15px 10px 15px;
    margin: 0 auto;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.contact-list li{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.contact-image{
    margin-right: 10px;   
}
.buttonAdd{
    margin: auto;
    margin-top: 10px;
}
.buttonRemove{
    margin: auto;
    margin-top: 20px;
}
.remove{
    border: 1px solid rgb(182, 87, 87);
    background-color: beige;
    color: rgb(182, 87, 87);
    font-weight: bolder;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    padding: 5px;
}
.remove:hover{
    background-color:rgb(182, 87, 87);
    color: white;
    cursor: pointer;
}
.searchbar,
.show-results{
    display: flex;
    flex-direction: row;
    list-style: none;
    width: 60%;
    background-color: #f8f3f3;
    padding: 10px 15px 10px 15px;
    margin: 0 auto;
    border-top-left-radius: 5px ;
    border-top-right-radius: 5px;
}
.searchbar input{
    padding: 20px;
    width: 95%;
    border: 1px solid rgb(182, 87, 87);
    border-radius: 5px;
    margin: 0 auto;
}
.showAll{
    border: none;
    background-color: beige;
    color: rgb(19, 109, 211);
    margin: 0px 10px 0 0;
    cursor: pointer;
}
a{
    text-decoration: none;
}
.show-details{
    margin: auto;
    margin-top: 20px;
}
.show{
    background-color: beige;
    color: rgb(182, 87, 87);
    font-weight: bolder;
    padding: 5px;
    border-radius: 5px;
}
.show:hover{
    background-color:rgb(182, 87, 87);
    color: white;
    cursor: pointer;
}
                                                    
                                                

2- عرض المعلومات الخاصة ب contact

باش نعرض ل contact لي سبق وسجلناه ف localStorage كنزيد fichier جديد سميه ContactDetails.js لي فيه كنسترجع ل contact من localStorage من بعد كنعطيه ل variable سميتها contact زدتها ف state.

منبعد كنعرض المعلومات الخاصة بهاد ل contact وكنزيد أيضا رابط لي كيردني للصفحة الرئيسية ولي فاش كنضغط عليه كتنفذ ل fonction clearStorage لي كتمسح ل contact من localStorage باش فاش كنضغط على contact خور كيتبدل لمحتوى ديال ل contact لي مسجل.

فالكود ديال ل fichier ContactDetails.js هو :

                                                        
                                                            //
import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import './ContactDetails.css';

class ContactDetails extends Component{
    state = {
        contact : null
    }
    clearStorage = () =>{
        localStorage.removeItem('contact');
    }
    componentWillMount(){
        this.setState({
            contact : JSON.parse(localStorage.getItem('contact'))
        })
    }
    render(){
        return(
            <div>
                <Link to="/" class="back" onClick={() => this.clearStorage()}>
                    <i class="fas fa-arrow-left"></i>
                </Link>
                <div className="contact-details">
                    <div className="contact-header">
                        <img src={this.state.contact.picture.large} alt=""
                            style={{
                                height:'100px',
                                borderRadius:'100px'
                            }}
                        />
                        <p><strong>Nom & Prénom  :</strong> {this.state.contact.name.first} {this.state.contact.name.last}</p>
                        <p><strong>Email :</strong> {this.state.contact.email}</p>
                        <p><strong>Téléphone :</strong> {this.state.contact.cell}</p>
                        <p><strong>Age :</strong> {this.state.contact.dob.age}</p>
                        <p><strong>Adresse :</strong> {this.state.contact.location.street}</p>
                        <p><strong>Ville :</strong> {this.state.contact.location.city}</p>
                    </div>
                    <iframe title="carte" width="400" height="450" frameborder="0"
                        src={`https://www.google.com/maps/embed/v1/place?&q=${this.state.contact.location.coordinates.latitude},${this.state.contact.location.coordinates.longitude}&zoom=6&key=AIzaSyCxvKM3rRpD_KqwANDtvBsL7vqJXUaKFpM`}
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        )
    }
}


export default ContactDetails;
                                                        
                                                    

3- إضافة CSS للصفحة الخاصة بعرض contact

فباش نزيد css للصفحة الخاصة بعرض contact لي زدنا غادي نزيد fichier جديد سميه ContactDetails.css فنفس dossier لي هو components فيه عندي styles css لي غادي نحتاج.

فالكود ديال ل fichier ContactDetails.css هو :

                                                        
                                                            //
.contact-details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 30%;
    padding: 20px;
    margin: 0 auto;
    border-radius: 5px;
}
.back{
    background-color: white;
    padding: 8px;
    margin: 0 auto;
    border-radius: 5px;
    text-decoration: none;
}
                                                        
                                                    

4- إضافة fontawesome ل app

باش نزيد ل icônes ل application ديالي غادي نخدم ب fontawesome فكيكفي باش تزيد السطر التالي فل head  ديال الملف index.html لي ف dossier public :

                                                        
                                                            //
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
                                                        
                                                    

دروس ذات صلة

RS

Blog App ب react js الجزء الأول

فهاد ل projet الجديد لي غادي يبقى مفتوح على تحديث جديد كل مرة غادي نشوفوا كيفاش نقادو blog ب react j...


RS

BLOG APP ب REACT JS الجزء الثاني

فهاد الجزء الثاني من blog app ب react js غادي نزيدو ل header ول footer ل application ديالنا ولي فيه...


RS

BLOG APP ب REACT JS الجزء الثالت

فهاد الجزء الثالت من BLOG APP ب REACT JS غادي نكملو ل projet ديالنا غادي نشوفوا كيفاش نزيدو الق...


RS

Blog App ب react js الجزء الرابع

فهاد الجزء الرابع من Blog ب react js غادي نكملوا ال projet بعرض les articles كاملين فالصفحة الخاصة ب...


RS

Notes App ب react js & firebase الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو notes app ب react js & firebase فل app معروف شنو كتدير...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الثاني

فهاد الجزء الثاني من notes app ب react js غادي نكملو ل projet وغادي نزيدوا القائمة ولي غادي تمكنا من...


RS

Notes App ب react js & firebase الجزء الثالت

فهاد الجزء الثالت من Notes App ب react js & firebase غادي نكملو ل projet ديالنا غادي نزيدو ل form دي...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الرابع والأخير

فهاد الجزء الرابع والاخير من NOTES APP ب REACT JS & FIREBASE غادي نكملوا ل projet وغادي نزيدو ل...


RS

Twitter app ب laravel & react js الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو Twitter App لي هي application كتمكن من إضافة des tweets...


RS

Twitter app ب laravel & react js الجزء الثاني

فهاد الجزء الثاني من Twitter app ب laravel & react js غادي نكملوا ل projet ونزيدو الجزء الخاص بالمست...