homework-7 fixed

my-app/src/App.scss

@@ -1,4 +1,5 @@
-.App, #root {
+.App,
+#root {
   text-align: center;
   display: flex;
   justify-content: center;
@@ -14,4 +15,4 @@
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
-}
+}

my-app/src/App.tsx

@@ -1,48 +1,30 @@
 import "./App.scss";
 import { MemberCard } from "../src/components/memberCard";
 import { useEffect, useState } from "react";
-import { UserProps } from "./components/memberCard/types";
-import { ButtonWithLabel } from "./components/buttonWithLabel";
+import { UserProps } from "./types/types";
 import Form from "./components/form";
 import { Tabs } from "./components/tabs";
+import { UserList } from "./components/userList/UserList";
+import { fetchUsers } from "./client/api";
 
 export default function App() {
   const [users, setUsers] = useState<UserProps[]>([]);
-  const [moreUsers, setMoreUsers] = useState<UserProps[]>([]);
-  const [addedUser, setAddedUser] = useState<UserProps | null>(null);
   const [tabForm, setTabForm] = useState(true);
+  const [addedUser, setAddedUser] = useState<UserProps | null>(null);
 
   useEffect(() => {
-    fetch('https://jsonplaceholder.typicode.com/users')
-      .then((response) => response.json())
-      .then((res) => setUsers(res));
+    fetchUsers().then((res) => setUsers(res));
   }, []);
 
-  const onButtonClick = () => {
-    fetch('https://jsonplaceholder.typicode.com/users')
-    .then((response) => response.json())
-    .then((res) => setMoreUsers(res));
-  };
-
-  const handleUserAddition = (user: UserProps) => {
+  const onUserAddition = (user: UserProps) => {
     setAddedUser(user);
-};
+  };
 
   return (
     <div className="App">
-      <Tabs onChange={setTabForm}/>
-      {!tabForm && users.map((user) => <MemberCard name={user.name} phone={user.phone} username={user.username} website={user.website} />)}
-      {!tabForm && moreUsers.map((user) => <MemberCard name={user.name} phone={user.phone} username={user.username} website={user.website} />)}
-      {!tabForm && <ButtonWithLabel onClick={onButtonClick}>more users</ButtonWithLabel>}
-      {tabForm && <Form onUserAddition={handleUserAddition}  />}
-      {addedUser && (
-                <MemberCard
-                    name={addedUser.name}
-                    phone={addedUser.phone}
-                    username={addedUser.username}
-                    website={addedUser.website}
-                />
-            )}
+      <Tabs onChange={setTabForm} />
+      {tabForm ? <Form onUserAddition={onUserAddition} /> : <UserList />}
+      {addedUser && <MemberCard {...addedUser} />}
     </div>
   );
 }

my-app/src/client/api.ts

@@ -0,0 +1,15 @@
+import { UserProps } from "../types/types";
+
+const apiUrl = "https://jsonplaceholder.typicode.com/users";
+
+export const fetchUsers = (): Promise<UserProps[]> =>
+  fetch(apiUrl).then((response) => response.json());
+
+export const addUser = (user: UserProps): Promise<UserProps> =>
+  fetch(apiUrl, {
+    method: "POST",
+    body: JSON.stringify(user),
+    headers: {
+      "Content-type": "application/json; charset=UTF-8",
+    },
+  }).then((response) => response.json());

my-app/src/components/button/index.tsx

@@ -1,8 +1,11 @@
 import "./style.scss";
+import { FC } from "react";
+import { ButtonProps } from "../../types/types";
 
-export const Button = ({ onClick, children }: {onClick: () => void, children?: string}) => {
-
-	return (
-		<button className="button" onClick={onClick}>{children}</button>
-	);
-};
+export const Button: FC<ButtonProps> = ({ onClick, children }) => {
+  return (
+    <button className="button" onClick={onClick}>
+      {children}
+    </button>
+  );
+};

my-app/src/components/button/style.scss

@@ -1,6 +1,6 @@
 .button {
-	padding: 10px;
-	border-radius: 5px;
-	background-color: antiquewhite;
-	cursor: pointer;
-}
+  padding: 10px;
+  border-radius: 5px;
+  background-color: #a1068d;
+  cursor: pointer;
+}

my-app/src/components/buttonWithLabel/index.tsx

@@ -1,12 +1,13 @@
 import { Button } from "../button";
 import "./style.scss";
+import { FC } from "react";
+import { ButtonWithLabelProps } from "../../types/types";
 
