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


فهاد الجزء الرابع والاخير من NOTES APP ب REACT JS & FIREBASE غادي نكملوا ل projet وغادي نزيدو ل fichier لي غادي يمكن من حذف note اختاريناها بل id ديالها من بعد غادي نشوفوا كيفاش نعرضوا les notes ديالنا من بعد منسترجعهم من قاعدة البيانات.

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

1-حذف note باستعمال ل id

فباش نمسح note اختاريتها غادي نزيد fichier جديد سميه delete.js ف dossier components منبعد فيه غادي نزيد لكود لي كينفذ fonction سميتها removeNote لي كتاخد ل id ديال note وكتمسحها من قاعدة البيانات.

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

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

const DeleteNote = (props) => {
    const removeNote = () => {
        firebaseDB.ref(`notes/${props.match.params.id}`).remove()
            .then(()=>{
                props.history.push('/');
            }).catch((e) => {
                console.log(e);
            });
    }
    return(
        <div>
            {removeNote()}
        </div>
    )
}

export default DeleteNote;
                            

2- إضافة الصفحة الرئيسية وعرض les notes

فباش نعرض les notes كاملين فكنزيد fichier كنسميه notes.js  ف dossier components  فيه لكود لي كنسترجع به les notes من قاعدة البيانات فاش كيتشارجا ل fichier وكنخزنهم ف variable notes لي هي array زدتها ف state.

منبعد عندي ل fonction showData لي كتسترجع les notes لي عندي فل array وكنخدم ب map باش كنعرضهم فجدول مع روابط التعديل والحذف.

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

                                //
import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import Navbar from './includes/navbar';
import './notes.css';
import {firebaseDB} from '../firebase';

class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            notes : [],
            successMessage : ''
        }
    }
    componentWillMount(){
        firebaseDB.ref('notes').once('value')
            .then((snapshot) => {
                const data = [];
                snapshot.forEach((childSnapshot) => {
                    data.push({
                        id : childSnapshot.key,
                        ...childSnapshot.val()
                    });
                });
                this.setState({
                    notes : data
                })
            });
    }
    showData = () => {
        let template = '';
        template = this.state.notes.map((note,i)=>{
            return(
                <tbody>
                    <tr key={i}>
                        <td>{note.title}</td>
                        <td>
                            <p>
                               {note.body}
                            </p>
                        </td>
                        <td>
                            <Link to={`/edit/${note.id}`} className="link">Modifier</Link>
                            <Link to={`/delete/${note.id}`} className="link">Supprimer</Link>
                        </td>
                    </tr>
                </tbody>
            )
        });
        return template;
    }
    render(){
        return(
            <div>
                <Navbar/>
                <div className="container">
                    {this.state.successMessage}
                    <table>
                        <thead>
                            <tr>
                                <td className="th">Titre</td>
                                <td className="th">Description</td>
                                <td className="th">Action</td>
                            </tr>
                        </thead>
                        {this.showData()}
                    </table>
                </div>
            </div>
        )
    }
}



export default Home;
                            

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

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

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

                                //
.container{
    display: flex;
    background-color: beige;
    margin: 40px auto;
    padding: 20px;
    width: 80%;
}
table{
    margin :  0px auto;
    width: 100%;
    background-color: #ffffff;
    padding: 20px;
}
table thead tr td,
table tbody tr td{
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    padding: 5px;
}
.th{
    font-weight: 700;
    color: orange;
}
.link{
    text-decoration: none;
    margin-right: 10px;
    padding: 10px;
    border : 2px solid blue;
}
.link:hover{
    background-color: blue;
    color: #fff;
}
                            


بحث في الموقع


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