Search bar fixes and performance updates
This commit is contained in:
@@ -38,6 +38,8 @@ const ApplicationSettings = () => {
|
||||
index: 0,
|
||||
enabled: 1,
|
||||
};
|
||||
const [searchValue, setSearchValue] = useState<string | number>('');
|
||||
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
|
||||
const form = useForm({
|
||||
initialValues: defaultApplication,
|
||||
validate: {
|
||||
@@ -49,19 +51,21 @@ const ApplicationSettings = () => {
|
||||
});
|
||||
const appsEndpoint = 'api/applications';
|
||||
const appsOrderEndpoint = 'api/applicationOrder';
|
||||
const {
|
||||
data: applicationData,
|
||||
isFetched: applicationDataIsFetched,
|
||||
isFetching: applicationDataIsFetching,
|
||||
} = useQueryAPI({
|
||||
const { data: applicationData, isFetching: applicationDataIsFetching } = useQueryAPI({
|
||||
endpoint: appsEndpoint,
|
||||
});
|
||||
const [applications, setApplications] = useState<Application[]>([]);
|
||||
const applications: Application[] =
|
||||
applicationData
|
||||
.filter(
|
||||
(a: Application) =>
|
||||
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
|
||||
a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
|
||||
a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
|
||||
)
|
||||
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)) || [];
|
||||
const [applicationList, setApplicationList] = useState<Application[]>([]);
|
||||
const { isMobile, reorder, theme } = useCommonHooks();
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [searchValue, setSearchValue] = useState<string | number>('');
|
||||
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -93,22 +97,10 @@ const ApplicationSettings = () => {
|
||||
form.reset();
|
||||
};
|
||||
useEffect(() => {
|
||||
if (applicationData && applicationDataIsFetched) {
|
||||
setApplications(
|
||||
applicationData
|
||||
.filter(
|
||||
(a: Application) =>
|
||||
a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
|
||||
a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
|
||||
a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
|
||||
)
|
||||
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
|
||||
);
|
||||
}
|
||||
if (debouncedSearch === searchValue) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [applicationData, applicationDataIsFetched, debouncedSearch]);
|
||||
}, [debouncedSearch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (applicationList.length > 0 && applicationList !== applications) {
|
||||
|
||||
Reference in New Issue
Block a user