like post and update button if true

client/src/components/Like.tsx

@@ -0,0 +1,34 @@
+import { FaThumbsUp } from 'react-icons/fa';
+import { likePost, unlikePost } from '@controllers/LikeController';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toastError, toastSuccess } from '@controllers/Toasts';
+
+const Like = ({ messageId, isLiked }: { messageId: string; isLiked: boolean }) => {
+  const queryClient = useQueryClient();
+
+  const mutateLike = useMutation(likePost, {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(['messages']);
+      toastSuccess('Message aimé');
+    },
+    onError: (error) => {
+      toastError(error as string);
+    },
+  });
+
+  const like = () => {
+    if (!isLiked) {
+      console.log('like');
+      
+      mutateLike.mutate(messageId);
+    }
+  };
+
+  return (
+    <button className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer" onClick={like}>
+      <FaThumbsUp className={'fill-red-light text-xl  w-10 h-10 p-2.5' + (isLiked ? ' fill-red' : '')} />
+    </button>
+  );
+};
+
+export default Like;

client/src/components/Message.tsx

@@ -1,9 +1,10 @@
-import { FaThumbsUp } from 'react-icons/fa';
 import Avatar from '@components/Avatar';
-import PopupMenu from './PopupMenu';
+import PopupMenu from '@components/PopupMenu';
+import Like from '@components/Like';
 import { getMeInfo } from '@controllers/UserController';
 import { useQuery } from '@tanstack/react-query';
 import { toastError } from '@controllers/Toasts';
+import { useState } from 'react';
 
 const Image = ({ image }: { image: string }) => {
   if (image === '' || image === null) {
@@ -24,14 +25,6 @@ const Text = ({ text }: { text: string }) => {
   return <div className="text-white message">{text}</div>;
 };
 
-const Likes = ({ likes }: { likes: number }) => {
-  return (
-    <div className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer">
-      <FaThumbsUp className="fill-red-light text-xl  w-10 h-10 p-2.5" />
-    </div>
-  );
-};
-
 const Message = ({ message }: any) => {
   const me = useQuery(['me'], getMeInfo, {
     onSuccess: (data) => {
@@ -69,7 +62,7 @@ const Message = ({ message }: any) => {
               minute: 'numeric',
             })}
           </div>
-          <Likes likes={2} />
+          <Like messageId={message.id} isLiked={(message.likes > 0 && message.likedBy.find((like: any) => like.userId === me.data?.id)) ? true : false} />
         </div>
       </div>
     </>

client/src/controllers/LikeController.ts

@@ -0,0 +1,37 @@
+import { Cookies } from "react-cookie";
+
+const likePost = async (id: string) => {
+  const token = new Cookies().get('token');
+  const response = await fetch(`/api/posts/like/${id}`, {
+    method: 'PUT',
+    mode: 'cors',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  const data = await response.json();
+  if (data.error) {
+    throw data.error;
+  }
+  return data;
+};
+
+const unlikePost = async (id: string) => {
+  const token = new Cookies().get('token');
+  const response = await fetch(`/api/posts/unlike/${id}`, {
+    method: 'PUT',
+    mode: 'cors',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  const data = await response.json();
+  if (data.error) {
+    throw data.error;
+  }
+  return data;
+};
+
+export { likePost, unlikePost };