62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { useApi, Assets } from "@/api";
|
|
import { saveFile, buildFilename } from "../WallpaperPage/utils";
|
|
import styles from "./styles.module.css";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import {
|
|
getCategoryIdByZodiacSign,
|
|
getZodiacSignByDate,
|
|
} from "@/services/zodiac-sign";
|
|
import { getRandomArbitrary } from "@/services/random-value";
|
|
|
|
function WallpapersZodiacSign(): JSX.Element {
|
|
const api = useApi();
|
|
const { i18n } = useTranslations();
|
|
const locale = i18n.language;
|
|
const [asset, setAsset] = useState<Assets.Asset>();
|
|
|
|
const birthdate = useSelector(selectors.selectBirthdate);
|
|
const zodiacSign = useMemo(() => getZodiacSignByDate(birthdate), [birthdate]);
|
|
|
|
const getZodiacWallpaper = async () => {
|
|
const { asset_categories } = await api.getAssetCategories({ locale });
|
|
const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
|
|
const { assets } = await api.getAssets({
|
|
category: String(categoryId || "1"),
|
|
});
|
|
const asset = assets[getRandomArbitrary(0, assets.length - 1)];
|
|
setAsset(asset);
|
|
};
|
|
|
|
useEffect(() => {
|
|
getZodiacWallpaper();
|
|
}, [api, locale, zodiacSign]);
|
|
|
|
const saveImage = () =>
|
|
asset &&
|
|
saveFile(
|
|
asset.url.replace("http://", "https://"),
|
|
buildFilename(zodiacSign)
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={styles["wallpaper"]}
|
|
style={{ backgroundImage: `url(${asset?.url})` }}
|
|
>
|
|
<div className={styles["buttons-container"]}>
|
|
<img src="/ButtonSave.svg" alt="Save image" onClick={saveImage} />
|
|
<img
|
|
src="/ButtonReload.svg"
|
|
alt="Get new image"
|
|
onClick={getZodiacWallpaper}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WallpapersZodiacSign;
|