I retrieve data from a paginated API. I would therefore like to set up a system that fetch the data of a new page as soon as the user scrolls 70% of his web page.
Do you have an elegant solution for doing this in React ?
Here is my component:
import React, { Component } from 'react';
import Card from './Card';
class Main extends Component {
constructor(props) {
super(props);
this.url = 'https://rickandmortyapi.com/api/character';
this.handleScroll = this.handleScroll.bind(this);
this.state = {
data: [],
canLoad: true,
};
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
this.fetchData();
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
};
handleScroll(event) {
// get scrollY value here and call fetchData() if scroll value > 70% of height page
};
async fetchData() {
try {
const res = await fetch(this.url);
const data = await res.json();
this.setState({ data: [...this.state.data, ...data.results] });
} catch(err) {
console.log('Fetch Error', err);
}
}
render() {
return (
<main className="cards--section">
{ this.state.data.map(Card) }
</main>
);
}
}
export default Main;
Thank you very much for reading me !
apply a scroll on a container and take the reference of the container
Use the logic below to fetch the data. This will fetch data 100 px before reaching the end
container.scrollTop + container.offsetHeight > container.scrollHeight - 100
import React, { Component } from 'react';
import Card from './Card';
class Main extends Component {
constructor(props) {
super(props);
this.url = 'https://rickandmortyapi.com/api/character';
this.handleScroll = this.handleScroll.bind(this);
this.state = {
data: [],
canLoad: true,
};
}
componentDidMount() {
this.fetchData();
}
componentWillUnmount() {
};
handleScroll(event) {
const container = event.currentTarget;
if(container.scrollTop + container.offsetHeight > container.scrollHeight - 100){
this.fetchData();
}
// get scrollY value here and call fetchData() if scroll value > 70% of height page
};
async fetchData() {
try {
const res = await fetch(this.url);
const data = await res.json();
this.setState({ data: [...this.state.data, ...data.results] });
} catch(err) {
console.log('Fetch Error', err);
}
}
render() {
return (
<main className="cards--section" onScroll={this.handleScroll}>
{ this.state.data.map(Card) }
</main>
);
}
}
export default Main;
Related
I am using axios to fetch weather information from openweathermap api in my react application. From the result of the api call (which is a json object), I can access some properties, for example data.base. But cant access data.coord.icon or data.weather[0].id etc.
data = [
coord: { lon: -0.1257,lat: 51.5085},
weather: [{ id: 721,
main: "Haze",
description: "haze",
icon: "50n"
}],
base: "stations"
]
I tried all the possible combinations. When trying to return data.coord, got the error Objects are not valid as a React child (found: object with keys {lon, lat}). If you meant to render a collection of children, use an array instead
But data.coord.lon gives lon of undefined
import React, { Component } from 'react';
import axios from 'axios';
export class WeatherInfo extends Component {
constructor(props) {
super(props)
this.state = {
isFetching: false,
data: [],
}
}
//function to fetch weather information
async getWeatherData(lat, lon) {
const weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_KEY}`
try {
this.setState({ ...this.state, isFetching: true });
const response = await axios.get(weatherApi);
this.setState({ data: response.data, isFetching: false });
console.log(response.data)
} catch (error) {
console.log(error);
this.setState({ isFetching: false })
}
}
//function to get access to users location and to call getWeatherData function
weatherInit = () => {
const success = (position) => {
this.getWeatherData(position.coords.latitude, position.coords.longitude);
}
const error = () => {
alert('Unable to retrieve location.');
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert('Your browser does not support location tracking, or permission is denied.');
}
}
componentDidMount() {
this.weatherInit();
}
render() {
const { data } = this.state;
return (
<div>
<p>{data.name}</p>
</div>
)
}
}
export default WeatherInfo
Here is the example of how you can display various data returned by the API.
import React, {
Component
} from 'react';
import axios from 'axios';
export class WeatherInfo extends Component {
constructor(props) {
super(props)
this.state = {
isFetching: false,
data: [],
}
}
//function to fetch weather information
async getWeatherData(lat, lon) {
const weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_KEY}`
try {
this.setState({ ...this.state,
isFetching: true
});
const response = await axios.get(weatherApi);
if(response.status===200){
//update state only if status is 200
this.setState({
data: response.data,
isFetching: false
});
console.log(response.data)
}
} catch (error) {
console.log(error);
this.setState({
isFetching: false
})
}
}
//function to get access to users location and to call getWeatherData function
weatherInit = () => {
const success = (position) => {
this.getWeatherData(position.coords.latitude, position.coords.longitude);
}
const error = () => {
alert('Unable to retrieve location.');
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert('Your browser does not support location tracking, or permission is denied.');
}
}
componentDidMount() {
this.weatherInit();
}
render() {
const {data} = this.state;
if (data) {
return (
<div >
//display coord
<p > {data.coord.lon} < /p>
<p > {data.coord.lat} < /p>
// display weather ids
{data.weather.map(item => {
return (
< p > { item.id } < /p>) })
}
< p > { data.name } < /p> < / div >
)
}
else {
return (<div>Data is loading or Not Found</div>)}
}
}
}
export default WeatherInfo
Necessarily you need to create an JSX element for each value you want to display.
Sorry, for formatting.
Since i am new on React JS,i tried to use map function but it gives me the following error:Uncaught TypeError: totalData.map is not a function.It seems everything is ok in the code,please provide me some feedback.Following below is my codes:
import React, { Component } from 'react';
import axios from 'axios';
export default class TotalData extends Component {
constructor() {
super();
this.state = {
totalData: [],
isfinalData: false
}
}
componentDidMount() {
axios.get('https://nepalcorona.info/api/v1/data/nepal')
.then(res => {
this.setState({
totalData: res.data,
isfinalData: true
})
})
}
render() {
console.log("final data>>", this.state);
const { totalData, isfinalData } = this.state;
let finalData = isfinalData
? totalData.map((item, deaths) => (
<div>
<p>{item.deaths}</p>
</div>
))
: <p>Isloading</p>
return (
<div>
{finalData}
</div>
)
}
}
what may be the issue on my code ?
Following below are my fetched data from API and error i got:
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
constructor() {
super()
this.state = {
totalData: [],
isfinalData: false
}
}
componentDidMount() {
axios.get('https://nepalcorona.info/api/v1/data/nepal').then((res) => {
this.setState({
totalData: res.data,
isfinalData: true
})
})
}
render() {
console.log('final data>>', this.state)
const { totalData, isfinalData } = this.state
let finalData = isfinalData ? (
<div>
<p>{totalData.deaths}</p>
</div>
) : (
<p>Isloading</p>
)
return <div>{finalData}</div>
}
}
you don't need to use map because you have only one object
I am beginner in react unit testing with enzyme/jest,
I want to test my logic inside componentWillMount method.
I want to test based on my context object whether redirect happens or not based on my business logic
class ActivateSF extends Component {
constructor(props) {
super(props);
this.className = 'ActivateSF.js'
this.state = {
messages: null,
}
}
render() {
return (
<SDPActivateInterstitialUI
context={this.props.context}
messages={this.state.messages}
/>
);
}
componentWillMount() {
let context = this.props.context
if(!context.userInfo){
return this.callIdentify(context)
}
let externalLP = ExternalLandingPageUtil.getExternalLandingPageUrl(context);
if (externalLP) {
window.location.replace(`${externalLP}`);
return;
}
if (context.userInfo)
{
console.log("user identified prior to activation flow")
if (UserInfoUtil.isSubsribedUser(context))
{
window.location = '/ac'
}
else
{
this.callPaymentProcess(context)
}
}
}
You can try beforeEach to mount and in your test you call .unmount and perform your test on it.
beforeEach(() => {
const myComponent= mount(<MyComponent myprop1={...} />);
});
describe('<MyComponent/>', () => {
it('actually unmounts', () => {
...
...
myComponent.unmount();
... Do unmount tests here
});
});
Example straight from the enzyme docs: https://airbnb.io/enzyme/docs/api/ShallowWrapper/unmount.html
import PropTypes from 'prop-types';
import sinon from 'sinon';
const spy = sinon.spy();
class Foo extends React.Component {
constructor(props) {
super(props);
this.componentWillUnmount = spy;
}
render() {
const { id } = this.props;
return (
<div className={id}>
{id}
</div>
);
}
}
Foo.propTypes = {
id: PropTypes.string.isRequired,
};
const wrapper = shallow(<Foo id="foo" />);
expect(spy).to.have.property('callCount', 0);
wrapper.unmount();
expect(spy).to.have.property('callCount', 1);
My goal is to get the autoPagination function to run when this.props.userSaves initially updates in state. In my program it starts out as an empty array, and on initialization 100 objects are stored in the array. The problem is that autoPagination is running before the objects get stored, and thus the while loop isn't running. I've fixed this using setTimeout but I don't really see that as a long-term solution. Any ideas?
The below code is nested in a class based component.
autoPagination = async token => {
while (this.props.userSaves.length > 0) {
const { userSaves } = this.props
const lastPage = userSaves[userSaves.length-1].data.name
const userSavesObject = await axios.get (`https://oauth.reddit.com/user/${this.props.username}/saved/.json?limit=100&after=${lastPage}`, {
headers: { 'Authorization': `bearer ${token}` }
})
const currentPageSaves = userSavesObject.data.data.children
this.props.storeUserHistory(currentPageSaves)
this.props.appendUserHistory(currentPageSaves)
}
}
Full component (since requested):
import axios from 'axios';
import React from 'react';
import { connect } from 'react-redux';
import { storeUserHistory, appendUserHistory, storeInitialData } from '../actions/index.js'
class ListSaved extends React.Component {
componentDidMount (props) {
const params = new URLSearchParams(this.props.location.hash);
const token = params.get('#access_token')
this.props.storeInitialData(token)
setTimeout(() => {
this.autoPagination(token);
}, 3000)
}
autoPagination = async token => {
while (this.props.userSaves.length > 0) {
const { userSaves } = this.props
const lastPage = userSaves[userSaves.length-1].data.name
const userSavesObject = await axios.get (`https://oauth.reddit.com/user/${this.props.username}/saved/.json?limit=100&after=${lastPage}`, {
headers: { 'Authorization': `bearer ${token}` }
})
const currentPageSaves = userSavesObject.data.data.children
this.props.storeUserHistory(currentPageSaves)
this.props.appendUserHistory(currentPageSaves)
}
}
renderPostTitles = () => {
return this.props.totalSaves.map((saved) => {
return (
<div key={saved.data.id}>
<div>{saved.data.title}</div>
</div>
)
})
}
render () {
return <div>{this.renderPostTitles()}</div>
}
}
const mapStateToProps = state => {
console.log(state)
return {
username: state.username,
userSaves: state.userHistory,
totalSaves: state.totalUserHistory
}
}
export default connect(mapStateToProps, { storeUserHistory, appendUserHistory, storeInitialData })(ListSaved);
Take a variable and set it true initially.. Run the function when you get data in your props and make the variable false so that it don't run again..
constructor (props)
{
super(props)
this.myvar = true
}
componentWillRecieveProps(nextProps)
{
if(this.myvar)
{
if(check if get your data)
{
// run your function
this.myvar= false
}
}
}
Corrected Component. Every-time the component updates the function is run. Component is updated a first time right after mounting
import axios from 'axios';
import React from 'react';
import { connect } from 'react-redux';
import { storeUserHistory, appendUserHistory, storeInitialData } from '../actions/index.js'
class ListSaved extends React.Component {
componentDidMount (props) {
const params = new URLSearchParams(this.props.location.hash);
const token = params.get('#access_token')
this.props.storeInitialData(token)
}
componentDidUpdate (props) {
this.autoPagination(token);
}
autoPagination = async token => {
while (this.props.userSaves.length > 0) {
const { userSaves } = this.props
const lastPage = userSaves[userSaves.length-1].data.name
const userSavesObject = await axios.get (`https://oauth.reddit.com/user/${this.props.username}/saved/.json?limit=100&after=${lastPage}`, {
headers: { 'Authorization': `bearer ${token}` }
})
const currentPageSaves = userSavesObject.data.data.children
this.props.storeUserHistory(currentPageSaves)
this.props.appendUserHistory(currentPageSaves)
}
}
renderPostTitles = () => {
return this.props.totalSaves.map((saved) => {
return (
<div key={saved.data.id}>
<div>{saved.data.title}</div>
</div>
)
})
}
render () {
return <div>{this.renderPostTitles()}</div>
}
}
const mapStateToProps = state => {
console.log(state)
return {
username: state.username,
userSaves: state.userHistory,
totalSaves: state.totalUserHistory
}
}
export default connect(mapStateToProps, { storeUserHistory, appendUserHistory, storeInitialData })(ListSaved);
Expected
When fetchServices() is called, api.getServices is called and in the promise this.setState is called to change fetchingServices to false. Which then hides the loading spinner animation.
Results
For some reason the App is stuck in an infinite loop:
In my ServicesContainer
constructor(props) {
super(props);
this.state = {
services: props.state.servicesReducer.services,
fetchingServices: true,
addingService: false
}
this.fetchServices = this.fetchServices.bind(this);
}
The return()
return (
<div className='services-container'>
<ul className='services-list'>
<li>
<AddServiceContainer />
</li>
{ this.state.fetchingServices
? <div className="icon-spin5 animate-spin"></div>
: null }
{ this.fetchServices() }
</ul>
</div>
)
Finally fetchServices()
fetchServices() {
console.log('fetchServices')
api.getServices(12345).then(res => {
console.log(' api.getServices res:', res)
this.setState({
fetchingServices: false
});
});
}
Full code
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { AddServiceContainer } from './AddServiceContainer'
import { ServiceCard } from '../../components'
import { getServices } from '../../actions'
import * as api from '../../services/api'
export class ServicesContainer extends Component {
constructor(props) {
super(props);
this.state = {
services: props.state.servicesReducer.services,
fetchingServices: true,
addingService: false
}
this.fetchServices = this.fetchServices.bind(this);
}
onFormSubmit(e, user) {
e.preventDefault();
this.props.searchUser(user)
}
fetchServices() {
console.log('fetchServices')
api.getServices(12345).then(res => {
console.log(' api.getServices res:', res)
this.setState({
fetchingServices: false
});
});
}
render() {
return (
<div className='services-container'>
<ul className='services-list'>
<li>
<AddServiceContainer />
</li>
{ this.state.fetchingServices
? <div className="icon-spin5 animate-spin"></div>
: null }
{ this.fetchServices() }
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
state
}
}
const mapDispatchToProps = (dispatch) => {
return {
getServices: (services) => { dispatch(getServices(services)) }
}
}
const ServicesListContainer = ServicesContainer;
export default connect(mapStateToProps, mapDispatchToProps)(ServicesListContainer)
Whenever you do setState, the render method is called again. Now problem here is that you are calling fetchServices() method inside the render method. Now whenever fetchServices() is called it calls an api. When the result of the api come, you are setting the state using setState, which causes rerender(i.e. your render method is called again), which calls the fetchServices() again. This is why it is going in infinite loop.
The solution: You should call your fetchServices() in componentWillMount/componentDidMount method like this:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { AddServiceContainer } from './AddServiceContainer'
import { ServiceCard } from '../../components'
import { getServices } from '../../actions'
import * as api from '../../services/api'
export class ServicesContainer extends Component {
constructor(props) {
super(props);
this.state = {
services: props.state.servicesReducer.services,
fetchingServices: true,
addingService: false
}
this.fetchServices = this.fetchServices.bind(this);
}
componentWillMount(){
this.fetchServices();
}
onFormSubmit(e, user) {
e.preventDefault();
this.props.searchUser(user)
}
fetchServices() {
console.log('fetchServices')
api.getServices(12345).then(res => {
console.log(' api.getServices res:', res)
this.setState({
fetchingServices: false
});
});
}
render() {
return (
<div className='services-container'>
<ul className='services-list'>
<li>
<AddServiceContainer />
</li>
{ this.state.fetchingServices
? <div className="icon-spin5 animate-spin"></div>
: null }
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
state
}
}
const mapDispatchToProps = (dispatch) => {
return {
getServices: (services) => { dispatch(getServices(services)) }
}
}
You should never fetch data in render function. You should do it in componentDidMount function.
render is called after each state or props change, and if you execute an api call in render function, it will trigger setState and by doing so - render again and again and again...
See link