Import React, { useState, useEffect } from 'react' import axios from

Question

Import React, { useState, useEffect } from 'react' import axios from

'axios'
import { BIG_TABLE_DATA_URL } from './API'
import styled from 'styled-components'
import { sortTypes } from './Sort'
import Tables from './Tables';
import Pagination from './Pagination';

const StyledSortBtn = styled.button `
background: black;
color: white;
width: 120px;
height: 40px;
border: none;
border-radius: 30px;
font-size: 20px`

const BigData = () => {
const [BigTableData, setBigTableData] = useState([]);
const [Loading, setLoading] = useState(false);
const [currentSort, setCurrentSort] = useState('default');
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(10);

// Get current posts
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = BigTableData.slice(indexOfFirstPost, indexOfLastPost);

// Change page
const paginate = pageNumber => setCurrentPage(pageNumber);

// get data
useEffect(() => {
const fetchData = async () => {

setLoading(true);

const result = await axios(BIG_TABLE_DATA_URL);

setBigTableData(result.data);

setLoading(false);
};
fetchData();
}, [BIG_TABLE_DATA_URL])

function onChangeSort() {

let nextSort;

if (currentSort === 'down') nextSort = 'up';
else if (currentSort === 'up') nextSort = 'default';
else if (currentSort === 'default') nextSort = 'down'

setCurrentSort(nextSort)
}

return (
<React.Fragment>
{Loading ? (
<p>Loading...</p>
): (
<table>
<thead>
<tr>
<th>Id</th>
<th>firstName</th>
<th>lastName</th>
<th>email</th>
<th>phone</th>
<StyledSortBtn
onClick={onChangeSort}>
{currentSort}
</StyledSortBtn>

</tr>
</thead>
<tbody>
{[...BigTableData].sort(sortTypes[currentSort].fn).map(table => (
<tr key={table.id}>
<td>{table.id}</td>
<td>{table.firstName}</td>
<td>{table.lastName}</td>
<td>{table.email}</td>
<td>{table.phone}</td>
</tr>
))}
</tbody>
</table>
)}
<Tables BigTableData={currentPosts} Loading={Loading} />
<Pagination
postsPerPage={postsPerPage}
totalPosts={BigTableData.length}
paginate={paginate}
/>
</React.Fragment>
)
}

export default BigData