Firebase - dodawanie danych do Firestore
- Czas potrzebny na przeczytanie:4 minuty
- Opublikowane:
Okej, a co jeśli chciałbym coś dodać?
Ostatnio utworzyliśmy prostą bazę danych, z której pobieraliśmy dane. Dziś dowiesz się, jak te dane dodawać. Let's go!
Co powinieneś wiedzieć?
Żeby wyciągnąć z tego artykułu 100%, powinieneś swobodnie poruszać się po Reactcie.
- Mieć w małym palcu HTML & CSS.
- Być obeznanym ze standardami ES6+.
- Rozumieć Reactowe Hooki
- Posiadać podstawową wiedzę ze Styled Components
- Zaznajomić się z poprzednimi wpisami o Firebase.
Jeśli te zagadnienia są Ci obce, nie martw się! Firebase możesz również wykorzystać bez znajomości Reacta.
Słowem wstępu
Żeby nie tracić czasu na budowanie bazy danych od zera, skorzystam z tej stworzonej w poprzednim wpisie.
Będziemy również rozwijać nasz projekt o ulubionych twórcach, możesz go znaleźć tutaj
Jeśli jesteś nowy w Firebase, możesz zajrzeć do pierwszego artykułu
Przygotowanie komponentu
Stwórzymy teraz podstawowy widok komponentu w AddCreator.js
import React from 'react';
import styled from 'styled-components';
const StyledForm = styled.form`
width: 100%;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Montserrat';
`;
const StyledWrapper = styled.div`
width: 100%;
height: 30%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
`;
const StyledLabel = styled.label`
width: 25.5rem;
text-align: left;
font-size: 1.2rem;
padding: 1rem 0;
`;
const StyledInput = styled.input`
width: 24rem;
font-size: 1rem;
background-color: hsla(204, 26%, 96%, 1);
padding: 15px 20px;
border: none;
outline: none;
margin-bottom: 1rem;
:placeholder {
letter-spacing: 1px;
color: hsla(0, 0%, 33%, 0.5);
}
`;
const StyledButtonsWrapper = styled.div`
width: 25.5rem;
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-top: 4rem;
`;
const StyledButton = styled.button`
color: #fff;
font-size: 1.1rem;
background-color: #ffbb4a;
width: 100%;
height: 3rem;
padding: 0.5rem;
border: none;
`;
const AddCreator = () => {
return (
<StyledForm>
<StyledWrapper>
<StyledLabel htmlFor="photo">Zdjęcie</StyledLabel>
<StyledInput
placeholder="https://adres-zdjecia.png"
id="photo"
type="text"
name="photo"
required
/>
</StyledWrapper>
<StyledWrapper>
<StyledLabel htmlFor="name">Nazwa</StyledLabel>
<StyledInput placeholder="Olaf Sulich" id="name" type="text" name="name" required />
</StyledWrapper>
<StyledWrapper>
<StyledLabel htmlFor="website">Strona internetowa</StyledLabel>
<StyledInput
placeholder="https://www.frontlive.pl/"
id="website"
type="text"
name="website"
required
/>
</StyledWrapper>
<StyledButtonsWrapper>
<StyledButton type="submit" name="dodaj">
dodaj
</StyledButton>
</StyledButtonsWrapper>
</StyledForm>
);
};
export default AddCreator;
Zarządzanie statem za pomocą useReducer
Do zarządzania stanem wykorzystamy, znanego z pierwszego wpisu, hooka useReducer.
Tworzymy hooka, a w nim podajemy wartości: photo, name, website:
const [inputsContent, setInputsContent] = useReducer(
(state, newState) => ({ ...state, ...newState }),
{
photo: '',
name: '',
website: '',
},
);
const { photo, name, website } = inputsContent;
Użyjemy destrukturyzacji, żeby je wyciągnąć.
Uaktualnianie stanu
Do uaktualniania stanu potrzebujemy prostej funkcji, przypisuje ona name do value, sam zobacz:
const handleInputChange = (e) => {
setInputsContent({
[e.target.name]: e.target.value,
});
};
Dodawanie danych
W komponencie App,js
, stwórzmy funkcję, która jako argument przyjmie objekt.
creatorsCollection
, jak możesz kojarzyć z poprzedniego wpisu, to odwołanie do naszej kolekcji w Firestore
.
Za pomocą metody add dodajmy naszego nowego twórce.
Na koniec ustawiamy w hooku setCreators
tabilcę do której przekazujemy nowego twórcę i za pomocą spread operator rozsmarowujemy pozostałych twórców(jakkolwiek to brzmi ( ͡° ͜ʖ ͡°)).
const handleCreate = (creatorToAdd) => {
creatorsCollection.add(creatorToAdd);
setCreators([creatorToAdd, ...creators]);
};
Okej, przechodzimy do komponentu AddCreator
i piszemy funkcję handleSubmit
.
Tworzymy objekt newCreator
, a w nim korzystamy z wartości naszego stanu.
Wykorzystujemy funkcję handleCreate
z App.js i podajemy do niej objekt newCreator
.
Na koniec, możemy wyczyścić wartości pól.
const handleSubmit = (e) => {
e.preventDefault();
const newCreator = {
photo,
name,
website,
};
handleCreate(newCreator);
setInputsContent({
photo: '',
name: '',
website: '',
});
};
Nie zapomnij o przypisaniu value i funkcji handleChange do swoich inputów oraz o zaciągnięciu z propsów handleCreate
Sortowanie listy
Jeśli udało Ci się dodać swojego ulubionego twórce, to super!
Został nam ostatni krok, posortować alfabetycznie listę twórców.
Przechodzimy o App.js
i do naszej subskrybcji dodajemy metodę orderBy
Możesz sortować wyniki po każdym polu w dokumencie, podając nazwę pola jako pierwszy argument orderBy, drugi argument to typ sortowania desc
lub asc
, my użyjemy asc
.
orderBy posiada jeszcze parę innych ficzerów, jeśli chcesz się dowiedzieć więcej kilknij tutaj.
Komponent App.js
:
...
useEffect(() => {
const subscribe = creatorsCollection
.orderBy("name", "asc")
.onSnapshot(snapshot => {
const dataFromCollection = snapshot.docs.map(documentsCollection);
setCreators(dataFromCollection);
});
return () => subscribe;
}, []);
...
Voilà! 👌
Dzięki za wytrwanie do końca!
Mam nadzieję, że po dzisiejszym wpisie Firestore
dla Ciebie to już bułka z masłem!
Możesz teraz dodać swoich ulubionych twórców ⭐️.
Cały kod znajdziesz tutaj, pamiętaj tylko o podmienieniu danych konfiguracyjnych w pliku firebase.js
.
Do usłyszenia!