feat: add occurrence handling and styling to lymphoma posts

Author: rmariuzzo

src/layouts/PostLayout.styles.ts

@@ -27,6 +27,23 @@ export const PostCategory = styled.div`
 
 export const PostTitle = styled(PageTitle)``
 
+export const PostOccurrence = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 0.5rem 0;
+`
+
+export const PostOccurrenceBadge = styled.span`
+  font-size: ${$theme.fontSize.copy2}rem;
+  font-weight: ${$theme.fontWeight.semiBold};
+  color: ${$theme.color.primary};
+  background-color: ${$theme.color.secondary}33;
+  border: 1px solid ${$theme.color.secondary};
+  border-radius: 999px;
+  padding: 0.1rem 0.6rem;
+  line-height: 1.4;
+`
+
 export const PostDate = styled.small`
   display: block;
   text-align: center;

src/layouts/PostLayout.tsx

@@ -8,6 +8,7 @@ type PostLayoutProps = {
   title: string
   date: Date
   category: string
+  occurrence?: number
   contents: any
   previousSlug: string
   nextSlug: string
@@ -17,6 +18,7 @@ export const PostLayout: React.FC<PostLayoutProps> = ({
   title,
   date,
   category,
+  occurrence,
   contents,
   previousSlug,
   nextSlug,
@@ -27,6 +29,13 @@ export const PostLayout: React.FC<PostLayoutProps> = ({
       <S.Container>
         <S.PostCategory>{category}</S.PostCategory>
         <S.PostTitle>{title}</S.PostTitle>
+        {occurrence != null && (
+          <S.PostOccurrence>
+            <S.PostOccurrenceBadge>
+              Occurrence {occurrence}
+            </S.PostOccurrenceBadge>
+          </S.PostOccurrence>
+        )}
         <S.PostDate>{formatRFC7231(date)}</S.PostDate>
         <S.PostContents dangerouslySetInnerHTML={{ __html: contents }} />
         <S.PostFooter>

src/pages/{MarkdownRemark.frontmatter__slug}.tsx

@@ -14,6 +14,7 @@ type TemplateProps = {
         date: string
         slug: string
         title: string
+        occurrence: number | null
       }
     }
     allMarkdownRemark: {
@@ -65,6 +66,7 @@ const Template: React.FC<TemplateProps> = ({ data, ...more }) => {
       title={frontmatter.title}
       date={parseISO(frontmatter.date)}
       category={getBlogNameById(categoryId)}
+      occurrence={frontmatter.occurrence ?? undefined}
       contents={html}
       previousSlug={previousSlug}
       nextSlug={nextSlug}
@@ -82,6 +84,7 @@ export const pageQuery = graphql`
         date
         slug
         title
+        occurrence
       }
     }
     allMarkdownRemark(sort: { frontmatter: { date: ASC } }) {

src/views/LymphomaPostsListView.styles.ts

@@ -51,7 +51,25 @@ export const PostCardDateDistance = styled.span`
   font-size: ${$theme.fontSize.copy2}rem;
 `
 
+export const OccurrenceDivider = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 2rem 0 0.5rem;
+  font-size: ${$theme.fontSize.copy2}rem;
+  font-weight: ${$theme.fontWeight.semiBold};
+  color: ${$theme.color.copyLight};
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid ${$theme.color.secondary};
+  }
+`
+
 export const PostCardOccurrenceBadge = styled.span`
+  margin-left: auto;
   font-size: ${$theme.fontSize.copy2}rem;
   font-weight: ${$theme.fontWeight.semiBold};
   color: ${$theme.color.primary};

src/views/LymphomaPostsListView.tsx

@@ -20,30 +20,46 @@ export const LymphomaPostsListView: React.FC<LymphomaPostsListViewProps> = ({
   posts,
   ...more
 }) => {
+  const postsByOccurrence = posts.reduce<Map<number, typeof posts>>(
+    (acc, post) => {
+      const group = acc.get(post.occurrence) ?? []
+      group.push(post)
+      acc.set(post.occurrence, group)
+      return acc
+    },
+    new Map()
+  )
+  const occurrences = Array.from(postsByOccurrence.keys()).sort((a, b) => b - a)
+
   return (
     <MainLayout {...more}>
       <S.Title>
         Recent posts about
         <br />
         my Hodgkin's Lymphoma
       </S.Title>
-      <S.PostCardList>
-        {posts.map((post) => (
-          <S.PostCardListItem key={post.id}>
-            <S.PostCard to={post.slug}>
-              <S.PostCardTitle>{post.title}</S.PostCardTitle>
-              <S.PostCardMeta>
-                <S.PostCardDateDistance title={formatRFC7231(post.date)}>
-                  {daysAgo(post.date)}
-                </S.PostCardDateDistance>
-                <S.PostCardOccurrenceBadge>
-                  Occurrence {post.occurrence}
-                </S.PostCardOccurrenceBadge>
-              </S.PostCardMeta>
-            </S.PostCard>
-          </S.PostCardListItem>
-        ))}
-      </S.PostCardList>
+      {occurrences.map((occurrence) => (
+        <React.Fragment key={occurrence}>
+          <S.OccurrenceDivider>Occurrence {occurrence}</S.OccurrenceDivider>
+          <S.PostCardList>
+            {(postsByOccurrence.get(occurrence) ?? []).map((post) => (
+              <S.PostCardListItem key={post.id}>
+                <S.PostCard to={post.slug}>
+                  <S.PostCardTitle>{post.title}</S.PostCardTitle>
+                  <S.PostCardMeta>
+                    <S.PostCardDateDistance title={formatRFC7231(post.date)}>
+                      {daysAgo(post.date)}
+                    </S.PostCardDateDistance>
+                    <S.PostCardOccurrenceBadge>
+                      Occurrence {post.occurrence}
+                    </S.PostCardOccurrenceBadge>
+                  </S.PostCardMeta>
+                </S.PostCard>
+              </S.PostCardListItem>
+            ))}
+          </S.PostCardList>
+        </React.Fragment>
+      ))}
     </MainLayout>
   )
 }