From cbf75acbeb31d4e4927be969f252a8e74fa0a467 Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Thu, 17 Oct 2024 20:46:34 -0400
Subject: [PATCH] Fix empty images section if no images + Remove postgres port

---
 README.md                                     | 10 +++----
 docker-compose.yml                            |  4 +--
 .../components/Project/Project/Project.tsx    | 29 ++++++++++---------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 91cf1ef..63e95fc 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ services:
       - API_PROXY_TARGET=http://localhost:8911
       - MAX_HTTP_CONNECTIONS_PER_MINUTE=60
       - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
-      - DATABASE_URL=postgresql://redwood:changeme@db:5432/portfolio
+      - DATABASE_URL=postgresql://redwood:changeme@db/portfolio
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
       - SMTP_HOST=smtp.example.com
@@ -58,8 +58,6 @@ services:
       - POSTGRES_USER=redwood
       - POSTGRES_PASSWORD=changeme
       - POSTGRES_DB=portfolio
-    ports:
-      - 5432:5432
     volumes:
       - postgres:/var/lib/postgresql/data
 
@@ -75,9 +73,9 @@ sudo docker exec -u root portfolio chown -R node:node /home/node/app/api/files_p
 ## Logging In
 - Once the container is up and running, head to `/login` (`https://portfolio.example.com/login`), default credentials are below
 - If you would like to change the password, head to `/forgot-password` (`https://portfolio.example.com/forgot-password`), the username is `admin`
-  - If you correctly set up the Gmail app password, you should receive an email from yourself
-  - It contains the link needed to change your password
+  - If you correctly configured [SMTP](#smtp), you should receive an Email from [`EMAIL_FROM`](#docker-compose) to [`EMAIL_TO`](#docker-compose)
+  - The Email contains the link needed to change your password
 ### Default Credentials
 **Username:** `admin`
 
-**Password:** [`SMTP_PASSWORD`](#smtp)
+**Password:** [`SMTP_PASSWORD`](#docker-compose)
diff --git a/docker-compose.yml b/docker-compose.yml
index e87f32e..c22d0f7 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -9,7 +9,7 @@ services:
       - API_PROXY_TARGET=http://localhost:8911
       - MAX_HTTP_CONNECTIONS_PER_MINUTE=60
       - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
-      - DATABASE_URL=postgresql://redwood:changeme@db:5432/portfolio
+      - DATABASE_URL=postgresql://redwood:changeme@db/portfolio
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
       - SMTP_HOST=smtp.example.com
@@ -46,8 +46,6 @@ services:
       - POSTGRES_USER=redwood
       - POSTGRES_PASSWORD=changeme
       - POSTGRES_DB=portfolio
-    ports:
-      - 5432:5432
     volumes:
       - postgres:/var/lib/postgresql/data
 
diff --git a/web/src/components/Project/Project/Project.tsx b/web/src/components/Project/Project/Project.tsx
index fcb5b95..34a6609 100644
--- a/web/src/components/Project/Project/Project.tsx
+++ b/web/src/components/Project/Project/Project.tsx
@@ -69,20 +69,23 @@ const Project = ({ project }: Props) => {
             </div>
           </>
         )}
-        <h2 className="sm:hidden font-bold text-3xl text-center">Images</h2>
+        {project.images.length > 0 && (
+          <h2 className="sm:hidden font-bold text-3xl text-center">Images</h2>
+        )}
       </div>
-      <div className="flex flex-wrap gap-4 items-center pt-8 justify-center">
-        {project.images.map((image, i) => (
-          <a
-            href={image}
-            target="_blank"
-            rel="noreferrer"
-            key={i}
-            className="rounded-xl"
-          >
-            <img src={image} alt="" className="rounded-xl" />
-          </a>
-        ))}
+      <div className="flex flex-wrap gap-4 pt-8 justify-center h-fit">
+        {project.images.length > 0 &&
+          project.images.map((image, i) => (
+            <a
+              href={image}
+              target="_blank"
+              rel="noreferrer"
+              key={i}
+              className="rounded-xl"
+            >
+              <img src={image} alt="" className="rounded-xl" />
+            </a>
+          ))}
       </div>
     </div>
   )