finished reactions

Author: pwnengine

firebase-project/src/pages/Home.tsx

@@ -11,14 +11,17 @@ interface i_post_data {
   post: string;
   user: string;
   likes: number;
+  dislikes: number;
 }
 
 const Home = () => {
   const { user } = useContext(AppContext) as app_context_type;
 
   const [ posts_state, set_posts_state ] = useState<i_post_data[] | null>(null);
   const [ made_post, set_made_post ] = useState('');
-
+  const [ total_likes, set_total_likes ] = useState(0);
+  const [ made_like, set_made_like ] = useState('');
+  const [ made_dislike, set_made_dislike ] = useState('');
   /*
   const do_db = () => {
     const docs = getDocs(posts);
@@ -36,16 +39,17 @@ const Home = () => {
     });
   };
 */
-  /*
+  
   const generate_random_post_id = (): string => {
     const abc = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
     const num = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
     const curr_uid = user?.uid;
 
     let built_pid: string = '';
 
-    for(let q: number = 0; ++q; q < 10) {
+    for(let q: number = 0; q < 10; ++q) {
       const coin_flip: number = Math.floor(Math.random() * (10 - 1) + 1);
+      
       if((coin_flip % 2) === 0) { // even = abc
         built_pid = built_pid.concat(abc[(Math.floor(Math.random() * (26 - 1) + 1)) - 1]);
       } else { // odd or num
@@ -57,7 +61,8 @@ const Home = () => {
     console.log(built_pid);
     return `${curr_uid}${built_pid}`;
   }
-*/
+  //generate_random_post_id();
+
   const nav = useNavigate();
   const handle_click = async (data: FieldValues) => {
     if(!user) {
@@ -66,7 +71,7 @@ const Home = () => {
       const posts = collection(db, 'posts');
       await addDoc(posts, {
         uid: user?.uid,
-        pid: user?.uid,
+        pid: generate_random_post_id(),
         post: data?.post,
         user: user?.displayName,
       });
@@ -81,20 +86,47 @@ const Home = () => {
       user_id: user?.uid,
       post_id: pid,
     });
-  }
+
+    set_made_like(pid);
+  };
+
+  const handle_dislike = (pid: string) => {
+    const dislikes = collection(db, 'dislikes');
+    addDoc(dislikes, {
+      user_id: user?.uid,
+      post_id: pid,
+    });
+
+    set_made_dislike(pid);
+  };
 
   const { register, handleSubmit } = useForm({});
 
+  interface i_cnt {
+    likes: number;
+    dislikes: number;
+  }
+
   useEffect(() => {
     const likes = collection(db, 'likes');
-    const get_like_cnt = async (tmp_pid: string): Promise<number> => {
-      let cnt = 0;
+    const dislikes = collection(db, 'dislikes');
+    const get_reaction_cnt = async (tmp_pid: string): Promise<i_cnt> => {
+      const cnt = {
+        likes: 0,
+        dislikes: 0,
+      };
 
       const likes_docs = await getDocs(likes);
       likes_docs.docs.forEach((value) => {
         if(value.get('post_id') === tmp_pid) {
-          //console.log('it hit');
-          cnt++;
+          cnt.likes++;
+        }
+      });
+
+      const dislikes_docs = await getDocs(dislikes);
+      dislikes_docs.docs.forEach((value) => {
+        if(value.get('post_id') === tmp_pid) {
+          cnt.dislikes++;
         }
       });
 
@@ -109,15 +141,15 @@ const Home = () => {
     docs.then((data) => {
       data.docs.forEach((val) => {
         const tmp_pid = val.get('pid');
-        get_like_cnt(tmp_pid).then((cnt) => {
-          holder.push({post: val.get('post'), user: val.get('user'), uid: val.get('uid'), pid: val.get('pid'), likes: cnt});
+        get_reaction_cnt(tmp_pid).then((cnt) => {
+          holder.push({post: val.get('post'), user: val.get('user'), uid: val.get('uid'), pid: val.get('pid'), likes: cnt.likes, dislikes: cnt.dislikes});
           set_posts_state(holder);
         });
       });
     }).catch((err) => {
       console.log(err);
     })
-  }, [made_post]);
+  }, [made_post, made_like, made_dislike]);
 
   return (
     <>
@@ -136,7 +168,7 @@ const Home = () => {
                 <h3 className="post-user">@{val.user}</h3>
                 <p className="post-date">(11/04/23)</p>
                 <button onClick={() => handle_like(val.pid)} className="post-like-btn">🔥{val.likes}</button>
-                <button className="post-dislike-btn">💩</button>
+                <button onClick={() => handle_dislike(val.pid)} className="post-dislike-btn">💩{val.dislikes}</button>
                 <p key={Math.random()} className="post-text">{val.post}</p>
 
               </div>