Catch errors in mapped requests

Author: kev-3sc

src/modules/templates.ts

@@ -43,7 +43,7 @@ const initialState: TTemplatesState = {
   error: false
 };
 
-export default function reducer(state = initialState, action: TReducerActions) {
+export default function reducer(state = initialState, action: TReducerActions): TTemplatesState {
   switch (action.type) {
     case SET_TEMPLATE: {
       const template = action.payload.reports;

src/pages/area-view/AreaView.tsx

@@ -1,6 +1,6 @@
 import Hero from "components/layouts/Hero/Hero";
 import Map from "components/ui/Map/Map";
-import { FC, useState, useEffect } from "react";
+import { FC, useState, useEffect, useMemo } from "react";
 import { MapboxEvent, Map as MapInstance } from "mapbox-gl";
 import { FormattedMessage } from "react-intl";
 import { TPropsFromRedux } from "./AreaViewContainer";
@@ -38,6 +38,18 @@ const AreasView: FC<IProps & RouteComponentProps<TParams>> = ({
   let { path, url } = useRouteMatch();
   const userId = useGetUserId();
 
+  const templatesToAdd = useMemo(() => {
+    return (
+      templates?.filter(
+        template => !area?.attributes.reportTemplate.find(areaTemplate => areaTemplate.id === template.id)
+      ) || []
+    );
+  }, [area?.attributes.reportTemplate, templates]);
+
+  const teamsToAdd = useMemo(() => {
+    return teams?.filter(team => !areaTeams.find(areaTeam => areaTeam.data.id === team.id)) || [];
+  }, [areaTeams, teams]);
+
   const handleMapLoad = (e: MapboxEvent) => {
     setMapRef(e.target);
   };
@@ -181,13 +193,13 @@ const AreasView: FC<IProps & RouteComponentProps<TParams>> = ({
       </div>
       <Switch>
         <Route path={`${path}/template/add`}>
-          <AddTemplateModal templates={templates} />
+          <AddTemplateModal templates={templatesToAdd} />
         </Route>
         <Route path={`${path}/template/remove/:templateId`}>
           <RemoveTemplateModal />
         </Route>
         <Route path={`${path}/team/add`}>
-          <AddTeamModal teams={teams} />
+          <AddTeamModal teams={teamsToAdd} />
         </Route>
         <Route path={`${path}/team/remove/:teamId`}>
           <RemoveTemplateModal />

src/services/area.ts

@@ -41,7 +41,13 @@ export class AreaService extends BaseService {
 
   addTemplatesToAreas(areaId: string, templateIds: string[]) {
     this.token = store.getState().user.token;
-    const promises = templateIds.map(id => this.fetch(`/${areaId}/template/${id}`, { method: "POST" }));
+    const promises = templateIds.map(async id => {
+      const resp = await this.fetch(`/${areaId}/template/${id}`, { method: "POST" });
+      if (!resp.ok) {
+        throw Error(await resp.text());
+      }
+      return resp;
+    });
 
     return Promise.all(promises);
   }
@@ -58,7 +64,13 @@ export class AreaService extends BaseService {
 
   addTeamsToAreas(areaId: string, teamIds: string[]) {
     this.token = store.getState().user.token;
-    const promises = teamIds.map(id => this.fetch(`/${areaId}/team/${id}`, { method: "POST" }));
+    const promises = teamIds.map(async id => {
+      const resp = await this.fetch(`/${areaId}/team/${id}`, { method: "POST" });
+      if (!resp.ok) {
+        throw Error(await resp.text());
+      }
+      return resp;
+    });
 
     return Promise.all(promises);
   }