/
Entries.jsx
65 lines (57 loc) · 1.67 KB
/
Entries.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { useState, useMemo } from "react";
import debounce from "lodash.debounce";
import useFetchPromiseAll from "../hooks/useFetchPromiseAll";
import ProcessUser from "./ProcessUser";
import Input from "./Input";
const params = ["users", "posts"];
function Entries() {
const { users, posts } = useFetchPromiseAll(params);
const [input, setInput] = useState("");
const [openedSubFolders, setOpenedSubFolders] = useState({});
const entries = useMemo(() => {
return users?.map((user) => {
user[params[1]] = posts.filter((post) => post.userId === user.id);
return user;
});
}, [users, posts]);
const changeHandler = (event) => {
setInput(event.target.value);
};
const debouncedChangeHandler = useMemo(() => {
return debounce(changeHandler, 300);
}, []);
const searchEntry = (entry) => {
const queue = [...Object.values(entry)];
while (queue.length > 0) {
const element = queue.shift();
if (typeof element === "object") {
queue.push(...Object.values(element));
} else {
if (element.toString().toLowerCase().includes(input.toLowerCase())) {
return true;
}
}
}
};
const filtered = entries?.filter((entry) => {
return searchEntry(entry);
});
return (
<>
<Input value={input} onChange={debouncedChangeHandler} />
{filtered?.map((userObj) => {
return (
<ProcessUser
openedSubFolders={openedSubFolders}
setOpenedSubFolders={setOpenedSubFolders}
key={userObj.id}
user={userObj}
depth={0}
input={input}
/>
);
})}
</>
);
}
export default Entries;