add return null when fetch failed

This commit is contained in:
smanylov
2026-02-13 14:16:39 +07:00
parent 1f6301c531
commit 7aa29bd398
9 changed files with 86 additions and 49 deletions
+2 -2
View File
@@ -16,7 +16,7 @@ export default function HeaderPanel() {
<BurgerMenu />
<div className="header-action">
{/* <LanguageSwitcher /> */}
{typeof userData?.tariffInfo.tokens === 'number' && (
{typeof userData?.tariffInfo?.tokens === 'number' && (
<Link
href={'/pages/payment'}
className="tokens-balance"
@@ -25,7 +25,7 @@ export default function HeaderPanel() {
<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "16px", height: "16px" }}>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path>
</svg>
<span className="tokens-count">{userData?.tariffInfo.tokens}</span>
<span className="tokens-count">{userData?.tariffInfo?.tokens}</span>
<span className="tokens-label">
{t('tokens')}
</span>
+6 -6
View File
@@ -15,27 +15,27 @@ export default function UserUsage() {
<div className="stats-grid">
<div className="stat-card">
<div className="stat-value">
{userData?.tariffInfo.currentFileCounts} / {userData?.tariffInfo.maxFileCounts}
{userData?.tariffInfo?.currentFileCounts} / {userData?.tariffInfo?.maxFileCounts}
</div>
<div className="stat-label">Файлов в месяц</div>
<div className="progress-bar">
<div
className="progress-fill"
style={{ width: `${getProcents(userData?.tariffInfo.currentFileCounts, userData?.tariffInfo.maxFileCounts)}%` }}
style={{ width: `${getProcents(userData?.tariffInfo?.currentFileCounts, userData?.tariffInfo?.maxFileCounts)}%` }}
>
</div>
</div>
</div>
<div className="stat-card">
<div className="stat-value">
{convertBytes(userData?.tariffInfo.currentFileOnDisk ?? 0)} / {convertBytes(userData?.tariffInfo.maxFileOnDisk ?? 0)}
{convertBytes(userData?.tariffInfo?.currentFileOnDisk ?? 0)} / {convertBytes(userData?.tariffInfo?.maxFileOnDisk ?? 0)}
</div>
<div className="stat-label">Объём хранилища</div>
<div className="progress-bar">
<div
className="progress-fill"
style={
{ width: `${getProcents(userData?.tariffInfo.currentFileOnDisk, userData?.tariffInfo.maxFileOnDisk ?? 0)}%` }
{ width: `${getProcents(userData?.tariffInfo?.currentFileOnDisk, userData?.tariffInfo?.maxFileOnDisk ?? 0)}%` }
}
>
</div>
@@ -43,13 +43,13 @@ export default function UserUsage() {
</div>
<div className="stat-card">
<div className="stat-value">
{userData?.tariffInfo.tokens ?? 0}
{userData?.tariffInfo?.tokens ?? 0}
</div>
<div className="stat-label">Токенов на балансе</div>
</div>
<div className="stat-card">
<div className="stat-value">
{userData?.tariffInfo.tariffName ? userData?.tariffInfo.tariffName : 'ERROR'}
{userData?.tariffInfo?.tariffName ? userData?.tariffInfo?.tariffName : 'ERROR'}
</div>
<div className="stat-label">Текущий план</div>
</div>
+3 -14
View File
@@ -1,21 +1,10 @@
'use client'
import { IconImageFile, IconDocument, IconAudioFile, IconVideoFile } from '@/app/ui/icons/icons';
import { useQuery } from '@tanstack/react-query';
import { getSearchStats } from '@/app/actions/searchActions';
import { useUserSearchData } from '@/app/hooks/react-query/useUserSearchData';
export function RecentSearches() {
const {
data: userSearchData,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userSearchData'],
queryFn: () => {
return getSearchStats();
},
});
const { data: userSearchData, isLoading, isError, error, } = useUserSearchData()
return (
<div className="recent-searches">
@@ -46,7 +35,7 @@ export function RecentSearches() {
<span className="recent-type audio">
<IconAudioFile /> audio</span>
<div>
<div>{userSearchData?.audio?.count ? userSearchData?.audi?.count : 0} поисков</div>
<div>{userSearchData?.audio?.count ? userSearchData?.audio?.count : 0} поисков</div>
<div className="recent-date">
date
</div>
+3 -15
View File
@@ -1,21 +1,9 @@
'use client'
import { useQuery } from '@tanstack/react-query';
import { getSearchStats } from '@/app/actions/searchActions';
import { useEffect } from 'react';
import { useUserSearchData } from '@/app/hooks/react-query/useUserSearchData';
export function SearchStats() {
const {
data: userSearchData,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userSearchData'],
queryFn: () => {
return getSearchStats();
},
});
const { data: userSearchData, isLoading, isError, error, } = useUserSearchData()
return (
<div className="stats-search">
@@ -40,7 +28,7 @@ export function SearchStats() {
<div className="stat-item">
<span className="stat-label">Аудио</span>
<span className="stat-value">
{userSearchData?.audio?.count ? userSearchData?.audi?.count : 0}
{userSearchData?.audio?.count ? userSearchData?.audio?.count : 0}
</span>
</div>
@@ -32,18 +32,18 @@ export default function SubscriptionSettings() {
<div className="subscription-info">
<div className="subscription-info-header">
<div>
<h4 className="subscription-info-title">Подписка {userData?.tariffInfo.tariffName}</h4>
<p>📅 Активна до {dateHandler(userData?.tariffInfo.endTariff)}</p>
<h4 className="subscription-info-title">Подписка {userData?.tariffInfo?.tariffName}</h4>
<p>📅 Активна до {dateHandler(userData?.tariffInfo?.endTariff)}</p>
</div>
<div style={{ textAlign: "right" }}>
<div className="subscription-info-title">{userData?.tariffInfo.maxFileCounts}</div>
<div className="subscription-info-title">{userData?.tariffInfo?.maxFileCounts}</div>
<p>файлов в месяц</p>
</div>
</div>
<div className="subscription-info-main">
<div className="subscription-info-item">
<div>💾 Хранилище</div>
<span>{userData?.tariffInfo.maxFileOnDisk ? convertBytes(userData?.tariffInfo.maxFileOnDisk) : 0}</span>
<span>{userData?.tariffInfo?.maxFileOnDisk ? convertBytes(userData?.tariffInfo?.maxFileOnDisk) : 0}</span>
</div>
<div className="subscription-info-item">
<div>🔌 API доступ</div>