23/12/08 til 공용화

두번이상 쓰이는 일반 함수 커스텀훅 컴포넌트 한개를 한파일에 담아보았다.

import {collection, addDoc, setDoc, getDocs, deleteDoc, doc} from 'firebase/firestore';

import {auth, db} from '../../shared/firebase';

import {setList} from '../../redux/modules/fixList';

import {useDispatch, useSelector} from 'react-redux';

import {useEffect} from 'react';

import Button from './Button';

import {toast} from 'react-toastify';

export const useReadFirestore = async () => {      //파이어스토어의 데이터를 읽어와서

  const dispatch = useDispatch();                        //리덕스의 스테이트를 변경까지 하는 로직을 

  const dataReading = async () => {                     //한번에 담아서 커스텀훅을 만들어보았다.

    const querySnapshot = await getDocs(collection(db, 'fixs'));

    let dataArr = [];

    querySnapshot.forEach(doc => {

      const data = doc.data();                               //여기까지가 파이어스토어의 데이터 받아오기

      // console.log(data, ' 이게 독 아이디');

      dataArr.push({...data, id: doc.id});

      // console.log(data.createdAt, '이게그거');

      dataArr = dataArr.sort((a, b) => b.createdAt - a.createdAt);   //시간순으로 데이터를 나열하고

    });

    dispatch(setList(dataArr));     //디스패치로 스테이트 변경까지 시킨다.

  };

  useEffect(() => {

    // console.log('리랜더링 되니?');     //안에 유즈 이펙트까지 두어서 새로고침시 작동하도록 세팅

    dataReading();

  }, []);

};

export const Update = async (photoURL, displayName, filteredList, dispatch, dataReading) => {

  try {

    const updatePromises = filteredList.map(async item => {

      await setDoc(doc(db, 'fixs', `${item.id}`), {

        ...item,

        displayName,                                   //여기는 프로필과 닉네임을 변경하는 함수를 만들었다.

        photoURL,                                     //filterdList를 인자로 쓰이는 곳에서 내려받고

      });                                                        //다른 아이템은 유지한체  displayName,      photoURL,    

    });                                                           //만 변경로직

    await Promise.all(updatePromises);

    dataReading();                                          //여기서 위에서 만든 데이타 리딩을 한번해준다.

    dispatch(

      setList(                                       //데이터리스트의 디스패치는 유즈이펙트안에 있으므로

        filteredList.map(item => ({      //여기서 디스패치 한번더 써서 스테이트를 변경해 줌으로써

          ...item,                                  //리랜더링 시킨다.

          displayName,

          photoURL,

        })),

      ),

    );

    toast.success('수정성공!', {

      position: 'top-center',

      autoClose: 3000,

      hideProgressBar: false,

      closeOnClick: true,

      pauseOnHover: true,

      draggable: false,

      progress: undefined,

      theme: 'colored',

    });

  } catch (error) {

    console.error('업데이트 중 오류 발생:', error);

  }

};

export default function EditBtn() {                           //컴포넌트화 시킨 함수

  const list = useSelector(state => state.fixList);

  const {isLogin, displayName, uid, photoURL, email} = useSelector(state => state.auth);

  const filteredList = list.filter(item => {

    return item.uid == auth.currentUser.uid;

  });                                                                      //훅은 컴포넌트 하위에서만 설정할수 있다는게

  const dispatch = useDispatch();                   //너무 어렵다.

  const dataReading = async () => {

    const querySnapshot = await getDocs(collection(db, 'fixs'));

    let dataArr = [];

    querySnapshot.forEach(doc => {

      const data = doc.data();

      // console.log(data, ' 이게 독 아이디');

      dataArr.push({...data, id: doc.id});

      // console.log(data.createdAt, '이게그거');

      dataArr = dataArr.sort((a, b) => b.createdAt - a.createdAt);

    });

    dispatch(setList(dataArr));

  };

  return <Button onClick={() => Update(photoURL, displayName, filteredList, dispatch, dataReading)}>수정적용</Button>;

}            //버튼 처럼 사용하기 위해 리턴값을 버튼으로 만듦

 

위에 만든 커스텀훅을 사용하기 위해서는 원하는 파일에서

import {useReadFirestore} from '../components/UI/CustomHook';

useReadFirestore();

해당 컴포넌트를 임포트하고 사용하면 끝