[트위터 클론 코딩] #5. Nweeting-Update, Delete

~3.6까지의 강의

 

tweet을 수정하고 지우는 것에 대해서 알아보자!

 

우리가 실행하는 이 작업들이 커지기 때문에 새로운 component로 만들어 보자.

우리가 하는 작업들을 빠르게 할 수 있다.

 

그러기 전, 몇 가지를 보내주어야 한다.

수정하고 지우기 위해서는, 누가 작성했는 지 알아야 한다.

전에 creatorId를 만들었고, Home이 userObj를 가지기 때문에, Home에서 보내주어야 한다.

 

Home.js

{nweets.map((nweet) => (
            <Nweet
              key={nweet.id}
              nweetObj={nweet}
              isOwner={nweet.creatorId === userObj.uid}
            />
          ))}

isOwner은 주인인지 알아보는 것이다. nweet의  creatorId와 userObj의 uid가 같은 경우 주인이라고 판단 하는 것이다!

 

Nweet.js

import React from "react";

const Nweet = ({ nweetObj, isOwner }) => (
  <div>
    <h4>{nweetObj.text}</h4>
        {isOwner && 
            <>
              <button>Delete Nweet</button>
              <button>Edit Nweet</button>
            </>
        }
    </div>
);


export default Nweet;

Home에서 nweetObj, isOwner를 받아온다. 텍스트를 보여주고, 주인인 경우에만 지우기, 편집 버튼을 보여 줄 수 있도록 한다.

 

 

---

본격적으로 지우고, 편집하는 기능을 만들어보자.

 

Nweet.js

import React, { useState } from "react";
import { dbService } from "fbase";

const Nweet = ({ nweetObj, isOwner }) => {
  const [editing, setEditing] = useState(false);
  const [newNweet, setNewNweet] = useState(nweetObj.text);
  const onDeleteClick = async () => {
    const ok = window.confirm("Are you sure you want to delete this nweet?");
    if (ok) {
      await dbService.doc(`nweets/${nweetObj.id}`).delete();
    }
  };
  const toggleEditing = () => setEditing((prev) => !prev);
  const onSubmit = async (event) => {
    event.preventDefault();
    await dbService.doc(`nweets/${nweetObj.id}`).update({
      text: newNweet,
    });
    setEditing(false);
  };
  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    setNewNweet(value);
  };
  return (
    <div>
      {editing ? (
        <>
          <form onSubmit={onSubmit}>
            <input
              type="text"
              placeholder="Edit your nweet"
              value={newNweet}
              required
              onChange={onChange}
            />
            <input type="submit" value="Update Nweet" />
          </form>
          <button onClick={toggleEditing}>Cancel</button>
        </>
      ) : (
        <>
          <h4>{nweetObj.text}</h4>
          {isOwner && (
            <>
              <button onClick={onDeleteClick}>Delete Nweet</button>
              <button onClick={toggleEditing}>Edit Nweet</button>
            </>
          )}
        </>
      )}
    </div>
  );
};

export default Nweet;

onDeleteClick이라는 버튼을 먼저 만들어보자.

ok-confirm을 사용해, 삭제하기 전 사용자로부터 확인을 받는다.

true/false를 사용해 ok가 true이면 지울 수 있도록 한다.

지우는 것은 공식문서로 부터, nweets안에 있는 nweetObj의 id를 지우도록 한다.

이 작업이 쉬웠던 것을 우리가 uid를 알고 있었기 때문이다.

 

수정하는 것은 toggleEditing을 사용해서 만들어 볼 것이다.

전과 비교해서 setEditing이 editing의 값을 바꿔주고, 

editing이라면, 값을 변경할 수 있도록 해준다. 

편집한 이후에는 Update할 수 있도록 한다. 

변경된 값을 보기 위해서는 onChange를 사용한다.

이때 실시간으로 변경된 값을 update하기 위해서 onSubmit을 만든다.

update도 마찬가지고 공식문서에 따라서 작성한다.

---

render를 줄여보자.

 

App.js

import React, { useState, useEffect } from "react";
import AppRouter from "components/Router";
import { authService } from "fbase";


function App() {
  const [init, setInit] = useState(false);
  const [userObj, setUserObj] = useState(null);
  useEffect(() => {
    authService.onAuthStateChanged((user) => {
      if (user) {
        setUserObj(user);
      }
      setInit(true);
    });
  }, []);
  return (
    <>
      {init ? (
        <AppRouter isLoggedIn={Boolean(userObj)} userObj={userObj} />
      ) : (
        "Initializing..."
      )}
      <footer>&copy; {new Date().getFullYear()} Nwitter</footer>
    </>
  );
}

export default App;

앞에 있었던 로그인을 없태고, userObj를 boolen처럼 넣어준다.

이렇게 되면 userObj가 존재하면 로그인이 된다.