Switch partners to createSlice

Author: abraham

firestore.indexes.json

@@ -23,6 +23,28 @@
         }
       ]
     },
+    {
+      "collectionGroup": "items",
+      "fieldPath": "order",
+      "indexes": [
+        {
+          "order": "ASCENDING",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "order": "DESCENDING",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "arrayConfig": "CONTAINS",
+          "queryScope": "COLLECTION"
+        },
+        {
+          "order": "ASCENDING",
+          "queryScope": "COLLECTION_GROUP"
+        }
+      ]
+    },
     {
       "collectionGroup": "members",
       "fieldPath": "name",

firestore.rules

@@ -61,6 +61,7 @@ service cloud.firestore {
       // Disallow writes
       allow write: if false;
 
+      // TODO: Remove
       match /items/{itemId} {
         // Applies to single document read requests
         allow get;
@@ -73,6 +74,11 @@ service cloud.firestore {
       }
     }
 
+    match /{path=**}/items/{itemId} {
+      allow read;
+      allow write: if false;
+    }
+
     match /potentialPartners/{partnerId} {
       allow delete: if false;
 

src/elements/partners-block.ts

@@ -7,8 +7,7 @@ import '@power-elements/lazy-image';
 import { RootState, store } from '../store';
 import { closeDialog, openSubscribeDialog } from '../store/dialogs/actions';
 import { ReduxMixin } from '../store/mixin';
-import { fetchPartners } from '../store/partners/actions';
-import { initialPartnersState } from '../store/partners/state';
+import { PartnerGroupsState, selectPartnerGroups } from '../store/partners';
 import { addPotentialPartner } from '../store/potential-partners/actions';
 import {
   initialPotentialPartnersState,
@@ -116,7 +115,7 @@ export class PartnersBlock extends ReduxMixin(PolymerElement) {
   @property({ type: Object })
   potentialPartners = initialPotentialPartnersState;
   @property({ type: Object })
-  partners = initialPartnersState;
+  partners: PartnerGroupsState = new Initialized();
 
   @computed('partners')
   get pending() {
@@ -129,17 +128,10 @@ export class PartnersBlock extends ReduxMixin(PolymerElement) {
   }
 
   override stateChanged(state: RootState) {
-    this.partners = state.partners;
+    this.partners = selectPartnerGroups(state);
     this.potentialPartners = state.potentialPartners;
   }
 
-  override connectedCallback() {
-    super.connectedCallback();
-    if (this.partners instanceof Initialized) {
-      store.dispatch(fetchPartners);
-    }
-  }
-
   private addPotentialPartner() {
     openSubscribeDialog({
       title: this.partnersBlock.form.title,

src/models/partner-group.ts

@@ -1,6 +1,12 @@
 import { Partner, PartnerData } from './partner';
 import { Id } from './types';
 
+export interface PartnerGroupWithoutItems {
+  id: string;
+  order: number;
+  title: string;
+}
+
 export interface PartnerGroupData {
   items: PartnerData[];
   order: number;

src/models/partner.ts

@@ -1,4 +1,4 @@
-import { Id } from './types';
+import { Id, ParentId } from './types';
 
 export interface PartnerData {
   logoUrl: string;
@@ -7,4 +7,4 @@ export interface PartnerData {
   url: string;
 }
 
-export type Partner = Id & PartnerData;
+export type Partner = Id & ParentId & PartnerData;

src/store/feedback/index.ts

@@ -126,7 +126,7 @@ export const selectFeedbackSubscription = (state: RootState) => state.feedback.s
 export const selectFeedback = (state: RootState) => state.feedback.data;
 export const selectFeedbackDelete = (state: RootState) => state.feedback.delete;
 
-export const selectSubscription = createSelector(
+const selectSubscription = createSelector(
   selectUser,
   selectFeedbackSubscription,
   (user: UserState, subscription: FeedbackState['subscription']): FeedbackState['subscription'] => {

src/store/index.ts

@@ -3,19 +3,19 @@ import { authReducer } from './auth/reducers';
 import { blogReducer } from './blog/reducers';
 import { dialogsReducer } from './dialogs/reducers';
 import { featuredSessionsReducer } from './featured-sessions/reducers';
+import feedback from './feedback';
 import { filtersReducer } from './filters/reducers';
 import { galleryReducer } from './gallery/reducers';
 import { membersReducer } from './members/reducers';
 import notificationPermission from './notification-permission';
 import { notificationsSubscribersReducer } from './notifications-subscribers/reducers';
 import { notificationsUsersReducer } from './notifications-users/reducers';
-import { partnersReducer } from './partners/reducers';
+import partners from './partners';
 import { potentialPartnersReducer } from './potential-partners/reducers';
 import { previousSpeakersReducer } from './previous-speakers/reducers';
 import { scheduleReducer } from './schedule/reducers';
 import { sessionsReducer } from './sessions/reducers';
 import snackbars from './snackbars';
-import feedback from './feedback';
 import { speakersReducer } from './speakers/reducers';
 import { subscribeReducer } from './subscribe/reducers';
 import { teamsReducer } from './teams/reducers';
@@ -40,15 +40,15 @@ export const store = configureStore({
     filters: filtersReducer,
     gallery: galleryReducer,
     members: membersReducer,
-    snackbars,
     notificationPermission,
     notificationsSubscribers: notificationsSubscribersReducer,
     notificationsUsers: notificationsUsersReducer,
-    partners: partnersReducer,
+    partners,
     potentialPartners: potentialPartnersReducer,
     previousSpeakers: previousSpeakersReducer,
     schedule: scheduleReducer,
     sessions: sessionsReducer,
+    snackbars,
     speakers: speakersReducer,
     subscribed: subscribeReducer,
     teams: teamsReducer,

src/store/partners/actions.ts

@@ -0,0 +1,138 @@
+import { Failure, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
+import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+  collection,
+  collectionGroup,
+  onSnapshot,
+  orderBy,
+  query,
+  Unsubscribe,
+} from 'firebase/firestore';
+import { RootState, store } from '..';
+import { db } from '../../firebase';
+import { Partner } from '../../models/partner';
+import { PartnerGroup, PartnerGroupWithoutItems } from '../../models/partner-group';
+import { dataWithParentId, mergeDataAndId } from '../../utils/firestore';
+
+export type PartnerGroupsState = RemoteData<Error, PartnerGroup[]>;
+
+export interface PartnersState {
+  groups: RemoteData<Error, PartnerGroupWithoutItems[]>;
+  partners: RemoteData<Error, Partner[]>;
+  partnersSubscription: RemoteData<Error, Unsubscribe>;
+  groupsSubscription: RemoteData<Error, Unsubscribe>;
+}
+
+export const initialState = {
+  groups: new Initialized(),
+  partners: new Initialized(),
+  partnersSubscription: new Initialized(),
+  groupsSubscription: new Initialized(),
+} as PartnersState;
+
+const subscribeToPartners = () => {
+  return onSnapshot(
+    query(collectionGroup(db, 'items'), orderBy('order')),
+    (snapshot) => {
+      store.dispatch(setPartnersSuccess(snapshot.docs.map<Partner>(dataWithParentId)));
+    },
+    (error) => store.dispatch(setPartnersFailure(error as Error))
+  );
+};
+
+const subscribeToGroups = () => {
+  return onSnapshot(
+    query(collection(db, 'partners'), orderBy('order')),
+    (snapshot) => {
+      store.dispatch(setGroupsSuccess(snapshot.docs.map<PartnerGroupWithoutItems>(mergeDataAndId)));
+    },
+    (error) => store.dispatch(setGroupsFailure(error as Error))
+  );
+};
+
+const partnersSlice = createSlice({
+  name: 'partners',
+  initialState,
+  reducers: {
+    subscribe(state) {
+      if (state.partnersSubscription instanceof Initialized) {
+        state.partnersSubscription = new Success(subscribeToPartners());
+        state.partners = new Pending();
+      }
+      if (state.groupsSubscription instanceof Initialized) {
+        state.groupsSubscription = new Success(subscribeToGroups());
+        state.groups = new Pending();
+      }
+    },
+    unsubscribe(state) {
+      if (state.partnersSubscription instanceof Success) {
+        state.partnersSubscription.data();
+      }
+      if (state.groupsSubscription instanceof Success) {
+        state.groupsSubscription.data();
+      }
+      state.partnersSubscription = new Initialized();
+      state.partners = new Initialized();
+      state.groupsSubscription = new Initialized();
+      state.groups = new Initialized();
+    },
+    setPartnersSuccess(state, action: PayloadAction<Partner[]>) {
+      state.partners = new Success(action.payload);
+    },
+    setPartnersFailure(state, action: PayloadAction<Error>) {
+      state.partners = new Failure(action.payload);
+    },
+    setGroupsSuccess(state, action: PayloadAction<PartnerGroupWithoutItems[]>) {
+      state.groups = new Success(action.payload);
+    },
+    setGroupsFailure(state, action: PayloadAction<Error>) {
+      state.groups = new Failure(action.payload);
+    },
+  },
+});
+
+const selectPartners = (state: RootState) => state.partners.partners;
+const selectGroups = (state: RootState) => state.partners.groups;
+
+export const selectPartnerGroups = createSelector(
+  selectGroups,
+  selectPartners,
+  (groups: PartnersState['groups'], partners: PartnersState['partners']): PartnerGroupsState => {
+    if (groups instanceof Initialized || partners instanceof Initialized) {
+      store.dispatch(subscribe());
+      return new Pending();
+    }
+
+    if (groups instanceof Success && partners instanceof Success) {
+      const partnerGroups = groups.data.map((group) => {
+        return {
+          ...group,
+          items: partners.data.filter((partner: Partner) => partner.parentId === group.id),
+        };
+      });
+      return new Success(partnerGroups);
+    }
+
+    if (groups instanceof Failure) {
+      return groups;
+    }
+
+    if (partners instanceof Failure) {
+      return partners;
+    }
+
+    return new Pending();
+  }
+);
+
+const {
+  subscribe,
+  unsubscribe,
+  setPartnersSuccess,
+  setPartnersFailure,
+  setGroupsSuccess,
+  setGroupsFailure,
+} = partnersSlice.actions;
+
+export { subscribe, unsubscribe };
+export default partnersSlice.reducer;