fix some problems with like annd bad usage of state

client/src/components/AppHeader.tsx

@@ -30,7 +30,7 @@ const AppHeader = () => {
         </div>
         <div className="right">
           <div className="flex items-center gap-2 sm:gap-4">
-            {meInfo.data && <Avatar user={meInfo.data} />}
+            {meInfo.data ? <Avatar user={meInfo.data} /> : null}
             <div className="app-header__user__name">
               {meInfo.data && <User author={meInfo.data} />}
             </div>

client/src/components/Avatar.tsx

@@ -2,9 +2,12 @@ import gravatar from 'gravatar';
 import { useState } from 'react';
 
 const Avatar = ({ user }: any) => {
+  // console.log(user);
+  
   const initials = user.firstName[0] + user.lastName[0];
   const gravatarUrl = gravatar.url(user.email, { s: '64', r: 'x', d: '404' }, true);
   const avatarUi = `https://ui-avatars.com/api/?name=${initials}&background=0D8ABC&color=fff&size=64`;
+  // const avatarUi = `https://ui-avatars.com/api/?name=GD&background=0D8ABC&color=fff&size=64`;
   const [avatar, setAvatar] = useState(avatarUi);
   const [firstLoad, setFirstLoad] = useState(true);
 

client/src/components/Message.tsx

@@ -45,7 +45,7 @@ const Message = ({ message }: any) => {
         <div className="flex flex-col gap-2 relative flex-grow">
           <div className="flex justify-between">
             {message.author && <User author={message.author} />}
-            {(me.data?.id === message.author.id) || (me.data?.role === 'ADMIN') ? (
+            {me.data?.id === message.author.id || me.data?.role === 'ADMIN' || me.data?.role === 'CREATOR' ? (
               <PopupMenu message={message} />
             ) : null}
           </div>
@@ -60,7 +60,14 @@ const Message = ({ message }: any) => {
               minute: 'numeric',
             })}
           </div>
-          <Like messageId={message.id} isLiked={(message.likes > 0 && message.likedBy.find((like: any) => like.userId === me.data?.id)) ? true : false} />
+          {me.data?.id === message.author.id ? null : (
+            <Like
+              messageId={message.id}
+              isLiked={
+                message.likes > 0 && message.likedBy.find((like: any) => like.userId === me.data?.id) ? true : false
+              }
+            />
+          )}
         </div>
       </div>
     </>

client/src/components/Modal.tsx

@@ -1,13 +1,11 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
-const Modal = ({ children, show, className = '' }: { children: ReactNode; show: boolean, className?: string }) => {
+const Modal = ({ children, show, className = '' }: { children: ReactNode; show: boolean; className?: string }) => {
+  if (!show) {
+    return null;
+  }
   return (
-    <div
-      className={
-        `modal overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 w-full h-full z-1000 flex justify-center items-center` +
-        (show ? '' : ' hidden')
-      }
-    >
+    <div className="modal overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 w-full h-full z-1000 flex justify-center items-center">
       <div className="absolute w-full h-full top-0 left-0 bg-gray-900 opacity-70"></div>
       <div className={`relative rounded-lg shadow dark:bg-grey-dark p-4 ${className}`}>{children}</div>
     </div>

client/src/components/User.tsx

@@ -59,7 +59,7 @@ const User = ({ author }: any) => {
   return (
     <div className="user">
       <button
-        className="text-red-light text-xl username"
+        className="text-red-light text-xl username text-left"
         onClick={() => setShow(true)}
         onContextMenu={(e) => {
           if (author.role === 'CREATOR') {

client/src/controllers/UserController.ts

@@ -1,8 +1,8 @@
 import { Cookies } from 'react-cookie';
 
-const token = new Cookies().get('token');
-
 const getMeInfo = async () => {
+  const token = new Cookies().get('token');
+
   const response = await fetch('/api/me', {
     method: 'GET',
     mode: 'cors',
@@ -11,10 +11,16 @@ const getMeInfo = async () => {
       Authorization: `Bearer ${token}`,
     },
   });
-  return response.json();
+  const data = await response.json();
+  if (data.error) {
+    throw data.error;
+  }
+  return data;
 };
 
 const login = async ({ email, password }: { email: string; password: string }) => {
+  const token = new Cookies().get('token');
+
   const response = await fetch('/api/auth/login', {
     method: 'POST',
     body: JSON.stringify({ email, password }),
@@ -31,6 +37,8 @@ const login = async ({ email, password }: { email: string; password: string }) =
 };
 
 const signup = async (formData: FormData) => {
+  const token = new Cookies().get('token');
+
   const form = {
     email: formData.get('email') as string,
     password: formData.get('password') as string,
@@ -59,6 +67,8 @@ const signup = async (formData: FormData) => {
 };
 
 export const giveUserRights = async (userId: string, role: string) => {
+  const token = new Cookies().get('token');
+  
   const response = await fetch(`/api/users/${userId}/roles`, {
     method: 'POST',
     mode: 'cors',

src/api/posts/likePost.ts

@@ -6,7 +6,7 @@ export default async (req: Request, res: Response) => {
     const id = parseInt(req.params.id);
     const likedPost = await likePost(id, req.userId);
     if (likedPost instanceof Error) {
-      return res.status(403).send(likedPost.message);
+      return res.status(403).send({error: likedPost.message});
     }
     return res.status(200).send({ message: 'Post liked' });
   } catch (error) {

src/controller/PostController.ts

@@ -159,9 +159,9 @@ const likePost = async (id: number, userId: number): Promise<PrismaPost | Error>
   if (post === null) {
     return new Error('Post not found');
   }
-  // if (post.authorId === userId) {
-  //   return new Error('User cannot like their own post');
-  // }
+  if (post.authorId === userId) {
+    return new Error('User cannot like their own post');
+  }
   if (post.likedBy.some((like) => like.userId === userId)) {
     return new Error('Post already liked');
   }