import PlusOutlined from "@ant-design/icons/PlusOutlined" ; import { IGroup } from "@staticdeploy/core" ; import isNil from "lodash/isNil" ; import React from "react" ; import { RouteComponentProps } from "react-router-dom" ; import { withData } from "../../components/DataFetcher" ; import LinksList from "../../components/LinksList" ; import ODItem from "../../components/OperationsDropdown/Item" ; import Page from "../../components/Page" ; import GroupCreateOperationModal from "./GroupCreateOperationModal" ; const GroupsLinksList = LinksList as new ( ) => LinksList < IGroup > ; interface IUrlParams { groupId ? : string ; } type Props = { result : IGroup [ ] ; refetch : ( ) => void ; } & RouteComponentProps < IUrlParams > ; class GroupsList extends React . Component < Props > { getActions ( ) { return [ < GroupCreateOperationModal key = "GroupCreateOperationModal" history = { this . props . history } trigger = { < ODItem icon = { < PlusOutlined / > } label = "Create group" / > } refetchGroupsList = { this . props . refetch } / > , ] ; } render ( ) { return ( < Page title = "Groups list" actions = { this . getActions ( ) } > < GroupsLinksList title = "Groups" items = { this . props . result } getDescription = { ( group ) => group . name } getHref = { ( group ) => `/groups/${ group . id }` } /> < /Page>); } } export default withData ( { fetchData : ( staticdeploy ) => staticdeploy . groups . getAll ( ) , shouldRefetch : ( oldProps , newProps ) => ! isNil ( oldProps . match . params . groupId ) && isNil ( newProps . match . params . groupId ) , spinnerSize : "large" , spinnerTip : "Fetching groups..." , Component : GroupsList , } ) ;