Notes App ب react js & firebase الجزء الثالت
فهاد الجزء الثالت من Notes App ب react js & firebase غادي نكملو ل projet ديالنا غادي نزيدو ل form ديال التعديل ولي غادي تمكن من تعديل note اختاريناها باستعمال ل id ديالها من بعد غادي نشوفوا كيفاش نبدلوا الفورم على حسب ل action واش إضافة ولا تعديل.
نظرة سريعة بالفيديو
1- إضافة ملف تعديل NOTE
ف components غادي تزيد fichier جديد سميه edit.js في فورم التعديل.
هاد لفورم غادي تاخد واحد type لي هو edit يعني غادي نديرو تعديل وكنرسل أيضا ل id ديال note لي غادي نعدل.
الكود ديال edit.js هو :
//
import React from 'react';
import Navbar from './includes/navbar';
import Form from './widgets/form';
const EditNote = (props) => {
return(
<div>
<Navbar/>
<Form type="edit" id={props.match.params.id}/>
</div>
)
}
export default EditNote;
2- إضافة الفورم الرئيسية
ف components زيد dossier جديد سميه widgets فيه زيد fichier سميه form.js.
فل fichier كنزيد لفورم لي فيها الحقول لي كل مرة كنبدا كنكتب كنسترجع القيمة لي فيهم ونخزنها ف les variables لي عندي ف state.
فاش كيتشارجا ل component لي هي لفورم كنتحقق يلا مكان type edit كنسترجع note بل id ديالها وكنعرضها فلفورم وكنرسل القسم الجديدة ل table notes ف firebase.
كان العكس وكان عندي type add كنتحقق بلي حتى شي حقل ما خاوي وكنرسل المعلومات لقاعدة البيانات.
الكود ديال form.js هو :
//
import React,{Component} from 'react';
import './form.css';
import {firebaseDB} from '../../firebase';
class Form extends Component{
constructor(props){
super(props);
this.state = {
title : '',
body : '',
errorMessage : '',
successMessage : ''
}
}
onTitleChanged = (event) => {
this.setState({
title : event.target.value
})
}
onBodyChanged = (event) => {
this.setState({
body : event.target.value
})
}
componentWillMount(){
if(this.props.type === 'edit'){
firebaseDB.ref(`notes/${this.props.id}`).once('value')
.then((snapshot) => {
this.setState({
title : snapshot.val().title,
body : snapshot.val().body
})
});
}
}
formSubmit = (event) => {
event.preventDefault();
switch(this.props.type){
case 'add' :
if(this.state.title && this.state.body !== ''){
let note = {
title : this.state.title,
body : this.state.body
}
firebaseDB.ref('notes').push(note)
.then(()=>{
this.setState({
successMessage : <div className="success-message">Note ajoutée</div>,
errorMessage : '',
title : '',
body : ''
})
})
.catch((e) => {
console.log(e);
});
}else{
this.setState({
errorMessage : 'ce champ est obligatoire'
})
}
break;
case 'edit' :
if(this.state.title && this.state.body !== ''){
let note = {
title : this.state.title,
body : this.state.body
}
firebaseDB.ref(`notes/${this.props.id}`).update(note)
.then(()=>{
this.setState({
successMessage : <div className="success-message">Note Modifiée</div>,
errorMessage : '',
title : '',
body : ''
})
}).catch((e) => {
console.log(e);
});
break;
}else{
this.setState({
errorMessage : 'ce champ est obligatoire'
})
}
break;
default :
console.log("loading...");
}
}
render(){
return(
<div className="form">
{this.state.successMessage}
<form onSubmit={this.formSubmit}>
<div className="form_element">
<label htmlFor="title">Titre*</label>
<input
value={this.state.title}
onChange={this.onTitleChanged}
/>
</div>
<div className="form-error">
{this.state.errorMessage}
</div>
<div className="form_element">
<label htmlFor="body">Body*</label>
<textarea cols="30" rows="10"
value={this.state.body}
onChange={this.onBodyChanged}
/>
</div>
<div className="form-error">
{this.state.errorMessage}
</div>
<div className="button_element">
<button type="submit">Valider</button>
</div>
</form>
</div>
)
}
}
export default Form;
3- إضافة css للفورم ديالنا
فباش نزيد css للفورم لي زدنا غادي نزيد fichier جديد سميه form.css فنفس dossier لي هو widgets فيه عندي styles css لي غادي نحتاج.
فالكود ديال ل fichier form.css هو :
//
.form{
display: flex;
flex-direction: column;
justify-content: center;
background-color: beige;
width: 60%;
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
border-radius: 5px;
}
form{
display: flex;
flex-direction: column;
margin-right: auto;
margin-left: auto;
padding: 20px;
}
.form-error{
color : red;
margin : 10px 0;
font-size: 15px;
font-weight: 700;
}
.success-message{
text-align: center;
background-color: green;
color: #fff;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
label,input{
display: block;
}
input,textarea{
margin:5px 0;
padding: 5px;
}
button{
background-color: white;
border : 2px solid orange;
padding: 10px;
cursor: pointer;
transition: all .5s ease;
}
button:hover{
background-color: orange;
color: white;
cursor: pointer;
}