creating types, actions, reducer

public/app/containers/Teams/TeamList.tsx → public/app/features/teams/TeamList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { inject, observer } from 'mobx-react';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
@@ -6,6 +7,8 @@ import { NavStore } from 'app/stores/NavStore/NavStore';
 import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
+import { loadTeams } from './state/actions';
+import { getTeams } from './state/selectors';
 
 interface Props {
   nav: typeof NavStore.Type;
@@ -108,4 +111,16 @@ export class TeamList extends React.Component<Props, any> {
   }
 }
 
-export default hot(module)(TeamList);
+function mapStateToProps(state) {
+  return {
+    teams: getTeams(state),
+  };
+}
+
+function mapDispatchToProps() {
+  return {
+    loadTeams,
+  };
+}
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TeamList));

public/app/features/teams/state/actions.ts

@@ -0,0 +1,28 @@
+import { ThunkAction } from 'redux-thunk';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { StoreState, Team } from '../../../types';
+
+export enum ActionTypes {
+  LoadTeams = 'LOAD_TEAMS',
+}
+
+export interface LoadTeamsAction {
+  type: ActionTypes.LoadTeams;
+  payload: Team[];
+}
+
+export type Action = LoadTeamsAction;
+
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
+
+const teamsLoaded = (teams: Team[]): LoadTeamsAction => ({
+  type: ActionTypes.LoadTeams,
+  payload: teams,
+});
+
+export function loadTeams(): ThunkResult<void> {
+  return async dispatch => {
+    const teams = await getBackendSrv().get('/api/teams/search/', { perpage: 50, page: 1 });
+    dispatch(teamsLoaded(teams));
+  };
+}

public/app/features/teams/state/reducers.ts

@@ -0,0 +1,14 @@
+import { TeamsState } from '../../../types';
+import { Action } from './actions';
+
+const initialState: TeamsState = { teams: [] };
+
+export const teamsReducer = (state = initialState, action: Action): TeamsState => {
+  switch (action.type) {
+  }
+  return state;
+};
+
+export default {
+  teams: teamsReducer,
+};

public/app/features/teams/state/selectors.ts

@@ -0,0 +1 @@
+export const getTeams = state => state.teams;

public/app/routes/routes.ts

@@ -5,8 +5,8 @@ import ServerStats from 'app/features/admin/containers/ServerStats';
 import AlertRuleList from 'app/features/alerting/AlertRuleList';
 import FolderSettings from 'app/containers/ManageDashboards/FolderSettings';
 import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions';
-import TeamPages from 'app/containers/Teams/TeamPages';
-import TeamList from 'app/containers/Teams/TeamList';
+import TeamPages from 'app/features/teams/TeamPages';
+import TeamList from 'app/features/teams/TeamList';
 
 /** @ngInject **/
 export function setupAngularRoutes($routeProvider, $locationProvider) {

public/app/types/index.ts

@@ -2,6 +2,9 @@
 // Location
 //
 
+import { TeamGroupModel, TeamMemberModel } from '../stores/TeamsStore/TeamsStore';
+import { types } from 'mobx-state-tree';
+
 export interface LocationUpdate {
   path?: string;
   query?: UrlQueryMap;
@@ -53,6 +56,34 @@ export interface AlertRule {
   evalData?: { noData: boolean };
 }
 
+//
+// Teams
+//
+
+export interface Team {
+  id: number;
+  name: string;
+  avatarUrl: string;
+  email: string;
+  memberCount: number;
+  search?: string;
+  members?: TeamMember[];
+  groups?: TeamGroup[];
+}
+
+export interface TeamMember {
+  userId: number;
+  teamId: number;
+  avatarUrl: string;
+  email: string;
+  login: string;
+}
+
+export interface TeamGroup {
+  groupId: string;
+  teamId: number;
+}
+
 //
 // NavModel
 //
@@ -89,8 +120,13 @@ export interface AlertRulesState {
   searchQuery: string;
 }
 
+export interface TeamsState {
+  teams: Team[];
+}
+
 export interface StoreState {
   navIndex: NavIndex;
   location: LocationState;
   alertRules: AlertRulesState;
+  teams: TeamsState;
 }