Here's parent component:
const Page = () => {
const { user } = useAuth();
const router = useRouter();
const [allUsers, setAllUsers] = useState([]);
const [search, useSearch] = useState("");
useEffect(
() => {
if (user !== null && user.isAdmin) {
const token = localStorage.getItem("token");
api
.get("/users", {
headers: {
authorization: `Bearer ${token}`,
},
})
.then((data) => {
setAllUsers(data.data);
})
.catch((error) => {
if (error.message === "Request failed with status code 401") {
const refresh_token = localStorage.getItem("refresh_token");
const refresh = api
.post("/auth/refresh", {
refresh_token,
})
.then((req) => {
if (refresh.data.token && refresh.data.refresh_token) {
localStorage.setItem("token", refresh.data.token);
localStorage.setItem(
"refresh_token",
refresh.data.refresh_token
);
api
.get("/users", {
headers: {
authorization: `Bearer ${refresh.data.token}`,
},
})
.then((req) => {
setAllUsers(req.data);
});
}
})
.catch((error) => {
if (error.message === "Request failed with status code 400") {
if (error.response.data.message
=== "Refresh Token não encontrado."
) {
router.push("/");
}
}
});
}
});
} else if (!user) {
router.push("/404");
} else {
router.push("/auth/login");
}
},
[user, router]
);
useEffect(
() => {
const filterSearch = () => {
if (search === "") return allUsers;
return allUsers.filter((user) => user._id.includes(search));
};
const filtered = filterSearch(search);
setAllUsers(filtered);
},
[search, allUsers],
search
);
const useConsultasPagination = (data, page, rowsPerPage) => {
return useMemo(() => {
return applyPagination(data, page, rowsPerPage);
}, [data, page, rowsPerPage]);
};
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const keys = useConsultasPagination(allUsers, page, rowsPerPage);
const handlePageChange = useCallback((event, value) => {
setPage(value);
}, []);
const handleRowsPerPageChange = useCallback((event) => {
setRowsPerPage(event.target.value);
}, []);
if (user !== null && user.isAdmin) {
return (
Search | API
Users
);
} else {
router.push("/404");
}
}
And here's search bar's component:
export const UsersSearch = (props) => {
const {
setAllUsers = () => {},
allUsers = [],
search = "",
useSearch = () => {}
} = props;
const { user } = useAuth();
const router = useRouter();
const SetSearch = (value) => {
useSearch(value);
};
const HandleInputChange = (event) => {
console.log('a')
event.preventDefault();
const target = event.target;
const value = target.value;
if (value === "") {
SetSearch("")
} else {
SetSearch(value);
}
};
if (user.isAdmin) {
return (
);
} else {
router.push("/404");
}
};
The problem I'm facing is that, everytime a change the text in the search I get an infinite loop, although the search feature works (and when I remove all the text from the bar it doesn't comes back to the initial allUsers value).
Help me please :)
Changed the useEffect from causing another loop
No comments:
Post a Comment
Thanks