fit: add background image for breath page, fix emails list timing

src/api/resources/AssetCategories.ts

@@ -1,8 +1,8 @@
 import routes from "@/routes"
-import { AuthPayload } from "../types"
+// import { AuthPayload } from "../types"
-import { getAuthHeaders } from "../utils"
+// 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' })
 }

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' })
 }

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)
       })

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<Asset>()
+  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<Asset[]>(assetsData)
+
+  useEffect(() => {
+    if (data) {
+      setAsset(data[getRandomArbitrary(0, data?.length || 0)])
+    }
+  }, [data])
+  
 
   return (
-    <section className={`${styles.page} page`}>
+    <section className={`${styles.page} page`} style={{ backgroundImage: `url(${asset?.url})` }}>
       <BreathCircle />
     </section>
   )

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;
 }

src/components/EmailItem/styles.module.css

@@ -2,6 +2,5 @@
   color: #fff;
   font-size: 14px;
   text-align: center;
-  /* display: block;
+  color: #1a6821;
-    width: 100%; */
 }

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]) {

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;

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 }]) => ({