From bef13a9bde53703ed5a6131504cde359d92043e2 Mon Sep 17 00:00:00 2001
From: Stepan Vladovskiy <stepan.vladovskiy@gmail.com>
Date: Sat, 14 Sep 2024 16:30:47 +0000
Subject: [PATCH] feat: router/author/slug with err_ in console , and
 Placeholder handle undefinde in slug for users with empty slug

---
 .gitignore                                    |  1 +
 .../Feed/Placeholder/Placeholder.tsx          | 26 ++++++++++++++-----
 src/routes/author/[slug]/[...tab].tsx         |  5 +++-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 03c90f5a..1854c000 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .devcontainer
+.pnpm-store
 dist/
 node_modules/
 npm-debug.log*
diff --git a/src/components/Feed/Placeholder/Placeholder.tsx b/src/components/Feed/Placeholder/Placeholder.tsx
index a1f60fd3..6698c361 100644
--- a/src/components/Feed/Placeholder/Placeholder.tsx
+++ b/src/components/Feed/Placeholder/Placeholder.tsx
@@ -89,7 +89,19 @@ export const Placeholder = (props: PlaceholderProps) => {
   const { t } = useLocalize()
   const { session } = useSession()
 
-  const placeholderData = createMemo(() => data[props.type])
+  // dufok + mem for placeholder data without a fallback, it will be `undefined` if not found
+  const placeholderData = createMemo(() => {
+    const dataForType = data[props.type];
+    if (!dataForType) {
+      console.warn(`No placeholder data found for type: ${props.type}`);
+    }
+    return dataForType; // No fallback to ensure it is empty when data is missing
+  });
+
+  // Return null if no placeholder data is found
+  if (!placeholderData()) {
+    return null;
+  }
 
   return (
     <div
@@ -100,17 +112,17 @@ export const Placeholder = (props: PlaceholderProps) => {
       )}
     >
       <div class={styles.placeholderCover}>
-        <img src={`/${placeholderData().image}`} alt={placeholderData().header} />
+        <img src={`/${placeholderData()?.image}`} alt={placeholderData()?.header} />
       </div>
       <div class={styles.placeholderContent}>
         <div>
-          <h3 innerHTML={t(placeholderData().header)} />
-          <p innerHTML={t(placeholderData().text)} />
+          <h3 innerHTML={t(placeholderData()?.header)} />
+          <p innerHTML={t(placeholderData()?.text)} />
         </div>
 
-        <Show when={placeholderData().profileLinks}>
+        <Show when={placeholderData()?.profileLinks}>
           <div class={styles.bottomLinks}>
-            <For each={placeholderData().profileLinks}>
+            <For each={placeholderData()?.profileLinks}>
               {(link) => (
                 <a href={link.href}>
                   <Icon name="link-white" class={styles.icon} />
@@ -133,7 +145,7 @@ export const Placeholder = (props: PlaceholderProps) => {
             </a>
           }
         >
-          <a class={styles.button} href={placeholderData().href}>
+          <a class={styles.button} href={placeholderData()?.href}>
             {t(
               session()?.access_token
                 ? placeholderData()?.buttonLabelAuthor || ''
diff --git a/src/routes/author/[slug]/[...tab].tsx b/src/routes/author/[slug]/[...tab].tsx
index 06593047..aeac7987 100644
--- a/src/routes/author/[slug]/[...tab].tsx
+++ b/src/routes/author/[slug]/[...tab].tsx
@@ -133,7 +133,10 @@ export default function AuthorPage(props: RouteSectionProps<AuthorPageProps>) {
   )
 
   return (
-    <ErrorBoundary fallback={(_err) => <FourOuFourView />}>
+    <ErrorBoundary fallback={(_err) => {
+      console.error('ErrorBoundary caught an error', _err)
+      return <FourOuFourView />
+    }}>
       <Suspense fallback={<Loading />}>
         <PageLayout
           title={title()}