-export const ButtonWithLabel = ({ onClick, children }: { onClick: () => void, children: string }) => {
-	const text = <p style={{ marginRight: '5px' }}>нажми меня!</p>;
-	return (
-		<div className="button-with-label">
-			{text}
-			<Button onClick={onClick}>{children}</Button>
-		</div>
-	);
+export const ButtonWithLabel: FC<ButtonWithLabelProps> = ({label,  ...restProps}) => {
+  return (
+    <div className="button-with-label">
+      <p>{label}</p>
+      <Button {...restProps} />
+    </div>
+  );
 };

my-app/src/components/buttonWithLabel/style.scss

@@ -1,7 +1,7 @@
 .button-with-label {
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-	justify-content: center;
-	align-items: center;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+}

my-app/src/components/form/index.tsx

@@ -1,68 +1,55 @@
-import React, { useState, FormEvent, ChangeEvent } from 'react';
-import './style.scss';
-
-interface FormProps {
-    onUserAddition: (user: any) => void; // Принимаем функцию для обновления состояния верхнего компонента
-}
+import React, { useState, FormEvent, ChangeEvent } from "react";
+import "./style.scss";
+import { FormProps } from "../../types/types";
+import { addUser } from "../../client/api";
 
 const Form: React.FC<FormProps> = ({ onUserAddition }) => {
-	const [username, setUsername] = useState<string>('');
-	const [phone, setPhone] = useState<string>('');
-	const [website, setWebsite] = useState<string>('');
-
-	const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
-		setUsername(event.target.value);
-	};
-
-	const handlePhoneChange = (event: ChangeEvent<HTMLInputElement>) => {
-		setPhone(event.target.value);
-	};
-
-	const handlewebsiteChange = (event: ChangeEvent<HTMLInputElement>) => {
-		setWebsite(event.target.value);
-	};
-
-	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-		event.preventDefault();
-
-		fetch('https://jsonplaceholder.typicode.com/users', {
-			method: 'POST',
-			body: JSON.stringify({
-				username,
-				phone,
-				website,
-			}),
-			headers: {
-				'Content-type': 'application/json; charset=UTF-8',
-			},
-		})
-			.then((response) => response.json())
-			.then((user) => onUserAddition(user));
-	};
-
-	return (
-		<form onSubmit={handleSubmit} className="form-container">
-			<div>
-				<label>
-					Username:
-					<input type="text" value={username} onChange={handleUsernameChange} />
-				</label>
-			</div>
-			<div>
-				<label>
-					Phone:
-					<input type="text" value={phone} onChange={handlePhoneChange} />
-				</label>
-			</div>
-			<div>
-				<label>
-					Website:
-					<input type="email" value={website} onChange={handlewebsiteChange} />
-				</label>
-			</div>
-			<button className='button' type="submit">Submit</button>
-		</form>
-	);
+  const [username, setUsername] = useState<string>("");
+  const [phone, setPhone] = useState<string>("");
+  const [website, setWebsite] = useState<string>("");
+
+  const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setUsername(event.target.value);
+  };
+
+  const handlePhoneChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPhone(event.target.value);
+  };
+
+  const handlewebsiteChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setWebsite(event.target.value);
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    addUser({ username, phone, website }).then((user) => onUserAddition(user));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="form-container">
+      <div>
+        <label>
+          Username:
+          <input type="text" value={username} onChange={handleUsernameChange} />
+        </label>
+      </div>
+      <div>
+        <label>
+          Phone:
+          <input type="text" value={phone} onChange={handlePhoneChange} />
+        </label>
+      </div>
+      <div>
+        <label>
+          Website:
+          <input type="email" value={website} onChange={handlewebsiteChange} />
+        </label>
+      </div>
+      <button className="button" type="submit">
+        Submit
+      </button>
+    </form>
+  );
 };
 
 export default Form;

my-app/src/components/form/style.scss

@@ -1,32 +1,31 @@
 .form-container {
-	width: 300px;
-	margin: 0 auto;
-  }
-
-  label {
-	display: block;
-	margin-bottom: 10px;
-  }
-
-  input {
-	width: 100%;
-	padding: 5px;
-	margin-top: 5px;
-	border-radius: 4px;
-	border: 1px solid #ccc;
-  }
-
-  .button {
-	margin-top: 10px;
-	padding: 8px 16px;
-	border: none;
-	border-radius: 4px;
-	background-color: #007bff;
-	color: #fff;
-	cursor: pointer;
-  }
-
-  button:hover {
-	background-color: #0056b3;
-  }
-
+  width: 300px;
+  margin: 0 auto;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+input {
+  width: 100%;
+  padding: 5px;
+  margin-top: 5px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.button {
+  margin-top: 10px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}

my-app/src/components/memberCard/index.tsx

@@ -1,14 +1,13 @@
 import { FC } from "react";
 import "./style.scss";
-
-import { UserProps } from "./types";
+import { UserProps } from "../../types/types";
 import { CardInfo } from "./parts/cardInfo";
 
-export const MemberCard: FC<UserProps> = ({ name, username, phone, website }) => {
+export const MemberCard: FC<UserProps> = ({ name, ...restProps }) => {
   return (
     <div className="member-card">
       <p className="title">{name}</p>
-      <CardInfo  username={username} phone={phone} website={website} />
+      <CardInfo {...restProps} />
     </div>
   );
 };

my-app/src/components/memberCard/parts/cardInfo.tsx

@@ -1,15 +1,13 @@
-import { FC, useEffect } from "react";
+import { FC } from "react";
 import "../style.scss";
-
-import { UserProps } from "../types";
+import { UserProps } from "../../../types/types";
 
 export const CardInfo: FC<UserProps> = ({ phone, username, website }) => {
-
-	return (
-		<div className="info">
-			<p className="list-item">Username: {username}</p>
-			<p className="list-item">Phone: {phone}</p>
-			<p className="list-item">Website: {website}</p>
-		</div>
-	);
-};
+  return (
+    <div className="info">
+      <p className="list-item">Username: {username}</p>
+      <p className="list-item">Phone: {phone}</p>
+      <p className="list-item">Website: {website}</p>
+    </div>
+  );
+};