diff options
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); |
