From 8b78a612fbc7f46ef292b92fb89e78ddc2868963 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Mon, 25 Sep 2023 22:58:28 +0400 Subject: [PATCH] feat: wallpaper page zodiac metas, cross compatibility result page, fix button start breath page, fix percents user aura --- src/api/api.ts | 4 +- src/api/resources/Zodiacs.ts | 33 ++++++++++ src/api/resources/index.ts | 1 + src/components/BreathPage/index.tsx | 2 +- src/components/CompatResultPage/index.tsx | 21 +++++-- .../StartBreathModalChild/index.tsx | 6 +- .../StartBreathModalChild/styles.module.css | 10 +++ src/components/WallpaperPage/index.tsx | 61 +++++++++++++------ .../{styles.css => styles.module.css} | 34 ++++++++++- src/routes.ts | 1 + 10 files changed, 146 insertions(+), 27 deletions(-) create mode 100644 src/api/resources/Zodiacs.ts rename src/components/WallpaperPage/{styles.css => styles.module.css} (67%) diff --git a/src/api/api.ts b/src/api/api.ts index 5bad9bf..7655863 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -18,7 +18,8 @@ import { AICompats, AIRequests, UserCallbacks, - Translations + Translations, + Zodiacs } from './resources' const api = { @@ -44,6 +45,7 @@ const api = { createUserCallbacks: createMethod(UserCallbacks.createRequestPost), getUserCallbacks: createMethod(UserCallbacks.createRequestGet), getTranslations: createMethod(Translations.createRequest), + getZodiacs: createMethod(Zodiacs.createRequest), } export type ApiContextValue = typeof api diff --git a/src/api/resources/Zodiacs.ts b/src/api/resources/Zodiacs.ts new file mode 100644 index 0000000..9b202b5 --- /dev/null +++ b/src/api/resources/Zodiacs.ts @@ -0,0 +1,33 @@ +import routes from "@/routes"; +import { AuthPayload } from "../types"; +import { getAuthHeaders } from "../utils"; + +export interface Payload extends AuthPayload { + zodiac: string; +} + +export interface Response { + zodiac: Zodiac; +} + +export interface Zodiac { + sign: string; + metas: ZodiacMeta[]; + aurapic: string | null; + paragraphs: ZodiacParagraph[]; +} + +export interface ZodiacMeta { + value: number; + label: string; +} + +export interface ZodiacParagraph { + title: string; + content: string[] | ZodiacParagraph[]; +} + +export const createRequest = ({ zodiac, token }: Payload): Request => { + const url = new URL(routes.server.zodiacs(zodiac)); + return new Request(url, { method: "GET", headers: getAuthHeaders(token) }); +}; diff --git a/src/api/resources/index.ts b/src/api/resources/index.ts index c963b5f..00e1ec1 100644 --- a/src/api/resources/index.ts +++ b/src/api/resources/index.ts @@ -17,3 +17,4 @@ export * as AICompats from './AICompats' export * as AIRequests from './AIRequests' export * as UserCallbacks from './UserCallbacks' export * as Translations from './Translations' +export * as Zodiacs from './Zodiacs' diff --git a/src/components/BreathPage/index.tsx b/src/components/BreathPage/index.tsx index 9011173..8a4ef60 100644 --- a/src/components/BreathPage/index.tsx +++ b/src/components/BreathPage/index.tsx @@ -168,7 +168,7 @@ function BreathPage(): JSX.Element { )} - + {!isOpenModal && !isShowPreview && (
diff --git a/src/components/CompatResultPage/index.tsx b/src/components/CompatResultPage/index.tsx index ccf3fb1..a3bb37f 100644 --- a/src/components/CompatResultPage/index.tsx +++ b/src/components/CompatResultPage/index.tsx @@ -40,6 +40,8 @@ function CompatResultPage(): JSX.Element { } }; + const handleCompatibility = () => navigate(routes.client.compatibility()); + const loadData = useCallback(async () => { const right_bday = typeof rightUser.birthDate === "string" @@ -78,10 +80,16 @@ function CompatResultPage(): JSX.Element { useApiCall(loadData); const getPaddingBottomPage = () => { - if (homeConfig.pathFromHome === EPathsFromHome.compatibility && showNavbarFooter) return "246px"; + if ( + homeConfig.pathFromHome === EPathsFromHome.compatibility && + showNavbarFooter + ) + return "246px"; if (showNavbarFooter) return "164px"; + if (homeConfig.pathFromHome === EPathsFromHome.compatibility) + return "174px"; return "108px"; - } + }; return (
- {text !== "Loading..." && !showNavbarFooter && ( -
- )} +
{t("you_and", { user: rightUser.name })}
@@ -110,7 +116,10 @@ function CompatResultPage(): JSX.Element {
{text !== "Loading..." && homeConfig.pathFromHome === EPathsFromHome.compatibility && ( -
+

{t("now-you-know")}

diff --git a/src/components/StartBreathModalChild/index.tsx b/src/components/StartBreathModalChild/index.tsx index a069afc..8e2c8aa 100644 --- a/src/components/StartBreathModalChild/index.tsx +++ b/src/components/StartBreathModalChild/index.tsx @@ -4,15 +4,19 @@ import styles from "./styles.module.css"; interface IStartBreathModalChildProps { handleBegin: () => void; + isShowNavbar: boolean; } function StartBreathModalChild({ handleBegin, + isShowNavbar=false }: IStartBreathModalChildProps): JSX.Element { const { t } = useTranslation(); + console.log(isShowNavbar); + return ( -
+
{/*
*/}
diff --git a/src/components/StartBreathModalChild/styles.module.css b/src/components/StartBreathModalChild/styles.module.css index 6e9738c..46ac323 100644 --- a/src/components/StartBreathModalChild/styles.module.css +++ b/src/components/StartBreathModalChild/styles.module.css @@ -24,6 +24,16 @@ border: none; } +.show-navbar { + padding-top: 52px; + justify-content: flex-start; +} + +.show-navbar .begin { + position: absolute; + bottom: 172px; +} + .symbol { opacity: 0; will-change: opacity; diff --git a/src/components/WallpaperPage/index.tsx b/src/components/WallpaperPage/index.tsx index 77ed984..910b8f1 100644 --- a/src/components/WallpaperPage/index.tsx +++ b/src/components/WallpaperPage/index.tsx @@ -4,16 +4,21 @@ import { useAuth } from "@/auth"; import { useApi, useApiCall, Assets, DailyForecasts } from "@/api"; import { saveFile, buildFilename } from "./utils"; import Loader, { LoaderColor } from "../Loader"; -import "./styles.css"; +import styles from "./styles.module.css"; import { useSelector } from "react-redux"; import { selectors } from "@/store"; -import { getCategoryIdByZodiacSign, getZodiacSignByDate } from "@/services/zodiac-sign"; +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 { @@ -22,7 +27,7 @@ function WallpaperPage(): JSX.Element { const locale = i18n.language; const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIzNjEyLCJpYXQiOjE2OTM0MTg5MTAsImV4cCI6MTcwMjA1ODkxMCwianRpIjoiNzg5MjkwYWItODg0YS00MGUyLTkyNjEtOWI2OGEyNjkwNmE0IiwiZW1haWwiOiJvdGhlckBleGFtcGxlLmNvbSIsInN0YXRlIjoicHJvdmVuIiwibG9jIjoiZW4iLCJ0eiI6LTI4ODAwLCJ0eXBlIjoiZW1haWwiLCJpc3MiOiJjb20ubGlmZS5hdXJhIn0.J2ocWIv5jKzuKMcwMgWMiNMyGg5qLlMAeln-bQm_9lw"; - + const { user, // token @@ -30,15 +35,16 @@ function WallpaperPage(): JSX.Element { const birthdate = useSelector(selectors.selectBirthdate); const zodiacSign = getZodiacSignByDate(birthdate); const category = user?.profile.sign?.sign || ""; - console.log(category); - + const loadData = useCallback(async () => { const { asset_categories } = await api.getAssetCategories({ locale }); const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories); return Promise.all([ - api.getAssets({ category: String(categoryId || "1"), }), + api.getZodiacs({ zodiac: zodiacSign.toLowerCase(), token }), + api.getAssets({ category: String(categoryId || "1") }), api.getDailyForecasts({ token }), - ]).then(([{ assets }, { user_daily_forecast }]) => ({ + ]).then(([{ zodiac }, { assets }, { user_daily_forecast }]) => ({ + zodiac, assets, forecasts: user_daily_forecast.forecasts, })); @@ -46,25 +52,46 @@ function WallpaperPage(): JSX.Element { 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)); + asset && + saveFile(asset.url.replace("http://", "https://"), buildFilename(category)); return ( - <section className="wallpaper-page"> - <div className="wallpaper-image"> - {asset ? <img src={asset.url} alt={category} /> : null} - {asset ? <div className="btn-download" onClick={handleClick} /> : null} + <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="wallpaper-content"> + <div className={styles["wallpaper-content"]}> {isPending ? null : ( <> - <h1 className="wallpaper-title">{t("analysis_background")}</h1> + <h1 className={styles["wallpaper-title"]}> + {t("analysis_background")} + </h1> {forecasts.map((forecast) => ( - <div key={forecast.category_name} className="wallpaper-forecast"> - <h2 className="wallpaper-subtitle">{forecast.category}</h2> - <p className="wallpaper-text">{forecast.body}</p> + <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> ))} </> diff --git a/src/components/WallpaperPage/styles.css b/src/components/WallpaperPage/styles.module.css similarity index 67% rename from src/components/WallpaperPage/styles.css rename to src/components/WallpaperPage/styles.module.css index 11571a6..bd19fcb 100644 --- a/src/components/WallpaperPage/styles.css +++ b/src/components/WallpaperPage/styles.module.css @@ -13,10 +13,14 @@ .wallpaper-image { display: flex; justify-content: center; - align-items: center; + align-items: flex-end; background-color: #04040a; width: 100%; height: 500px; + padding: 0 32px 32px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; } .wallpaper-content { @@ -65,4 +69,32 @@ background-position: center; background-size: cover; background-repeat: no-repeat; +} + +.zodiac-metas { + width: 100%; + height: fit-content; + padding: 16px; + background-color: #5d5d5d; + display: flex; + flex-direction: column; + gap: 6px; + border-radius: 16px; +} + +.zodiac-meta { + display: flex; + flex-direction: row; + font-size: 18px; + gap: 8px; +} + +.zodiac-meta-label { + font-weight: 400; + color: #fff; + text-transform: uppercase; +} + +.zodiac-meta-value { + font-weight: 700; } \ No newline at end of file diff --git a/src/routes.ts b/src/routes.ts index 229d295..c3f0a7e 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -31,6 +31,7 @@ const routes = { user: () => [apiHost, prefix, "user.json"].join("/"), token: () => [apiHost, prefix, "auth", "token.json"].join("/"), elements: () => [apiHost, prefix, "elements.json"].join("/"), + zodiacs: (zodiac: string) => [apiHost, prefix, "zodiacs", `${zodiac}.json`].join("/"), element: (type: string) => [apiHost, prefix, "elements", `${type}.json`].join("/"), apps: (bundleId: string) =>