48 lines
2.2 KiB
TypeScript
48 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import styles from './friendspageblock.module.css';
|
||
import { ETextStyles } from '../../texts';
|
||
import { RatingCard } from '../../Elements/RatingCard';
|
||
import { generateRandomString } from '../../../utils/generateRandom';
|
||
import { useFriendsData } from '../../hooks/useFriendsData';
|
||
import { ErrorPage } from '../../Pages/ErrorPage';
|
||
import { Spinner } from '../../Elements/Spinner';
|
||
|
||
export function FriendsPageBlock() {
|
||
const { dataFriends, loadingFriends, errorFriends } = useFriendsData();
|
||
const [ratingBlock, setRatingBlock] = useState(<div></div>);
|
||
|
||
useEffect(() => {
|
||
if (dataFriends.length != 0) {
|
||
const block = dataFriends.map((user, index) => {
|
||
return <RatingCard img={user.avatar ? user.avatar : ''} key={generateRandomString()} friend={true} index={index + 1} number={Number(user.rank)} name={user.username ? user.username : ''} score={user.points ? user.points : '0'} />;
|
||
});
|
||
|
||
//@ts-ignore
|
||
setRatingBlock(block);
|
||
}
|
||
|
||
}, [dataFriends])
|
||
|
||
|
||
return (
|
||
<div>
|
||
{loadingFriends && <div className={styles.spinnerContainer}><Spinner color='#FFFFFF' size='40px' thickness='6px' className={styles.spinner} /></div>}
|
||
{!loadingFriends &&
|
||
<div>
|
||
{(!errorFriends) ?
|
||
<div>
|
||
{(dataFriends.length > 0) && <h2 style={ETextStyles.RwSb18120} className={styles.title}>Рейтинг друзей</h2>}
|
||
<div className={styles.ranks}>{ratingBlock}</div>
|
||
</div> :
|
||
<ErrorPage fullScreen={false} title='Возникла ошибка загрузки списка друзей' text='Перезагрузите страницу или попробуйте позже' detail={errorFriends} />
|
||
}
|
||
</div>
|
||
}
|
||
<div className={`${styles.content} ${(dataFriends.length === 0) && styles.marginTop }`}>
|
||
<p style={ETextStyles.RwSb18120} className={styles.title2}>Мало друзей?</p>
|
||
<p style={ETextStyles.RwSb14120} className={styles.descr}>Используй все свои социальные сети! Больше друзей — больше доход в хранилище.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|