diff --git a/src/api/resources/AssetCategories.ts b/src/api/resources/AssetCategories.ts index 81200ad..60f1c01 100644 --- a/src/api/resources/AssetCategories.ts +++ b/src/api/resources/AssetCategories.ts @@ -1,8 +1,8 @@ import routes from "@/routes" -import { AuthPayload } from "../types" -import { getAuthHeaders } from "../utils" +// import { AuthPayload } from "../types" +// import { getAuthHeaders } from "../utils" -export interface Payload extends AuthPayload { +export interface Payload { locale: string } @@ -17,11 +17,11 @@ export interface AssetCategory { path: string } -export const createRequest = ({ locale, token }: Payload): Request => { +export const createRequest = ({ locale }: Payload): Request => { const url = new URL(routes.server.assetCategories()) const query = new URLSearchParams({ locale }) url.search = query.toString() - return new Request(url, { method: 'GET', headers: getAuthHeaders(token) }) + return new Request(url, { method: 'GET' }) } diff --git a/src/api/resources/Assets.ts b/src/api/resources/Assets.ts index 6c744b7..1ccaa7e 100644 --- a/src/api/resources/Assets.ts +++ b/src/api/resources/Assets.ts @@ -1,9 +1,10 @@ import routes from "@/routes" -import { AuthPayload } from "../types" import { AssetCategory } from "./AssetCategories" -import { getAuthHeaders } from "../utils" +// import { AuthPayload } from "../types" +// import { getAuthHeaders } from "../utils" -export interface Payload extends AuthPayload { +// export interface Payload extends AuthPayload { +export interface Payload { category: string page?: number perPage?: number @@ -34,7 +35,7 @@ export interface AssetMetadata { mime_type: string } -export const createRequest = ({ token, category, page, perPage }: Payload): Request => { +export const createRequest = ({ category, page, perPage }: Payload): Request => { const url = new URL(routes.server.assets(category)) const query = new URLSearchParams() @@ -45,5 +46,5 @@ export const createRequest = ({ token, category, page, perPage }: Payload): Requ url.search = query.toString() - return new Request(url, { method: 'GET', headers: getAuthHeaders(token) }) + return new Request(url, { method: 'GET' }) } diff --git a/src/components/BreathCircle/index.tsx b/src/components/BreathCircle/index.tsx index 02bde89..1c7247d 100644 --- a/src/components/BreathCircle/index.tsx +++ b/src/components/BreathCircle/index.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' -import routes from '@/routes' +// import routes from '@/routes' import styles from './styles.module.css' import { useEffect, useState } from 'react' @@ -15,7 +15,7 @@ function BreathCircle(): JSX.Element { useEffect(() => { - const handleNext = () => navigate(routes.client.compatibility()) + // const handleNext = () => navigate(routes.client.compatibility()) Promise.resolve() .then(() => { setText(t('breathIn')) @@ -32,7 +32,7 @@ function BreathCircle(): JSX.Element { .then(() => { setCounter((prevState) => prevState + 1) if (counter === 3) { - handleNext() + // handleNext() } setRender((prevState) => !prevState) }) diff --git a/src/components/BreathPage/index.tsx b/src/components/BreathPage/index.tsx index 5a271d1..e5e0fe5 100644 --- a/src/components/BreathPage/index.tsx +++ b/src/components/BreathPage/index.tsx @@ -1,10 +1,49 @@ import styles from './styles.module.css' import BreathCircle from '../BreathCircle' +import { useCallback, useEffect, useState } from 'react' +import { useApi, useApiCall } from '@/api' +import { Asset } from '@/api/resources/Assets' +import { useSelector } from 'react-redux' +import { selectors } from '@/store' +import { getZodiacSignByDate } from '@/services/zodiac-sign' +import { useTranslation } from 'react-i18next' +import { AssetCategory } from '@/api/resources/AssetCategories' +import { getRandomArbitrary } from '@/services/random-value' + +const getCategoryIdByZodiacSign = (zodiacSign: string, categories: AssetCategory[]) => { + const categoryId = categories.find((category) => category.slug === zodiacSign.toLowerCase())?.id + return categoryId +} function BreathPage(): JSX.Element { + const { i18n } = useTranslation() + const locale = i18n.language + const birthdate = useSelector(selectors.selectBirthdate) + const zodiacSign = getZodiacSignByDate(birthdate) + const [asset, setAsset] = useState() + const api = useApi() + + const assetsData = useCallback(async () => { + const { asset_categories } = await api.getAssetCategories({ locale }) + const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories) + const { assets } = await api.getAssets({ category: String(categoryId || '1') }) + return assets + }, [api, locale, zodiacSign]) + + const { + data, + // isPending + } = useApiCall(assetsData) + + useEffect(() => { + if (data) { + setAsset(data[getRandomArbitrary(0, data?.length || 0)]) + } + }, [data]) + return ( -
+
) diff --git a/src/components/BreathPage/styles.module.css b/src/components/BreathPage/styles.module.css index 484a451..2ec5d58 100644 --- a/src/components/BreathPage/styles.module.css +++ b/src/components/BreathPage/styles.module.css @@ -7,4 +7,6 @@ grid-template-rows: 1fr 96px; justify-items: center; background-color: #01010b; + background-size: cover; + background-repeat: no-repeat; } \ No newline at end of file diff --git a/src/components/EmailItem/styles.module.css b/src/components/EmailItem/styles.module.css index 1e27a3a..70e0209 100644 --- a/src/components/EmailItem/styles.module.css +++ b/src/components/EmailItem/styles.module.css @@ -2,6 +2,5 @@ color: #fff; font-size: 14px; text-align: center; - /* display: block; - width: 100%; */ + color: #1a6821; } diff --git a/src/components/EmailsList/index.tsx b/src/components/EmailsList/index.tsx index 29604d4..f28e245 100644 --- a/src/components/EmailsList/index.tsx +++ b/src/components/EmailsList/index.tsx @@ -4,24 +4,6 @@ import styles from './styles.module.css' import { useTranslation } from 'react-i18next' import { useEffect, useRef, useState } from 'react' -// const getEmails = (): IEmailItem[] => { -// const emails: IEmailItem[] = [] - -// for (let i = 0; i < 2; i++) { -// const subList = [] -// for (let j = 0; j < 4; j++) { -// subList.push({ -// email: getRandomName(), -// price: 9 -// }) -// } -// subList[getRandomArbitrary(0, 4)].price = [5, 13.67][getRandomArbitrary(0, 2)] -// emails.push(...subList) -// } - -// return emails -// } - const getEmails = (): IEmailItem[] => { const emails: IEmailItem[] = [] @@ -53,7 +35,10 @@ function EmailsList(): JSX.Element { }, [countUsers]) useEffect(() => { - const randomDelay = getRandomArbitrary(500, 5000) + let randomDelay = getRandomArbitrary(500, 5000) + if (!elementIdx) { + randomDelay = 0 + } const itemsRefInterval = setInterval(() => { if (itemsRef.current[elementIdx - 1]) { diff --git a/src/components/EmailsList/styles.module.css b/src/components/EmailsList/styles.module.css index caa1086..404a90c 100644 --- a/src/components/EmailsList/styles.module.css +++ b/src/components/EmailsList/styles.module.css @@ -1,7 +1,7 @@ .container { width: 100%; height: 100%; - background-color: #adadad; + background-color: #b7e9c3; border-radius: 7px; padding: 6px 16px; display: flex; diff --git a/src/components/WallpaperPage/index.tsx b/src/components/WallpaperPage/index.tsx index 57f3054..db94d90 100644 --- a/src/components/WallpaperPage/index.tsx +++ b/src/components/WallpaperPage/index.tsx @@ -20,7 +20,7 @@ function WallpaperPage(): JSX.Element { const category = user?.profile.sign?.sign || '' const loadData = useCallback(() => { return Promise.all([ - api.getAssets({ token, category }), + api.getAssets({ category }), api.getDailyForecasts({ token }), ]) .then(([{ assets }, { user_daily_forecast }]) => ({