From c98fc1fddd4bee84c8466f0395262bdb5616e8cc Mon Sep 17 00:00:00 2001
From: RikThePixel <rikdenbreejen@tutanota.com>
Date: Wed, 10 Jan 2024 20:10:40 +0100
Subject: [PATCH 1/2] Fix weird styling issue when there is no ads

---
 apps/frontend/src/pages/index.page.tsx | 55 +++++++++++++-------------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/apps/frontend/src/pages/index.page.tsx b/apps/frontend/src/pages/index.page.tsx
index 23c8f3f..5aae332 100644
--- a/apps/frontend/src/pages/index.page.tsx
+++ b/apps/frontend/src/pages/index.page.tsx
@@ -85,20 +85,15 @@ export default function FrontPage() {
 
   const handleSubmit = useMemo(
     () =>
-      onSubmit(
-        (data) => {
-          getAdvertisementsWithFilter({
-            search: data.search,
-            category: data.category !== 'none' ? data.category : undefined,
-            property_options: data.options
-              ?.map((opt) => opt.value)
-              .filter((opt) => opt !== 'none'),
-          });
-        },
-        (errors) => {
-          console.log(errors);
-        },
-      ),
+      onSubmit((data) => {
+        getAdvertisementsWithFilter({
+          search: data.search,
+          category: data.category !== 'none' ? data.category : undefined,
+          property_options: data.options
+            ?.map((opt) => opt.value)
+            .filter((opt) => opt !== 'none'),
+        });
+      }),
     [onSubmit, getAdvertisementsWithFilter],
   );
 
@@ -172,20 +167,24 @@ export default function FrontPage() {
           .loading(() => 'Loading category properties...')
           .unwrap()}
       </Collapse>
-      <Grid mt="md" pb="md">
-        {advertisements
-          .map((value) =>
-            value.length === 0
-              ? 'There are no advertisements yet, be the first to place one!'
-              : value.map((ad) => (
-                  <Grid.Col key={ad.uid} span={{ xs: 12, sm: 6, lg: 4 }}>
-                    <AdvertisementCard {...ad} />
-                  </Grid.Col>
-                )),
-          )
-          .catch((e) => e.message)
-          .unwrap()}
-      </Grid>
+      {advertisements
+        .map((value) => {
+          if (value.length === 0) {
+            return 'There are no advertisements yet, be the first to place one!';
+          }
+
+          return (
+            <Grid mt="md" pb="md">
+              {value.map((ad) => (
+                <Grid.Col key={ad.uid} span={{ xs: 12, sm: 6, lg: 4 }}>
+                  <AdvertisementCard {...ad} />
+                </Grid.Col>
+              ))}
+            </Grid>
+          );
+        })
+        .catch((e) => e.message)
+        .unwrap()}
     </PageContainer>
   );
 }

From 56ea09da5162df526adcb280650a30d45667f6a9 Mon Sep 17 00:00:00 2001
From: RikThePixel <rikdenbreejen@tutanota.com>
Date: Wed, 10 Jan 2024 20:15:00 +0100
Subject: [PATCH 2/2] Add pending state to advertisements

---
 apps/frontend/src/pages/index.page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/index.page.tsx b/apps/frontend/src/pages/index.page.tsx
index 5aae332..b9a4b69 100644
--- a/apps/frontend/src/pages/index.page.tsx
+++ b/apps/frontend/src/pages/index.page.tsx
@@ -54,8 +54,7 @@ export default function FrontPage() {
   useEffect(() => {
     if (!selectedCategory || selectedCategory === 'none') {
       resetCategory();
-      setValues({ options: [] });
-      return;
+      return setValues({ options: [] });
     }
     loadCategory(selectedCategory);
   }, [selectedCategory, resetCategory, loadCategory, setValues]);
@@ -183,6 +182,7 @@ export default function FrontPage() {
             </Grid>
           );
         })
+        .pending(() => 'Loading advertisements...')
         .catch((e) => e.message)
         .unwrap()}
     </PageContainer>