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/PostsList.tsx | |
| 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/PostsList.tsx')
| -rw-r--r-- | src/components/PostsList/PostsList.tsx | 110 |
1 files changed, 0 insertions, 110 deletions
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); |
