From c76d790c42fd337517f89c943d7034d19e9ab036 Mon Sep 17 00:00:00 2001
From: Abraham Williams <4braham@gmail.com>
Date: Thu, 30 Dec 2021 14:24:32 -0800
Subject: [PATCH 1/2] Update data in realtime

---
 firestore.indexes.json               | 25 +++++++++++-
 firestore.rules                      | 12 ++++++
 src/models/member.ts                 |  4 +-
 src/models/types.ts                  |  4 ++
 src/pages/team-page.ts               | 43 +++++++++------------
 src/store/index.ts                   |  4 +-
 src/store/members/actions.ts         | 46 ++++++++++++++++++++++
 src/store/members/reducers.ts        | 27 +++++++++++++
 src/store/members/selectors.ts       | 13 +++++++
 src/store/members/state.ts           |  5 +++
 src/store/members/types.ts           | 24 ++++++++++++
 src/store/speakers/actions.ts        | 45 +++++++++++++---------
 src/store/teams-members/selectors.ts | 35 +++++++++++++++++
 src/store/teams-members/state.ts     |  5 +++
 src/store/teams/actions.ts           | 57 +++++++++++++---------------
 src/store/teams/selectors.ts         | 13 +++++++
 src/store/teams/state.ts             |  4 +-
 src/store/teams/types.ts             |  4 +-
 src/store/tickets/actions.ts         | 50 +++++++++++++++---------
 src/utils/firestore.ts               | 12 +++++-
 20 files changed, 332 insertions(+), 100 deletions(-)
 create mode 100644 src/store/members/actions.ts
 create mode 100644 src/store/members/reducers.ts
 create mode 100644 src/store/members/selectors.ts
 create mode 100644 src/store/members/state.ts
 create mode 100644 src/store/members/types.ts
 create mode 100644 src/store/teams-members/selectors.ts
 create mode 100644 src/store/teams-members/state.ts
 create mode 100644 src/store/teams/selectors.ts

diff --git a/firestore.indexes.json b/firestore.indexes.json
index 415027e5dd..4683ba2af9 100644
--- a/firestore.indexes.json
+++ b/firestore.indexes.json
@@ -1,4 +1,27 @@
 {
   "indexes": [],
-  "fieldOverrides": []
+  "fieldOverrides": [
+    {
+      "collectionGroup": "members",
+      "fieldPath": "name",
+      "indexes": [
+        {
+          "order": "ASCENDING",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "order": "DESCENDING",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "arrayConfig": "CONTAINS",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "order": "ASCENDING",
+          "queryScope": "COLLECTION_GROUP"
+        }
+      ]
+    }
+  ]
 }
