Merged in feature/GFW-1680-templates-page-fix (pull request #493)

Urgent: Update templates filter to work with separate areas (instead of grouping) (medium)

Approved-by: Ri

src/pages/template-edit/TemplateEdit.tsx

@@ -5,6 +5,7 @@ import {
   usePatchV3GfwTemplatesTemplateId,
   usePatchV3TemplatesTemplateIdStatus
 } from "generated/core/coreComponents";
+import { useInvalidateGetTemplates } from "hooks/querys/templates/useGetTemplates";
 import { useAccessToken } from "hooks/useAccessToken";
 import { useHistory, useParams } from "react-router-dom";
 import TemplateForm, { FormFields } from "./components/TemplateForm";
@@ -42,6 +43,7 @@ const TemplateEdit = () => {
   const { httpAuthHeader } = useAccessToken();
   const { templateId } = useParams<{ templateId: string }>();
   const history = useHistory();
+  const invalidateGetTemplates = useInvalidateGetTemplates();
 
   const { data: template, isLoading: templateLoading } = useGetV3GfwTemplatesTemplateId({
     headers: httpAuthHeader,
@@ -70,6 +72,8 @@ const TemplateEdit = () => {
       });
     }
 
+    await invalidateGetTemplates();
+
     history.push(`/templates/${resp.data?.id}`);
   };
 

src/pages/templates/Templates.tsx

@@ -20,6 +20,7 @@ export type TemplateTableRowData = {
   templateName: string;
   version: string;
   area: string;
+  areaIds: string[];
   language: string;
   status: string;
   reports: number;
@@ -44,6 +45,7 @@ const Templates = () => {
       return {
         id: template.id,
         area: template.attributes?.public ? "-" : areasStr || "-",
+        areaIds: template.attributes?.areas?.map(area => area.id) || [],
         language: LOCALES_LIST.find(loc => loc.code === template.attributes?.defaultLanguage)?.name,
         reports: template?.attributes?.answersCount || "-",
         status: template.attributes?.status,
@@ -59,8 +61,17 @@ const Templates = () => {
     });
   }, [templates, intl]);
 
+  const uniqueAreas = useMemo(() => {
+    return templates
+      .map(template => {
+        return template.attributes?.areas;
+      })
+      .flat()
+      .filter((value, index, self) => self.findIndex(t => t?.id === value?.id) === index);
+  }, [templates]);
+
   // Filters
-  const { filters } = useTemplatesFilter(rows);
+  const { filters } = useTemplatesFilter({ templates: rows, areas: uniqueAreas });
   const [filteredRows, setFilteredRows] = useState<TemplateTableRowData[]>(rows);
 
   return (

src/pages/templates/useTemplatesFilter.tsx

@@ -6,19 +6,30 @@ import { ALL_VALUE } from "helpers/table";
 import { IFilter } from "components/ui/DataFilter/DataFilter";
 import { TAvailableTypes } from "components/modals/FormModal";
 
-const useTemplatesFilter = (templates: TemplateTableRowData[] = []) => {
+interface IAreas {
+  id?: string | undefined;
+  name?: string | undefined;
+}
+
+interface IProps {
+  templates?: TemplateTableRowData[];
+  areas?: (IAreas | undefined)[];
+}
+
+const useTemplatesFilter = ({ templates = [], areas = [] }: IProps) => {
   const intl = useIntl();
 
   const areaFilterOptions = useMemo<Option[]>(() => {
-    const uniqueAreas = templates
-      .map(template => ({
-        label: template.area ?? "",
-        value: template.area ?? ""
-      }))
-      .filter((value, index, self) => self.findIndex(t => t.value === value.value) === index)
-      .filter(area => area.value);
+    const uniqueAreas = areas.map(area => ({
+      label: area?.name ?? "",
+      value: area?.id ?? ""
+    }));
 
-    return [{ label: intl.formatMessage({ id: "common.all" }), value: ALL_VALUE }, ...uniqueAreas];
+    return [
+      { label: intl.formatMessage({ id: "common.all" }), value: ALL_VALUE },
+      { label: "-", value: "-" },
+      ...uniqueAreas
+    ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [templates, intl]);
 
@@ -43,7 +54,10 @@ const useTemplatesFilter = (templates: TemplateTableRowData[] = []) => {
           if (!value || value === ALL_VALUE) {
             return true;
           } else {
-            return item.area === value;
+            if (value === "-") {
+              return item.areaIds.length === 0;
+            }
+            return Boolean(item.areaIds.find((id: string) => id === value));
           }
         },
         getShouldShow: () => areaFilterOptions.length > 2