From ebdfafff7ef2283b4b003e917ec3614d11de6d5b Mon Sep 17 00:00:00 2001
From: Jerome Fitzgerald <j@jeromefitzgerald.com>
Date: Sun, 30 Jun 2024 10:47:01 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9=20=20NICE-127=20fix=20Credits=20Gr?=
 =?UTF-8?q?id=20later=20+=20shows=20[b]=20(#2596)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If you want to pull `SHOW` data from an `EVENT.SLUG` --- need to pass the right `database_id`
---
 .../_components/Event.Slug.tsx                |  40 +----
 .../playground/2024/_components/Credits.tsx   | 164 ++++++++++++------
 .../jeromefitzgerald.com/src/store/index.tsx  |  20 +--
 3 files changed, 120 insertions(+), 104 deletions(-)

diff --git a/sites/jeromefitzgerald.com/src/app/(notion)/events/[[...catchAll]]/_components/Event.Slug.tsx b/sites/jeromefitzgerald.com/src/app/(notion)/events/[[...catchAll]]/_components/Event.Slug.tsx
index c4eecfef3..6590d4518 100644
--- a/sites/jeromefitzgerald.com/src/app/(notion)/events/[[...catchAll]]/_components/Event.Slug.tsx
+++ b/sites/jeromefitzgerald.com/src/app/(notion)/events/[[...catchAll]]/_components/Event.Slug.tsx
@@ -42,6 +42,7 @@ import { Venue } from './Event.Slug.Venue'
 import { Image } from './Image'
 
 const { DATABASE_ID } = CONFIG.EVENTS
+const { DATABASE_ID: DATABASE_ID__SHOWS } = CONFIG.SHOWS
 
 /**
  * @note(notion) Yea these "titles" are not really user friendly :X
@@ -217,9 +218,8 @@ async function Slug({ revalidate, segmentInfo }) {
     properties,
     'Rollup.Shows.Primary.Slug',
   )[0]
-  // console.dir(`showPrimarySlug: ${showPrimarySlug}`)
   const showPrimaryData = await getDataFromCache({
-    database_id: DATABASE_ID,
+    database_id: DATABASE_ID__SHOWS,
     draft: false,
     filterType: 'equals',
     revalidate: false,
@@ -258,42 +258,6 @@ async function Slug({ revalidate, segmentInfo }) {
         <Credits id={id} key={`relations--${id}--wrapper`} relations={R} />
         <ArticleMainCTA />
       </ArticleMain>
-      {/* <Grid>
-        <HeadlineColumnA>
-          <HeadlineTitleText
-            aria-hidden={true}
-            aria-label={title}
-            className="hidden"
-          >
-            <>{title}</>
-          </HeadlineTitleText>
-          <HeadlineTitleSub>
-            {tags.map(({ color, id, name }) => (
-              <Badge color={color} key={id} size="2">
-                <Code variant="ghost">{name}</Code>
-              </Badge>
-            ))}
-            <Ticket properties={properties} />
-          </HeadlineTitleSub>
-        </HeadlineColumnA>
-        <HeadlineContent>
-          <Callout size="1" variant="outline" />
-          <Heading size={{ initial: '7', md: '9' }}>{title}</Heading>
-          <Image properties={properties} />
-          <Blocks data={data?.blocks} />
-        </HeadlineContent>
-      </Grid>
-      <Grid>
-        <HeadlineColumnA>
-          <HeadlineTitle aria-label={title} as="h2">
-            <>Info</>
-          </HeadlineTitle>
-        </HeadlineColumnA>
-        <HeadlineContent className="">
-          <Separator size="4" />
-          <Relations id={id} key={`relations--${id}--wrapper`} relations={R} />
-        </HeadlineContent>
-      </Grid> */}
     </ContainerWithSidebar>
   )
 }
diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Credits.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Credits.tsx
index b23944792..dce89b81f 100644
--- a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Credits.tsx
+++ b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Credits.tsx
@@ -2,6 +2,7 @@
 import { cx } from '@jeromefitz/ds/utils/cx'
 
 import { Box } from '@radix-ui/themes/dist/esm/components/box.js'
