adding messages

package.json

@@ -39,7 +39,9 @@
     "react-loader-spinner": "^5.3.4",
     "react-quill": "^2.0.0",
     "react-range": "^1.8.14",
+    "react-toastify": "^9.1.1",
     "react-zoom-pan-pinch": "^2.1.3",
+    "socket.io-client": "^4.5.4",
     "styled-components": "^5.3.6",
     "swiper": "^8.4.5",
     "tailwindcss": "^3.2.4",

src/components/announcements/add-announcement/LocalisationForm.tsx

@@ -48,7 +48,6 @@ const LocalisationForm: React.FC<Props> = ({
     if (wilaya) {
       try {
         const response = await locationService.getCommunes(wilaya);
-        console.log(response.data);
         const communes = response.data.map(({ commune }: any) => commune);
 
         setCommunes([""].concat(communes));

src/components/announcements/all-announcements/AllAnouncementsIndex.tsx

@@ -35,7 +35,6 @@ const AllAnouncementsIndex: React.FC = () => {
         setNumberOfPages(response.data.num_pages);
         setLoading(false);
       }, 1000);
-      console.log(response);
     } catch (e) {
       setLoading(false);
       setPageNum(savePage);

src/components/announcements/preview-annoucement/AnnouncementPreviewIndex.tsx

@@ -91,7 +91,7 @@ const AnnouncementPreviewIndex: React.FC = () => {
                 </div>
                 <div className="lg:col-span-2">
                   <div className="w-full gap-y-4 rounded-sm bg-blue-light  shadow lg:col-span-2">
-                    <ContactForm />
+                    <ContactForm AnnouncementId={annoucement.id} />
                     <hr />
                     <PosterInfo
                       email={annoucement.auteur.email}

src/components/announcements/preview-annoucement/ContactForm.tsx

@@ -1,16 +1,40 @@
-import { useState } from "react";
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { ICONS } from "../../../constants/icons";
+import useMessage from "../../../hooks/useMessages";
+
+type Props = {
+  AnnouncementId: number;
+};
+
+const ContactForm: React.FC<Props> = ({ AnnouncementId }) => {
+  const { sendMessage, isConnected } = useMessage();
 
-const ContactForm = () => {
   const [message, setMessage] = useState<string>("");
 
-  const sendMessage = async () => {};
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isConnected) {
+      sendMessage(AnnouncementId, message);
+      setMessage("");
+      toast.success("Le message a été envoyé avec succès", {
+        progressClassName: "!bg-blue-primary",
+        icon: (
+          <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-primary">
+            <ICONS.Check className=" text-white" />
+          </div>
+        ),
+      });
+    }
+  };
 
   return (
     <div className="flex flex-col gap-y-4 p-4">
       <p className="relative w-fit font-serif text-lg font-bold after:absolute after:bottom-0 after:left-0  after:h-1 after:w-full after:origin-left after:skew-y-[0.5deg]  after:bg-blue-primary after:transition after:duration-300 hover:after:scale-x-100">
         Contactez nous
       </p>
-      <div className="flex flex-col gap-y-2">
+      <form onSubmit={onSubmit} className="flex flex-col gap-y-2">
         <label className="text-sm font-medium text-gray-800" htmlFor="message">
           Message
         </label>
@@ -20,17 +44,20 @@ const ContactForm = () => {
           id="message"
           className="w-full rounded-sm border p-4 text-sm text-gray-900 shadow-sm outline-none"
           placeholder="message"
+          onChange={(e) => setMessage(e.target.value)}
+          value={message}
         />
         <p className="text-xs">
           Vos informations seront transmises au propriétaire de l'annonce.
         </p>
         <button
-          onClick={sendMessage}
-          className="rounded-sm bg-blue-primary px-4 py-2 text-sm text-white transition duration-200 hover:bg-blue-hover"
+          type="submit"
+          disabled={!isConnected}
+          className="rounded-sm bg-blue-primary px-4 py-2 text-sm text-white transition duration-200 hover:bg-blue-hover disabled:bg-blue-hover"
         >
           Envoyer
         </button>
-      </div>
+      </form>
     </div>
   );
 };

src/components/layout/Layout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { ToastContainer } from "react-toastify";
 import useAuth from "../../hooks/useAuth";
 import Footer from "./footer/Footer";
 import Header from "./header/Header";
@@ -17,10 +18,13 @@ const Layout: React.FC<Props> = ({
   const { currentUser } = useAuth();
 
   return (
-    <div className="min-h-screen bg-gray-50 text-gray-800">
-      {currentUser && withHeader && <Header />}
-      <div id="main" className="min-h-screen">
-        {children}
+    <div className="bg-gray-50 text-gray-800">
+      <div className="flex min-h-screen flex-col ">
+        {currentUser && withHeader && <Header />}
+        <div id="main" className="flex flex-1 flex-col">
+          {children}
+          <ToastContainer />
+        </div>
       </div>
       {currentUser && withFooter && <Footer />}
     </div>

src/components/messages/MessagePreviewIndex.tsx

@@ -0,0 +1,12 @@
+const MessagePreviewIndex: React.FC = () => {
+  return (
+    <div className="flex h-full flex-1 justify-center">
+      <div className="container grid h-full grid-cols-4">
+        <div>Show discussions</div>
+        <div className="show messages"></div>
+      </div>
+    </div>
+  );
+};
+
+export default MessagePreviewIndex;

src/context/MessageContext.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useEffect, useMemo, useState } from "react";
+
+import io, { Socket } from "socket.io-client";
+import useAuth from "../hooks/useAuth";
+import TokenService from "../services/token.service";
+
+const tokenService = TokenService.getInstance();
+
+export const MessageContext = createContext<{
+  isConnected: boolean;
+  sendMessage: (announcement_id: number, contenu: string) => void;
+}>({
+  isConnected: false,
+  sendMessage: () => {},
+});
+
+let socket: Socket<any>;
+
+const MessageProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { currentUser } = useAuth();
+
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+
+  const sendMessage = (announcement_id: number, contenu: string) => {
+    socket.send({
+      data: {
+        announcement_id: announcement_id.toString(),
+        objet: "",
+        contenu,
+      },
+      headers: {
+        Authorization: "Bearer " + tokenService.getAccessToken(),
+      },
+    });
+  };
+
+  useEffect(() => {
+    socket = io(process.env.NEXT_PUBLIC_BACKEND_URL as string, {
+      extraHeaders: {
+        Authorization: "Bearer " + tokenService.getAccessToken(),
+      },
+    });
+
+    socket.on("connect", () => {
+      setIsConnected(true);
+      console.log("Hello world");
+    });
+
+    socket.on("disconnect", () => {
+      setIsConnected(false);
+    });
+
+    socket.on("message", (data: any) => {
+      console.log(data);
+    });
+
+    return () => {
+      socket.off("connect");
+      socket.off("disconnect");
+      socket.off("message");
+    };
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({ isConnected, sendMessage }),
+    [isConnected, sendMessage]
+  );
+
+  return currentUser ? (
+    <MessageContext.Provider value={contextValue}>
+      {children}
+    </MessageContext.Provider>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default MessageProvider;

src/hooks/useMessages.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { MessageContext } from "../context/MessageContext";
+
+const useMessage = () => {
+  if (MessageContext) {
+    return useContext(MessageContext);
+  } else {
+    throw new Error("MessageProvider is required");
+  }
+};
+
+export default useMessage;

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import NProgress from "nprogress"; //nprogress module
 import Layout from "../components/layout/Layout";
 import { INFO } from "../constants/info";
 import AuthProvider from "../context/AuthContext";
+import MessageProvider from "../context/MessageContext";
 import "../styles/globals.css";
 
 //Binding events.
@@ -20,9 +21,11 @@ export default function App({ Component, pageProps }: AppProps) {
         titleTemplate={`${INFO.Title} | %s`}
         description={INFO.Description}
       />
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <MessageProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </MessageProvider>
     </AuthProvider>
   );
 }

src/pages/announcements/[id].tsx

@@ -1,12 +1,10 @@
 import { NextPage } from "next";
 import AnnouncementPreviewIndex from "../../components/announcements/preview-annoucement/AnnouncementPreviewIndex";
+import useAuth from "../../hooks/useAuth";
 
 const AnnouncementPreview: NextPage = () => {
-  return (
-    <>
-      <AnnouncementPreviewIndex />
-    </>
-  );
+  const { currentUser } = useAuth();
+  return <>{currentUser && <AnnouncementPreviewIndex />}</>;
 };
 
 export default AnnouncementPreview;

src/pages/index.tsx

@@ -2,8 +2,13 @@ import { NextPage } from "next";
 import { NextSeo } from "next-seo";
 import AllAnouncementsIndex from "../components/announcements/all-announcements/AllAnouncementsIndex";
 import { ROUTES } from "../constants/routes";
+import useMessage from "../hooks/useMessages";
 
 const Home: NextPage = () => {
+  const { isConnected } = useMessage();
+
+  console.log(isConnected);
+
   return (
     <>
       <NextSeo title={ROUTES.HOME.name} />

src/pages/messages/index.tsx

@@ -0,0 +1,15 @@
+import { NextPage } from "next";
+import { NextSeo } from "next-seo";
+import MessagePreviewIndex from "../../components/messages/MessagePreviewIndex";
+import { ROUTES } from "../../constants/routes";
+
+const MessagePreview: NextPage = () => {
+  return (
+    <>
+      <NextSeo title={ROUTES.MESSAGES.name} />
+      <MessagePreviewIndex />
+    </>
+  );
+};
+
+export default MessagePreview;

src/pages/posted-announcements/create.tsx

@@ -2,12 +2,14 @@ import { NextPage } from "next";
 import { NextSeo } from "next-seo";
 import AddAnnouncementIndex from "../../components/announcements/add-announcement/AddAnnouncementIndex";
 import { ROUTES } from "../../constants/routes";
+import useAuth from "../../hooks/useAuth";
 
 const AddAnnouncement: NextPage = () => {
+  const { currentUser } = useAuth();
   return (
     <>
       <NextSeo title={ROUTES.ADD_ANNOUNCEMENT.name} />
-      <AddAnnouncementIndex />
+      {currentUser && <AddAnnouncementIndex />}
     </>
   );
 };

src/pages/posted-announcements/index.tsx

@@ -2,12 +2,15 @@ import { NextPage } from "next";
 import { NextSeo } from "next-seo";
 import PostedAnnouncementIndex from "../../components/announcements/posted-announcement/PostedAnnouncementIndex";
 import { ROUTES } from "../../constants/routes";
+import useAuth from "../../hooks/useAuth";
 
 const PostedAnnouncements: NextPage = () => {
+  const { currentUser } = useAuth();
+
   return (
     <>
       <NextSeo title={ROUTES.POSTED_ANNOUNCEMENTS.name} />
-      <PostedAnnouncementIndex />
+      {currentUser && <PostedAnnouncementIndex />}
     </>
   );
 };