Redesign tree page and add sections for site images and tree benefits (…

…#264)

src/api/apiClient.ts

@@ -5,6 +5,7 @@ import { TeamLeaderboardItem } from '../containers/teamLeaderboard/ducks/types';
 import {
   StewardshipActivities,
   SiteProps,
+  TreeBenefits,
 } from '../containers/treePage/ducks/types';
 import {
   BlockGeoData,
@@ -31,6 +32,7 @@ export interface ApiClient {
     siteId: number,
   ) => Promise<StewardshipActivities>;
   readonly getAllCommonNames: () => Promise<{ names: string[] }>;
+  readonly calculateTreeBenefits: (siteId: number) => Promise<TreeBenefits>;
 }
 
 export enum ApiClientRoutes {
@@ -52,6 +54,8 @@ export const ParameterizedApiRoutes = {
   GET_SITE: (siteId: number): string => `${baseSiteRoute}${siteId}`,
   GET_STEWARDSHIP_ACTIVITIES: (siteId: number): string =>
     `${baseSiteRoute}${siteId}/stewardship_activities`,
+  CALCULATE_TREE_BENEFITS: (siteId: number): string =>
+    `${baseSiteRoute}${siteId}/calculate_benefits`,
 };
 
 export const AppAxiosInstance: AxiosInstance = axios.create({
@@ -124,6 +128,12 @@ const getAllCommonNames = (): Promise<{ names: string[] }> => {
   );
 };
 
+const calculateTreeBenefits = (siteId: number): Promise<TreeBenefits> => {
+  return AppAxiosInstance.get(
+    ParameterizedApiRoutes.CALCULATE_TREE_BENEFITS(siteId),
+  ).then((res) => res.data);
+};
+
 const Client: ApiClient = Object.freeze({
   getUsersLeaderboard,
   getTeamsLeaderboard,
@@ -133,6 +143,7 @@ const Client: ApiClient = Object.freeze({
   getSite,
   getStewardshipActivities,
   getAllCommonNames,
+  calculateTreeBenefits,
 });
 
 export default Client;

src/api/test/apiClient.test.ts

@@ -314,7 +314,7 @@ describe('Api Client Tests', () => {
   });
 
   describe('Get all common names', () => {
-    it('makes the right response', async () => {
+    it('makes the right request', async () => {
       const response = { names: ['tree1', 'tree2'] };
 
       nock(BASE_URL)
@@ -326,4 +326,43 @@ describe('Api Client Tests', () => {
       expect(result).toEqual(response);
     });
   });
+
+  describe('Calculate tree benefits', () => {
+    it('makes the right request', async () => {
+      const response = {
+        energy: 1,
+        energyMoney: 2.2,
+        stormwater: 0,
+        stormwaterMoney: 0,
+        airQuality: 10,
+        airQualityMoney: 11.2,
+        co2Removed: 2.3,
+        co2RemovedMoney: 4,
+        co2Stored: 2.1,
+        co2StoredMoney: 5.6,
+      };
+
+      nock(BASE_URL)
+        .get(ParameterizedApiRoutes.CALCULATE_TREE_BENEFITS(1000))
+        .reply(200, response);
+
+      const result = await ApiClient.calculateTreeBenefits(1000);
+
+      expect(result).toEqual(response);
+    });
+
+    it('makes a bad request', async () => {
+      const response = 'No such site';
+
+      nock(BASE_URL)
+        .get(ParameterizedApiRoutes.CALCULATE_TREE_BENEFITS(20))
+        .reply(400, response);
+
+      const result = await ApiClient.calculateTreeBenefits(20).catch(
+        (err) => err.response.data,
+      );
+
+      expect(result).toEqual(response);
+    });
+  });
 });

src/assets/content.tsx

@@ -60,12 +60,6 @@ export const NUMERIC_MONTHS: { [abbreviatedMonth: string]: number } = {
   Dec: 12,
 };
 
-// Tree Stats
-export const STATS_HEADER = 'Current Status of our Trees';
-export const MONEY_STAT_TITLE = 'Money Saved';
-export const RAIN_STAT_TITLE = 'Rain Water Caught';
-export const EMISSIONS_STAT_TITLE = 'Carbon Emissions Captured';
-
 // Other
 export enum Neighborhoods {
   BACK_BAY = 'Back Bay',