Merge pull request #2056 from Plant-for-the-Planet-org/feature/dynami…

…c_stats_number_of_donated_trees

load total number of donated trees dynamically

app.json

@@ -59,6 +59,11 @@
     "SITE_IMAGERY_API_URL": {
       "required": false,
       "description": "For showing vegetation change"
+    },
+    "WEBHOOK_URL": {
+      "required": true,
+      "description": "URL for webhooks of automation service",
+      "value": "https://automate.plant-for-the-planet.org/webhook"
     }
   },
   "formation": {

next.config.js

@@ -122,6 +122,7 @@ const nextConfig = {
     ENABLE_ANALYTICS: DB_CONN_URL ? true : false,
     REDIS_URL: process.env.REDIS_URL,
     REDIS_TOKEN: process.env.REDIS_TOKEN,
+    WEBHOOK_URL: process.env.WEBHOOK_URL,
   },
   trailingSlash: false,
   reactStrictMode: true,

pages/sites/[slug]/[locale]/all.tsx

@@ -7,6 +7,7 @@ import { handleError, APIError } from '@planet-sdk/common';
 import {
   LeaderBoardList,
   TenantScore,
+  TreesDonated,
 } from '../../../../src/features/common/types/leaderboard';
 import { useTenant } from '../../../../src/features/common/Layout/TenantContext';
 import { Tenant } from '@planet-sdk/common/build/types/tenant';
@@ -32,7 +33,7 @@ export default function Home({ pageProps }: Props) {
   const [leaderboard, setLeaderboard] = React.useState<LeaderBoardList | null>(
     null
   );
-  const { redirect, setErrors } = React.useContext(ErrorHandlingContext);
+  const { setErrors } = React.useContext(ErrorHandlingContext);
 
   const router = useRouter();
   const { setTenantConfig } = useTenant();
@@ -77,17 +78,37 @@ export default function Home({ pageProps }: Props) {
     loadTenantScore();
   }, []);
 
+
+  const [treesDonated, setTreesDonated] = React.useState<TreesDonated | null>(
+    null
+  );
+
+  React.useEffect(() => {
+    async function loadTreesDonated() {
+      try {
+        const newTreesDonated = await getRequest<TreesDonated>(
+          pageProps.tenantConfig.id,
+          `${process.env.WEBHOOK_URL}/platform/total-tree-count`
+        );
+        setTreesDonated(newTreesDonated);
+      } catch (err) {
+        setErrors(handleError(err as APIError));
+      }
+    }
+    loadTreesDonated();
+  }, []);
+
   let AllPage;
   function getAllPage() {
     switch (pageProps.tenantConfig.config.slug) {
       case 'planet':
         AllPage = (
-          <LeaderBoard leaderboard={leaderboard} tenantScore={tenantScore} />
+          <LeaderBoard leaderboard={leaderboard} tenantScore={tenantScore} treesDonated={treesDonated} />
         );
         return AllPage;
       case 'ttc':
         AllPage = (
-          <LeaderBoard leaderboard={leaderboard} tenantScore={tenantScore} />
+          <LeaderBoard leaderboard={leaderboard} tenantScore={tenantScore} treesDonated={treesDonated}/>
         );
         return AllPage;
       default:

src/features/common/types/leaderboard.d.ts

@@ -12,3 +12,8 @@ export type LeaderBoardList = {
   mostRecent: LeaderBoardItem[];
   mostDonated: LeaderBoardItem[];
 };
+
+export type TreesDonated = {
+  trees_since_2019: number;
+  updated_on: string;
+};

src/tenants/planet/LeaderBoard/components/Stats.tsx

@@ -6,12 +6,17 @@ import StatsInfoModal from './StatsInfoModal';
 import { useLocale, useTranslations } from 'next-intl';
 import { localizedAbbreviatedNumber } from '../../../../utils/getFormattedNumber';
 import { ThemeContext } from '../../../../theme/themeContext';
+import {
+  TenantScore,
+  TreesDonated,
+} from '../../../../features/common/types/leaderboard';
 
 interface Props {
-  tenantScore: any;
+  tenantScore: TenantScore;
+  treesDonated: TreesDonated;
 }
-export default function Stats({ tenantScore }: Props): ReactElement {
-  const [infoExpanded, setInfoExpanded] = React.useState(null);
+export default function Stats({ tenantScore, treesDonated }: Props): ReactElement {
+  const [infoExpanded, setInfoExpanded] = React.useState<String | null>(null);
   const tPlanet = useTranslations('Planet');
   const locale = useLocale();
   const [openModal, setModalOpen] = React.useState(false);
@@ -25,7 +30,7 @@ export default function Stats({ tenantScore }: Props): ReactElement {
       <div className={styles.container}>
         <div className={styles.statCard}>
           <h2 className={styles.statNumber}>
-            {localizedAbbreviatedNumber(locale, Number(79586370), 2)}
+            {localizedAbbreviatedNumber(locale, Number(treesDonated.trees_since_2019), 2)}
           </h2>
           <h3 className={styles.statText}>{tPlanet('treesDonated')}</h3>
           <button

src/tenants/planet/LeaderBoard/index.tsx

@@ -6,21 +6,24 @@ import Stories from './components/Stories';
 import {
   LeaderBoardList,
   TenantScore,
+  TreesDonated,
 } from '../../../features/common/types/leaderboard';
 
 interface Props {
   leaderboard: LeaderBoardList | null;
   tenantScore: TenantScore | null;
+  treesDonated: TreesDonated | null;
 }
 
 export default function index({
   leaderboard,
   tenantScore,
+  treesDonated,
 }: Props): ReactElement {
   return (
     <div>
       <Score leaderboard={leaderboard} />
-      {tenantScore && <Stats tenantScore={tenantScore} />}
+      {(tenantScore && treesDonated) && <Stats tenantScore={tenantScore} treesDonated={treesDonated}/>}
       <Stories />
       <Footer />
     </div>