React patterns

my-app/src/App.tsx

@@ -1,48 +1,25 @@
 import "./App.scss";
 import { MemberCard } from "../src/components/memberCard";
-import { useEffect, useState } from "react";
+import {useState} from "react";
 import { UserProps } from "./components/memberCard/types";
-import { ButtonWithLabel } from "./components/buttonWithLabel";
 import Form from "./components/form";
 import { Tabs } from "./components/tabs";
+import {UserList} from "./components/userList/UserList";
 
 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);
-
-  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 handleUserAddition = (user: UserProps) => {
-    setAddedUser(user);
-};
+  const [addedUser, setAddedUser] = useState<UserProps | null>(null);
+
+  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}
-                />
-            )}
+      {!tabForm && <UserList/>}
+      {tabForm && <Form onUserAddition={onUserAddition} />}
+      {addedUser && (<MemberCard name={addedUser.name} phone={addedUser.phone} username={addedUser.username} website={addedUser.website}/>)}
     </div>
   );
 }

my-app/src/client/api.ts

@@ -0,0 +1,16 @@
+const apiUrl = "https://jsonplaceholder.typicode.com/users";
+
+export const getUsers = fetch(apiUrl)
+    .then((response) => response.json());
+
+export const addUser = (username: string, phone: string, website: string) => fetch(apiUrl, {
+    method: 'POST',
+    body: JSON.stringify({
+        username,
+        phone,
+        website,
+    }),
+    headers: {
+        'Content-type': 'application/json; charset=UTF-8',
+    },
+}).then((response) => response.json());

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

@@ -1,6 +1,8 @@
 import "./style.scss";
+import {FC} from "react";
+import {ButtonProps} from "./types";
 
-export const Button = ({ onClick, children }: {onClick: () => void, children?: string}) => {
+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,13 @@
 .button {
-	padding: 10px;
-	border-radius: 5px;
-	background-color: antiquewhite;
+	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/button/types.ts

@@ -0,0 +1,4 @@
+export interface ButtonProps {
+    onClick: () => void,
+    children?: string
+}

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";
 
-export const ButtonWithLabel = ({ onClick, children }: { onClick: () => void, children: string }) => {
-	const text = <p style={{ marginRight: '5px' }}>нажми меня!</p>;
+export const ButtonWithLabel : FC<ButtonWithLabelProps> = ({label, ...restProps}) => {
 	return (
 		<div className="button-with-label">
-			{text}
-			<Button onClick={onClick}>{children}</Button>
+			<p>{label}</p>
+			<Button {...restProps}/>
 		</div>
 	);
 };

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

@@ -1,7 +1,11 @@
 .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;
+
+  p {
+    margin-right: 5px;
+  }
 }

my-app/src/components/buttonWithLabel/types.ts

@@ -0,0 +1,5 @@
+export interface ButtonWithLabelProps { 
+    onClick: () => void, 
+    children: string,
+    label: string
+}

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

@@ -1,14 +1,13 @@
 import React, { useState, FormEvent, ChangeEvent } from 'react';
 import './style.scss';
-
-interface FormProps {
-    onUserAddition: (user: any) => void; // Принимаем функцию для обновления состояния верхнего компонента
-}
+import {FormProps} from "./types";
+import {useUsers} from "../../hooks/useUsers";
 
 const Form: React.FC<FormProps> = ({ onUserAddition }) => {
 	const [username, setUsername] = useState<string>('');
 	const [phone, setPhone] = useState<string>('');
 	const [website, setWebsite] = useState<string>('');
+	const {setUser} = useUsers();
 
 	const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setUsername(event.target.value);
@@ -24,21 +23,8 @@ const Form: React.FC<FormProps> = ({ onUserAddition }) => {
 
 	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));
-	};
+		setUser(username, phone, website).then((user) => onUserAddition(user));
+	}
 
 	return (
 		<form onSubmit={handleSubmit} className="form-container">
@@ -65,4 +51,4 @@ const Form: React.FC<FormProps> = ({ onUserAddition }) => {
 	);
 };
 
-export default Form;
+export default Form;

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

@@ -14,19 +14,4 @@
 	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/form/types.ts

@@ -0,0 +1,5 @@
+import {UserProps} from "../memberCard/types";
+
+export interface FormProps {
+    onUserAddition: (user : UserProps) => void; // Принимаем функцию для обновления состояния верхнего компонента
+}

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

@@ -1,14 +1,13 @@
 import { FC } from "react";
 import "./style.scss";
-
 import { UserProps } from "./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/types.ts

@@ -3,5 +3,4 @@ export interface UserProps {
 	username: string;
 	phone: string;
 	website: string;
-  }
-
+}

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

@@ -1,11 +1,13 @@
 import { Button } from "../button";
-
-export const Tabs = ({ onChange }: { onChange: (tab: boolean) => void }) => {
+import "./style.scss";
+import {FC} from "react";
+import {TabsProps} from "./types";
+export const Tabs : FC<TabsProps> = ({ onChange }) => {
 
 	return (
-		<div style={{ width: '100%', display: 'flex', gap: '15px', justifyContent: 'center', marginBottom: '20px' }}>
-			<Button onClick={() => onChange(false)}>form</Button>
-			<Button onClick={() => onChange(true)}>users</Button>
+		<div className="tab">
+			<Button onClick={() => onChange(false)}>users</Button>
+			<Button onClick={() => onChange(true)}>form</Button>
 		</div>
 	);
 };

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

@@ -0,0 +1,7 @@
+.tab {
+  width: 100%; 
+  display: flex;
+  gap: 15px;
+  justify-content: center; 
+  margin-bottom: 20px
+}

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

@@ -0,0 +1,3 @@
+export interface TabsProps { 
+    onChange: (tab: boolean) => void 
+}

my-app/src/components/userList/UserList.tsx

@@ -0,0 +1,24 @@
+import {MemberCard} from "../memberCard";
+import {ButtonWithLabel} from "../buttonWithLabel";
+import {useUsers} from "../../hooks/useUsers";
+import {useEffect} from "react";
+
+export const UserList = () => {
+    const {users, setUserList} = useUsers();
+    useEffect(() => {
+        setUserList();
+    }, []);
+
+    const onButtonClick = () => {
+        setUserList();
+    };
+
+    return (
+        <>
+            {users.map((user) => {
+                return <MemberCard key={user.name} name={user.name} phone={user.phone} username={user.username} website={user.website} />
+            })}
+            <ButtonWithLabel onClick={onButtonClick} label="нажми меня!">more users</ButtonWithLabel>
+        </>
+    );
+};

my-app/src/hooks/useUsers.ts

@@ -0,0 +1,23 @@
+import {useState} from "react";
+import {addUser, getUsers} from "../client/api";
+import {UserProps} from "../components/memberCard/types";
+
+export const useUsers = () => {
+    const [users, setUsers] = useState<UserProps[]>([]);
+
+    const setUserList = () => {
+        getUsers.then((data : UserProps[]) => {
+            setUsers(data)
+        });
+    }
+
+    const setUser = (username: string, phone: string, website: string) => {
+        return addUser(username, phone, website)
+    }
+
+    return {
+        users,
+        setUser,
+        setUserList
+    }
+}