grafana/public/app/features/teams/state/reducers.ts
Karl Persson 9283773c12
Teams: Support paginating and filtering more then 1000 teams (#58761)
* TeamList: break out rows to its own component

* TeamsState: Add total count

* TeamList: Remove teamsCount prop

* TeamList: Restructure code and use count from backend response

* TeamList: calculate total pages using totalCount

* TeamList: Rename to state to currentPage and the reducer to
setCurrentPage

* TeamList: remove wrapper functions

* TeamList: rewrite as a functional component

* TeamList: export components for test

* TeamList: pass limit, page and query to backend

* TeamList: Rename properties in state and create actions for page and
query change

* TeamList: Add flag to control if EmptyList banner should render
2022-11-16 15:55:10 +01:00

79 lines
2.2 KiB
TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Team, TeamGroup, TeamMember, TeamsState, TeamState } from 'app/types';
export const initialTeamsState: TeamsState = {
teams: [],
page: 1,
query: '',
perPage: 30,
totalPages: 0,
noTeams: false,
hasFetched: false,
};
type TeamsFetched = {
teams: Team[];
page: number;
perPage: number;
noTeams: boolean;
totalCount: number;
};
const teamsSlice = createSlice({
name: 'teams',
initialState: initialTeamsState,
reducers: {
teamsLoaded: (state, action: PayloadAction<TeamsFetched>): TeamsState => {
const { totalCount, perPage, ...rest } = action.payload;
const totalPages = Math.ceil(totalCount / perPage);
return { ...state, ...rest, totalPages, perPage, hasFetched: true };
},
queryChanged: (state, action: PayloadAction<string>): TeamsState => {
return { ...state, page: 1, query: action.payload };
},
pageChanged: (state, action: PayloadAction<number>): TeamsState => {
return { ...state, page: action.payload };
},
},
});
export const { teamsLoaded, queryChanged, pageChanged } = teamsSlice.actions;
export const teamsReducer = teamsSlice.reducer;
export const initialTeamState: TeamState = {
team: {} as Team,
members: [] as TeamMember[],
groups: [] as TeamGroup[],
searchMemberQuery: '',
};
const teamSlice = createSlice({
name: 'team',
initialState: initialTeamState,
reducers: {
teamLoaded: (state, action: PayloadAction<Team>): TeamState => {
return { ...state, team: action.payload };
},
teamMembersLoaded: (state, action: PayloadAction<TeamMember[]>): TeamState => {
return { ...state, members: action.payload };
},
setSearchMemberQuery: (state, action: PayloadAction<string>): TeamState => {
return { ...state, searchMemberQuery: action.payload };
},
teamGroupsLoaded: (state, action: PayloadAction<TeamGroup[]>): TeamState => {
return { ...state, groups: action.payload };
},
},
});
export const { teamLoaded, teamGroupsLoaded, teamMembersLoaded, setSearchMemberQuery } = teamSlice.actions;
export const teamReducer = teamSlice.reducer;
export default {
teams: teamsReducer,
team: teamReducer,
};