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 1/2] 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()}

From 49001bb63c81927d1e1c0590da8d6a663a26aa9e Mon Sep 17 00:00:00 2001
From: Stepan Vladovskiy <stepan.vladovskiy@gmail.com>
Date: Sun, 15 Sep 2024 15:37:27 +0000
Subject: [PATCH 2/2] style: with small readme at top, and small coment in code

---
 src/components/Feed/Placeholder/Placeholder.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Feed/Placeholder/Placeholder.tsx b/src/components/Feed/Placeholder/Placeholder.tsx
index 6698c361..4f106b75 100644
--- a/src/components/Feed/Placeholder/Placeholder.tsx
+++ b/src/components/Feed/Placeholder/Placeholder.tsx
@@ -1,3 +1,10 @@
+/**
+ * Placeholder component displays different placeholder content based on type and mode.
+ *
+ * @param {PlaceholderProps} props - The properties for the component.
+ * @returns {JSX.Element | null} The rendered placeholder or null if data is missing.
+ */
+
 import { clsx } from 'clsx'
 import { For, Show, createMemo } from 'solid-js'
 
@@ -89,16 +96,18 @@ export const Placeholder = (props: PlaceholderProps) => {
   const { t } = useLocalize()
   const { session } = useSession()
 
-  // dufok + mem for placeholder data without a fallback, it will be `undefined` if not found
+  // 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 dataForType;
+  // (^-^') No fallback to ensure it is empty when data is missing
   });
 
-  // Return null if no placeholder data is found
+  // (^-^') Return null if no placeholder data is found
   if (!placeholderData()) {
     return null;
   }