Created
April 1, 2024 08:20
-
-
Save koderhun/25da3e5b62f23f80c658ac7937af8328 to your computer and use it in GitHub Desktop.
ответ на тестовое задание
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/ Мы ожидаем, что Вы исправите синтаксические ошибки, сделаете перехват возможных исключений и улучшите читаемость кода. | |
// А так же, напишите кастомный хук useThrottle и используете его там где это нужно. | |
// Желательно использование React.memo и React.useCallback там где это имеет смысл. | |
// Будет большим плюсом, если Вы сможете закэшировать получение случайного пользователя. | |
// Укажите правильные типы. | |
// По возможности пришлите Ваш вариант в https://codesandbox.io | |
import React, { useState } from "react"; | |
const URL = "https://jsonplaceholder.typicode.com/users"; | |
type Company = { | |
bs: string; | |
catchPhrase: string; | |
name: string; | |
}; | |
type User = { | |
id: number; | |
email: string; | |
name: string; | |
phone: string; | |
username: string; | |
website: string; | |
company: Company; | |
address: any | |
}; | |
interface IButtonProps { | |
onClick: any; | |
} | |
function Button({ onClick }: IButtonProps): JSX.Element { | |
return ( | |
<button type="button" onClick={onClick}> | |
get random user | |
</button> | |
); | |
} | |
interface IUserInfoProps { | |
user: User; | |
} | |
function UserInfo({ user }: IUserInfoProps): JSX.Element { | |
return ( | |
<table> | |
<thead> | |
<tr> | |
<th>Username</th> | |
<th>Phone number</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>{user.name}</td> | |
<td>{user.phone}</td> | |
</tr> | |
</tbody> | |
</table> | |
); | |
} | |
function App(): JSX.Element { | |
const [item, setItem] = useState<Record<number, User>>(null); | |
const receiveRandomUser = async () => { | |
const id = Math.floor(Math.random() * (10 - 1)) + 1; | |
const response = await fetch(`${URL}/${id}`); | |
const _user = (await response.json()) as User; | |
setItem(_user); | |
}; | |
const handleButtonClick = ( | |
event: React.MouseEvent<HTMLButtonElement, MouseEvent> | |
) => { | |
event.stopPropagation(); | |
receiveRandomUser(); | |
}; | |
return ( | |
<div> | |
<header>Get a random user</header> | |
<Button onClick={handleButtonClick} /> | |
<UserInfo user={item} /> | |
</div> | |
); | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment