firebase 8(書き込み、読み込み、削除、更新)

データの書き込み
1. api.jsを作成し、データの書き込みを記述する
2. 書き込みデータを動的にする
データの取得
データの削除
データ(ドキュメント)の更新

データの書き込み

add()を使う。(idを自動生成)

api.jsを作成し、データの書き込みを記述する

import firebase from "firebase";
import { db } from './firebase';

export const addTodo = (content, uid) => {
  db.collection('todo').add({
    content: "test",
    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
    isComplete: false,
    uid: ""
  })
}

現状のfirebase.js

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
});

const googleProbider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const db = firebase.firestore();

export const singInWithGoogle = () => {
  firebase.auth().signInWithPopup(googleProbider)
    .then((res) => {
      console.log(res.user);
    })
    .catch((error) => {
      console.log(error.message);
    })
}
export const logOut = () => {
  firebase.auth().signOut()
    .then((res) => {
      console.log(res.user);
      document.location.reload();
    })
    .catch((error) => {
      console.log(error.message);
    })
}

コンポーネントで呼び出す。

import React, { useState, useEffect, useContext } from 'react'
import dig from 'object-dig';

import { singInWithGoogle } from '../service/firebase';
import { AuthContext } from '../providers/AuthProvider';
import * as Api from '../service/api';

const Dashboard = () => {
  const currentUser = useContext(AuthContext);
  const [inputName, setInputName] = useState('');

  const post = () => {
    Api.addTodo(inputName, currentUser.currentUser.uid)
  }
  return (
    <div>
      {(dig(currentUser, 'currentUser')) ? (
        <form>
          <input type="text" placeholder='Todo name' onChange={((e) => setInputName(e.target.value))} value={inputName} />
          <button type='button' onClick={post}>追加</button>
        </form>
      ) : (<button onClick={singInWithGoogle}>ログイン</button>)}
    </div>
  )
}

export default Dashboard

これでとりあえずは、firestoreへデータが書き込まれる。

書き込みデータを動的にする

現状では、api.jsにベタ書きした内容がfirestoreへ書き込まれるので、内容を動的に処理する必要がある。

export const addTodo = (content, uid) => {
  db.collection('todo').add({
    content: content,
    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
    isComplete: false,
    uid: uid
  })
}

使う場所

inputNameは、state。currentUserは、useContext。

  const post = () => {
    Api.addTodo(inputName, currentUser.currentUser.uid)
    setInputName('');
    fetch();
  }

データの取得

Cloud Firestore でデータを取得する | Firebase

①非同期通信で、’todo’というコレクションを取ってくる
②where()の条件に合うもの

③todo.get().then()のコールバックに引数にドキュメントが「配列」入ってくるので、forEachでtodosにオブジェクトを追加していく。

export const initGet = async (uid) => {
  const todo = await db　//①
    .collection('todo')
    .orderBy('createdAt', 'desc')
    .where('uid', '==', uid);　//②
    
  return todo.get().then((snapShot) => {
    let todo = [];
    snapShot.forEach((doc) => { //③
      todos.push({
        id: doc.id,
        content: doc.data().content,
        isComplete: doc.data().isComplete
      });
    });
  })
}

取得したデータをstateへ入れる

useEffect()内にそのまま書くとエラーになるので、別で関数を用意して非同期通信でデータを取得して、それをsetTodos()にいれて、todosを更新する。

  useEffect(() => {
    fecht();
  }, [currentUser])
  const fecht = async () => {
    if (dig(currentUser, 'currentUser', 'uid')) {
      const dataTodos = await Api.initGet(currentUser.currentUser.uid);
      await setTodos(dataTodos);
      console.log(todos)
    }
  }

データの削除

Cloud Firestore からデータを削除する | Firebase

ドキュメントを削除するには、delete() メソッドを使用します。

ドキュメントのidを使用して、特定のドキュメントを削除します。

export const todoDelete = (id) => {
  db.collection('todo').doc(id).delete();
}

削除を実行したい場所で呼び出す。

const TodoList = ({ todos, fetch }) => {
  const deleteHandler = async (id) => {
    await Api.todoDelete(id);
    fetch();
  }
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.content}<button onClick={() => { deleteHandler(todo.id) }}>削除</button></li>
        ))}
      </ul>
    </div>
  )
}

データ(ドキュメント)の更新

Cloud Firestore からデータを削除する | Firebase

ドキュメント全体を上書きせずにドキュメントの一部のフィールドを更新するには、update() メソッドを使用します。

①クリックされたドキュメントを取得する。

②取得したドキュメントをupdate()を使って更新する。

export const toggleComplete = async (id) => {
  const todo = await db.collection('todo').doc(id).get(); //①
  return db.collection('todo').doc(id).update({　//②
    isComplete: todo.data().isComplete ? false : true,
    updateAt: firebase.firestore.FieldValue.serverTimestamp(),
  })
}