Use createSlice with teams

src/pages/team-page.ts

@@ -8,13 +8,12 @@ import 'plastic-image';
 import '../elements/shared-styles';
 import { ReduxMixin } from '../mixins/redux-mixin';
 import { RootState, store } from '../store';
-import { fetchTeams } from '../store/teams/actions';
-import { initialTeamsState } from '../store/teams/state';
+import { fetchTeams, initialTeamsState } from '../store/teams';
 
 @customElement('team-page')
 export class TeamPage extends ReduxMixin(PolymerElement) {
   @property({ type: Object })
-  teams = initialTeamsState;
+  teams = initialTeamsState.value;
 
   @computed('teams')
   get pending() {
@@ -199,7 +198,7 @@ export class TeamPage extends ReduxMixin(PolymerElement) {
   }
 
   override stateChanged(state: RootState) {
-    this.teams = state.teams;
+    this.teams = state.teams.value;
   }
 
   override connectedCallback() {

src/store/index.ts

@@ -14,7 +14,7 @@ import { scheduleReducer } from './schedule/reducers';
 import { sessionsReducer } from './sessions/reducers';
 import { speakersReducer } from './speakers/reducers';
 import { subscribeReducer } from './subscribe/reducers';
-import { teamsReducer } from './teams/reducers';
+import teamsReducer from './teams';
 import { ticketsReducer } from './tickets/reducers';
 import { toastReducer } from './toast/reducers';
 import { uiReducer } from './ui/reducers';

src/store/teams/index.ts

@@ -0,0 +1,54 @@
+import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { collection, getDocs, query } from 'firebase/firestore';
+import { db } from '../../firebase';
+import { Member } from '../../models/member';
+import { Team, TeamWithoutMembers } from '../../models/team';
+import { mergeDataAndId } from '../../utils/firestore';
+
+type TeamsState = { value: RemoteData<Error, Team[]> };
+
+export const initialTeamsState = { value: new Initialized() } as TeamsState;
+
+const getTeamIds = async (): Promise<TeamWithoutMembers[]> => {
+  const { docs } = await getDocs(query(collection(db, 'team')));
+
+  return docs.map<TeamWithoutMembers>(mergeDataAndId);
+};
+
+const getTeamMembers = async (team: TeamWithoutMembers): Promise<Team> => {
+  const { docs } = await getDocs(query(collection(db, 'team', team.id, 'members')));
+  const members = docs.map<Member>(mergeDataAndId);
+
+  return {
+    ...team,
+    members,
+  };
+};
+
+const getTeams = async (): Promise<Team[]> => {
+  const teamIds = await getTeamIds();
+  return Promise.all(teamIds.map(getTeamMembers));
+};
+
+export const fetchTeams = createAsyncThunk('teams/fetch', async () => getTeams());
+
+export const teamSlice = createSlice({
+  name: 'teams',
+  initialState: initialTeamsState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchTeams.pending, (state) => {
+        state.value = new Pending();
+      })
+      .addCase(fetchTeams.rejected, (state, action) => {
+        state.value = new Failure(action.payload);
+      })
+      .addCase(fetchTeams.fulfilled, (state, action) => {
+        state.value = new Success(action.payload);
+      });
+  },
+});
+
+export default teamSlice.reducer;