firebase 총정리 1차

Home.js
import {
  addDoc,
  collection,
  onSnapshot,
  orderBy,
  query,
} from "firebase/firestore";
import React, { useEffect, useState } from "react";
import { dbService } from "./firebase";
import Nweett from "./Nweett";

const Home = ({ userObj }) => {
  const [nweet, setNweet] = useState("");
  const [nweets, setNweets] = useState([]); // nweets를 가져와보도록하자

  useEffect(() => {
    const q = query(
      collection(dbService, "nweets"),
      orderBy("createdAt", "desc")
    );
    onSnapshot(q, (snapshot) => {
      // 새로운 스냅샷을 받을 때, 배열을 만든다.
      const nweetArray = snapshot.docs.map((doc) => ({
        // 모든 배열에 있는 아이템들은 이렇게 생김
        id: doc.id,
        ...doc.data(),
      }));
      setNweets(nweetArray); // 그런다음 state에 배열을 집어넣는다.
    });
  }, []);

  const onSubmit = async (event) => {
    event.preventDefault();
    await addDoc(collection(dbService, "nweets"), {
      text: nweet,
      createdAt: Date.now(),
      createdId: userObj.uid,
    });
    setNweet("");
  };

  const onChange = (e) => {
    const {
      target: { value },
    } = e;
    setNweet(value);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="What's on your mind?"
          maxLength={120}
          value={nweet}
          onChange={onChange}
        />
        <input type="submit" value="트윗" />
      </form>
      <div>
        {nweets.map((nweet) => (
          <Nweett
            nweetObj={nweet} // nweetObj는 nweet의 모든 데이터를 가지고 있음, author, text, createdAt
            key={nweet.id}
            isOwner={(nweet.createdId = userObj.uid)} // dynamic한 prop임  
            // nweet를 만든 사람과 (nweet.createdId) userObj.uid가 같으면 true를 반환함
            // 참고로 userObj는 Home에서 props로 넘어옴, 그건 바로 App.js에서 넘어오는데 
            // 로그인 시 나오는 값이라고 보면 됨
          />
        ))}
      </div>
    </div>
  );
};

export default Home;

Nweett.js
import { deleteDoc, doc, updateDoc } from "firebase/firestore";
import React, { useState } from "react";
import { dbService } from "./firebase";

const Nweett = ({ nweetObj, isOwner }) => {
  const [editing, setEditing] = useState(false); //true, false를 위한 것임
  const [newNweet, setNewNweet] = useState(nweetObj.text); // input에 입력된 text를 업데이트해줌
  console.log("newNweet", newNweet);
  const nweetTextRef = doc(dbService, "nweets", `${nweetObj.id}`);
  // collection : Nweets,  id : nweetObj.id

  const onDeleteClick = async () => {
    //삭제의경우 먼저 user를 확인하고 nweet를 지우길 원한다.
    const ok = window.confirm("are you sure 삭제?");
    console.log("newNweet", newNweet);
    if (ok) {
      //ok값이 true이면 deleteDoc을 실행한다.
      await deleteDoc(nweetTextRef);
    }
  };

  const toggleEditting = () => {
    setEditing((prev) => !prev);
  };
  const onSubmit = async (e) => {
    e.preventDefault();
    console.log(nweetObj, newNweet);
    await updateDoc(nweetTextRef, {
      text: newNweet,
    });
    setEditing(false);
  };
  const onChange = (e) => {
    setNewNweet(e.target.value);
  };
  return (
    <div>
      {editing ? ( // 만약 수정을 한다면 아래의 input 수정서식이 보일거야
        <>
          {isOwner && ( // 주인인 사람들만 form을 볼 수 있게함
            <>
              <form onSubmit={onSubmit}>
                <input
                  type="text"
                  placeholder="Edit Your tweet  "
                  value={newNweet}
                  required
                  onChange={onChange}
                />
                <input type="submit" value="Update tweet" />
              </form>
              <button onClick={toggleEditting}>Cancel</button>
            </>
          )}
        </>
      ) : (
        // 주인이 아니라면 위의 수정서식이 안보임
        <>
          <h4>{nweetObj.text}</h4>
          {isOwner && ( // 주인이여서 아래의 수정과 삭제 버튼이 보임
            <>
              <button onClick={onDeleteClick}>Delete</button>
              <button onClick={toggleEditting}>Edit</button>
            </>
          )}
        </>
      )}
    </div>
  );
};

export default Nweett;