diff --git a/ui/src/authorizations/components/TokenList.tsx b/ui/src/authorizations/components/TokenList.tsx index 0e57b3e976..1ac962f92a 100644 --- a/ui/src/authorizations/components/TokenList.tsx +++ b/ui/src/authorizations/components/TokenList.tsx @@ -1,5 +1,7 @@ // Libraries import React, {PureComponent} from 'react' +import _ from 'lodash' +import memoizeOne from 'memoize-one' // Components import {EmptyState} from '@influxdata/clockface' @@ -29,21 +31,18 @@ interface Props { interface State { isTokenOverlayVisible: boolean authInView: Authorization - sortedAuths: Authorization[] } export default class TokenList extends PureComponent { - public static getDerivedStateFromProps(props: Props) { - return { - sortedAuths: getSortedResources(props.auths, props), - } - } + private memGetSortedResources = memoizeOne( + getSortedResources + ) + constructor(props) { super(props) this.state = { isTokenOverlayVisible: false, authInView: null, - sortedAuths: this.props.auths, } } @@ -82,7 +81,13 @@ export default class TokenList extends PureComponent { } private get rows(): JSX.Element[] { - const {sortedAuths} = this.state + const {auths, sortDirection, sortKey, sortType} = this.props + const sortedAuths = this.memGetSortedResources( + auths, + sortKey, + sortDirection, + sortType + ) return sortedAuths.map(auth => ( state - export enum SortTypes { String = 'string', } @@ -26,18 +23,18 @@ function orderByType(data, type) { } } -export const getSortedResources = createSelector( - resourceList, - sortSelector, - (resourceList, sort) => { - if (sort.key && sort.direction) { - return orderBy<{id: string}>( - resourceList, - r => orderByType(get(r, sort.key), sort.type), - [sort.direction] - ).map(r => r) - } - - return resourceList +export function getSortedResources( + resourceList: T[], + sortKey: string, + sortDirection: string, + sortType: string +): T[] { + if (sortKey && sortDirection) { + return orderBy( + resourceList, + r => orderByType(get(r, sortKey), sortType), + [sortDirection] + ).map(r => r) } -) + return resourceList +}