load messages and update when sending messages

client/src/components/Message.tsx

@@ -3,7 +3,7 @@ import Avatar from '@components/Avatar';
 import PopupMessage from './PopupMessage';
 
 const Image = ({ image }: {image: string}) => {
-  if (image === '') {
+  if (image === '' || image === null) {
     return null;
   }
 
@@ -33,7 +33,7 @@ const Message = ({ text = '', user, date, image = '' }: any) => {
   const id = '1'; // replace with real id in the future
   return (
     <>
-      <div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark">
+      <div className="flex bg-grey-dark rounded-xl w-full max-w-3xl p-5 gap-5 shadow-md shadow-grey-dark">
         {user && <Avatar user={user} />}
         <div className="flex flex-col gap-2 relative">
           <div className="flex justify-between">

client/src/components/MessageWrapper.tsx

@@ -0,0 +1,45 @@
+import { useQuery } from "@tanstack/react-query";
+import { Cookies } from "react-cookie";
+import Message from "./Message";
+
+const getMessages = async () => {
+  const token = new Cookies().get("token");
+  const response = await fetch("/api/posts", {
+    method: "GET",
+    mode: "cors",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return response.json();
+};
+
+const MessageWrapper = () => {
+  const messages = useQuery(["messages"], getMessages, {
+    onSuccess: (data) => {
+      console.log(data);
+      
+      return data;
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const user = {
+    firstName: 'Guillaume',
+    lastName: 'Dorce',
+    email: 'guillaume.dorce@bm-services.com',
+  };
+
+  return (
+    <main className="messages-wrapper flex flex-col p-4 gap-4 overflow-scroll w-full max-w-3xl">
+      {messages.isLoading ? '' : messages.data?.map((message: any) => (
+        <Message user={message.author} text={message.content} image={message.image} date={message.createdAt}/>
+      ))}
+    </main>
+  );
+}
+
+export default MessageWrapper;

client/src/components/NewMessage.tsx

@@ -1,11 +1,40 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
+import { Cookies } from 'react-cookie';
+
+const sendMessage = async (message: string) => {
+  const token = new Cookies().get('token');
+  const response = await fetch('/api/posts/new', {
+    method: 'POST',
+    mode: 'cors',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ content: message }),
+  });
+  return response.json();
+};
+
+
 
 const NewMessage = () => {
   const [message, setMessage] = useState('');
+  const queryClient = useQueryClient();
+
+  const { mutate: send } = useMutation(sendMessage, {
+    onSuccess: (data) => {
+      console.log(data);
+      queryClient.invalidateQueries(['messages']);
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    send(message);
     setMessage('');
   };
 

client/src/routes/home.tsx

@@ -1,37 +1,12 @@
 import AppHeader from '@components/AppHeader';
-import Message from '@components/Message';
+import MessageWrapper from '@components/MessageWrapper';
 import NewMessage from '@components/NewMessage';
 
 const Home = () => {
-  const user = {
-    firstName: 'Guillaume',
-    lastName: 'Dorce',
-    email: 'guillaume.dorce@bm-services.com',
-  };
-
   return (
     <div className="min-h-full max-h-full bg-grey flex flex-col items-center">
       <AppHeader />
-      <main className="messages-wrapper flex flex-col-reverse p-4 gap-4 overflow-scroll">
+      <MessageWrapper />
-        <Message
-          user={user}
-          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
-        aliquam tincidunt, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet
-        mauris. Donec auctor, nisl eget aliquam tincidunt, nisl nisl aliquet nisl, eget
-        aliquam nisl nisl sit amet mauris. Donec auctor, nisl eget aliquam tincidunt,
-        nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet mauris."
-          date="14 août 2022 19:00"
-        />
-        <Message
-          user={user}
-          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
-        aliquam tincidunt, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet
-        mauris."
-          date="14 août 2022 19:00"
-          image="https://picsum.photos/800/600"
-        />
-        <Message user={user} date="14 août 2022 19:00" image="https://picsum.photos/1200/800" />
-      </main>
       <NewMessage />
     </div>
   );