hw 4 done

site/src/components/Filter.jsx

@@ -36,8 +36,16 @@ 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>Type:</label>
                 <input name="type" type="text" />

site/src/components/Sorting.jsx

@@ -19,22 +19,24 @@ const SortLevel = (props) => {
 const Sorting = (props) => {
     const [selections, updateSelections] = useState([-1]);
     const [checkboxes, updateCheckboxes] = useState([0]);
+
     const updateOption = (x, id) => {
 
         selections[id] = x;
-        console.log("fixup function called")
+        // console.log("fixup function called")
         let checkboxesCopy = [...checkboxes];
         let selectionsCopy = selections.map((x, i, arr) => {
             if (i < id) {
-                console.log("a", i, x)
+                // console.log("a", i, x)
                 return x;
             }
             if (x != -1 && arr.indexOf(x) != i) {
-                let unusedoption =  
+                let unusedOption = Array.from({ length: props.keys.length }, (_, i) => i).filter((x) => !selections.slice(0, i).includes(x));
-                console.log("b", i, [0])
+                // console.log(unusedOption)
-                return unusedOption;
+                // console.log("b", i, [0])
+                return unusedOption[0];
             }
-            console.log("c", i,x)
+            // console.log("c", i,x)
 
             return x
         })
@@ -57,15 +59,54 @@ const Sorting = (props) => {
     const array = props.array;
     const keys = props.keys;
 
+    const clearSort = (event) => {
+        updateSelections([-1]);
+        updateCheckboxes([0]);
+        applySort();
+    }
 
+    const applySort = (event) => {
+        console.log("calling sort")
+
+        let inverse = [...checkboxes];
+        let selectionsCopy = [...selections];
+        inverse = inverse.filter((x, i) => selectionsCopy[i] != -1);
+        selectionsCopy = selectionsCopy.filter((x, i) => x != -1);
+        let keys = selectionsCopy.map((x) => props.keys[x]);
+        let sortArr = inverse.map((x, i) => {return { "column": keys[i], "direction":x }})
+        // console.log(sortArr)
+        let tempArr = [...props.data];
+        tempArr.sort((first, second) => {
+            for (let { column, direction } of sortArr) {
+                const firstCell = first[column];
+                const secondCell = second[column];
+                let comparison = null;
+                if (typeof (firstCell) != "string") {
+                    comparison = Number(firstCell) - Number(secondCell);
+                }
+                else {
+                    comparison = firstCell.localeCompare(secondCell);
+                }
+                // учитываем направление сортировки
+                if (comparison !== 0) {
+                    return (direction ? -comparison : comparison);
+                }
+            }
+            return 0;
+        });
+        props.returnDataCallback(tempArr);
+        // return tempArr;
+        // console.log(tempArr)
+
+    }
+    props.setApplySort({f:clearSort});
 
 
     return (
         <>
             {
-
                 selections.map((x, i, arr) => {
-                    let curenSelectiontArr = keys.filter((selection) => !arr.slice(0, i).includes(keys.indexOf(selection)))
+                    let curentSelectiontArr = keys.filter((selection) => !arr.slice(0, i).includes(keys.indexOf(selection)))
                     const upadteOptionWrap = (event) => {
                         // console.log(event);
                         updateOption(Number(event.target.value) - 1, i);
@@ -76,12 +117,14 @@ const Sorting = (props) => {
                         checkboxesCopy[i] = Number(event.target.checked);
                         updateCheckboxes(checkboxesCopy);
                     };
-                    if (curenSelectiontArr.length > 0) {
+                    if (curentSelectiontArr.length > 0) {
-                        return <SortLevel key={i} id={"SortLevel" + i} keys={keys} visible={curenSelectiontArr} updateCallback={upadteOptionWrap} checkboxUpdate={updateCheckBoxesWrap} selected={x + 1} reverse={checkboxes[i]} />
+                        return <SortLevel key={i} id={"SortLevel" + i} keys={keys} visible={curentSelectiontArr} updateCallback={upadteOptionWrap} checkboxUpdate={updateCheckBoxesWrap} selected={x + 1} reverse={checkboxes[i]} />
                     }
                 })
 
             }
+            <button onClick={applySort}>Apply Sort</button>
+            <button onClick={clearSort}>Clear Sort</button>
         </>
     )
 }

site/src/components/Table.jsx

@@ -14,8 +14,14 @@ const Table = (props) => {
     const [activePage, setActivePage] = useState("1");
 
     const [dataTable, setDataTable] = useState(props.data);
-    const updateDataTable = (value) => setDataTable(value);
+    const [applySort, setApplySort] = useState({f:(x)=>{x}});
 
+
+
+    const updateDataTable = (value) => {
+        applySort.f();
+        setDataTable(value);
+    }
     const changeActive = (event) => {
         setActivePage(event.target.innerHTML);
     };
@@ -38,7 +44,7 @@ const Table = (props) => {
 
 
             <h4>Sort by</h4>
-            <Sorting data = {dataTable} keys = {Object.keys(props.data[0])}/>
+            <Sorting data = {dataTable} keys = {Object.keys(props.data[0])} returnDataCallback={setDataTable} setApplySort={setApplySort}/>
 
             <table>
                 <TableHead head={Object.keys(props.data[0])} />