classwork_54

src/components/Counter/Counter.css

+.Counter-text {
+  font-size: 2rem;
+  font-weight: 900;
+}
+
+.text-green {
+  color: green;
+}
+
+.text-red {
+  color: red;
+}

src/components/Counter/Counter.tsx

+import "./Counter.css";
+
+interface Props {
+  value: number;
+}
+
+const Counter = ({ value }: Props): JSX.Element => {
+  const counterClasses = ["Counter-text"];
+  if (value < 2) {
+    counterClasses.push("text-red");
+  } else {
+    counterClasses.push("text-green");
+  }
+  counterClasses;
+
+  return (
+    <div>
+      <p className={counterClasses.join(" ")}>people count: {value}</p>
+    </div>
+  );
+};
+
+export default Counter;

src/components/People/People.tsx

+import type { ChangeEvent } from "react";
+import Person from "./Person/Person";
+import IPerson from "../../interfaces/IPerson";
+
+type People = (IPerson & { hobby: string })[];
+
+interface Props {
+  people: People;
+  onClickHeader(id: string): void;
+  onChangeName(e: ChangeEvent<HTMLInputElement>, id: string): void;
+  onRemove(id: string): void;
+}
+
+const People = ({
+  people,
+  onClickHeader,
+  onChangeName,
+  onRemove,
+}: Props): JSX.Element => {
+  return (
+    <div>
+      {people.map((person) => {
+        return (
+          <Person
+            key={person.id}
+            name={person.name}
+            age={person.age}
+            onClickHeader={() => {
+              onClickHeader(person.id);
+            }}
+            onChangeHandler={(e) => {
+              onChangeName(e, person.id);
+            }}
+            onRemoveHandler={() => {
+              onRemove(person.id);
+            }}
+          >
+            hobby:{person.hobby}
+          </Person>
+        );
+      })}
+    </div>
+  );
+};
+
+export default People;

src/Person/Person.tsx → src/components/People/Person/Person.tsx

 import type { ReactNode, MouseEventHandler, ChangeEventHandler } from "react";
-import type IPerson from "../interfaces/IPerson";
+import type IPerson from "../../../interfaces/IPerson";
 
 type Props = Omit<IPerson, "id"> & {
   children?: ReactNode;

src/components/ToggleButton/ToggleButton.tsx

+import { MouseEventHandler, ReactNode } from "react";
+
+const ToggleButton = ({
+  isToggle,
+  onClick,
+  hideText = "Hide",
+  showText = "Show",
+}: {
+  isToggle: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  hideText?: ReactNode;
+  showText?: ReactNode;
+}) => {
+  const buttonClasses = ["button "];
+  if (isToggle) {
+    buttonClasses.push("red");
+  }
+  return (
+    <button
+      style={{ marginTop: "10px" }}
+      className={buttonClasses.join(" ")}
+      onClick={onClick}
+    >
+      {isToggle ? hideText : showText}
+    </button>
+  );
+};
+
+export default ToggleButton;

src/App.css → src/containers/App.css

+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .person {
   display: inline-block;
   position: relative;
@@ -33,3 +39,25 @@
 .removeBtn:hover {
   color: red;
 }
+
+.App .button {
+  color: white;
+  background: green;
+  border-radius: 3px;
+  border-color: green;
+  padding: 1rem;
+}
+.App .button:hover {
+  background: #01da01;
+  border-color: #01da01;
+}
+
+.App .red {
+  background-color: red;
+  border-color: red;
+}
+
+.App .button.red:hover {
+  background: #fa6262;
+  border-color: #fa6262;
+}

src/App.tsx → src/containers/App.tsx

 import type { ChangeEvent } from "react";
 import { useState } from "react";
 import "./App.css";
-import Person from "./Person/Person";
-import IPerson from "./interfaces/IPerson";
+import IPerson from "../interfaces/IPerson";
+import People from "../components/People/People";
+import Counter from "../components/Counter/Counter";
+import ToggleButton from "../components/ToggleButton/ToggleButton";
 
 type State = (IPerson & {
   hobby: string;
@@ -48,10 +50,8 @@ const App = () => {
     setPeople(copyPeople);
   };
 
-  const changeNameHandler = (
-    e: ChangeEvent<HTMLInputElement>,
-    index: number
-  ) => {
+  const changeNameHandler = (e: ChangeEvent<HTMLInputElement>, id: string) => {
+    const index = people.findIndex((person) => person.id === id);
     const copyPeople = structuredClone(people);
     copyPeople[index].name = e.target.value;
 
@@ -62,44 +62,32 @@ const App = () => {
     setIsShowPeople(!isShowPeople);
   };
 
-  const removePerson = (index: number): void => {
+  const removePerson = (id: string): void => {
+    const index = people.findIndex((person) => person.id === id);
     const copyPeople = structuredClone(people);
     copyPeople.splice(index, 1);
     setPeople(copyPeople);
-    // setPeople((currentState) => {
-    //   console.log(currentState);
-
-    //   return copyPeople;
-    // });
   };
-  console.log("in App", people);
+
+  const peopleList = isShowPeople ? (
+    <People
+      onChangeName={changeNameHandler}
+      onClickHeader={increaseAge}
+      onRemove={removePerson}
+      people={people}
+    />
+  ) : null;
+  const showText = <span>"Show people"</span>;
   return (
     <>
       <div className="App">
-        <button onClick={toggleIsShowPeople}>
-          {isShowPeople ? "hide" : "show"}
-        </button>
-        {isShowPeople &&
-          people.map((person, index) => {
-            return (
-              <Person
-                key={person.id}
-                name={person.name}
-                age={person.age}
-                onClickHeader={() => {
-                  increaseAge(person.id);
-                }}
-                onChangeHandler={(e) => {
-                  changeNameHandler(e, index);
-                }}
-                onRemoveHandler={() => {
-                  removePerson(index);
-                }}
-              >
-                hobby:{person.hobby}
-              </Person>
-            );
-          })}
+        <ToggleButton
+          showText={showText}
+          onClick={toggleIsShowPeople}
+          isToggle={isShowPeople}
+        />
+        <Counter value={people.length} />
+        {peopleList}
       </div>
     </>
   );

src/main.tsx

-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./containers/App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);