Created
March 23, 2021 11:44
-
-
Save somaria/ab1b0bffaf0c01459ce0be982bf86cd3 to your computer and use it in GitHub Desktop.
paginate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useCollection, useDocumentOnce } from 'react-firebase-hooks/firestore' | |
| import firebase from '../../firebase' | |
| import { useEffect, useState } from 'react' | |
| import ReactPaginate from 'react-paginate' | |
| const ShowTWVideoList = ({ uid }) => { | |
| const [allPosts, loading, error] = useCollection( | |
| firebase | |
| .firestore() | |
| .collection('twitchVideos') | |
| .where('uid', '==', uid) | |
| .orderBy('createdAt', 'desc'), | |
| { | |
| snapshotListenOptions: { includeMetadataChanges: true }, | |
| } | |
| ) | |
| const myPosts = allPosts && allPosts.docs | |
| const posts = myPosts && myPosts.slice(0, 1000) | |
| const [pageNumber, setPageNumber] = useState(0) | |
| const postsPerPage = 5 | |
| const pagesVisited = pageNumber * postsPerPage | |
| const pageCount = Math.ceil(posts && posts.length / postsPerPage) | |
| const changePage = ({ selected }) => { | |
| setPageNumber(selected) | |
| } | |
| const handleDelete = (pid) => { | |
| console.log('deleting ....') | |
| console.log(pid) | |
| firebase.firestore().collection('twitchVideos').doc(pid).delete(), | |
| { | |
| snapshotListenOptions: { includeMetadataChanges: true }, | |
| } | |
| } | |
| const displayPosts = | |
| posts && | |
| posts.slice(pagesVisited, pagesVisited + postsPerPage).map((post) => ( | |
| <tbody key={post.id} className='border'> | |
| <tr> | |
| <td className='border p-1 sm:px-2 sm:py-1 align-top mt-2 w-20'> | |
| <img | |
| src={post.data().twVImageUrl} | |
| alt='' | |
| className='w-20 h-10 sm:w-16 sm:h-10 object-cover border rounded-lg' | |
| /> | |
| </td> | |
| <td className='text-sm sm:text-lg sm:p-2 p-1'> | |
| {post.data().twVTitle.substring(0, 60) + | |
| (post.data().twVTitle.length > 60 ? '...' : '')} | |
| </td> | |
| <td className='border px-1 sm:px-4 sm:py-2 align-top py-2'> | |
| <button | |
| onDoubleClick={() => { | |
| handleDelete(post.data().pid) | |
| }} | |
| className='border rounded-lg px-4 py-1 bg-blue-100' | |
| > | |
| Delete | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| )) | |
| return ( | |
| <div> | |
| <div className='sm:my-8'> | |
| {error && <strong>Error: {JSON.stringify(error)}</strong>} | |
| {loading && <span>Loading...</span>} | |
| {posts && <table className='table-auto'>{displayPosts}</table>} | |
| {posts && ( | |
| <ReactPaginate | |
| previousLabel={'Previous'} | |
| nextLabel={'Next'} | |
| pageCount={pageCount} | |
| onPageChange={changePage} | |
| marginPagesDisplayed={1} | |
| pageRangeDisplayed={2} | |
| containerClassName={ | |
| 'text-xl flex sm:mx-4 mt-5 mb-24 cursor-pointer' | |
| } | |
| previousLinkClassName={ | |
| 'mr-2 outline-none bg-gray-200 p-1 rounded-md' | |
| } | |
| pageLinkClassName={'mx-4 outline-none'} | |
| nextLinkClassName={'ml-2 outline-none bg-gray-200 p-1 rounded-md'} | |
| activeClassName={'bg-blue-300 rounded-md'} | |
| breakLabel={'...'} | |
| /> | |
| )} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| export default ShowTWVideoList |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment