105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
import { useCallback } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAuth } from "@/auth";
|
|
import { useApi, useApiCall, Assets, DailyForecasts } from "@/api";
|
|
import { saveFile, buildFilename } from "./utils";
|
|
import Loader, { LoaderColor } from "../Loader";
|
|
import styles from "./styles.module.css";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import {
|
|
getCategoryIdByZodiacSign,
|
|
getZodiacSignByDate,
|
|
} from "@/services/zodiac-sign";
|
|
import { Zodiac } from "@/api/resources/Zodiacs";
|
|
|
|
type Forecasts = DailyForecasts.Forecast[];
|
|
type PersonalAssets = Assets.Asset[];
|
|
interface WallpaperData {
|
|
assets: PersonalAssets;
|
|
forecasts: Forecasts;
|
|
zodiac: Zodiac;
|
|
}
|
|
|
|
function WallpaperPage(): JSX.Element {
|
|
const api = useApi();
|
|
const { t, i18n } = useTranslation();
|
|
const locale = i18n.language;
|
|
const token =
|
|
"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIzNjEyLCJpYXQiOjE2OTM0MTg5MTAsImV4cCI6MTcwMjA1ODkxMCwianRpIjoiNzg5MjkwYWItODg0YS00MGUyLTkyNjEtOWI2OGEyNjkwNmE0IiwiZW1haWwiOiJvdGhlckBleGFtcGxlLmNvbSIsInN0YXRlIjoicHJvdmVuIiwibG9jIjoiZW4iLCJ0eiI6LTI4ODAwLCJ0eXBlIjoiZW1haWwiLCJpc3MiOiJjb20ubGlmZS5hdXJhIn0.J2ocWIv5jKzuKMcwMgWMiNMyGg5qLlMAeln-bQm_9lw";
|
|
|
|
const {
|
|
user,
|
|
// token
|
|
} = useAuth();
|
|
const birthdate = useSelector(selectors.selectBirthdate);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
const category = user?.profile.sign?.sign || "";
|
|
|
|
const loadData = useCallback(async () => {
|
|
const { asset_categories } = await api.getAssetCategories({ locale });
|
|
const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
|
|
return Promise.all([
|
|
api.getZodiacs({ zodiac: zodiacSign.toLowerCase(), token }),
|
|
api.getAssets({ category: String(categoryId || "1") }),
|
|
api.getDailyForecasts({ token }),
|
|
]).then(([{ zodiac }, { assets }, { user_daily_forecast }]) => ({
|
|
zodiac,
|
|
assets,
|
|
forecasts: user_daily_forecast.forecasts,
|
|
}));
|
|
}, [api, token, locale, zodiacSign]);
|
|
const { data, isPending } = useApiCall<WallpaperData>(loadData);
|
|
const forecasts = data ? data.forecasts : [];
|
|
const asset = data ? data.assets.at(0) : null;
|
|
const zodiacInfo = data ? data.zodiac : null;
|
|
|
|
const handleClick = () =>
|
|
asset &&
|
|
saveFile(asset.url.replace("http://", "https://"), buildFilename(category));
|
|
|
|
return (
|
|
<section className={styles["wallpaper-page"]}>
|
|
<div
|
|
className={styles["wallpaper-image"]}
|
|
style={{ backgroundImage: `url(${asset?.url})` }}
|
|
>
|
|
<div className={styles["zodiac-metas"]}>
|
|
{zodiacInfo?.metas.map((meta, index) => (
|
|
<div key={index} className={styles["zodiac-meta"]}>
|
|
<p className={styles["zodiac-meta-label"]}>{meta.label}</p>
|
|
<p className={styles["zodiac-meta-value"]}>{meta.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{asset ? (
|
|
<div className={styles["btn-download"]} onClick={handleClick} />
|
|
) : null}
|
|
{isPending ? <Loader color={LoaderColor.White} /> : null}
|
|
</div>
|
|
<div className={styles["wallpaper-content"]}>
|
|
{isPending ? null : (
|
|
<>
|
|
<h1 className={styles["wallpaper-title"]}>
|
|
{t("analysis_background")}
|
|
</h1>
|
|
{forecasts.map((forecast) => (
|
|
<div
|
|
key={forecast.category_name}
|
|
className={styles["wallpaper-forecast"]}
|
|
>
|
|
<h2 className={styles["wallpaper-subtitle"]}>
|
|
{forecast.category}
|
|
</h2>
|
|
<p className={styles["wallpaper-text"]}>{forecast.body}</p>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default WallpaperPage;
|