From 37a181a6cc357fc453851579c8d3a5003bf5e0ad Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Fri, 16 Aug 2024 19:20:10 -0700
Subject: [PATCH] some rendering changes, debounce markdown updating

---
 docker/Dockerfile                             |   3 -
 .../components/listing/ListingDescription.tsx | 119 +++++++++++++-----
 .../src/components/listing/ListingImages.tsx  |   4 +-
 3 files changed, 93 insertions(+), 33 deletions(-)

diff --git a/docker/Dockerfile b/docker/Dockerfile
index d1a57da9..3c03a3cc 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -20,8 +20,5 @@ RUN pip install --no-cache-dir .
 # Expose the port that the application runs on.
 EXPOSE 8080
 
-# Sets environment variables.
-ENV ENVIRONMENT=production
-
 # Run the FastAPI application.
 CMD ["fastapi", "run", "store/app/main.py", "--port", "8080"]
diff --git a/frontend/src/components/listing/ListingDescription.tsx b/frontend/src/components/listing/ListingDescription.tsx
index 962f20d5..94510ceb 100644
--- a/frontend/src/components/listing/ListingDescription.tsx
+++ b/frontend/src/components/listing/ListingDescription.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { FaFile, FaPen } from "react-icons/fa";
 import Markdown from "react-markdown";
 
@@ -15,39 +15,89 @@ interface RenderDescriptionProps {
 }
 
 export const RenderDescription = ({ description }: RenderDescriptionProps) => {
+  const [imageModal, setImageModal] = useState<[string, string] | null>(null);
+
   return (
-    <Markdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        p: ({ children }) => <p className="mb-1">{children}</p>,
-        ul: ({ children }) => <ul className="list-disc ml-4">{children}</ul>,
-        ol: ({ children }) => <ol className="list-decimal ml-4">{children}</ol>,
-        li: ({ children }) => <li className="mb-1">{children}</li>,
-        table: ({ children }) => (
-          <table className="table-auto w-full">{children}</table>
-        ),
-        thead: ({ children }) => (
-          <thead className="bg-gray-50">{children}</thead>
-        ),
-        tbody: ({ children }) => <tbody>{children}</tbody>,
-        tr: ({ children }) => <tr>{children}</tr>,
-        th: ({ children }) => (
-          <th className="border px-4 py-2 text-left">{children}</th>
-        ),
-        td: ({ children }) => (
-          <td className="border px-4 py-2 text-left">{children}</td>
-        ),
-      }}
-    >
-      {description}
-    </Markdown>
+    <>
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          p: ({ children }) => <p className="mb-1">{children}</p>,
+          ul: ({ children }) => <ul className="list-disc ml-4">{children}</ul>,
+          ol: ({ children }) => (
+            <ol className="list-decimal ml-4">{children}</ol>
+          ),
+          li: ({ children }) => <li className="mb-1">{children}</li>,
+          table: ({ children }) => (
+            <table className="table-auto w-full">{children}</table>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-gray-50">{children}</thead>
+          ),
+          tbody: ({ children }) => <tbody>{children}</tbody>,
+          tr: ({ children }) => <tr>{children}</tr>,
+          th: ({ children }) => (
+            <th className="border px-4 py-2 text-left">{children}</th>
+          ),
+          td: ({ children }) => (
+            <td className="border px-4 py-2 text-left">{children}</td>
+          ),
+          a: ({ children, href }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              className="text-blue-500"
+            >
+              {children}
+            </a>
+          ),
+          h1: ({ children }) => <h1 className="text-2xl mb-2">{children}</h1>,
+          h2: ({ children }) => <h2 className="text-xl mb-2">{children}</h2>,
+          h3: ({ children }) => (
+            <h3 className="text-lg mb-2 underline">{children}</h3>
+          ),
+          h4: ({ children }) => (
+            <h4 className="text-md mb-2 font-bold">{children}</h4>
+          ),
+          img: ({ src, alt }) => (
+            <div
+              className="flex flex-col justify-center w-full mx-auto gap-2 my-4 md:w-2/3 lg:w-1/2 cursor-pointer"
+              onClick={() => src && setImageModal([src, alt ?? ""])}
+            >
+              <img src={src} alt={alt} className="rounded-lg" />
+              {alt && <p className="text-sm text-center">{alt}</p>}
+            </div>
+          ),
+        }}
+      >
+        {description}
+      </Markdown>
+
+      {imageModal !== null && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+          onClick={() => setImageModal(null)}
+        >
+          <div
+            className="absolute bg-white rounded-lg p-4 max-w-4xl max-h-4xl m-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <img
+              src={imageModal[0]}
+              alt={imageModal[1]}
+              className="max-h-full max-w-full"
+            />
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
 interface Props {
   listingId: string;
   description: string | null;
-  // TODO: If can edit, allow the user to update the description.
   edit: boolean;
 }
 
@@ -63,6 +113,19 @@ const ListingDescription = (props: Props) => {
   );
   const [hasChanged, setHasChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
+  const [debouncedDescription, setDebouncedDescription] = useState(
+    initialDescription ?? "",
+  );
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedDescription(newDescription);
+    }, 300);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [newDescription]);
 
   const handleSave = async () => {
     if (!hasChanged) {
@@ -109,7 +172,7 @@ const ListingDescription = (props: Props) => {
               className="border-b border-gray-300 dark:border-gray-700 mb-2"
             />
           )}
-          <RenderDescription description={newDescription} />
+          <RenderDescription description={debouncedDescription} />
           {edit && (
             <Button
               onClick={() => {
diff --git a/frontend/src/components/listing/ListingImages.tsx b/frontend/src/components/listing/ListingImages.tsx
index c1b6d292..0eb93f58 100644
--- a/frontend/src/components/listing/ListingImages.tsx
+++ b/frontend/src/components/listing/ListingImages.tsx
@@ -27,7 +27,7 @@ const ListingImages = (props: Props) => {
     allArtifacts.filter((a) => a.artifact_type === "image"),
   );
   const [deletingIds, setDeletingIds] = useState<string[]>([]);
-  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [collapsed, setCollapsed] = useState<boolean>(true);
 
   const [showImageModal, setShowImageModal] = useState<number | null>(null);
 
@@ -79,7 +79,7 @@ const ListingImages = (props: Props) => {
                       <img
                         src={image.url}
                         alt={image.name}
-                        className="aspect-square cursor-pointer"
+                        className="aspect-square cursor-pointer rounded-lg"
                         onClick={() => setShowImageModal(idx)}
                       />
                     </div>