MessageHeader

//import 
import firebase from 'firebase/compat/app'; // 필요한 모듈만 import
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/storage';

//favorite 사용 변수 선언부
const [isFavorited,setIsFavorited] = useState(false);
const usersRef = firebase.database().ref("users");
const user = useSelector(state => state.user.currentUser);

//useEffect  
useEffect (()=>{
  if(chatRoom&& user){
    addFavoritedListener(chatRoom.id,user.uid)
  }
},[])

// FavoritedListener
const addFavoritedListener = (chatRoomId,userId) => {
  usersRef
    .child(userId)
    .child("favorited")
    .once("value")
    .then(data=>{
      if(data.val() !== null){
        const chatRoomIds = Object.keys(data.val())
        const isAlreadyFavorited = chatRoomIds.includes(chatRoomId)
        setIsFavorited(isAlreadyFavorited)
      }
    })
}

//Favorite 다루는 부분
const handleFavorite = () => {
  if (isFavorited) {
    usersRef
      .child(`${user.uid}/favorited`)
      .child(chatRoom.id)
      .remove(err => {
        if (err !== null) {
          console.error(err);
        }
      });
    setIsFavorited(prev => !prev);
  } else {
    usersRef
      .child(`${user.uid}/favorited`)
      .update({
        [chatRoom.id]: {
          name: chatRoom.name,
          description: chatRoom.description,
          createBy: {
            name: chatRoom.createBy.name,
            image: chatRoom.createBy.image
          }
        }
      });
    setIsFavorited(prev => !prev);
  }
};

Favorited

//import 선언
import React, { Component } from "react";
import { FaRegSmileBeam } from "react-icons/fa";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/storage";
import { connect } from "react-redux";
import { setCurrentChatRoom,setPrivateChatRoom } from "../../../redux/actions/chatRoom_action";

//class 컴포넌트
export class Favorited extends Component {
  //state 사용
	state = {
    favoritedChatRoom:[],
    usersRef: firebase.database().ref("users"),
    activeChatRoomId : ''
  };
	
	//listener 사용
  componentDidMount() {
    if(this.props.user){
      this.addListeners(this.props.user.uid);
    }
  }

	//listener 해제
  componentWillUnmount(){
    if(this.props.user){
      this.removeListener(this.props.user.uid);
    }
  }

	//listener 삭제
  removeListener=(userId)=>{
    this.state.usersRef.child(`${userId}/favorited`).off();
  }

	//Favorited add listener 추가
  addListeners = (userId) => {
    const { usersRef } = this.state;

    usersRef
      .child(userId)
      .child("favorited")
      .on("child_added",DataSnapshot=>{
        const favoritedChatRoom = {
          id: DataSnapshot.key,
          ...DataSnapshot.val()
        }
        this.setState({favoritedChatRoom:[...this.state.favoritedChatRoom,favoritedChatRoom]})
      })

      usersRef
        .child(userId)
        .child("favorited")
        .on("child_removed",DataSnapshot=>{
          const chatRoomToRemove = {id:DataSnapshot.key,...DataSnapshot.val()};
          const filteredChatRooms = this.state.favoritedChatRoom.filter(chatRoom=>{
            return chatRoom.id !== chatRoomToRemove.id;
          })
          this.setState({favoritedChatRoom:filteredChatRooms})
        })

  };

	//changeChatRoom 방 바뀌기 함수
  changeChatRoom = (room) =>{
    this.props.dispatch(setCurrentChatRoom(room));
    this.props.dispatch(setPrivateChatRoom(false))
    this.setState({activeChatRoomId:room.id});
    this.clearNotifications();
  }

  renderFavoritedChatRooms=(favoritedChatRoom)=>
  favoritedChatRoom.length >0 &&
  favoritedChatRoom.map(chatRoom=>(
    <li key={chatRoom.id} onClick={()=>this.changeChatRoom(chatRoom)} style={{backgroundColor:chatRoom.id ===this.state.activeChatRoomId && "#ffffff45"}}>
        # {chatRoom.name}
    </li>
  ))

  render() {
    const {favoritedChatRoom} = this.state;
    return (
      <div>
        <span style={{ display: "flex", alignItems: "center" }}>
          <FaRegSmileBeam style={{ marginRight: "3px" }} />
          FAVORITED (1)
        </span>
        <ul style={{ listStyleType: "none", padding: "0" }}>
          {this.renderFavoritedChatRooms(favoritedChatRoom)}
        </ul>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    user:state.user.currentUser
  }
}

export default connect(mapStateToProps)(Favorited);