Memo-ise list hook functions (#1329)

This commit is contained in:
WithoutPants
2021-04-28 09:12:35 +10:00
committed by GitHub
parent 70b66d91a0
commit fe0c5615a6

View File

@@ -1,6 +1,12 @@
import _ from "lodash"; import _ from "lodash";
import queryString from "query-string"; import queryString from "query-string";
import React, { useCallback, useRef, useState, useEffect } from "react"; import React, {
useCallback,
useRef,
useState,
useEffect,
useMemo,
} from "react";
import { ApolloError } from "@apollo/client"; import { ApolloError } from "@apollo/client";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
import Mousetrap from "mousetrap"; import Mousetrap from "mousetrap";
@@ -525,26 +531,34 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
options.persistState, options.persistState,
]); ]);
function updateQueryParams(listFilter: ListFilterModel) { const updateQueryParams = useCallback(
setFilter(listFilter); (listFilter: ListFilterModel) => {
const newLocation = { ...location }; setFilter(listFilter);
newLocation.search = listFilter.makeQueryParameters(); const newLocation = { ...location };
history.replace(newLocation); newLocation.search = listFilter.makeQueryParameters();
if (options.persistState) { history.replace(newLocation);
updateInterfaceConfig(listFilter, options.persistState); if (options.persistState) {
} updateInterfaceConfig(listFilter, options.persistState);
} }
},
[setFilter, history, location, options.persistState, updateInterfaceConfig]
);
const onChangePage = (page: number) => { const onChangePage = useCallback(
const newFilter = _.cloneDeep(filter); (page: number) => {
newFilter.currentPage = page; const newFilter = _.cloneDeep(filter);
updateQueryParams(newFilter); newFilter.currentPage = page;
window.scrollTo(0, 0); updateQueryParams(newFilter);
}; window.scrollTo(0, 0);
},
[filter, updateQueryParams]
);
const renderFilter = !options.filterHook const renderFilter = useMemo(() => {
? filter return !options.filterHook
: options.filterHook(_.cloneDeep(filter)); ? filter
: options.filterHook(_.cloneDeep(filter));
}, [filter, options]);
const { contentTemplate, onSelectChange } = RenderList({ const { contentTemplate, onSelectChange } = RenderList({
...options, ...options,