diff --git a/firestore.rules b/firestore.rules
index ab127c71e9..fc2bc8187a 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -186,6 +186,7 @@ service cloud.firestore {
       // Disallow writes
       allow write: if false;
 
+      // TODO: remove
       match /members/{memberId} {
         // Applies to single document read requests
         allow get;
@@ -198,6 +199,17 @@ service cloud.firestore {
       }
     }
 
+    match /{path=**}/members/{memberId} {
+      // Applies to single document read requests
+      allow get;
+
+      // Applies to queries and collection read requests
+      allow list;
+
+      // Disallow writes
+      allow write: if false;
+    }
+
     match /tickets/{ticket} {
       // Applies to single document read requests
       allow get;
diff --git a/src/models/member.ts b/src/models/member.ts
index 7b5197cde9..8adca1b7dc 100644
--- a/src/models/member.ts
+++ b/src/models/member.ts
@@ -1,5 +1,5 @@
 import { Social } from './social';
-import { Id } from './types';
+import { ParentId } from './types';
 
 export interface MemberData {
   name: string;
@@ -10,4 +10,4 @@ export interface MemberData {
   title: string;
 }
 
-export type Member = Id & MemberData;
+export type Member = ParentId & MemberData;
diff --git a/src/models/types.ts b/src/models/types.ts
index 62568f255e..66e5a8ad52 100644
--- a/src/models/types.ts
+++ b/src/models/types.ts
@@ -1,3 +1,7 @@
 export interface Id {
   id: string;
 }
+
+export type ParentId = Id & {
+  parentId: string;
+};
diff --git a/src/pages/team-page.ts b/src/pages/team-page.ts
index 1fa54aecbf..70168fa4e8 100644
--- a/src/pages/team-page.ts
+++ b/src/pages/team-page.ts
@@ -1,4 +1,4 @@
-import { Failure, Initialized, Pending } from '@abraham/remotedata';
+import { Failure, Pending } from '@abraham/remotedata';
 import { computed, customElement, property } from '@polymer/decorators';
 import '@polymer/iron-icon';
 import '@polymer/marked-element';
@@ -7,25 +7,12 @@ import { html, PolymerElement } from '@polymer/polymer';
 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 { RootState } from '../store';
+import { selectTeamsAndMembers } from '../store/teams-members/selectors';
+import { initialTeamsMembersState } from '../store/teams-members/state';
 
 @customElement('team-page')
 export class TeamPage extends ReduxMixin(PolymerElement) {
-  @property({ type: Object })
-  teams = initialTeamsState;
-
-  @computed('teams')
-  get pending() {
-    return this.teams instanceof Pending;
-  }
-
-  @computed('teams')
-  get failure() {
-    return this.teams instanceof Failure;
-  }
-
   static get template() {
     return html`
       <style include="shared-styles flex flex-alignment">
@@ -158,7 +145,7 @@ export class TeamPage extends ReduxMixin(PolymerElement) {
           <p>Error loading teams.</p>
         </template>
 
-        <template is="dom-repeat" items="[[teams.data]]" as="team">
+        <template is="dom-repeat" items="[[teamsMembers.data]]" as="team">
           <div class="team-title">[[team.title]]</div>
 
           <div class="team-block">
@@ -198,14 +185,20 @@ export class TeamPage extends ReduxMixin(PolymerElement) {
     `;
   }
 
-  override stateChanged(state: RootState) {
-    this.teams = state.teams;
+  @property({ type: Object })
+  teamsMembers = initialTeamsMembersState;
+
+  @computed('teamsMembers')
+  get pending() {
+    return this.teamsMembers instanceof Pending;
   }
 
-  override connectedCallback() {
-    super.connectedCallback();
-    if (this.teams instanceof Initialized) {
-      store.dispatch(fetchTeams);
-    }
+  @computed('teamsMembers')
+  get failure() {
+    return this.teamsMembers instanceof Failure;
+  }
+
+  override stateChanged(state: RootState) {
+    this.teamsMembers = selectTeamsAndMembers(state);
   }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 43d1051236..a844080e9e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -6,6 +6,7 @@ import { featuredSessionsReducer } from './featured-sessions/reducers';
 import { feedbackReducer } from './feedback/reducers';
 import { filtersReducer } from './filters/reducers';
 import { galleryReducer } from './gallery/reducers';
+import { membersReducer } from './members/reducers';
 import { notificationsReducer } from './notifications/reducers';
 import { partnersReducer } from './partners/reducers';
 import { potentialPartnersReducer } from './potential-partners/reducers';
@@ -32,8 +33,9 @@ export const store = configureStore({
     dialogs: dialogsReducer,
     featuredSessions: featuredSessionsReducer,
     feedback: feedbackReducer,
-    gallery: galleryReducer,
     filters: filtersReducer,
+    gallery: galleryReducer,
+    members: membersReducer,
     notifications: notificationsReducer,
     partners: partnersReducer,
     potentialPartners: potentialPartnersReducer,
diff --git a/src/store/members/actions.ts b/src/store/members/actions.ts
new file mode 100644
index 0000000000..cbd84cd5fc
--- /dev/null
+++ b/src/store/members/actions.ts
@@ -0,0 +1,46 @@
+import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
+import { collectionGroup, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
+import { Dispatch } from 'redux';
+import { db } from '../../firebase';
+import { Member } from '../../models/member';
+import { dataWithParentId } from '../../utils/firestore';
+import {
+  FETCH_MEMBERS,
+  FETCH_MEMBERS_FAILURE,
+  FETCH_MEMBERS_SUCCESS,
+  MembersActions,
+} from './types';
+
+type Subscription = RemoteData<Error, Unsubscribe>;
+let subscription: Subscription = new Initialized();
+
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
+};
+
+const subscribe = (path: string, dispatch: Dispatch<MembersActions>) => {
+  const unsubscribe = onSnapshot(
+    query(collectionGroup(db, path), orderBy('name', 'asc')),
+    (snapshot) => {
+      const payload = snapshot.docs.map<Member>(dataWithParentId);
+      dispatch({ type: FETCH_MEMBERS_SUCCESS, payload });
+    },
+    (payload) => {
+      subscription = new Failure(payload);
+      dispatch({ type: FETCH_MEMBERS_FAILURE, payload });
+    }
+  );
+
+  return new Success(unsubscribe);
+};
+
+export const fetchMembers = () => async (dispatch: Dispatch<MembersActions>) => {
+  if (subscription instanceof Initialized) {
+    subscription = new Pending();
+    dispatch({ type: FETCH_MEMBERS });
+
+    subscription = subscribe('members', dispatch);
+  }
+};
diff --git a/src/store/members/reducers.ts b/src/store/members/reducers.ts
new file mode 100644
index 0000000000..49bb144399
--- /dev/null
+++ b/src/store/members/reducers.ts
@@ -0,0 +1,27 @@
+import { Failure, Pending, Success } from '@abraham/remotedata';
+import { initialMembersState, MembersState } from './state';
+import {
+  FETCH_MEMBERS,
+  FETCH_MEMBERS_FAILURE,
+  FETCH_MEMBERS_SUCCESS,
+  MembersActions,
+} from './types';
+
+export const membersReducer = (
+  state = initialMembersState,
+  action: MembersActions
+): MembersState => {
+  switch (action.type) {
+    case FETCH_MEMBERS:
+      return new Pending();
+
+    case FETCH_MEMBERS_FAILURE:
+      return new Failure(action.payload);
+
+    case FETCH_MEMBERS_SUCCESS:
+      return new Success(action.payload);
+
+    default:
+      return state;
+  }
+};
diff --git a/src/store/members/selectors.ts b/src/store/members/selectors.ts
new file mode 100644
index 0000000000..147915d695
--- /dev/null
+++ b/src/store/members/selectors.ts
@@ -0,0 +1,13 @@
+import { Initialized, Pending } from '@abraham/remotedata';
+import { RootState, store } from '..';
+import { fetchMembers } from './actions';
+import { MembersState } from './state';
+
+export const selectMembers = (state: RootState): MembersState => {
+  if (state.members instanceof Initialized) {
+    store.dispatch(fetchMembers());
+    return new Pending();
+  } else {
+    return state.members;
+  }
+};
diff --git a/src/store/members/state.ts b/src/store/members/state.ts
new file mode 100644
index 0000000000..37be0f2ade
--- /dev/null
+++ b/src/store/members/state.ts
@@ -0,0 +1,5 @@
+import { Initialized, RemoteData } from '@abraham/remotedata';
+import { Member } from '../../models/member';
+
+export type MembersState = RemoteData<Error, Member[]>;
+export const initialMembersState: MembersState = new Initialized();
diff --git a/src/store/members/types.ts b/src/store/members/types.ts
new file mode 100644
index 0000000000..c755c99e0b
--- /dev/null
+++ b/src/store/members/types.ts
@@ -0,0 +1,24 @@
+import { Member } from '../../models/member';
+
+export const FETCH_MEMBERS = 'FETCH_MEMBERS';
+export const FETCH_MEMBERS_FAILURE = 'FETCH_MEMBERS_FAILURE';
+export const FETCH_MEMBERS_SUCCESS = 'FETCH_MEMBERS_SUCCESS';
+
+interface FetchMembersAction {
+  type: typeof FETCH_MEMBERS;
+}
+
+interface FetchMembersFailureAction {
+  type: typeof FETCH_MEMBERS_FAILURE;
+  payload: Error;
+}
+
+interface FetchMembersSuccessAction {
+  type: typeof FETCH_MEMBERS_SUCCESS;
+  payload: Member[];
+}
+
+export type MembersActions =
+  | FetchMembersAction
+  | FetchMembersFailureAction
+  | FetchMembersSuccessAction;
diff --git a/src/store/speakers/actions.ts b/src/store/speakers/actions.ts
index 1c0b03a741..140d25f68b 100644
--- a/src/store/speakers/actions.ts
+++ b/src/store/speakers/actions.ts
@@ -1,4 +1,5 @@
-import { collection, getDocs, orderBy, query } from 'firebase/firestore';
+import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
+import { collection, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
 import { Dispatch } from 'redux';
 import { db } from '../../firebase';
 import { SpeakerWithTags } from '../../models/speaker';
@@ -10,28 +11,36 @@ import {
   SpeakerActions,
 } from './types';
 
-const getSpeakers = async (): Promise<SpeakerWithTags[]> => {
-  const { docs } = await getDocs(
-    query(collection(db, 'generatedSpeakers'), orderBy('order', 'asc'))
+type Subscription = RemoteData<Error, Unsubscribe>;
+let subscription: Subscription = new Initialized();
+
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
+};
+
+const subscribe = (path: string, dispatch: Dispatch<SpeakerActions>) => {
+  const unsubscribe = onSnapshot(
+    query(collection(db, path), orderBy('name', 'asc')),
+    (snapshot) => {
+      const payload = snapshot.docs.map<SpeakerWithTags>(mergeDataAndId);
+      dispatch({ type: FETCH_SPEAKERS_SUCCESS, payload });
+    },
+    (payload) => {
+      subscription = new Failure(payload);
+      dispatch({ type: FETCH_SPEAKERS_FAILURE, payload });
+    }
   );
 
-  return docs.map<SpeakerWithTags>(mergeDataAndId);
+  return new Success(unsubscribe);
 };
 
 export const fetchSpeakers = async (dispatch: Dispatch<SpeakerActions>) => {
-  dispatch({
-    type: FETCH_SPEAKERS,
-  });
+  if (subscription instanceof Initialized) {
+    subscription = new Pending();
+    dispatch({ type: FETCH_SPEAKERS });
 
-  try {
-    dispatch({
-      type: FETCH_SPEAKERS_SUCCESS,
-      payload: await getSpeakers(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_SPEAKERS_FAILURE,
-      payload: error,
-    });
+    subscription = subscribe('generatedSpeakers', dispatch);
   }
 };
diff --git a/src/store/teams-members/selectors.ts b/src/store/teams-members/selectors.ts
new file mode 100644
index 0000000000..b20953514f
--- /dev/null
+++ b/src/store/teams-members/selectors.ts
@@ -0,0 +1,35 @@
+import { Failure, Initialized, Pending, Success } from '@abraham/remotedata';
+import { createSelector } from '@reduxjs/toolkit';
+import { Member } from '../../models/member';
+import { Team, TeamWithoutMembers } from '../../models/team';
+import { selectMembers } from '../members/selectors';
+import { MembersState } from '../members/state';
+import { selectTeams } from '../teams/selectors';
+import { TeamsState } from '../teams/state';
+import { TeamsMembersState } from './state';
+
+const mergeMembers = (team: TeamWithoutMembers, possibleMembers: Member[]): Team => {
+  return {
+    ...team,
+    members: possibleMembers.filter((member) => member.parentId === team.id),
+  };
+};
+
+export const selectTeamsAndMembers = createSelector(
+  selectTeams,
+  selectMembers,
+  (teams: TeamsState, members: MembersState): TeamsMembersState => {
+    if (teams instanceof Success && members instanceof Success) {
+      const merged = teams.data.map((team) => mergeMembers(team, members.data));
+      return new Success(merged);
+    } else if (teams instanceof Pending || members instanceof Pending) {
+      return new Pending();
+    } else if (teams instanceof Failure) {
+      return new Failure(teams.error);
+    } else if (members instanceof Failure) {
+      return new Failure(members.error);
+    } else {
+      return new Initialized();
+    }
+  }
+);
diff --git a/src/store/teams-members/state.ts b/src/store/teams-members/state.ts
new file mode 100644
index 0000000000..3c85283aa1
--- /dev/null
+++ b/src/store/teams-members/state.ts
@@ -0,0 +1,5 @@
+import { Initialized, RemoteData } from '@abraham/remotedata';
+import { Team } from '../../models/team';
+
+export type TeamsMembersState = RemoteData<Error, Team[]>;
+export const initialTeamsMembersState: TeamsMembersState = new Initialized();
diff --git a/src/store/teams/actions.ts b/src/store/teams/actions.ts
index 455533b7ab..abfca555b4 100644
--- a/src/store/teams/actions.ts
+++ b/src/store/teams/actions.ts
@@ -1,46 +1,41 @@
-import { collection, getDocs, query } from 'firebase/firestore';
+import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
+import { collection, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
 import { Dispatch } from 'redux';
 import { db } from '../../firebase';
-import { Member } from '../../models/member';
-import { Team, TeamWithoutMembers } from '../../models/team';
+import { TeamWithoutMembers } from '../../models/team';
 import { mergeDataAndId } from '../../utils/firestore';
 import { FETCH_TEAMS, FETCH_TEAMS_FAILURE, FETCH_TEAMS_SUCCESS, TeamsActions } from './types';
 
-const getTeamIds = async (): Promise<TeamWithoutMembers[]> => {
-  const { docs } = await getDocs(query(collection(db, 'team')));
+type Subscription = RemoteData<Error, Unsubscribe>;
+let subscription: Subscription = new Initialized();
 
-  return docs.map<TeamWithoutMembers>(mergeDataAndId);
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
-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 subscribe = (path: string, dispatch: Dispatch<TeamsActions>) => {
+  const unsubscribe = onSnapshot(
+    query(collection(db, path), orderBy('title', 'asc')),
+    (snapshot) => {
+      const payload = snapshot.docs.map<TeamWithoutMembers>(mergeDataAndId);
+      dispatch({ type: FETCH_TEAMS_SUCCESS, payload });
+    },
+    (payload) => {
+      subscription = new Failure(payload);
+      dispatch({ type: FETCH_TEAMS_FAILURE, payload });
+    }
+  );
 
-const getTeams = async (): Promise<Team[]> => {
-  const teamIds = await getTeamIds();
-  return Promise.all(teamIds.map(getTeamMembers));
+  return new Success(unsubscribe);
 };
 
 export const fetchTeams = async (dispatch: Dispatch<TeamsActions>) => {
-  dispatch({
-    type: FETCH_TEAMS,
-  });
+  if (subscription instanceof Initialized) {
+    subscription = new Pending();
+    dispatch({ type: FETCH_TEAMS });
 
-  try {
-    dispatch({
-      type: FETCH_TEAMS_SUCCESS,
-      payload: await getTeams(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_TEAMS_FAILURE,
-      payload: error,
-    });
+    subscription = subscribe('team', dispatch);
   }
 };
diff --git a/src/store/teams/selectors.ts b/src/store/teams/selectors.ts
new file mode 100644
index 0000000000..f748792b2e
--- /dev/null
+++ b/src/store/teams/selectors.ts
@@ -0,0 +1,13 @@
+import { Initialized, Pending } from '@abraham/remotedata';
+import { RootState, store } from '..';
+import { fetchTeams } from './actions';
+import { TeamsState } from './state';
+
+export const selectTeams = (state: RootState): TeamsState => {
+  if (state.teams instanceof Initialized) {
+    store.dispatch(fetchTeams);
+    return new Pending();
+  } else {
+    return state.teams;
+  }
+};
diff --git a/src/store/teams/state.ts b/src/store/teams/state.ts
index e30146cf7f..f0fac970b9 100644
--- a/src/store/teams/state.ts
+++ b/src/store/teams/state.ts
@@ -1,5 +1,5 @@
 import { Initialized, RemoteData } from '@abraham/remotedata';
-import { Team } from '../../models/team';
+import { TeamWithoutMembers } from '../../models/team';
 
-export type TeamsState = RemoteData<Error, Team[]>;
+export type TeamsState = RemoteData<Error, TeamWithoutMembers[]>;
 export const initialTeamsState: TeamsState = new Initialized();
diff --git a/src/store/teams/types.ts b/src/store/teams/types.ts
index 16f71b5c8f..e62d10a55b 100644
--- a/src/store/teams/types.ts
+++ b/src/store/teams/types.ts
@@ -1,4 +1,4 @@
-import { Team } from '../../models/team';
+import { TeamWithoutMembers } from '../../models/team';
 
 export const FETCH_TEAMS = 'FETCH_TEAMS';
 export const FETCH_TEAMS_FAILURE = 'FETCH_TEAMS_FAILURE';
@@ -15,7 +15,7 @@ interface FetchTeamsFailureAction {
 
 interface FetchTeamsSuccessAction {
   type: typeof FETCH_TEAMS_SUCCESS;
-  payload: Team[];
+  payload: TeamWithoutMembers[];
 }
 
 export type TeamsActions = FetchTeamsAction | FetchTeamsFailureAction | FetchTeamsSuccessAction;
diff --git a/src/store/tickets/actions.ts b/src/store/tickets/actions.ts
index f77fa465a6..6c0f02d028 100644
--- a/src/store/tickets/actions.ts
+++ b/src/store/tickets/actions.ts
@@ -1,4 +1,5 @@
-import { collection, getDocs, orderBy, query } from 'firebase/firestore';
+import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
+import { collection, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
 import { Dispatch } from 'redux';
 import { db } from '../../firebase';
 import { Ticket } from '../../models/ticket';
@@ -10,26 +11,41 @@ import {
   FETCH_TICKETS_SUCCESS,
 } from './types';
 
-const getTickets = async (): Promise<Ticket[]> => {
-  const { docs } = await getDocs(query(collection(db, 'tickets'), orderBy('order', 'asc')));
+type Subscription = RemoteData<Error, Unsubscribe>;
+let subscription: Subscription = new Initialized();
 
-  return docs.map<Ticket>(mergeDataAndId);
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
+};
+
+const subscribe = (path: string, dispatch: Dispatch<FetchTicketsActions>) => {
+  const unsubscribe = onSnapshot(
+    query(collection(db, path), orderBy('order', 'asc')),
+    (snapshot) => {
+      dispatch({
+        type: FETCH_TICKETS_SUCCESS,
+        payload: snapshot.docs.map<Ticket>(mergeDataAndId),
+      });
+    },
+    (error) => {
+      subscription = new Failure(error);
+      dispatch({
+        type: FETCH_TICKETS_FAILURE,
+        payload: error,
+      });
+    }
+  );
+
+  return new Success(unsubscribe);
 };
 
 export const fetchTickets = async (dispatch: Dispatch<FetchTicketsActions>) => {
-  dispatch({
-    type: FETCH_TICKETS,
-  });
+  if (subscription instanceof Initialized) {
+    subscription = new Pending();
+    dispatch({ type: FETCH_TICKETS });
 
-  try {
-    dispatch({
-      type: FETCH_TICKETS_SUCCESS,
-      payload: await getTickets(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_TICKETS_FAILURE,
-      payload: error,
-    });
+    subscription = subscribe('tickets', dispatch);
   }
 };
diff --git a/src/utils/firestore.ts b/src/utils/firestore.ts
index 94ee7985f9..cc49743d23 100644
--- a/src/utils/firestore.ts
+++ b/src/utils/firestore.ts
@@ -1,5 +1,5 @@
 import { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore';
-import { Id } from '../models/types';
+import { Id, ParentId } from '../models/types';
 
 export const mergeDataAndId = <T>(snapshot: QueryDocumentSnapshot<DocumentData>): T & Id => {
   return {
@@ -7,3 +7,13 @@ export const mergeDataAndId = <T>(snapshot: QueryDocumentSnapshot<DocumentData>)
     id: snapshot.id,
   };
 };
+
+export const dataWithParentId = <T>(
+  snapshot: QueryDocumentSnapshot<DocumentData>
+): T & ParentId => {
+  return {
+    ...(snapshot.data() as T),
+    parentId: (snapshot.ref.parent.parent as Id).id,
+    id: snapshot.id,
+  };
+};

From a5e9caa835c919d7cff32127db88305b81b9f86f Mon Sep 17 00:00:00 2001
From: Abraham Williams <4braham@gmail.com>
Date: Mon, 3 Jan 2022 19:44:05 -0600
Subject: [PATCH 2/2] Create subscribeToCollection

---
 src/store/blog/actions.ts              | 36 +++++++++----------
 src/store/gallery/actions.ts           | 36 +++++++++----------
 src/store/members/actions.ts           | 35 +++++-------------
 src/store/members/selectors.ts         |  2 +-
 src/store/previous-speakers/actions.ts | 38 ++++++++------------
 src/store/schedule/actions.ts          | 35 +++++++++---------
 src/store/sessions/actions.ts          | 37 +++++++++----------
 src/store/speakers/actions.ts          | 33 +++++------------
 src/store/teams/actions.ts             | 35 ++++++------------
 src/store/tickets/actions.ts           | 40 ++++++---------------
 src/store/videos/actions.ts            | 36 +++++++++----------
 src/utils/firestore.ts                 | 49 +++++++++++++++++++++++++-
 12 files changed, 181 insertions(+), 231 deletions(-)

diff --git a/src/store/blog/actions.ts b/src/store/blog/actions.ts
index dd1ffb00f1..29bf044153 100644
--- a/src/store/blog/actions.ts
+++ b/src/store/blog/actions.ts
@@ -1,8 +1,8 @@
-import { collection, getDocs, orderBy, query } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Post } from '../../models/post';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   BlogActions,
   FETCH_BLOG_LIST,
@@ -10,26 +10,22 @@ import {
   FETCH_BLOG_LIST_SUCCESS,
 } from './types';
 
-const getPosts = async (): Promise<Post[]> => {
-  const { docs } = await getDocs(query(collection(db, 'blog'), orderBy('published', 'desc')));
+let subscription: Subscription = new Initialized();
 
-  return docs.map<Post>(mergeDataAndId);
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
 export const fetchBlogPosts = async (dispatch: Dispatch<BlogActions>) => {
-  dispatch({
-    type: FETCH_BLOG_LIST,
-  });
-
-  try {
-    dispatch({
-      type: FETCH_BLOG_LIST_SUCCESS,
-      payload: await getPosts(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_BLOG_LIST_FAILURE,
-      payload: error,
-    });
+  if (subscription instanceof Initialized) {
+    subscription = subscribeToCollection(
+      'blog',
+      () => dispatch({ type: FETCH_BLOG_LIST }),
+      (payload: Post[]) => dispatch({ type: FETCH_BLOG_LIST_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_BLOG_LIST_FAILURE, payload }),
+      orderBy('published', 'desc')
+    );
   }
 };
diff --git a/src/store/gallery/actions.ts b/src/store/gallery/actions.ts
index 58f79d28c3..d8b792a1c8 100644
--- a/src/store/gallery/actions.ts
+++ b/src/store/gallery/actions.ts
@@ -1,8 +1,8 @@
-import { collection, getDocs, query } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Photo } from '../../models/photo';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FETCH_GALLERY,
   FETCH_GALLERY_FAILURE,
@@ -10,26 +10,22 @@ import {
   GalleryActions,
 } from './types';
 
-const getGalleries = async (): Promise<Photo[]> => {
-  const { docs } = await getDocs(query(collection(db, 'gallery')));
+let subscription: Subscription = new Initialized();
 
-  return docs.map<Photo>(mergeDataAndId);
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
 export const fetchGallery = async (dispatch: Dispatch<GalleryActions>) => {
-  dispatch({
-    type: FETCH_GALLERY,
-  });
-
-  try {
-    dispatch({
-      type: FETCH_GALLERY_SUCCESS,
-      payload: await getGalleries(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_GALLERY_FAILURE,
-      payload: error,
-    });
+  if (subscription instanceof Initialized) {
+    subscription = subscribeToCollection(
+      'gallery',
+      () => dispatch({ type: FETCH_GALLERY }),
+      (payload: Photo[]) => dispatch({ type: FETCH_GALLERY_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_GALLERY_FAILURE, payload }),
+      orderBy('order')
+    );
   }
 };
diff --git a/src/store/members/actions.ts b/src/store/members/actions.ts
index cbd84cd5fc..537a85a39b 100644
--- a/src/store/members/actions.ts
+++ b/src/store/members/actions.ts
@@ -1,9 +1,7 @@
-import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
-import { collectionGroup, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Member } from '../../models/member';
-import { dataWithParentId } from '../../utils/firestore';
+import { subscribeToCollectionGroup, Subscription } from '../../utils/firestore';
 import {
   FETCH_MEMBERS,
   FETCH_MEMBERS_FAILURE,
@@ -11,7 +9,6 @@ import {
   MembersActions,
 } from './types';
 
-type Subscription = RemoteData<Error, Unsubscribe>;
 let subscription: Subscription = new Initialized();
 
 export const unsubscribe = () => {
@@ -20,27 +17,13 @@ export const unsubscribe = () => {
   }
 };
 
-const subscribe = (path: string, dispatch: Dispatch<MembersActions>) => {
-  const unsubscribe = onSnapshot(
-    query(collectionGroup(db, path), orderBy('name', 'asc')),
-    (snapshot) => {
-      const payload = snapshot.docs.map<Member>(dataWithParentId);
-      dispatch({ type: FETCH_MEMBERS_SUCCESS, payload });
-    },
-    (payload) => {
-      subscription = new Failure(payload);
-      dispatch({ type: FETCH_MEMBERS_FAILURE, payload });
-    }
-  );
-
-  return new Success(unsubscribe);
-};
-
-export const fetchMembers = () => async (dispatch: Dispatch<MembersActions>) => {
+export const fetchMembers = async (dispatch: Dispatch<MembersActions>) => {
   if (subscription instanceof Initialized) {
-    subscription = new Pending();
-    dispatch({ type: FETCH_MEMBERS });
-
-    subscription = subscribe('members', dispatch);
+    subscription = subscribeToCollectionGroup(
+      'members',
+      () => dispatch({ type: FETCH_MEMBERS }),
+      (payload: Member[]) => dispatch({ type: FETCH_MEMBERS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_MEMBERS_FAILURE, payload })
+    );
   }
 };
diff --git a/src/store/members/selectors.ts b/src/store/members/selectors.ts
index 147915d695..fd20ff8a8f 100644
--- a/src/store/members/selectors.ts
+++ b/src/store/members/selectors.ts
@@ -5,7 +5,7 @@ import { MembersState } from './state';
 
 export const selectMembers = (state: RootState): MembersState => {
   if (state.members instanceof Initialized) {
-    store.dispatch(fetchMembers());
+    store.dispatch(fetchMembers);
     return new Pending();
   } else {
     return state.members;
diff --git a/src/store/previous-speakers/actions.ts b/src/store/previous-speakers/actions.ts
index e0208385cc..942fa878f9 100644
--- a/src/store/previous-speakers/actions.ts
+++ b/src/store/previous-speakers/actions.ts
@@ -1,8 +1,7 @@
-import { collection, getDocs, orderBy, query } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { PreviousSpeaker } from '../../models/previous-speaker';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FETCH_PREVIOUS_SPEAKERS,
   FETCH_PREVIOUS_SPEAKERS_FAILURE,
@@ -10,30 +9,21 @@ import {
   PreviousSpeakersActions,
 } from './types';
 
-const getPreviousSpeakers = async (): Promise<PreviousSpeaker[]> => {
-  const { docs } = await getDocs(
-    query(collection(db, 'previousSpeakers'), orderBy('order', 'asc'))
-  );
+let subscription: Subscription = new Initialized();
 
-  return docs.map<PreviousSpeaker>(mergeDataAndId).sort((speakerA, speakerB) => {
-    return speakerA.name.localeCompare(speakerB.name);
-  });
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
 export const fetchPreviousSpeakers = async (dispatch: Dispatch<PreviousSpeakersActions>) => {
-  dispatch({
-    type: FETCH_PREVIOUS_SPEAKERS,
-  });
-
-  try {
-    dispatch({
-      type: FETCH_PREVIOUS_SPEAKERS_SUCCESS,
-      payload: await getPreviousSpeakers(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_PREVIOUS_SPEAKERS_FAILURE,
-      payload: error,
-    });
+  if (subscription instanceof Initialized) {
+    subscription = subscribeToCollection(
+      'previousSpeakers',
+      () => dispatch({ type: FETCH_PREVIOUS_SPEAKERS }),
+      (payload: PreviousSpeaker[]) => dispatch({ type: FETCH_PREVIOUS_SPEAKERS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_PREVIOUS_SPEAKERS_FAILURE, payload })
+    );
   }
 };
diff --git a/src/store/schedule/actions.ts b/src/store/schedule/actions.ts
index 682b56edad..58bbd0916b 100644
--- a/src/store/schedule/actions.ts
+++ b/src/store/schedule/actions.ts
@@ -1,7 +1,8 @@
-import { collection, getDocs, query } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Day } from '../../models/day';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FETCH_SCHEDULE,
   FETCH_SCHEDULE_FAILURE,
@@ -9,26 +10,22 @@ import {
   ScheduleActions,
 } from './types';
 
-const getSchedule = async (): Promise<Day[]> => {
-  const { docs } = await getDocs(query(collection(db, 'generatedSchedule')));
+let subscription: Subscription = new Initialized();
 
-  return docs.map<Day>((doc) => doc.data() as Day).sort((a, b) => a.date.localeCompare(b.date));
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
 export const fetchSchedule = async (dispatch: Dispatch<ScheduleActions>) => {
-  dispatch({
-    type: FETCH_SCHEDULE,
-  });
-
-  try {
-    dispatch({
-      type: FETCH_SCHEDULE_SUCCESS,
-      payload: await getSchedule(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_SCHEDULE_FAILURE,
-      payload: error,
-    });
+  if (subscription instanceof Initialized) {
+    subscription = subscribeToCollection(
+      'generatedSchedule',
+      () => dispatch({ type: FETCH_SCHEDULE }),
+      (payload: Day[]) => dispatch({ type: FETCH_SCHEDULE_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_SCHEDULE_FAILURE, payload }),
+      orderBy('date')
+    );
   }
 };
diff --git a/src/store/sessions/actions.ts b/src/store/sessions/actions.ts
index e5606339f3..6dc34b0181 100644
--- a/src/store/sessions/actions.ts
+++ b/src/store/sessions/actions.ts
@@ -1,8 +1,8 @@
-import { collection, getDocs, query } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Session } from '../../models/session';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FETCH_SESSIONS,
   FETCH_SESSIONS_FAILURE,
@@ -10,25 +10,22 @@ import {
   SessionsActions,
 } from './types';
 
-const getSessions = async () => {
-  const { docs } = await getDocs(query(collection(db, 'generatedSessions')));
-  return docs.map<Session>(mergeDataAndId);
+let subscription: Subscription = new Initialized();
+
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
 export const fetchSessions = async (dispatch: Dispatch<SessionsActions>) => {
-  dispatch({
-    type: FETCH_SESSIONS,
-  });
-
-  try {
-    dispatch({
-      type: FETCH_SESSIONS_SUCCESS,
-      payload: await getSessions(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_SESSIONS_FAILURE,
-      payload: error,
-    });
+  if (subscription instanceof Initialized) {
+    subscription = subscribeToCollection(
+      'generatedSessions',
+      () => dispatch({ type: FETCH_SESSIONS }),
+      (payload: Session[]) => dispatch({ type: FETCH_SESSIONS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_SESSIONS_FAILURE, payload }),
+      orderBy('day')
+    );
   }
 };
diff --git a/src/store/speakers/actions.ts b/src/store/speakers/actions.ts
index 140d25f68b..b70cc57fb1 100644
--- a/src/store/speakers/actions.ts
+++ b/src/store/speakers/actions.ts
@@ -1,9 +1,7 @@
-import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
-import { collection, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { SpeakerWithTags } from '../../models/speaker';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FETCH_SPEAKERS,
   FETCH_SPEAKERS_FAILURE,
@@ -11,7 +9,6 @@ import {
   SpeakerActions,
 } from './types';
 
-type Subscription = RemoteData<Error, Unsubscribe>;
 let subscription: Subscription = new Initialized();
 
 export const unsubscribe = () => {
@@ -20,27 +17,13 @@ export const unsubscribe = () => {
   }
 };
 
-const subscribe = (path: string, dispatch: Dispatch<SpeakerActions>) => {
-  const unsubscribe = onSnapshot(
-    query(collection(db, path), orderBy('name', 'asc')),
-    (snapshot) => {
-      const payload = snapshot.docs.map<SpeakerWithTags>(mergeDataAndId);
-      dispatch({ type: FETCH_SPEAKERS_SUCCESS, payload });
-    },
-    (payload) => {
-      subscription = new Failure(payload);
-      dispatch({ type: FETCH_SPEAKERS_FAILURE, payload });
-    }
-  );
-
-  return new Success(unsubscribe);
-};
-
 export const fetchSpeakers = async (dispatch: Dispatch<SpeakerActions>) => {
   if (subscription instanceof Initialized) {
-    subscription = new Pending();
-    dispatch({ type: FETCH_SPEAKERS });
-
-    subscription = subscribe('generatedSpeakers', dispatch);
+    subscription = subscribeToCollection(
+      'generatedSpeakers',
+      () => dispatch({ type: FETCH_SPEAKERS }),
+      (payload: SpeakerWithTags[]) => dispatch({ type: FETCH_SPEAKERS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_SPEAKERS_FAILURE, payload })
+    );
   }
 };
diff --git a/src/store/teams/actions.ts b/src/store/teams/actions.ts
index abfca555b4..b56ff87dc3 100644
--- a/src/store/teams/actions.ts
+++ b/src/store/teams/actions.ts
@@ -1,12 +1,10 @@
-import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
-import { collection, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { TeamWithoutMembers } from '../../models/team';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import { FETCH_TEAMS, FETCH_TEAMS_FAILURE, FETCH_TEAMS_SUCCESS, TeamsActions } from './types';
 
-type Subscription = RemoteData<Error, Unsubscribe>;
 let subscription: Subscription = new Initialized();
 
 export const unsubscribe = () => {
@@ -15,27 +13,14 @@ export const unsubscribe = () => {
   }
 };
 
-const subscribe = (path: string, dispatch: Dispatch<TeamsActions>) => {
-  const unsubscribe = onSnapshot(
-    query(collection(db, path), orderBy('title', 'asc')),
-    (snapshot) => {
-      const payload = snapshot.docs.map<TeamWithoutMembers>(mergeDataAndId);
-      dispatch({ type: FETCH_TEAMS_SUCCESS, payload });
-    },
-    (payload) => {
-      subscription = new Failure(payload);
-      dispatch({ type: FETCH_TEAMS_FAILURE, payload });
-    }
-  );
-
-  return new Success(unsubscribe);
-};
-
 export const fetchTeams = async (dispatch: Dispatch<TeamsActions>) => {
   if (subscription instanceof Initialized) {
-    subscription = new Pending();
-    dispatch({ type: FETCH_TEAMS });
-
-    subscription = subscribe('team', dispatch);
+    subscription = subscribeToCollection(
+      'team',
+      () => dispatch({ type: FETCH_TEAMS }),
+      (payload: TeamWithoutMembers[]) => dispatch({ type: FETCH_TEAMS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_TEAMS_FAILURE, payload }),
+      orderBy('title')
+    );
   }
 };
diff --git a/src/store/tickets/actions.ts b/src/store/tickets/actions.ts
index 6c0f02d028..702dfbfa62 100644
--- a/src/store/tickets/actions.ts
+++ b/src/store/tickets/actions.ts
@@ -1,9 +1,8 @@
-import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
-import { collection, onSnapshot, orderBy, query, Unsubscribe } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Ticket } from '../../models/ticket';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FetchTicketsActions,
   FETCH_TICKETS,
@@ -11,7 +10,6 @@ import {
   FETCH_TICKETS_SUCCESS,
 } from './types';
 
-type Subscription = RemoteData<Error, Unsubscribe>;
 let subscription: Subscription = new Initialized();
 
 export const unsubscribe = () => {
@@ -20,32 +18,14 @@ export const unsubscribe = () => {
   }
 };
 
-const subscribe = (path: string, dispatch: Dispatch<FetchTicketsActions>) => {
-  const unsubscribe = onSnapshot(
-    query(collection(db, path), orderBy('order', 'asc')),
-    (snapshot) => {
-      dispatch({
-        type: FETCH_TICKETS_SUCCESS,
-        payload: snapshot.docs.map<Ticket>(mergeDataAndId),
-      });
-    },
-    (error) => {
-      subscription = new Failure(error);
-      dispatch({
-        type: FETCH_TICKETS_FAILURE,
-        payload: error,
-      });
-    }
-  );
-
-  return new Success(unsubscribe);
-};
-
 export const fetchTickets = async (dispatch: Dispatch<FetchTicketsActions>) => {
   if (subscription instanceof Initialized) {
-    subscription = new Pending();
-    dispatch({ type: FETCH_TICKETS });
-
-    subscription = subscribe('tickets', dispatch);
+    subscription = subscribeToCollection(
+      'tickets',
+      () => dispatch({ type: FETCH_TICKETS }),
+      (payload: Ticket[]) => dispatch({ type: FETCH_TICKETS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_TICKETS_FAILURE, payload }),
+      orderBy('order')
+    );
   }
 };
diff --git a/src/store/videos/actions.ts b/src/store/videos/actions.ts
index d3785b13e1..65bd47459a 100644
--- a/src/store/videos/actions.ts
+++ b/src/store/videos/actions.ts
@@ -1,8 +1,8 @@
-import { collection, getDocs, orderBy, query } from 'firebase/firestore';
+import { Initialized, Success } from '@abraham/remotedata';
+import { orderBy } from 'firebase/firestore';
 import { Dispatch } from 'redux';
-import { db } from '../../firebase';
 import { Video } from '../../models/video';
-import { mergeDataAndId } from '../../utils/firestore';
+import { subscribeToCollection, Subscription } from '../../utils/firestore';
 import {
   FetchVideosActions,
   FETCH_VIDEOS,
@@ -10,26 +10,22 @@ import {
   FETCH_VIDEOS_SUCCESS,
 } from './types';
 
-const getVideos = async (): Promise<Video[]> => {
-  const { docs } = await getDocs(query(collection(db, 'videos'), orderBy('order', 'asc')));
+let subscription: Subscription = new Initialized();
 
-  return docs.map<Video>(mergeDataAndId);
+export const unsubscribe = () => {
+  if (subscription instanceof Success) {
+    subscription.data();
+  }
 };
 
 export const fetchVideos = async (dispatch: Dispatch<FetchVideosActions>) => {
-  dispatch({
-    type: FETCH_VIDEOS,
-  });
-
-  try {
-    dispatch({
-      type: FETCH_VIDEOS_SUCCESS,
-      payload: await getVideos(),
-    });
-  } catch (error) {
-    dispatch({
-      type: FETCH_VIDEOS_FAILURE,
-      payload: error,
-    });
+  if (subscription instanceof Initialized) {
+    subscription = subscribeToCollection(
+      'videos',
+      () => dispatch({ type: FETCH_VIDEOS }),
+      (payload: Video[]) => dispatch({ type: FETCH_VIDEOS_SUCCESS, payload }),
+      (payload: Error) => dispatch({ type: FETCH_VIDEOS_FAILURE, payload }),
+      orderBy('order')
+    );
   }
 };
diff --git a/src/utils/firestore.ts b/src/utils/firestore.ts
index cc49743d23..c9a7fcde26 100644
--- a/src/utils/firestore.ts
+++ b/src/utils/firestore.ts
@@ -1,4 +1,15 @@
-import { DocumentData, QueryDocumentSnapshot } from 'firebase/firestore';
+import { RemoteData, Success } from '@abraham/remotedata';
+import {
+  collection,
+  collectionGroup,
+  DocumentData,
+  onSnapshot,
+  orderBy,
+  query,
+  QueryDocumentSnapshot,
+  Unsubscribe,
+} from 'firebase/firestore';
+import { db } from '../firebase';
 import { Id, ParentId } from '../models/types';
 
 export const mergeDataAndId = <T>(snapshot: QueryDocumentSnapshot<DocumentData>): T & Id => {
@@ -17,3 +28,39 @@ export const dataWithParentId = <T>(
     id: snapshot.id,
   };
 };
+
+export type Subscription = RemoteData<Error, Unsubscribe>;
+
+export const subscribeToCollection = <T>(
+  path: string,
+  onStart: () => void,
+  onNext: (payload: T[]) => void,
+  onError: (error: Error) => void,
+  order = orderBy('name')
+): Subscription => {
+  const unsubscribe = onSnapshot(
+    query(collection(db, path), order),
+    (snapshot) => onNext(snapshot.docs.map<T>(mergeDataAndId)),
+    (payload) => onError(payload)
+  );
+
+  onStart();
+  return new Success(unsubscribe);
+};
+
+export const subscribeToCollectionGroup = <T>(
+  path: string,
+  onStart: () => void,
+  onNext: (payload: T[]) => void,
+  onError: (error: Error) => void,
+  order = orderBy('name')
+): Subscription => {
+  const unsubscribe = onSnapshot(
+    query(collectionGroup(db, path), order),
+    (snapshot) => onNext(snapshot.docs.map<T>(dataWithParentId)),
+    (payload) => onError(payload)
+  );
+
+  onStart();
+  return new Success(unsubscribe);
+};