68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import styles from "./styles.module.css";
|
|
import {
|
|
getCategoryIdByZodiacSign,
|
|
getZodiacSignByDate,
|
|
} from "@/services/zodiac-sign";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useApi } from "@/api";
|
|
import { getRandomArbitrary } from "@/services/random-value";
|
|
|
|
interface INameHoroscopeSliderProps {
|
|
data: INameHoroscope;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export interface INameHoroscope {
|
|
period: string;
|
|
name: string;
|
|
}
|
|
|
|
function NameHoroscopeSlider({
|
|
data,
|
|
onClick,
|
|
}: INameHoroscopeSliderProps): JSX.Element {
|
|
const api = useApi();
|
|
const { i18n } = useTranslation();
|
|
const locale = i18n.language;
|
|
const birthDate = useSelector(selectors.selectBirthdate);
|
|
const zodiacSign = useMemo(() => getZodiacSignByDate(birthDate), [birthDate]);
|
|
const [backgroundUrl, setBackgroundUrl] = useState("");
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const { asset_categories } = await api.getAssetCategories({ locale });
|
|
const categoryId = getCategoryIdByZodiacSign(
|
|
zodiacSign,
|
|
asset_categories
|
|
);
|
|
const assets = (
|
|
await api.getAssets({ category: String(categoryId || "1") })
|
|
).assets;
|
|
const randomAsset = assets[getRandomArbitrary(0, assets.length - 1)];
|
|
setBackgroundUrl(randomAsset.url);
|
|
} catch (error) {
|
|
console.error("Error: ", error);
|
|
}
|
|
})();
|
|
}, [api, locale, zodiacSign]);
|
|
|
|
return (
|
|
<div
|
|
style={{ backgroundImage: `url(${backgroundUrl})` }}
|
|
className={styles.container}
|
|
onClick={onClick}
|
|
>
|
|
<p className={styles.period}>{data.period}</p>
|
|
<p className={styles.name}>
|
|
<b>{data.name}</b>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NameHoroscopeSlider;
|