task done

labs/lab4/src/App.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import Table from './components/Table.jsx';
 import buildings from './data.js';
 import './CSS/App.css'
+import  Task from './Task.jsx'
 function App() {
   const [count, setCount] = useState(0)
 
@@ -9,6 +10,7 @@ function App() {
     <div className="App">
        <h3>Самые высокие здания и сооружения</h3>
         <Table data={ buildings } amountRows="15" />
+        <Task/>
     </div>
   )
 }

labs/lab4/src/Task.jsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+const ClickableEntry = (props)=>{
+    const [clickCount,updateClickCount] = useState(0)
+
+    const clickHandler = (event)=>{
+        updateClickCount(clickCount+1);
+        props.updateTotoal();
+    }
+
+    return(
+        <li onClick={clickHandler}>{props.text}{clickCount>0 && `(${clickCount})`}</li>
+    )
+
+}
+
+const Task = (props)=>{
+    const [totalClickCount,updateTotalClickCount] = useState(0)
+    const addOne =()=>{
+        updateTotalClickCount(totalClickCount+1);
+    } 
+    const books = ['Мастер и Маргарита',
+        'Белая гвардия',
+        'Война и мир',
+        'Анна карненина',
+        'Игрок',
+    ]
+    return(
+        <>
+        <ul>
+        {books.map((x,i)=><ClickableEntry text={x} key={i} updateTotoal={addOne}/>)}
+        </ul>
+        <p>Totoal:{totalClickCount}</p>
+        </>
+    )
+}
+
+
+export default Task;

labs/lab4/src/components/Filter.jsx

@@ -34,8 +34,15 @@ const Filter = (props) => {
         //передаем родительскому компоненту новое состояние - отфильтрованный массив
         props.filtering(arr);
     }
+        const doReset=(event)=>{
+        event.target.querySelectorAll("input[type=\"number\"],input[type=\"text\"]").forEach(element => {
+            element.value=null;
+        });
+        handleSubmit(event);
+
+    }    
     return (
-        <form onSubmit={handleSubmit} onReset={handleSubmit}>
+        <form onSubmit={handleSubmit} onReset={doReset}>
             <p>
                 <label>Название:</label>
                 <input name="structure" type="text" />

labs/lab4/src/components/Table.jsx

@@ -20,7 +20,12 @@ const Table = (props) => {
     };
 
     //количество страниц разбиения таблицы
-    const n = Math.ceil(dataTable.length / props.amountRows);
+    let n = Math.ceil(dataTable.length / props.amountRows);
+    let rowCount = props.amountRows;
+    if(props.disablePagination){
+        n=1;
+        rowCount=dataTable.length;
+    }
 
     // массив с номерами страниц
     const arr = Array.from({ length: n }, (v, i) => i + 1);
@@ -37,7 +42,7 @@ const Table = (props) => {
 
             <table>
                 <TableHead head={Object.keys(props.data[0])} />
-                <TableBody body={dataTable} amountRows={props.amountRows} numPage={activePage} />
+                <TableBody body={dataTable} amountRows={rowCount} numPage={activePage} />
             </table>
 
             {n>1 &&