ADD: Notice CRUD

2026-04-25 15:15:43 +02:00
parent 39c900a41b
commit a8fc268932
15 changed files with 1281 additions and 83 deletions
@@ -0,0 +1,170 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { getAllImagesByNoticeId, getNoticeById } from "../api/notices";
+import { useAuthStore } from "../store/authStore";
+import { useNoticesStore } from "../store/noticesStore";
+
+export default function NoticeDetails() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { user_id } = useAuthStore();
+  const { notices, deleteNotice, fetchNotices } = useNoticesStore();
+  const [notice, setNotice] = useState(null);
+  const [images, setImages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadData = async () => {
+      setIsLoading(true);
+      try {
+        let found = notices.find((item) => String(item.noticeId) === String(id));
+        if (!found) {
+          found = await getNoticeById(id);
+        }
+
+        const imageUrls = await getAllImagesByNoticeId(id);
+        if (isMounted) {
+          setNotice(found);
+          setImages(imageUrls);
+        } else {
+          imageUrls.forEach((imageUrl) => {
+            if (typeof imageUrl === "string" && imageUrl.startsWith("blob:")) {
+              URL.revokeObjectURL(imageUrl);
+            }
+          });
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadData();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [id, notices]);
+
+  useEffect(() => {
+    return () => {
+      images.forEach((imageUrl) => {
+        if (typeof imageUrl === "string" && imageUrl.startsWith("blob:")) {
+          URL.revokeObjectURL(imageUrl);
+        }
+      });
+    };
+  }, [images]);
+
+  const isOwner = useMemo(() => {
+    if (!notice) {
+      return false;
+    }
+    return String(notice.clientId) === String(user_id);
+  }, [notice, user_id]);
+
+  const handleDelete = async () => {
+    const confirmed = window.confirm("Usunac ogloszenie?");
+    if (!confirmed) {
+      return;
+    }
+
+    await deleteNotice(Number(id));
+    await fetchNotices();
+    navigate("/dashboard/my-notices");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-white p-8 text-center text-sm text-gray-600">
+        Ladowanie ogloszenia...
+      </div>
+    );
+  }
+
+  if (!notice) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-white p-8 text-center text-sm text-gray-600">
+        Nie znaleziono ogloszenia.
+      </div>
+    );
+  }
+
+  return (
+    <section className="space-y-5">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{notice.title}</h1>
+          <p className="text-sm text-gray-500">{notice.category}</p>
+        </div>
+       
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        {images.map((image, index) => (
+          <img
+            alt={`${notice.title} ${index + 1}`}
+            className="aspect-[4/3] w-full rounded-lg border border-gray-200 bg-gray-100 object-cover"
+            key={`${image}-${index}`}
+            src={image}
+          />
+        ))}
+           <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">Opis</h2>
+        <p className="whitespace-pre-wrap text-gray-700">{notice.description}</p>
+         <span className="text-2xl font-bold text-primary">{notice.price} zl</span>
+      </div>
+      </div>
+
+
+      {Array.isArray(notice.attributes) && notice.attributes.length > 0 ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
+            Atrybuty
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {notice.attributes.map((attr) => (
+              <span
+                className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700"
+                key={`${attr.name}-${attr.value}`}
+              >
+                {attr.name}: {attr.value}
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap gap-2">
+        <Link
+          className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
+          to="/notices"
+        >
+          Wroc do listy
+        </Link>
+        {isOwner ? (
+          <>
+            {notice.status === "INACTIVE" ? (
+              <Link
+                className="rounded-md border border-primary px-4 py-2 text-sm font-semibold text-primary hover:bg-primary/10"
+                to={`/notices/${notice.noticeId}/edit`}
+              >
+                Edytuj
+              </Link>
+            ) : null}
+            <button
+              className="rounded-md border border-red-300 px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50"
+              onClick={handleDelete}
+              type="button"
+            >
+              Usun
+            </button>
+          </>
+        ) : null}
+      </div>
+    </section>
+  );
+}