()
| 2 | import { usePosts } from '../hooks/usePosts' |
| 3 | |
| 4 | export const PostList = () => { |
| 5 | const [postCount, setPostCount] = useState(10) |
| 6 | const { data, isPending, isFetching } = usePosts(postCount) |
| 7 | |
| 8 | if (isPending) return <div>Loading</div> |
| 9 | |
| 10 | return ( |
| 11 | <section> |
| 12 | <ul> |
| 13 | {data?.map((post, index) => ( |
| 14 | <li key={post.id}> |
| 15 | {index + 1}. {post.title} |
| 16 | </li> |
| 17 | ))} |
| 18 | </ul> |
| 19 | {postCount <= 90 && ( |
| 20 | <button |
| 21 | onClick={() => setPostCount(postCount + 10)} |
| 22 | disabled={isFetching} |
| 23 | > |
| 24 | {isFetching ? 'Loading...' : 'Show More'} |
| 25 | </button> |
| 26 | )} |
| 27 | <style jsx>{` |
| 28 | section { |
| 29 | padding-bottom: 20px; |
| 30 | } |
| 31 | li { |
| 32 | display: block; |
| 33 | margin-bottom: 10px; |
| 34 | } |
| 35 | div { |
| 36 | align-items: center; |
| 37 | display: flex; |
| 38 | } |
| 39 | a { |
| 40 | font-size: 14px; |
| 41 | margin-right: 10px; |
| 42 | text-decoration: none; |
| 43 | padding-bottom: 0; |
| 44 | border: 0; |
| 45 | } |
| 46 | span { |
| 47 | font-size: 14px; |
| 48 | margin-right: 5px; |
| 49 | } |
| 50 | ul { |
| 51 | margin: 0; |
| 52 | padding: 0; |
| 53 | } |
| 54 | button:before { |
| 55 | align-self: center; |
| 56 | border-style: solid; |
| 57 | border-width: 6px 4px 0 4px; |
| 58 | border-color: #ffffff transparent transparent transparent; |
| 59 | content: ''; |
| 60 | height: 0; |
| 61 | margin-right: 5px; |
nothing calls this directly
no test coverage detected