[TM-754] Some bug fixes for the site report trees table.

src/components/elements/ServerSideTable/ServerSideTable.tsx

@@ -18,7 +18,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>({
@@ -68,7 +67,6 @@ export function ServerSideTable<TData extends RowData>({
             setPage(1);
             setPageSize(size);
           }}
-          treeSpeciesShow={props.treeSpeciesShow}
         />
       )}
     </>

src/components/extensive/Pagination/index.tsx

@@ -8,29 +8,22 @@ export interface PaginationProps extends PageSelectorProps {
   hasPageSizeSelector?: boolean;
   defaultPageSize?: number;
   setPageSize?: (count: number) => void;
-  treeSpeciesShow?: boolean;
 }
 
-function Pagination(props: PaginationProps) {
-  return props.treeSpeciesShow ? (
-    <div className={classNames("flex items-center justify-between", props.containerClassName)}>
-      <PageSelector {...props} />
-    </div>
-  ) : (
-    <div className={classNames("flex items-center justify-between", props.containerClassName)}>
-      {props.hasPageSizeSelector ? (
-        <PerPageSelector
-          label="Per page"
-          options={[5, 10, 15, 20, 50]}
-          defaultValue={props.defaultPageSize}
-          onChange={props.setPageSize!}
-        />
-      ) : (
-        <div />
-      )}
-      <PageSelector {...props} />
-    </div>
-  );
-}
+const Pagination = (props: PaginationProps) => (
+  <div className={classNames("flex items-center justify-between", props.containerClassName)}>
+    {props.hasPageSizeSelector ? (
+      <PerPageSelector
+        label="Per page"
+        options={[5, 10, 15, 20, 50]}
+        defaultValue={props.defaultPageSize}
+        onChange={props.setPageSize!}
+      />
+    ) : (
+      <div />
+    )}
+    <PageSelector {...props} />
+  </div>
+);
 
 export default Pagination;

src/components/extensive/Tables/TreeSpeciesTable.tsx

@@ -15,9 +15,9 @@ export interface TreeSpeciesTableProps {
 const TreeSpeciesTable = ({ modelName, modelUUID, collection, onFetch }: 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 }: TreeSpe
       : false;
 
   const showTreeSpecies = useProcessRecordData(modelUUID, modelName, "treeSpecies");
+  const data = showTreeSpecies ? treeSpecies?.data?.map(item => ({ ...item, amount: item.amount ?? 0 })) ?? [] : [];
   return (
     <div>
       <ServerSideTable
         meta={treeSpecies?.meta}
-        data={(showTreeSpecies ? treeSpecies?.data?.map(item => ({ ...item, amount: item.amount || 0 })) : []) ?? []}
+        data={data}
         isLoading={isLoading}
-        treeSpeciesShow={true}
         onQueryParamChange={setQueryParams}
         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

@@ -166,7 +166,7 @@ const SiteReportDetailPage = () => {
                       label={t("Total Trees Planted")}
                       value={siteReport.total_trees_planted_count}
                     />
-                    <TreeSpeciesTable modelName="site-report" modelUUID={siteReportUUID} />
+                    <TreeSpeciesTable modelName="site-report" modelUUID={siteReportUUID} collection="tree-planted" />
                   </GenericField>
                   <GenericField label={t("Direct Seeding")}>
                     <TextField