+// import { Grid } from '@radix-ui/themes/dist/esm/components/grid.js'
 import { Text } from '@radix-ui/themes/dist/esm/components/text.js'
 import _map from 'lodash/map.js'
 import _size from 'lodash/size.js'
@@ -15,7 +16,84 @@ import { CreditsItems } from './Credits.Items'
 import { CreditsLoading } from './Credits.Loading'
 import { getRelationTitle } from './Credits.utils'
 
+function RelationContainerTitle({ children, className = '' }) {
+  return (
+    <Box
+      className={cx(
+        'relative h-16 w-full flex-none p-4',
+        'px-5 pb-8 pt-5',
+        'border-gray-7 border-y-1',
+        className,
+      )}
+    >
+      <Box className={cx('contents')}>
+        <Box className={cx('flex flex-row items-center justify-start gap-4')}>
+          {/* <InfoCircledIcon /> */}
+          <Text className="font-medium capitalize" size={{ initial: '3', md: '5' }}>
+            {children}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+function RelationContainerContent({ children }) {
+  return (
+    <Box
+      className={cx(
+        'relative flex h-min w-full flex-none flex-col flex-nowrap content-start items-start justify-start gap-4 overflow-visible px-5 py-8',
+        'bg-accentA-2',
+        // 'border-gray-7 border-1 border-l-0 border-t-0',
+        'md:h-full',
+      )}
+    >
+      {children}
+    </Box>
+  )
+}
+
+function RelationContainer({ children }) {
+  return (
+    <Box
+      className={cx(
+        'relative flex h-auto w-[1px] flex-col flex-nowrap content-center items-stretch justify-start gap-0 overflow-hidden p-0',
+        'min-w-[300px]',
+        // 'flex-[1_0_0px]',
+        'flex-auto',
+      )}
+    >
+      {children}
+    </Box>
+  )
+}
+
+/**
+ * @todo(css) figure out grid for this better please...
+ */
+function RelationsContainer({ children }) {
+  return (
+    <Box
+      className={cx(
+        // 'bg-accent-2',
+        'size-full items-stretch',
+        'rounded-3 relative z-10 flex h-min w-full flex-row content-start items-start justify-start gap-0 overflow-hidden p-0',
+        // 'flex-none flex-row flex-nowrap',
+        'flex-row flex-wrap',
+        'border-1 border-gray-7',
+        // 'border-t-1 rounded-t-[0]',
+        'rounded-t-[0] border-t-0',
+      )}
+      id="container--credits--content"
+    >
+      {children}
+    </Box>
+  )
+}
+
 function Credits({ id, relations }) {
+  let relationsSize = 0
+  let relationAddition = 0
   return (
     <Box
       className={cx(
@@ -25,79 +103,53 @@ function Credits({ id, relations }) {
       id="container--credits"
     >
       <CreditsHeader />
-      <Box
-        className={cx(
-          // 'bg-accent-2',
-          'size-full items-stretch',
-          'rounded-3 relative z-10 flex h-min w-full flex-row content-start items-start justify-start gap-0 overflow-hidden p-0',
-          // 'flex-none flex-row flex-nowrap',
-          'flex-row flex-wrap',
-          'border-1 border-gray-7',
-          // 'border-t-1 rounded-t-[0]',
-          'rounded-t-[0] border-t-0',
-        )}
-        id="container--credits--content"
-      >
+      <RelationsContainer>
         {_map(relations, (items, relation) => {
           if (!items) return null
           const itemsCount = _size(items)
           if (itemsCount === 0) return null
+          relationsSize++
+          relationAddition = relationsSize % 3
+          // console.dir(`relationsSize: ${relationsSize}`)
+          // console.dir(`relationAddition: ${relationAddition}`)
+          // console.dir(relationsSize % 3)
           const title = pluralize(getRelationTitle(relation), itemsCount)
           const key = `relations--${id}--${relation}`
           // console.dir(`title: ${title}`)
           return (
             <Fragment key={key}>
-              <Box
-                className={cx(
-                  'relative flex h-auto w-[1px] flex-col flex-nowrap content-center items-stretch justify-start gap-0 overflow-hidden p-0',
-                  'min-w-[300px]',
-                  // 'flex-[1_0_0px]',
-                  'flex-auto',
-                )}
-                key={`c1-${relation}`}
-              >
-                <Box
-                  className={cx(
-                    'relative h-16 w-full flex-none p-4',
-                    'px-5 pb-8 pt-5',
-                    'border-gray-7 border-y-1',
-                  )}
-                >
-                  <Box className={cx('contents')}>
-                    <Box
-                      className={cx(
-                        'flex flex-row items-center justify-start gap-4',
-                      )}
-                    >
-                      {/* <InfoCircledIcon /> */}
-                      <Text
-                        className="font-medium capitalize"
-                        size={{ initial: '3', md: '5' }}
-                      >
-                        {title}
-                      </Text>
-                    </Box>
-                  </Box>
-                </Box>
-                <Box
-                  className={cx(
-                    'relative flex h-min w-full flex-none flex-col flex-nowrap content-start items-start justify-start gap-4 overflow-visible px-5 py-8',
-                    'bg-accentA-2',
-                    // 'border-gray-7 border-1 border-l-0 border-t-0',
-                    'md:h-full',
-                  )}
-                >
+              <RelationContainer>
+                <RelationContainerTitle>{title}</RelationContainerTitle>
+                <RelationContainerContent>
                   <UL>
                     <Suspense fallback={<CreditsLoading size={itemsCount} />}>
                       <CreditsItems items={items} />
                     </Suspense>
                   </UL>
-                </Box>
-              </Box>
+                </RelationContainerContent>
+              </RelationContainer>
             </Fragment>
           )
         })}
-      </Box>
+        {relationAddition === 1 && (
+          <>
+            <RelationContainer>
+              <RelationContainerTitle className="hidden md:flex">{` `}</RelationContainerTitle>
+              <RelationContainerContent>{` `}</RelationContainerContent>
+            </RelationContainer>
+            <RelationContainer>
+              <RelationContainerTitle className="hidden md:flex">{` `}</RelationContainerTitle>
+              <RelationContainerContent>{` `}</RelationContainerContent>
+            </RelationContainer>
+          </>
+        )}
+        {relationAddition === 2 && (
+          <RelationContainer>
+            <RelationContainerTitle className="hidden md:flex">{` `}</RelationContainerTitle>
+            <RelationContainerContent>{` `}</RelationContainerContent>
+          </RelationContainer>
+        )}
+      </RelationsContainer>
     </Box>
   )
 }
diff --git a/sites/jeromefitzgerald.com/src/store/index.tsx b/sites/jeromefitzgerald.com/src/store/index.tsx
index 605e6ee5b..c089c1445 100644
--- a/sites/jeromefitzgerald.com/src/store/index.tsx
+++ b/sites/jeromefitzgerald.com/src/store/index.tsx
@@ -213,23 +213,23 @@ const getDefaultInitialStateStoreMenu = () => ({
         titleDescription: '',
       },
       {
-        href: '/events/2024/07/18/sketch-comedy-lab-best-of',
+        href: '/events/2024/07/18/sketch-lab-report-vol-1',
         icon: TicketIcon,
-        id: '2024/07/18/sketch-comedy-lab-best-of',
-        isActive: false,
-        isActiveMobile: false,
+        id: '2024/07/18/sketch-lab-report-vol-1',
+        isActive: true,
+        isActiveMobile: true,
         keywords: ['sketch', 'comedy', 'lab'],
-        title: 'Sketch Comedy Lab: THU 07/18',
+        title: 'Sketch Lab Report Vol. 1: THU 07/18',
         titleDescription: '',
       },
       {
-        href: '/events/2024/07/19/sketch-comedy-lab-best-of',
+        href: '/events/2024/07/19/sketch-lab-report-vol-1',
         icon: TicketIcon,
-        id: '2024/07/19/sketch-comedy-lab-best-of',
-        isActive: false,
-        isActiveMobile: false,
+        id: '2024/07/19/sketch-lab-report-vol-1',
+        isActive: true,
+        isActiveMobile: true,
         keywords: ['sketch', 'comedy', 'lab'],
-        title: 'Sketch Comedy Lab: FRI 07/19',
+        title: 'Sketch Lab Report Vol. 1: FRI 07/19',
         titleDescription: '',
       },
     ],