Feature: Tree Reporting Card (#1099)

* feat: implement tree reporting card statistic hook

* feat: implement tree reporting card component

* feat: import and add Tree reporting card component to home page

* refactor: refactor ReportingCard.hook.js to fetch tree statistic

* refactor: refactor tree reporting card to use refactored useLoadData from ReportingCard.hook.js

* refactor: delete unused ReportingCardTree.hook.js

* feat: add getRawTrees API function for Query tree api

* feat: implement DashStatTotalTrees component

* feat: add DashStatTotalTrees component to Home page

* feat: delete getRawTree api from previous commit

* feat: delete DashStat for trees component implement previously

* feat: remove DashStat for tree in Home page from previous commit

* feat: delete unused Icon in DashStat.container.js

src/components/Home/Home.js

@@ -32,6 +32,7 @@ import ReportingCard5 from '../reportingCards/ReportingCard5';
 import ReportingCard6 from '../reportingCards/ReportingCard6';
 import ReportingCard7 from '../reportingCards/ReportingCard7';
 import ReportingCard8 from '../reportingCards/ReportingCard8';
+import ReportingCard9 from '../reportingCards/ReportingCard9';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuMui from '@material-ui/core/Menu';
 import { format, subDays, formatDistanceToNow } from 'date-fns';
@@ -248,6 +249,9 @@ function Home(props) {
                 <Grid item xs={4}>
                   <ReportingCard8 startDate={startDate} endDate={endDate} />
                 </Grid>
+                <Grid item xs={4}>
+                  <ReportingCard9 startDate={startDate} endDate={endDate} />
+                </Grid>
               </Grid>
             )}
           </div>

src/components/reportingCards/ReportingCard.hook.js

@@ -8,18 +8,18 @@ export default function useLoadData(
   field1,
   field2,
   getNum1 = (e) => e.total,
-  rows
+  rows,
+  category = 'capture'
 ) {
   const [data, setData] = useState(undefined);
 
-  async function loadMore() {
+  async function loadMore(apiUrl, createDatesParams) {
     const res = await axios({
       method: 'get',
-      url: `${process.env.REACT_APP_REPORTING_API_ROOT}/capture/statistics/card`,
+      url: apiUrl,
       params: {
         card_title: field1,
-        capture_created_start_date: startDate ? startDate : undefined,
-        capture_created_end_date: endDate ? endDate : undefined,
+        ...createDatesParams,
         // TODO optimize when data increases
         limit: 100,
       },
@@ -30,30 +30,30 @@ export default function useLoadData(
     }));
   }
 
-  async function load(startDate, endDate) {
+  async function load(apiUrl, createDatesParams) {
+    const CARD_API_URL = apiUrl + '/card';
     const res = await axios({
       method: 'get',
-      url: `${process.env.REACT_APP_REPORTING_API_ROOT}/capture/statistics`,
+      url: apiUrl,
       params: {
-        capture_created_start_date: startDate ? startDate : undefined,
-        capture_created_end_date: endDate ? endDate : undefined,
+        ...createDatesParams,
       },
     });
     const { data } = res;
-    if(!data) {
-        log.error('No data found in response');
+    if (!data) {
+      log.error('No data found in response');
     }
     log.debug('Reporting data: ', data);
 
     let top;
     if (rows !== undefined) {
       // there is rows set, use single API to load it
+
       const res = await axios({
         method: 'get',
-        url: `${process.env.REACT_APP_REPORTING_API_ROOT}/capture/statistics/card`,
+        url: CARD_API_URL,
         params: {
-          capture_created_start_date: startDate ? startDate : undefined,
-          capture_created_end_date: endDate ? endDate : undefined,
+          ...createDatesParams,
           card_title: field1,
           limit: rows,
         },
@@ -64,13 +64,24 @@ export default function useLoadData(
     setData({
       num1: getNum1(data[field1]),
       top: top || data[field1][field2],
-      loadMore,
+      loadMore: () => loadMore(CARD_API_URL, createDatesParams),
     });
   }
 
   useEffect(() => {
     setData(undefined);
-    load(startDate, endDate);
+    const API_URL = `${process.env.REACT_APP_REPORTING_API_ROOT}/${category}/statistics`;
+    const PARAM =
+      category === 'tree'
+        ? {
+            tree_created_start_date: startDate ? startDate : undefined,
+            tree_created_end_date: endDate ? endDate : undefined,
+          }
+        : {
+            capture_created_start_date: startDate ? startDate : undefined,
+            capture_created_end_date: endDate ? endDate : undefined,
+          };
+    load(API_URL, PARAM);
   }, [startDate, endDate]);
 
   return data;

src/components/reportingCards/ReportingCard9.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import Icon from '@material-ui/icons/Eco';
+import useLoadData from './ReportingCard.hook';
+
+export default function ReportingCard9(props) {
+  const { startDate, endDate, disableSeeMore, rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'trees',
+    'trees',
+    undefined,
+    rows,
+    'tree'
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Trees',
+        text1: 'Total',
+      }}
+      icon={Icon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={disableSeeMore}
+    />
+  );
+}