Merge pull request #257 from wri/merge/main-staging-ii

[MERGE] main -> staging post II release

src/components/elements/ServerSideTable/ServerSideTable.tsx

@@ -20,7 +20,6 @@ export interface ServerSideTableProps<TData> extends Omit<TableProps<TData>, "on
   meta: any;
   onTableStateChange?: (state: ServerSideTableState) => void;
   onQueryParamChange?: (queryParams: any) => void;
-  treeSpeciesShow?: boolean;
 }
 
 export function ServerSideTable<TData extends RowData>({
@@ -72,7 +71,6 @@ export function ServerSideTable<TData extends RowData>({
             setPage(1);
             setPageSize(size);
           }}
-          treeSpeciesShow={props.treeSpeciesShow}
         />
       )}
     </>

src/components/extensive/Pagination/index.tsx

@@ -10,17 +10,12 @@ export interface PaginationProps extends PageSelectorProps {
   hasPageSizeSelector?: boolean;
   defaultPageSize?: number;
   setPageSize?: (count: number) => void;
-  treeSpeciesShow?: boolean;
   variant?: VariantPagination;
 }
 
 function Pagination(props: PaginationProps) {
   const t = useT();
-  return props.treeSpeciesShow ? (
-    <div className={classNames("flex items-center justify-between", props.containerClassName)}>
-      <PageSelector variantText={props.variant?.VariantPageText} {...props} />
-    </div>
-  ) : (
+  return (
     <div className={classNames("flex items-center justify-between", props.containerClassName)}>
       {props.hasPageSizeSelector ? (
         <PerPageSelector

src/components/extensive/Tables/TreeSpeciesTable.tsx

@@ -16,9 +16,9 @@ export interface TreeSpeciesTableProps {
 const TreeSpeciesTable = ({ modelName, modelUUID, collection, onFetch, variantTable }: TreeSpeciesTableProps) => {
   const t = useT();
 
-  const [queryParams, setQueryParams] = useState<any>();
+  const [queryParams, setQueryParams] = useState<any>({});
 
-  if (collection && queryParams) {
+  if (collection != null) {
     queryParams["filter[collection]"] = collection;
   }
 
@@ -39,13 +39,13 @@ const TreeSpeciesTable = ({ modelName, modelUUID, collection, onFetch, variantTa
       ? treeSpecies?.data?.reduce((total, item) => total + (typeof item.amount === "number" ? 1 : 0), 0) > 0
       : false;
 
+  const data = treeSpecies?.data?.map(item => ({ ...item, amount: item.amount ?? 0 })) ?? [];
   return (
     <div>
       <ServerSideTable
         meta={treeSpecies?.meta}
-        data={treeSpecies?.data?.map(item => ({ ...item, amount: item.amount ?? 0 })) ?? []}
+        data={data}
         isLoading={isLoading}
-        treeSpeciesShow={true}
         onQueryParamChange={setQueryParams}
         variant={variantTable}
         columns={[

src/hooks/useProcessRecordData.ts

@@ -1,41 +1,30 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 import { GetV2FormsENTITYUUIDResponse, useGetV2FormsENTITYUUID } from "@/generated/apiComponents";
 
 export function useProcessRecordData(modelUUID: string, modelName: string, inputType: string) {
-  const [show, setShow] = useState(false);
   const { data: record } = useGetV2FormsENTITYUUID<{ data: GetV2FormsENTITYUUIDResponse }>({
     pathParams: {
       uuid: modelUUID,
       entity: modelName
     }
   });
 
-  const ProcesssRecordData = useMemo(() => {
-    const viewDataTable = record?.data?.form?.form_sections.map((formSection: any) =>
-      formSection.form_questions
-        .map((formQuestion: any) => formQuestion.uuid)
-        .map((formQuestionUUID: any) => record?.data?.answers?.[formQuestionUUID])
-    );
+  return useMemo(() => {
+    if (record?.data?.form == null) return false;
 
-    for (let sectionIndex in record?.data?.form?.form_sections) {
-      for (let questionIndex in record?.data?.form?.form_sections[sectionIndex].form_questions) {
-        const question = record?.data?.form?.form_sections[sectionIndex].form_questions[questionIndex];
-        if (question.children) {
-          for (let child of question.children) {
-            if (child.input_type === inputType) {
-              setShow(viewDataTable?.[sectionIndex]?.[questionIndex]);
-            }
+    for (const section of record.data.form.form_sections) {
+      for (const question of section.form_questions) {
+        for (const child of question.children ?? []) {
+          if (child.input_type == inputType) {
+            // Only hide the data if the answer is an explicit false in order to not break the UI
+            // for reports that are older than the current version of the form.
+            return record.data.answers![child.parent_id] !== false;
           }
-        } else {
-          setShow(true);
         }
       }
     }
 
-    return show;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [record, inputType, modelUUID, modelName, show]);
-
-  return ProcesssRecordData;
+    return true;
+  }, [record, inputType, modelUUID, modelName]);
 }

src/pages/reports/site-report/[uuid].page.tsx

@@ -161,9 +161,19 @@ const SiteReportDetailPage = () => {
                     <LongTextField title={t("Public Narrative")}>{siteReport.public_narrative}</LongTextField>
                   </When>
                   <GenericField label={t("Trees Planted")}>
-                    <TreeSpeciesTable modelName="site-report" modelUUID={siteReportUUID} />
+                    <TextField
+                      className="mt-2"
+                      label={t("Total Trees Planted")}
+                      value={siteReport.total_trees_planted_count}
+                    />
+                    <TreeSpeciesTable modelName="site-report" modelUUID={siteReportUUID} collection="tree-planted" />
                   </GenericField>
                   <GenericField label={t("Direct Seeding")}>
+                    <TextField
+                      className="mt-2"
+                      label={t("Total Direct Seedings")}
+                      value={siteReport.total_seeds_planted_count}
+                    />
                     <SeedingsTable modelName="site-report" modelUUID={siteReportUUID} type="count" />
                   </GenericField>
                   <GenericField label={t("Disturbances")}>