axios example

rssFetch.js

// @ts-nocheck
import { useState, useEffect } from 'react'

import axios from 'axios'

export default function Forbes() {
	const [forbes, setForbes] = useState(null)
	const [realtor, setRealtor] = useState(null)
	const [zillow, setZillow] = useState(null)
	const [loading, setLoading] = useState(true)
	const [error, setError] = useState(null)

	useEffect(() => {
		const forbes = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.forbes.com%2Freal-estate%2Ffeed&api_key=${process.env.REACT_APP_RSS_API_KEY}&order_by=pubDate&order_dir=desc&count=2`

		const getForbes = async () => {
			try {
				const response = await axios.get(forbes)
				console.log(response)
				setForbes(response.data)
				setError(null)
			} catch (err) {
				setError(err.message)
				setForbes(null)
			} finally {
				setLoading(false)
			}
		}
		getForbes()
	}, [])

	useEffect(() => {
		const realtordotcom = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.realtor.com%2Fnews%2Ffeed&api_key=${process.env.REACT_APP_RSS_API_KEY}&order_by=pubDate&order_dir=desc&count=2`

		const getRealtorDotCom = async () => {
			try {
				const response = await axios.get(realtordotcom)
				console.log(response)
				setRealtor(response.data)
				setError(null)
			} catch (err) {
				setError(err.message)
				setRealtor(null)
			} finally {
				setLoading(false)
			}
		}
		getRealtorDotCom()
	}, [])

	useEffect(() => {
		const zillow = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.zillow.com%2Fblog%2Ffeed&api_key=${process.env.REACT_APP_RSS_API_KEY}&order_by=pubDate&order_dir=desc&count=2`

		const getZillow = async () => {
			try {
				const response = await axios.get(zillow)
				console.log(response)
				setZillow(response.data)
				setError(null)
			} catch (err) {
				setError(err.message)
				setZillow(null)
			} finally {
				setLoading(false)
			}
		}
		getZillow()
	}, [])

	return (
		<div>
			<h1>Forbes</h1>
			{loading && <div>A moment please...</div>}
			{error && <div>{`There is a problem fetching the post data - ${error}`}</div>}
			<ul>
				{forbes?.items.map(({ guid, title }) => (
					<li key={guid}>
						<h3>{title}</h3>
					</li>
				))}
			</ul>
			<h1>Realtor.com</h1>
			{loading && <div>A moment please...</div>}
			{error && <div>{`There is a problem fetching the post data - ${error}`}</div>}
			<ul>
				{realtor?.items.map(({ guid, title }) => (
					<li key={guid}>
						<h3>{title}</h3>
					</li>
				))}
			</ul>
			<h1>Zillow</h1>
			{loading && <div>A moment please...</div>}
			{error && <div>{`There is a problem fetching the post data - ${error}`}</div>}
			<ul>
				{zillow?.items.map(({ guid, title }) => (
					<li key={guid}>
						<h3>{title}</h3>
					</li>
				))}
			</ul>
		</div>
	)
}