diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-29 12:13:34 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-29 18:30:05 +0200 | 
| commit | 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch) | |
| tree | bfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/PostsList | |
| parent | 5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff) | |
chore: remove old pages, components, helpers and types
Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
Diffstat (limited to 'src/components/PostsList')
| -rw-r--r-- | src/components/PostsList/PostsList.module.scss | 51 | ||||
| -rw-r--r-- | src/components/PostsList/PostsList.tsx | 110 | 
2 files changed, 0 insertions, 161 deletions
| diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss deleted file mode 100644 index b4ffbd9..0000000 --- a/src/components/PostsList/PostsList.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; -@use "@styles/abstracts/placeholders"; - -.section { -  --column-3: 0; -  --grid-gap: 0; - -  composes: grid from "@styles/layout/_grid.scss"; -  align-items: first baseline; -} - -.year { -  grid-column: 2; -  margin: var(--spacing-md) 0 0; - -  @include mix.media("screen") { -    @include mix.dimensions("md") { -      grid-column: 1; -      justify-self: end; -      position: sticky; -      top: var(--spacing-xs); -      margin-right: var(--spacing-lg); -    } -  } -} - -.list { -  @extend %reset-ordered-list; - -  grid-column: 2; -  margin: 0 auto var(--spacing-md); -} - -li.item { -  border-bottom: fun.convert-px(1) solid var(--color-border); - -  &:not(:last-of-type) { -    margin: 0 0 var(--spacing-md) 0; -  } - -  &:first-of-type { -    margin-top: var(--spacing-sm); - -    @include mix.media("screen") { -      @include mix.dimensions("md") { -        margin-top: 0; -      } -    } -  } -} diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx deleted file mode 100644 index f998846..0000000 --- a/src/components/PostsList/PostsList.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import PostPreview from '@components/PostPreview/PostPreview'; -import { PostsList as PostsListData } from '@ts/types/blog'; -import { sortPostsByYear } from '@utils/helpers/sort'; -import { ForwardedRef, forwardRef, Fragment } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './PostsList.module.scss'; - -const PostsList = ( -  { -    data, -    showYears, -  }: { -    data: PostsListData[]; -    showYears: boolean; -  }, -  ref: ForwardedRef<HTMLSpanElement> -) => { -  const intl = useIntl(); -  const titleLevel = showYears ? 3 : 2; - -  const getPostsListByYear = () => { -    const posts = sortPostsByYear(data); -    const years = Object.keys(posts).reverse(); - -    const getLastPostId = () => { -      const oldestYear = Object.keys(posts)[0]; -      const lastPost = posts[oldestYear][posts[oldestYear].length - 1]; -      return lastPost.id; -    }; - -    return years.map((year) => { -      return ( -        <section key={year} className={styles.section}> -          {showYears && ( -            <h2 className={styles.year}> -              <span className="screen-reader-text"> -                {intl.formatMessage({ -                  defaultMessage: 'Published on', -                  description: 'PostsList: published on year label', -                  id: 'EvODgw', -                })}{' '} -              </span> -              {year} -            </h2> -          )} -          <ol className={styles.list}> -            {posts[year].map((post) => { -              const isLastPost = post.id === getLastPostId(); -              return ( -                <Fragment key={post.id}> -                  <li className={styles.item}> -                    <PostPreview post={post} titleLevel={titleLevel} /> -                  </li> -                  {isLastPost && ( -                    <li className={styles.item}> -                      <span ref={ref} tabIndex={-1} /> -                    </li> -                  )} -                </Fragment> -              ); -            })} -          </ol> -        </section> -      ); -    }); -  }; - -  const getPostsList = () => { -    return data.map((page) => { -      const getLastPostId = () => { -        const lastPost = page.posts[page.posts.length - 1]; -        return lastPost.id; -      }; - -      if (page.posts.length === 0) { -        return ( -          <p key="no-result"> -            {intl.formatMessage({ -              defaultMessage: 'No results found.', -              description: 'PostsList: no results', -              id: 'vK7Sxv', -            })} -          </p> -        ); -      } else { -        return ( -          <Fragment key={page.pageInfo.endCursor}> -            <ol className={styles.list}> -              {page.posts.map((post) => { -                const isLastPost = post.id === getLastPostId(); -                return ( -                  <Fragment key={post.id}> -                    <li key={post.id} className={styles.item}> -                      <PostPreview post={post} titleLevel={titleLevel} /> -                    </li> -                    {isLastPost && <span ref={ref} tabIndex={-1} />} -                  </Fragment> -                ); -              })} -            </ol> -          </Fragment> -        ); -      } -    }); -  }; - -  return <div>{showYears ? getPostsListByYear() : getPostsList()}</div>; -}; - -export default forwardRef(PostsList); | 
