[React] TODO LIST 만들기 (6) - Firestore에서 데이터 가져와서 todo list 완성하기

Kylie·2022년 11월 23일

[React] Todo List

목록 보기

6/6

1. 들어가기 전

이제 드디어 끝이 보입니다. task 입력까지 했으니 이번 시간에는 firestore에서 데이터를 가져오도록 하겠습니다. 그냥 가져오면 심심하니 onSnapshot을 사용하여 실시간으로 데이터를 가져오도록 하겠습니다. 또한, 완료 버튼을 클릭하면 해당 task는 화면에서 지우는 작업까지 해보도록 하겠습니다.

2. 목표

task를 입력하면 실시간으로 데이터를 화면에 출력한다.

완료 버튼을 클릭하면 실시간으로 화면에서 지운다.

3. Todo List 만들기

이번에도 코드 복잡성을 방지하기 위해 todo list는 따로 컴포넌트를 만들어 관리하도록 하겠습니다.

3.1 데이터 가져오기

src/Components/todoList.tsx

import React, { useEffect, useState } from "react";

// FIREBASE
import { fireStoreJob } from "../initFirebase";
import {
  collection,
  query,
  where,
  orderBy,
  onSnapshot,
  updateDoc,
  doc,
} from "firebase/firestore";

// INTERFACE
import { UserInterface } from "../interfaces/user.interface";
import { TodoInterface } from "../interfaces/todo.interface";

// CSS
import { TodoListWrap,StyledTableCell } from "../styles/todoList.styled";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Checkbox from "@mui/material/Checkbox";

type TodoListType = {
  userInfo: UserInterface;
};

export const TodoList = ({ userInfo }: TodoListType) => {
  const firestore_path = "tasks";
  const [list, setList] = useState<TodoInterface[]>([]);

  // NOTE - 1 
  useEffect(() => {
    const q = query(
      collection(fireStoreJob, firestore_path),
      where("uid", "==", userInfo.uid),
      where("status", "==", "READY"),
      orderBy("date_created", "desc")
    );
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const arr = querySnapshot.docs.map((doc) => {
        return {
          id: doc.id,
          ...doc.data(),
        };
      });
      // @ts-ignore
      setList(arr);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  // NOTE - 2
  const onClick = async (e: any) => {
    const doc_id = e.target.id;
    const ref = doc(fireStoreJob, firestore_path, doc_id);
    await updateDoc(ref, {
      status: "DONE",
    });
  };

  return (
    <TodoListWrap>
      <Paper sx={{ width: "100%", overflow: "hidden" }}>
        <TableContainer>
          <Table stickyHeader={true}>
            <TableHead>
              <TableRow>
                <StyledTableCell>Task</StyledTableCell>
                <StyledTableCell>Dead Line</StyledTableCell>
                <StyledTableCell>Done</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {list.map((data) => {
                return (
                  <TableRow key={data.id} id={data.id}>
                    <TableCell>{data.task}</TableCell>
                    <TableCell>{data.date}</TableCell>
                    <TableCell>
                      <Checkbox onClick={onClick} id={data.id} />
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </Paper>
    </TodoListWrap>
  );
};