69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
|
|
|
|
import * as Curry from "../../node_modules/bs-platform/lib/es6/curry.js";
|
|
import * as React from "react";
|
|
import * as Belt_Array from "../../node_modules/bs-platform/lib/es6/belt_Array.js";
|
|
|
|
function FetchedDogPictures(Props) {
|
|
var match = React.useState(function () {
|
|
return /* LoadingDogs */0;
|
|
});
|
|
var setState = match[1];
|
|
var state = match[0];
|
|
React.useEffect((function () {
|
|
fetch("https://dog.ceo/api/breeds/image/random/3").then(function (response) {
|
|
return response.json();
|
|
}).then(function (jsonResponse) {
|
|
Curry._1(setState, (function (_previousState) {
|
|
return /* LoadedDogs */{
|
|
_0: jsonResponse.message
|
|
};
|
|
}));
|
|
return Promise.resolve(undefined);
|
|
}).catch(function (_err) {
|
|
Curry._1(setState, (function (_previousState) {
|
|
return /* ErrorFetchingDogs */1;
|
|
}));
|
|
return Promise.resolve(undefined);
|
|
});
|
|
|
|
}), []);
|
|
var tmp;
|
|
if (typeof state === "number") {
|
|
tmp = state !== 0 ? "An error occurred!" : "Loading...";
|
|
} else {
|
|
var dogs = state._0;
|
|
tmp = Belt_Array.mapWithIndex(dogs, (function (i, dog) {
|
|
var imageStyle = {
|
|
backgroundImage: "url(" + dog + ")",
|
|
backgroundPosition: "center",
|
|
height: "120px",
|
|
marginRight: i === (dogs.length - 1 | 0) ? "0px" : "8px",
|
|
width: "100%",
|
|
backgroundSize: "cover",
|
|
borderRadius: "8px",
|
|
boxShadow: "0px 4px 16px rgb(200, 200, 200)"
|
|
};
|
|
return React.createElement("div", {
|
|
key: dog,
|
|
style: imageStyle
|
|
});
|
|
}));
|
|
}
|
|
return React.createElement("div", {
|
|
style: {
|
|
display: "flex",
|
|
height: "120px",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
}
|
|
}, tmp);
|
|
}
|
|
|
|
var make = FetchedDogPictures;
|
|
|
|
export {
|
|
make ,
|
|
|
|
}
|
|
/* react Not a pure module */
|