208 lines
4.3 KiB
JavaScript
208 lines
4.3 KiB
JavaScript
import { useSelectedCountries } from "./useCountries";
|
|
import "./logger";
|
|
import { createElement, h, render } from "preact";
|
|
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
|
|
import { bookUrl } from "./bookUrl";
|
|
import { initCache } from "./cache";
|
|
import { usePrices } from "./usePrices";
|
|
|
|
/*
|
|
TODO:
|
|
- more durable source for rates
|
|
- readme how to use and debug
|
|
*/
|
|
|
|
const createPricesContainer = () => {
|
|
const pricingActionContainers = document.querySelectorAll(".pricing-details");
|
|
|
|
l("all pricing containers", pricingActionContainers);
|
|
|
|
let visible;
|
|
for (const node of pricingActionContainers) {
|
|
if (node.checkVisibility()) {
|
|
l("found visible pricing container", node);
|
|
visible = node;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return visible.parentNode.insertBefore(
|
|
document.createElement("div"),
|
|
visible,
|
|
);
|
|
};
|
|
|
|
const isInLibrary = () => document.querySelectorAll(".read-now").length;
|
|
|
|
const formatPrice = (countryPrice, convertedPrice, isSelected) => {
|
|
if (!isSelected) return "SKIP";
|
|
|
|
if (countryPrice == undefined) {
|
|
return "NOT LOADED";
|
|
}
|
|
|
|
if (convertedPrice) {
|
|
return `${countryPrice} => ${convertedPrice?.formatted}`;
|
|
}
|
|
|
|
return "NOT FOUND";
|
|
};
|
|
|
|
const Price = ({ price, toggleCountry, isSelected }) => {
|
|
const { convertedPrice, countryCode, countryPrice } = price;
|
|
const [isHovered, setHover] = useState(false);
|
|
|
|
const hover = useCallback(() => setHover(true));
|
|
const leave = useCallback(() => setHover(false));
|
|
|
|
const style = {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
backgroundColor: isHovered ? "#d7d7d7" : "",
|
|
padding: "0 10px",
|
|
};
|
|
|
|
const link = h(
|
|
"a",
|
|
{
|
|
style: { textDecoration: "underline" },
|
|
href: bookUrl(countryCode),
|
|
target: "_blank",
|
|
},
|
|
countryCode.toUpperCase(),
|
|
);
|
|
|
|
const checkbox = h("input", {
|
|
type: "checkbox",
|
|
checked: isSelected,
|
|
onChange: () => toggleCountry(),
|
|
});
|
|
|
|
const priceLabel = h(
|
|
"p",
|
|
{ style: { fontWeight: "bold" } },
|
|
formatPrice(countryPrice, convertedPrice, isSelected),
|
|
);
|
|
|
|
return h(
|
|
"label",
|
|
{ style, onMouseEnter: hover, onMouseLeave: leave },
|
|
h("div", { style: { display: "flex" } }, checkbox, link),
|
|
priceLabel,
|
|
);
|
|
};
|
|
|
|
const InLibrary = () =>
|
|
h(
|
|
"div",
|
|
{
|
|
style: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
border: "1px solid black",
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
h("h2", null, "Already in Library!"),
|
|
);
|
|
|
|
const Percent = (percent) => {
|
|
const spinner = useRef();
|
|
|
|
useEffect(() => {
|
|
spinner.current.animate(
|
|
[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
|
|
{ iterations: Infinity, duration: 1000 },
|
|
);
|
|
}, []);
|
|
|
|
const style = { padding: "10px 10px 0 10px", textAlign: "center" };
|
|
|
|
if (percent == 100) return h("h2", { style }, "all prices are loaded!");
|
|
|
|
return h(
|
|
"h2",
|
|
{ style },
|
|
`${percent}%`,
|
|
h("span", {
|
|
ref: spinner,
|
|
style: {
|
|
width: "16px",
|
|
height: "16px",
|
|
borderRadius: "50%",
|
|
display: "inline-block",
|
|
borderTop: "3px solid black",
|
|
borderRight: "3px solid transparent",
|
|
boxSizing: "border-box",
|
|
marginLeft: "15px",
|
|
},
|
|
}),
|
|
);
|
|
};
|
|
|
|
const Header = (state, percentChecked) => {
|
|
if (state === "loading") return Percent(percentChecked);
|
|
|
|
if (state === "done")
|
|
return h(
|
|
"h2",
|
|
{ style: { textAlign: "center" } },
|
|
"All prices are loaded!",
|
|
);
|
|
|
|
return h(
|
|
"h2",
|
|
{ style: { textAlign: "center" } },
|
|
'Select countries or leave as is and press "load"',
|
|
);
|
|
};
|
|
|
|
const Load = (state, load) => {
|
|
return h(
|
|
"button",
|
|
{
|
|
disabled: state === "loading",
|
|
onClick: load,
|
|
type: "button",
|
|
style: { backgroundColor: "#91ff91" },
|
|
},
|
|
state === "loading" ? "Loading..." : "Load prices",
|
|
);
|
|
};
|
|
|
|
const App = () => {
|
|
const { isSelected, toggleCountry, selected } = useSelectedCountries();
|
|
const { prices, percentChecked, state, load } = usePrices(selected);
|
|
|
|
l(selected);
|
|
const style = {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
border: "1px solid black",
|
|
};
|
|
|
|
if (isInLibrary()) {
|
|
return InLibrary();
|
|
}
|
|
|
|
return h(
|
|
"div",
|
|
{ style },
|
|
Header(state, percentChecked),
|
|
...prices.map((price) =>
|
|
h(Price, {
|
|
price,
|
|
toggleCountry: () => toggleCountry(price.countryCode),
|
|
isSelected: isSelected(price.countryCode),
|
|
isLoading: state,
|
|
}),
|
|
),
|
|
Load(state, load),
|
|
);
|
|
};
|
|
|
|
l("starting...");
|
|
initCache();
|
|
render(createElement(App), createPricesContainer());
|