[Vue3 + vite + tailwindCSS] 좋아요 기능 추가

 

리트윗과 동일하게 좋아요 기능을 구현하면된다.

 

utils에서 handleLikes.js추가

import {

  doc,

  setDoc,

  collection,

  updateDoc,

  increment,

  deleteDoc,

  query,

  where,

  getDocs,

} from "firebase/firestore";

import { db } from "../firebase";

import store from "../store";

export default async (tweet) => {

  try {

    //이미 좋아요된 상태인지 확인하기

    if (tweet.isLiked) {

      const q = query(

        collection(db, "likes"),

        where("from_tweet_id", "==", tweet.id),

        where("uid", "==", store.state.user.uid)

      );

      const snapshot = await getDocs(q);

      if (!snapshot.empty) {

        const retweetDoc = snapshot.docs[0]; // 첫 번째 문서 가져오기

        await deleteDoc(retweetDoc.ref);

        const updateTweetRef = doc(db, "tweets", tweet.id);

        //tweet에서 likes 수 감소

        await updateDoc(updateTweetRef, {

          num_likes: increment(-1),

        });

      }

    } else {

      //likes 하지 않은 상황

      //likes 저장하기

      const newLikesRef = doc(collection(db, "likes"));

      await setDoc(newLikesRef, {

        id: newLikesRef.id,

        from_tweet_id: tweet.id,

        uid: store.state.user.uid,

        created_at: Date.now(),

      });

      const updateTweetRef = doc(db, "tweets", tweet.id);

      //tweet에서 likes 수 증가

      await updateDoc(updateTweetRef, {

        num_likes: increment(1),

      });

    }

  } catch (e) {

    console.log("object retweet error:", e);

  }

};

 

 

getTweetInfo에도 

likes여부에 따라  tweet데이터에 추가하기 

import {

  collection,

  doc,

  getDoc,

  getDocs,

  query,

  where,

} from "firebase/firestore";

import { db } from "../firebase";

export default async (tweet, currentUser) => {

  //user Info

  const docRef = doc(db, "users", tweet.uid);

  const docSnap = await getDoc(docRef); // users에서 user.uid로 검색한 결과 가져옴

  // tweet.profile_image_url = docSnap.data().profile_image_url;

  // tweet.email = docSnap.data().email;

  // tweet.username = docSnap.data().username;

  tweet = { ...tweet, ...docSnap.data() };

  // Adding retweet Info

  const retweetRef = collection(db, "retweets");

  const q = query(

    retweetRef,

    where("from_tweet_id", "==", tweet.id),

    where("uid", "==", currentUser.uid)

  );

  const snapshot = await getDocs(q);

  if (snapshot.empty) {

    tweet.isRetweeted = false;

  } else {

    tweet.isRetweeted = true;

  }

  // Adding like Info

  const likesRef = collection(db, "likes");

  const likesq = query(

    likesRef,

    where("from_tweet_id", "==", tweet.id),

    where("uid", "==", currentUser.uid)

  );

  const likesSnapshot = await getDocs(likesRef);

  if (likesSnapshot.empty) {

    tweet.isLiked = false;

  } else {

    tweet.isLiked = true;

  }

  return tweet;

};

 

Tweet에서 

import handleLikes from "../utils/handleLikes";

 

라이크 버튼 기능 추가하기 

        <!-- 라이크 버튼  -->

        <div

          @click="handleLikes(tweet)"

          :class="`${

            tweet.isLiked ? 'text-red-400' : 'text-gray-500'

          } hover:text-red-500`"

        >

          <i class="far fa-heart hover:bg-red-50 rounded-full p-2"></i>

          <span class="ml-1 text-sm">{{ tweet.num_likes }}</span>

        </div>