Рефакторинг

my-app/src/App.scss

@@ -14,4 +14,13 @@
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
+}
+
+.button-with-label {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	justify-content: center;
+	align-items: center;
+  padding-top: 12px;
 }

my-app/src/App.tsx

@@ -2,47 +2,60 @@ 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 Form from "./components/form";
+import { Form } from "./components/form";
 import { Tabs } from "./components/tabs";
+import { TABS_NAME } from "./components/tabs/const";
+import { Button } from "./components/button";
+
+const START_COUNT_USER = 1;
+const INCREASE_COUNT_USER = 5;
 
 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 [lastAddedUser, setLastAddedUser] = useState<UserProps | null>(null);
+  const [tabForm, setTabForm] = useState(TABS_NAME.FORM);
+  const [countShowUser, setCountShowUser] = useState(START_COUNT_USER);
 
   useEffect(() => {
     fetch('https://jsonplaceholder.typicode.com/users')
       .then((response) => response.json())
       .then((res) => setUsers(res));
   }, []);
 
-  const onButtonClick = () => {
-    fetch('https://jsonplaceholder.typicode.com/users')
-    .then((response) => response.json())
-    .then((res) => setMoreUsers(res));
+  const handleMoreUsersClick = () => {
+    setCountShowUser((value) => value + INCREASE_COUNT_USER);
   };
 
   const handleUserAddition = (user: UserProps) => {
-    setAddedUser(user);
-};
+    setLastAddedUser(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 == TABS_NAME.USERS &&
+        <div>
+          {users.slice(0, countShowUser)
+            .map((user: UserProps) => <MemberCard key={user.phone} {...user} />)}
+
+          <div className="button-with-label">
+            <p style={{ marginRight: '5px' }}>нажми меня!</p>
+            <Button onClick={handleMoreUsersClick}>more users</Button>
+          </div>
+        </div>
+      }
+
+      {tabForm == TABS_NAME.FORM &&
+        <Form onUserAddition={handleUserAddition} />
+      }
+
+      {lastAddedUser &&
+        <div>
+          Последний добавленный пользователь:
+          <MemberCard {...lastAddedUser} />
+        </div>
+      }
     </div>
   );
 }

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

@@ -0,0 +1,13 @@
+import "./style.scss";
+
+export interface IButtonProps {
+	onClick: () => void;
+	children?: string;
+}
+
+export const Button = ({ onClick, children }: IButtonProps) => {
+
+	return (
+		<button className="button" onClick={onClick}>{children}</button>
+	);
+};

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

@@ -0,0 +1 @@
+export * from './Button';

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

@@ -1,25 +1,28 @@
-import React, { useState, FormEvent, ChangeEvent } from 'react';
+import React, { useState, FormEvent, ChangeEvent, memo } from 'react';
 import './style.scss';
+import { UserProps } from '../memberCard/types';
 
 interface FormProps {
-    onUserAddition: (user: any) => void; // Принимаем функцию для обновления состояния верхнего компонента
+	onUserAddition: (user: UserProps) => void; // Принимаем функцию для обновления состояния верхнего компонента
 }
 
-const Form: React.FC<FormProps> = ({ onUserAddition }) => {
+export const Form: React.FC<FormProps> = memo(({ 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 handleFieldUpdate = (event: ChangeEvent<HTMLInputElement>) => {
+		switch (event.target.name) {
+			case "username":
+				setUsername(event.target.value);
+				break;
+			case "phone":
+				setPhone(event.target.value);
+				break;
+			case "website":
+				setWebsite(event.target.value);
+				break;
+		}
 	};
 
 	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -45,24 +48,22 @@ const Form: React.FC<FormProps> = ({ onUserAddition }) => {
 			<div>
 				<label>
 					Username:
-					<input type="text" value={username} onChange={handleUsernameChange} />
+					<input type="text" name="username" value={username} onChange={handleFieldUpdate} />
 				</label>
 			</div>
 			<div>
 				<label>
 					Phone:
-					<input type="text" value={phone} onChange={handlePhoneChange} />
+					<input type="text" name="phone" value={phone} onChange={handleFieldUpdate} />
 				</label>
 			</div>
 			<div>
 				<label>
 					Website:
-					<input type="email" value={website} onChange={handlewebsiteChange} />
+					<input type="email" name="website" value={website} onChange={handleFieldUpdate} />
 				</label>
 			</div>
 			<button className='button' type="submit">Submit</button>
 		</form>
 	);
-};
-
-export default Form;
+});

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

@@ -0,0 +1 @@
+export * from './Form';

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

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

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

@@ -0,0 +1 @@
+export * from './MemberCard';

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

@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import { FC } from "react";
 import "../style.scss";
 
 import { UserProps } from "../types";

my-app/src/components/tabs/Tabs.tsx

@@ -0,0 +1,16 @@
+import { Button } from "../button";
+import { TABS_NAME } from "./const";
+
+export interface ITabsProps {
+	onChange: (tab: TABS_NAME) => void;
+}
+
+export const Tabs = ({ onChange }: ITabsProps) => {
+
+	return (
+		<div style={{ width: '100%', display: 'flex', gap: '15px', justifyContent: 'center', marginBottom: '20px' }}>
+			<Button onClick={() => onChange(TABS_NAME.FORM)}>form</Button>
+			<Button onClick={() => onChange(TABS_NAME.USERS)}>users</Button>
+		</div>
+	);
+};

my-app/src/components/tabs/const.ts

@@ -0,0 +1,4 @@
+export enum TABS_NAME {
+    FORM = 'form',
+    USERS = 'users',
+}

my-app/src/components/tabs/index.ts

@@ -0,0 +1 @@
+export * from './Tabs';