fix: restore broken pages with PostCard and PostsGrid components

2023-12-23 18:53:47 +03:30 · 2023-12-23 18:53:47 +03:30 · 97cf618330
parent e8fad7451c
commit 97cf618330
7 changed files with 136 additions and 199 deletions
--- a/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
+++ b/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
@ -1,8 +1,9 @@
 import { LPE } from '@/types/lpe.types'
-import { Button, Typography } from '@acid-info/lsd-react'
+import { Button } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { useState } from 'react'
 import { lsdUtils } from '../../../utils/lsd.utils'
+import { PodcastSection } from '../../Podcasts/Podcast.Section'
 import { PostsGrid } from '../../PostsGrid'

 type props = {
@ -23,23 +24,24 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {

  return (
    <Container>
-      <Typography>More Episodes</Typography>
-      <PostsGrid
-        className="related-episodes"
-        displayPodcastShow={false}
-        posts={relatedEpisodes.slice(0, showIndex)}
-        pattern={[{ cols: 2, size: 'xsmall' }]}
-        breakpoints={[
-          {
-            breakpoint: 'xs',
-            pattern: [{ cols: 1, size: 'small' }],
-          },
-          {
-            breakpoint: 'sm',
-            pattern: [{ cols: 2, size: 'small' }],
-          },
-        ]}
-      />
+      <PodcastSection title="More posts">
+        <PostsGrid
+          displayPodcastShow={false}
+          posts={relatedEpisodes.slice(0, showIndex)}
+          pattern={[{ cols: 2, size: 'small' }]}
+          breakpoints={[
+            {
+              breakpoint: 'xs',
+              pattern: [{ cols: 1, size: 'small' }],
+            },
+            {
+              breakpoint: 'sm',
+              pattern: [{ cols: 2, size: 'small' }],
+            },
+          ]}
+        />
+      </PodcastSection>
+
      {relatedEpisodes?.length > 4 && (
        <ShowButton onClick={toggleShowMore}>
          {showMore ? 'Show less' : 'Show more'}
@ -50,34 +52,22 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
 }

 const Container = styled.div`
-  margin-top: 72px;
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-  padding-block: 16px;
  display: flex;
  flex-direction: column;
+  margin-top: var(--lsd-spacing-64);

-  .related-episodes {
-    .post-card-wrapper {
-      padding-top: 24px;
-      padding-bottom: 8px;
-    }
-  }
-
-  ${(props) => lsdUtils.breakpoint(props.theme, 'sm', 'up')} {
-    .related-episodes {
-      padding-top: 24px;
-
-      .post-card-wrapper {
-        padding-top: 0;
-        padding-bottom: 24px;
-      }
-    }
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
+    margin-top: var(--lsd-spacing-32);
  }
 `

 const ShowButton = styled(Button)`
  height: 40px;
-  margin-top: 24px;
+  margin-top: 48px;
+
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
+    margin-top: var(--lsd-spacing-32);
+  }
 `

 export default RelatedEpisodes
--- a/src/components/Podcasts/Episodes.List.tsx
+++ b/src/components/Podcasts/Episodes.List.tsx
@ -1,45 +0,0 @@
-import styled from '@emotion/styled'
-import { LPE } from '../../types/lpe.types'
-import { PostsGrid, PostsGridProps } from '../PostsGrid'
-
-interface Props {}
-
-export type EpisodesListProps = Partial<
-  React.ComponentProps<typeof EpisodeListContainer>
-> & {
-  header?: React.ReactNode
-  episodes: LPE.Podcast.Document[]
-  shows?: LPE.Podcast.Show[]
-  displayShow?: boolean
-} & Pick<PostsGridProps, 'pattern' | 'breakpoints' | 'bordered'>
-
-export default function EpisodesList({
-  shows = [],
-  episodes = [],
-  pattern,
-  breakpoints,
-  bordered,
-  header,
-  displayShow = true,
-  ...props
-}: EpisodesListProps) {
-  return (
-    <EpisodeListContainer {...props}>
-      {header}
-      <PostsGrid
-        shows={shows}
-        posts={episodes}
-        bordered={bordered}
-        pattern={pattern}
-        breakpoints={breakpoints}
-        displayPodcastShow={displayShow}
-      />
-    </EpisodeListContainer>
-  )
-}
-
-const EpisodeListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: 16px;
-`
--- a/src/components/Podcasts/Podcast.Section.tsx
+++ b/src/components/Podcasts/Podcast.Section.tsx
@ -1,14 +1,19 @@
 import styled from '@emotion/styled'
-import React from 'react'
+import { Section, SectionProps } from '../Section/Section'

-interface Props {
-  children: React.ReactNode
-}
+export type PodcastSectionProps = SectionProps

-export default function PodcastSection({ children, ...props }: Props) {
-  return <Section {...props}>{children}</Section>
-}
+export const PodcastSection: React.FC<PodcastSectionProps> = ({
+  children,
+  ...props
+}) => (
+  <Section {...props}>
+    <Container>{children}</Container>
+  </Section>
+)

-const Section = styled.div`
-  border-top: 1px solid rgb(var(--lsd-border-primary));
+const Container = styled.div`
+  & > *:not(:first-child) {
+    margin-top: var(--lsd-spacing-16);
+  }
 `
--- a/src/components/Section/Section.tsx
+++ b/src/components/Section/Section.tsx
@ -1,40 +1,58 @@
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import React, { PropsWithChildren } from 'react'
+import React from 'react'
+import { lsdUtils } from '../../utils/lsd.utils'

-type Props = PropsWithChildren<{
-  title: string
+export type SectionProps = Partial<
+  React.ComponentProps<typeof SectionContainer>
+> & {
+  title?: React.ReactNode
  subtitle?: string | React.ReactNode
-}>
+  bordered?: boolean
+}

-export const Section = ({ title, subtitle, children, ...props }: Props) => {
+export const Section = ({
+  title,
+  subtitle,
+  bordered = true,
+  children,
+  ...props
+}: SectionProps) => {
  return (
-    <SectionContainer {...props}>
-      <Container>
-        <Typography genericFontFamily="sans-serif" variant="body2">
-          {title}
-        </Typography>
-        {subtitle && (
-          <>
-            <Typography variant="body2">•</Typography>
-            {typeof subtitle === 'string' ? (
-              <Typography genericFontFamily="sans-serif" variant="body2">
+    <SectionContainer bordered={bordered} {...props}>
+      {(title || subtitle) && (
+        <Container>
+          <Typography component="h2" variant="subtitle2">
+            {title}
+          </Typography>
+          {subtitle && (
+            <>
+              <Typography variant="body2">•</Typography>
+              {typeof subtitle === 'string' ? (
+                <Typography variant="body2">subtitle</Typography>
+              ) : (
                subtitle
-              </Typography>
-            ) : (
-              subtitle
-            )}
-          </>
-        )}
-      </Container>
+              )}
+            </>
+          )}
+        </Container>
+      )}
      {children}
    </SectionContainer>
  )
 }

-const SectionContainer = styled.section`
+const SectionContainer = styled.section<{
+  bordered?: boolean
+}>`
  width: 100%;
  box-sizing: border-box;
+  border-top: ${(props) =>
+    props.bordered ? '1px solid rgb(var(--lsd-border-primary))' : 'none'};
+
+  ${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} {
+    margin-top: var(--lsd-spacing-16);
+  }
 `

 const Container = styled.div`
@ -42,4 +60,14 @@ const Container = styled.div`
  align-items: center;
  gap: 8px;
  width: 100%;
+
+  padding: var(--lsd-spacing-24) 0;
+
+  ${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} {
+    padding: var(--lsd-spacing-16) 0;
+
+    & > h2 {
+      ${lsdUtils.typography('subtitle3')}
+    }
+  }
 `
--- a/src/containers/HomePage/HomePage.tsx
+++ b/src/containers/HomePage/HomePage.tsx
@ -1,8 +1,8 @@
-import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import React from 'react'
 import { Hero } from '../../components/Hero'
 import { PostsGrid } from '../../components/PostsGrid'
+import { Section } from '../../components/Section/Section'
 import { uiConfigs } from '../../configs/ui.configs'
 import { useRecentPosts } from '../../queries/useRecentPosts.query'
 import { ApiPaginatedPayload } from '../../types/data.types'
@ -49,10 +49,7 @@ export const HomePage: React.FC<HomePageProps> = ({
            },
          ]}
        />
-        <Section>
-          <Typography component="h2" variant="subtitle2">
-            Latest posts
-          </Typography>
+        <Section title="Latest posts">
          <PostsGrid
            pattern={[{ cols: 4, size: 'small' }]}
            breakpoints={[
@ -139,23 +136,6 @@ const Root = styled('div')`
  }
 `

-const Section = styled.div`
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-
-  & > h2 {
-    padding: var(--lsd-spacing-24) 0;
-  }
-
-  ${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} {
-    margin-top: var(--lsd-spacing-16);
-
-    & > h2 {
-      padding: var(--lsd-spacing-16) 0;
-      ${lsdUtils.typography('subtitle3')}
-    }
-  }
-`
-
 const HeroContainer = styled.div`
  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
    & > div:last-of-type {
--- a/src/containers/PodcastShowContainer.tsx
+++ b/src/containers/PodcastShowContainer.tsx
@ -1,9 +1,9 @@
 import { Grid, GridItem } from '@/components/Grid/Grid'
-import EpisodesList from '@/components/Podcasts/Episodes.List'
-import PodcastSection from '@/components/Podcasts/Podcast.Section'
 import PodcastShowCard from '@/components/Podcasts/PodcastShowCard'
-import { Button, Typography } from '@acid-info/lsd-react'
+import { Button } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
+import { PodcastSection } from '../components/Podcasts/Podcast.Section'
+import { PostsGrid } from '../components/PostsGrid'
 import { useRecentEpisodes } from '../queries/useRecentEpisodes.query'
 import { ApiPaginatedPayload } from '../types/data.types'
 import { LPE } from '../types/lpe.types'
@ -38,13 +38,10 @@ const PodcastShowContainer = (props: Props) => {
      <PodcastsGrid>
        <PodcastsBodyContainer>
          <CustomPodcastShowCard show={show} />
-          <PodcastSection>
-            <EpisodesList
+          <PodcastSection title="Latest episodes">
+            <PostsGrid
              shows={[show]}
-              displayShow={false}
-              episodes={highlightedPosts}
-              header={<Typography variant="body2">All episodes</Typography>}
-              bordered="except-first-row"
+              posts={highlightedPosts}
              pattern={[
                {
                  cols: 2,
@ -58,39 +55,32 @@ const PodcastShowContainer = (props: Props) => {
                    {
                      cols: 1,
                      size: 'small',
-                      rowBorder: 'except-first-row',
                    },
                  ],
                },
              ]}
            />
+            <PostsGrid
+              shows={[show]}
+              posts={latestPosts}
+              pattern={[
+                {
+                  cols: 4,
+                  size: 'small',
+                },
+              ]}
+              breakpoints={[
+                {
+                  breakpoint: 'xs',
+                  pattern: [{ cols: 1, size: 'small' }],
+                },
+                {
+                  breakpoint: 'sm',
+                  pattern: [{ cols: 4, size: 'small' }],
+                },
+              ]}
+            />
          </PodcastSection>
-          <EpisodesList
-            shows={[show]}
-            displayShow={false}
-            episodes={latestPosts}
-            bordered={highlightedPosts.length > 0 ? true : 'except-first-row'}
-            pattern={[
-              {
-                cols: 4,
-                size: 'small',
-              },
-            ]}
-            breakpoints={[
-              {
-                breakpoint: 'xs',
-                pattern: [{ cols: 1, size: 'small' }],
-              },
-              {
-                breakpoint: 'sm',
-                pattern: [{ cols: 4, size: 'xsmall' }],
-              },
-              {
-                breakpoint: 'md',
-                pattern: [{ cols: 4, size: 'xsmall' }],
-              },
-            ]}
-          />
        </PodcastsBodyContainer>
      </PodcastsGrid>
      {query.hasNextPage && (
--- a/src/containers/PodcastsContainer.tsx
+++ b/src/containers/PodcastsContainer.tsx
@ -1,8 +1,8 @@
 import { Grid, GridItem } from '@/components/Grid/Grid'
-import EpisodesList from '@/components/Podcasts/Episodes.List'
-import PodcastSection from '@/components/Podcasts/Podcast.Section'
 import PodcastsLists from '@/components/Podcasts/Podcasts.Lists'
 import styled from '@emotion/styled'
+import { PodcastSection } from '../components/Podcasts/Podcast.Section'
+import { PostsGrid } from '../components/PostsGrid'
 import { LPE } from '../types/lpe.types'
 import { lsdUtils } from '../utils/lsd.utils'

@ -35,19 +35,15 @@ const PodcastsContainer = (props: Props) => {
        <PodcastsLists shows={shows} />

        <Episodes>
-          <PodcastSection>
-            <EpisodesList
-              episodes={highlightPosts}
+          <PodcastSection title="Latest episodes">
+            <PostsGrid
+              posts={highlightPosts}
              shows={shows}
-              bordered="except-first-row"
-              header={<EpisodeListHeader>Latest Episodes</EpisodeListHeader>}
              pattern={[{ cols: 2, size: 'medium' }]}
              breakpoints={[
                {
                  breakpoint: 'xs',
-                  pattern: [
-                    { cols: 1, size: 'small', rowBorder: 'except-first-row' },
-                  ],
+                  pattern: [{ cols: 1, size: 'small' }],
                },
                {
                  breakpoint: 'sm',
@ -55,23 +51,19 @@ const PodcastsContainer = (props: Props) => {
                },
              ]}
            />
-            <EpisodesList
-              bordered
+            <PostsGrid
              shows={shows}
-              episodes={latestPosts.slice(0, 4)}
+              bordered={false}
+              posts={latestPosts.slice(0, 4)}
              pattern={[{ cols: 4, size: 'small' }]}
              breakpoints={[
                {
                  breakpoint: 'xs',
-                  pattern: [{ cols: 1, size: 'small', rowBorder: false }],
+                  pattern: [{ cols: 1, size: 'small' }],
                },
                {
                  breakpoint: 'sm',
-                  pattern: [{ cols: 4, size: 'xsmall' }],
-                },
-                {
-                  breakpoint: 'md',
-                  pattern: [{ cols: 4, size: 'xsmall' }],
+                  pattern: [{ cols: 2, size: 'small' }],
                },
              ]}
            />
@ -94,14 +86,11 @@ const PodcastsGrid = styled(Grid)`
 `

 const Episodes = styled.div`
-  margin-top: 64px;
-`
+  margin-top: var(--lsd-spacing-64);

-const EpisodeListHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
+    margin-top: 56px;
+  }
 `

 export default PodcastsContainer