60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useCallback } from 'react'
|
|
import { useApi, useApiCall, Assets, DailyForecasts } from '../../api'
|
|
import { useAuth } from '../../auth'
|
|
import { saveFile, buildFilename } from './utils'
|
|
import Loader, { LoaderColor } from '../Loader'
|
|
import './styles.css'
|
|
|
|
type Forecasts = DailyForecasts.Forecast[]
|
|
type PersonalAssets = Assets.Asset[]
|
|
interface WallpaperData {
|
|
assets: PersonalAssets
|
|
forecasts: Forecasts
|
|
}
|
|
|
|
function WallpaperPage(): JSX.Element {
|
|
const api = useApi()
|
|
const { user, token } = useAuth()
|
|
const category = user?.profile.sign?.sign || ''
|
|
const loadData = useCallback(() => {
|
|
return Promise.all([
|
|
api.getAssets({ token, category }),
|
|
api.getDailyForecasts({ token }),
|
|
])
|
|
.then(([{ assets }, { user_daily_forecast }]) => ({
|
|
assets,
|
|
forecasts: user_daily_forecast.forecasts,
|
|
}))
|
|
}, [api, category, token])
|
|
const { data, isPending } = useApiCall<WallpaperData>(loadData)
|
|
const { assets, forecasts } = data
|
|
const asset = assets?.at(0)
|
|
|
|
const handleClick = () => asset && saveFile(asset.url, 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}
|
|
{isPending ? <Loader color={LoaderColor.White}/> : null}
|
|
</div>
|
|
<div className='wallpaper-content'>
|
|
{isPending ? null : (
|
|
<>
|
|
<h1 className='wallpaper-title'>Analysis of personal 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>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default WallpaperPage
|