Skip to content

Instantly share code, notes, and snippets.

@koderhun
Created April 1, 2024 08:20
Show Gist options
  • Save koderhun/25da3e5b62f23f80c658ac7937af8328 to your computer and use it in GitHub Desktop.
Save koderhun/25da3e5b62f23f80c658ac7937af8328 to your computer and use it in GitHub Desktop.
ответ на тестовое задание
/ Мы ожидаем, что Вы исправите синтаксические ошибки, сделаете перехват возможных исключений и улучшите читаемость кода.
// А так же, напишите кастомный хук 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