Creating +ve outcomes
Published
Edited
Nov 12, 2019
1 fork
1 star
options = {
return {
url: `https://cors-anywhere.herokuapp.com/${userAPI}`,
crossDomain: true,
withCredentials: false,
headers: {'x-requested-with': 'XMLHttpRequest'},
method: 'GET',
responseType: 'json',
timeout: 0,
createXHR: function () {
return new XMLHttpRequest();
}
}
}
viewof usersPerPage = slider({
min: 1,
max: 10,
step: 1,
value: 1,
title: "Generate users per page (max 10)",
description: "Request API page query"
})
viewof UserProfile = render(({ useSetter }) => {
const [imageUrl, setImageUrl] = useState(null)
const [name, setName] = useState({})
const [data, setData] = useState({})
const [seed, setSeed] = useState(0)
const results = useFetchObservableAPI({ seed, options })
useEffect(() => {
console.log('results', results)
}, [results])
return jsx`
<${Fragment}>
<div className="container">
<div className="header">
<h1>Random</h1>
<button className="fetch-btn" onClick=${() => setSeed(seed + 1)}>click #${seed}</button>
<span>${` click button to load new user`}</span>
</div>
<br />
<div className="container__row view">
<img src=${imageUrl || 'https://via.placeholder.com/150'} alt=${name} />
<${JsonView} json=${data} />
</div>
</div>
<//>
`
})
function useFetchObservableAPI({ id, options }) {
const [requestId, setRequestId] = useState(-1)
const [response, setResponse] = useState(null)
useEffect(() => {
let subscription
let disabled = false
if(!disabled && (id !== requestId)) {
const source$ = ajax(options).pipe(
delay(1000),
map(res => res),
take(1),
catchError(error => of({ error: true, message: `Error ${response.status}` }))
)
setRequestId(id)
subscription = source$.subscribe(res => console.log(res)) // setResponse(res.response))
}
return () => {
disabled = true
subscription && subscription.unsubscribe()
}
}, [id, options, requestId])
console.log(response)
return response
}
JsonView = component(({ json }) => jsx`
<div className="json">${JSON.stringify(json, null, 2)}</div>
`)
userAPI = `https://api.github.com/users`
source$ = ajax.getJSON(userAPI)
.pipe(
map(response => response),
catchError(error => of(error))
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
