-import React from "react";+import React, { useState, useEffect } from "react";+import "./App.css";+import Loader from "react-loader-spinner";+import Button from "./components/Button.js";+import List from "./components/List.js";+import UserInfo from "./components/UserInfo.js";++const URL = "https://randomuser.me/api/?results=5";  function App() {-  return <div>Good luck with the test students!</div>;+  const [users, setUsers] = useState([]);+  const [isLoading, setLoading] = useState(false);+  const [hasError, setError] = useState(false);+  const fetchUser = async () => {+    try {+      setLoading(true);+      const data = await fetch(URL);+      const jsonData = await data.json();+      setLoading(false);+      setUsers(jsonData.results);+    } catch (error) {+      setLoading(false);+      setError(true);+    }+  };

+import React, { useState } from "react";+import Spinner from "./isLoader";++const Friend = () => {+  const [friend, setFriend] = useState({});+  const [error, setError] = useState(null);+  const [isLoading, setIsLoading] = useState(false);++  const getFriend = () => {+    fetch("https://randomuser.me/api/?results=5")+      .then((data) => data.json())+      .then((res) => {+        setFriend({+          address: res.results[0].location.city,+          email: res.results[0].email,+          firstName: res.results[0].name.first,+          lastName: res.results[0].name.last,+          country: res.results[0].location.country,+          phone: res.results[0].phone,+        });+        setIsLoading(true);

 import React from "react";+import Friend from "./components/fetchedData";

 import React from "react";+import Friend from "./components/fetchedData";

+import React, {useState} from 'react';+import Alert from '@material-ui/lab/Alert';+import User from './User';+import SearchButton from './SearchButton';++const LoadUsers = () => {+    const [friend, setFriend] = useState({});+    const [users, setUsers] = useState([]);+    const [isLoading, setLoading] = useState(false);+    const [error, setError] = useState({show:false, text:''});++    const getUsers = () => {+        setLoading(true);+        setError({show:false});+        fetch('https://www.randomuser.me/api?results=5')+        .then(response => {+            return response.json();+        })+        .then(data =>{+            setFriend(data.results[0]);+            setUsers(data.results);+            setLoading(false);+        })+        .catch(err => {+            setError({show:true, text: err.message});+            setLoading(false);+        });

+import React from 'react'++const User = ({friend}) => {+    return (+        <div>

+import React, {useState} from 'react';+import Alert from '@material-ui/lab/Alert';+import User from './User';+import SearchButton from './SearchButton';++const LoadUsers = () => {+    const [friend, setFriend] = useState({});+    const [users, setUsers] = useState([]);+    const [isLoading, setLoading] = useState(false);+    const [error, setError] = useState({show:false, text:''});

+import React from 'react';++const SearchButton = ({getUsers}) => {+    return (+        <div>

-import React from "react";+import React from 'react';+import LoadUsers from './Components/UserList';  function App() {-  return <div>Good luck with the test students!</div>;+  return (+    <div>+      <LoadUsers></LoadUsers>

+import React, { useState, useEffect } from "react";+import UserCard from "./UserCard";+import Card from "@material-ui/core/Card";+import CardContent from "@material-ui/core/CardContent";+import Typography from "@material-ui/core/Typography";++function FetchedUserData({ userList }) {+  const [user, setUser] = useState("");+  +  useEffect(() => {+    setUser(userList[0]);+  }, []);

+import React, { useState } from "react";+import CircularProgress from "@material-ui/core/CircularProgress";+import FetchedUserData from './FetchedUserData'+import UserCard from './UserCard'+import Button from '@material-ui/core/Button';++const END_POINT = "https://randomuser.me/api/?results=5";

+import React, { useState, useEffect } from "react";+import UserCard from "./UserCard";+import Card from "@material-ui/core/Card";+import CardContent from "@material-ui/core/CardContent";+import Typography from "@material-ui/core/Typography";++function FetchedUserData({ userList }) {+  const [user, setUser] = useState("");+  +  useEffect(() => {+    setUser(userList[0]);+  }, []);++  const selectedUser = (userIndex) => {+    setUser(userList[userIndex.index]);+  };++  return (+    <Card>+      <CardContent>+        <Typography variant="h5" component="h2">+          {userList.map((item, index) => (+            <p onClick={() => selectedUser({ index })} key={index}>+              {" "}+              {item.name.first} {item.name.last}+            </p>+          ))}+          <UserCard user={user} />

+import React, { useState } from "react";+import CircularProgress from "@material-ui/core/CircularProgress";+import FetchedUserData from './FetchedUserData'+import UserCard from './UserCard'+import Button from '@material-ui/core/Button';++const END_POINT = "https://randomuser.me/api/?results=5";++function NewUser() {+  const [loading, setLoading] = useState(false);+  const [loaded,setLoaded] = useState(false);+  const [hasError, setHasError] = useState(false);+  const [userList, setUserList] = useState([]);++  const fetchUser = async () => {+    setLoading(true);+    setLoaded(false);+    const response = await fetch(END_POINT);+    response+      .json()+      .then((res) => {+        setUserList(res.results);+        setLoading(false);+        setLoaded(true);+      })+      .catch((error) => {+        setHasError(true);