I need to update a parameter that currently reads page=1, it should instead be set as page=${setPage}
Then, when the button is pressed, it triggers a change in the table data.
This is how my code looks in [table].js:
How can I achieve this? Should I use useEffect for fetching?
What would be the best approach to enable pagination by changing the page value in the table?
import React, { useState, useEffect } from 'react'
import {
Heading,
Box,
Text,
Button,
Flex,
Input,
Select,
InputGroup,
InputLeftElement, HStack, Center
} from '@chakra-ui/react'
import { useRouter } from 'next/router'
import TablesData from '../../components/tables/Tablesdata'
const UnderWriting = (props) => {
const { data } = props
console.log('data', data)
const [dataToShow, setDataToShow] = useState(data)
const [title, setTitle] = useState('')
const [pageIndex, setPageIndex] = useState(1)
const router = useRouter()
const { tabla } = router.query
useEffect(() => {
switch (tabla) {
case 'primera': {
setTitle('First UW Review')
break
}
case 'segunda': {
setTitle('Second UW Review')
break
}
case 'seguimiento': {
setTitle('UW Follow-up')
break
}
case 'cartera': {
setTitle('UW Portfolio')
break
}
}
setDataToShow(data)
}, [tabla, data])
return (
<Box>
<Box>
<Box color='#96A0AA' border='1px solid #DFE6EE' boxShadow='lg' overflow='hidden' rounded='lg'>
<TablesData data={dataToShow} />
</Box>
<Center>
<HStack mt={5} mb={5} >
<Button >
Previous
</Button>
<Button >
Next
</Button>
</HStack>
</Center>
</Box>
</Box>
);
}
export async function getServerSideProps(context) {
const { params, res } = context
const { tabla } = params
// Fetch data from external API
const apiResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}admin/users/signup-status?page=1&page_size=25&`)
if (apiResponse.ok) {
let responseData = await apiResponse.json()
console.log(responseData)
// Data mapping and manipulation logic goes here...
// Adding pagination support
const totalPages = Math.ceil(responseData.count / 25)
const pages = []
for (let i = 1; i <= totalPages; i++) {
pages.push(i)
}
// Pass data and pagination info as props to the component
return {
props: {
data,
pages
}
}
}
if (res) {
res.writeHead(301, { location: '/404' }).end()
}
}
export default UnderWriting;