final scrap

next.config.js

@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: [process.env.NEXT_PUBLIC_BACKEND_HOSTNAME, "api.dicebear.com"],
+    domains: [process.env.NEXT_PUBLIC_BACKEND_HOSTNAME, "res.cloudinary.com"],
   },
 };
 

src/components/admin/ScrapAnnoucenemntIndex.tsx

@@ -1,23 +1,178 @@
-import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import DataTable, { TableColumn } from "react-data-table-component";
+import { Autoplay } from "swiper";
+import "swiper/css";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { ICONS } from "../../constants/icons";
+import { IMAGES } from "../../constants/images";
+import { ROUTES } from "../../constants/routes";
 import AnnouncementService from "../../services/annoucement.service";
 import { Announcement } from "../../typings/announcement";
+import { supportedNextjsImageUrl } from "../../utils/lib";
 import Loading from "../shared/Loading";
-const ReactJson = dynamic(() => import("react-json-view"), { ssr: false });
 
 const announcementService = AnnouncementService.getInstance();
 
+const columns: TableColumn<Announcement.AnnouncementScrap>[] = [
+  {
+    name: "N",
+    cell: (_, index) => (
+      <span className="text-sm font-medium">{index + 1}</span>
+    ),
+    selector: (_, index) => index || 0,
+    sortable: true,
+    width: "1rem",
+  },
+  {
+    name: "Photos",
+    cell: (row, index) => (
+      <>
+        {row.photos && row.photos.length > 0 ? (
+          <>
+            <Swiper
+              modules={[Autoplay]}
+              autoplay={{
+                disableOnInteraction: false,
+                pauseOnMouseEnter: true,
+                delay: index % 2 ? 3000 : 4000,
+              }}
+            >
+              {row.photos.map((picture, index) => (
+                <SwiperSlide key={index} className="!w-full overflow-hidden">
+                  <Image
+                    src={supportedNextjsImageUrl(picture)}
+                    alt="no-image"
+                    className="aspect-video h-36  object-cover"
+                    width={720}
+                    height={480}
+                  />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </>
+        ) : (
+          <Image
+            src={IMAGES.NO_IMAGE}
+            alt="no-image"
+            className="pointer-events-none aspect-video h-36 object-cover"
+            width={720}
+            height={480}
+          />
+        )}
+      </>
+    ),
+    grow: 3,
+  },
+  {
+    name: "Titre",
+    cell: (row) => (
+      <p className="text-sm font-medium">{row.titre || "indéfini"}</p>
+    ),
+    selector: (row) => row.titre || "indéfini",
+    sortable: true,
+    reorder: true,
+    grow: 1.5,
+  },
+  {
+    name: "Catégorie",
+    cell: (row) => <p className="text-sm font-medium">{row.categorie}</p>,
+    selector: (row) => row.categorie,
+    reorder: true,
+    sortable: true,
+    grow: 1,
+  },
+  {
+    name: "Surface",
+    cell: (row) => (
+      <p className="text-sm font-medium">{row.surface + " m²" || "indéfini"}</p>
+    ),
+    selector: (row) => row.surface || 0,
+    sortable: true,
+    reorder: true,
+    grow: 1,
+  },
+  {
+    name: "Prix",
+    cell: (row) => <p className="text-sm font-medium">{row.prix + " DZD"}</p>,
+    selector: (row) => row.prix,
+    sortable: true,
+    reorder: true,
+    grow: 1,
+  },
+  {
+    name: "Location",
+    cell: (row) => (
+      <div className="flex flex-col text-sm font-medium">
+        <p>{row.commune}</p>
+        <p>{row.wilaya}</p>
+      </div>
+    ),
+    selector: (row) => [row.commune, row.wilaya].join(" "),
+    sortable: true,
+    reorder: true,
+    grow: 1,
+  },
+  {
+    name: "Date de publication",
+    cell: (row) => (
+      <p className="text-sm font-medium">
+        {new Date(row.date_publication).toDateString()}
+      </p>
+    ),
+    selector: (row) => new Date(row.date_publication).toUTCString(),
+    sortable: true,
+    reorder: true,
+    grow: 1.5,
+  },
+  {
+    name: "Actions",
+    cell: (row) => {
+      const [addingLoading, setAddingLoading] = useState<boolean>(false);
+      const router = useRouter();
+      const addAnnouncementHandler = async () => {
+        setAddingLoading(true);
+        try {
+          const response =
+            await announcementService.createAnnouncementFromScrap(row);
+          console.log(response);
+          router.push(ROUTES.POSTED_ANNOUNCEMENTS.path);
+        } catch (e) {
+          console.log(e);
+        } finally {
+          setAddingLoading(false);
+        }
+      };
+      return (
+        <button
+          disabled={addingLoading}
+          onClick={addAnnouncementHandler}
+          className={`${
+            addingLoading ? "animate-pulse" : ""
+          } flex items-center gap-x-1 rounded-sm  bg-blue-primary px-2  py-1 text-sm font-medium text-white transition duration-200 hover:bg-blue-hover`}
+        >
+          <ICONS.Check />
+          <span className="whitespace-nowrap">Ajouter</span>
+        </button>
+      );
+    },
+    grow: 2.5,
+  },
+];
+
 const ScrapAnnoucenemntIndex = () => {
-  const [annoucement, setAnnouncement] = useState<Announcement.Announcement[]>(
-    []
-  );
+  const [announcements, setAnnouncements] = useState<
+    Announcement.AnnouncementScrap[]
+  >([]);
   const [loading, setLoading] = useState<boolean>(false);
 
   const getAnnouncements = async () => {
     setLoading(true);
     try {
       const response = await announcementService.scrapAnnouncement();
-      setAnnouncement(response.data);
+      setAnnouncements(response.data.annonces);
+      console.log(response.data.annonces);
       setLoading(false);
     } catch (e) {
       console.log(e);
@@ -37,13 +192,25 @@ const ScrapAnnoucenemntIndex = () => {
           </h1>
         </div>
         <div className=" bg-white p-2 shadow">
-          {loading ? (
-            <div className="flex h-96 items-center justify-center">
-              <Loading />
-            </div>
-          ) : (
-            <ReactJson src={annoucement} />
-          )}
+          <DataTable
+            columns={columns}
+            data={announcements}
+            customStyles={{
+              headCells: {
+                style: {
+                  fontWeight: 700,
+                  fontFamily: "'Merriweather', sarif",
+                },
+              },
+            }}
+            pagination
+            progressPending={loading}
+            progressComponent={
+              <div className="flex h-52 w-full items-center justify-center dark:bg-slate-800">
+                <Loading />
+              </div>
+            }
+          />
         </div>
       </div>
     </div>

src/services/annoucement.service.ts

@@ -97,6 +97,20 @@ class AnnouncementService {
       throw e;
     }
   }
+
+  public async createAnnouncementFromScrap(
+    data: Announcement.AnnouncementScrap
+  ) {
+    try {
+      const response = await axios.post(
+        "/announcements/create-from-scrapp",
+        data
+      );
+      return response;
+    } catch (e) {
+      throw e;
+    }
+  }
 }
 
 export default AnnouncementService;

src/typings/announcement.d.ts

@@ -1,5 +1,5 @@
+import { Discussions } from "./discussions";
 import { Auth } from "./user";
-
 declare module Announcement {
   type Announcement = {
     id: number;
@@ -13,7 +13,7 @@ declare module Announcement {
     photos: Commun.Image[];
     titre: string;
     localisation: Commun.Localisation;
-    messages: unknown[];
+    messages: Discussions.Message[];
     date_publication: Date;
     adresse: string;
     latitude?: number;
@@ -38,6 +38,19 @@ declare module Announcement {
       Omit<Commun.Localisation, "id">
   >;
 
+  type AnnouncementScrap = Omit<
+    Announcement,
+    | "photos"
+    | "latitude"
+    | "longitude"
+    | "messages"
+    | "fans"
+    | "auteur"
+    | "localisation"
+  > & {
+    photos: string[];
+  } & Omit<Commun.Localisation, "id">;
+
   type AnnouncementFilters = {
     search?: string;
     type?: string;

src/utils/lib.ts

@@ -1,6 +1,11 @@
 export const imageUrl = (id: number) => {
   return process.env.NEXT_PUBLIC_BACKEND_URL + "/pictures/" + id;
 };
+
+export const supportedNextjsImageUrl = (url: string) => {
+  return "https://res.cloudinary.com/demo/image/fetch/" + url;
+};
+
 export const time_ago = (time: any) => {
   switch (typeof time) {
     case "number":
@@ -27,7 +32,7 @@ export const time_ago = (time: any) => {
     [4838400, "Le mois dernier", "Le mois prochain"], // 60*60*24*7*4*2
     [29030400, "mois", 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
     [58060800, "L'année dernière", "L'année prochaine"], // 60*60*24*7*4*12*2
-    [2903040000, "years", 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
+    [2903040000, "ans", 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
     [5806080000, "Le siècle dernier", "Siècle suivant"], // 60*60*24*7*4*12*100*2
     [58060800000, "des siècles", 2903040000], // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
   ];