Kategoria:Firebase

Firebase - dodawanie danych do Firestore

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.

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!