fix(app-aco): re-initialize filter repository on namespace change (#3668

)

packages/app-aco/src/components/AdvancedSearch/AdvancedSearch.tsx

@@ -1,9 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { useApolloClient } from "@apollo/react-hooks";
 
 import { FieldRaw, FilterDTO, FilterRepository } from "./domain";
-import { FiltersGraphQLGateway } from "./gateways";
 
 import { AdvancedSearchPresenter } from "./AdvancedSearchPresenter";
 
@@ -18,20 +16,15 @@ import { AdvancedSearchContainer } from "./AdvancedSearch.styled";
 
 interface AdvancedSearchProps {
     fields: FieldRaw[];
-    namespace: string;
+    repository: FilterRepository;
     onApplyFilter: (data: FilterDTO | null) => void;
 }
 
 export const AdvancedSearch = observer(
-    ({ fields, namespace, onApplyFilter }: AdvancedSearchProps) => {
-        const client = useApolloClient();
-
-        const [repository] = useState(
-            FilterRepository.getInstance(new FiltersGraphQLGateway(client), namespace)
-        );
-        const [presenter] = useState<AdvancedSearchPresenter>(
-            new AdvancedSearchPresenter(repository)
-        );
+    ({ fields, repository, onApplyFilter }: AdvancedSearchProps) => {
+        const presenter = useMemo<AdvancedSearchPresenter>(() => {
+            return new AdvancedSearchPresenter(repository);
+        }, [FilterRepository]);
 
         useEffect(() => {
             presenter.load();

packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilderDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react-lite";
 
 import { FormAPI } from "@webiny/form";
@@ -27,9 +27,9 @@ interface QueryBuilderDrawerProps {
 }
 
 export const QueryBuilderDrawer = observer(({ filter, ...props }: QueryBuilderDrawerProps) => {
-    const [presenter] = useState<QueryBuilderDrawerPresenter>(
-        new QueryBuilderDrawerPresenter(props.fields)
-    );
+    const presenter = useMemo<QueryBuilderDrawerPresenter>(() => {
+        return new QueryBuilderDrawerPresenter(props.fields);
+    }, [props.fields]);
 
     useEffect(() => {
         presenter.load(filter);

packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 
 import { Form } from "@webiny/form";
@@ -26,7 +26,9 @@ interface QuerySaverDialogProps {
 }
 
 export const QuerySaverDialog = observer(({ filter, ...props }: QuerySaverDialogProps) => {
-    const [presenter] = useState<QuerySaverDialogPresenter>(new QuerySaverDialogPresenter());
+    const presenter = useMemo<QuerySaverDialogPresenter>(() => {
+        return new QuerySaverDialogPresenter();
+    }, []);
 
     useEffect(() => {
         presenter.load(filter);

packages/app-aco/src/components/AdvancedSearch/domain/FilterRepository.ts

@@ -9,7 +9,6 @@ export class FilterRepository {
     private gateway: FiltersGatewayInterface;
     private sorter: Sorter<FilterDTO>;
     private loading: Loading;
-    private static instance: FilterRepository;
     private filters: FilterDTO[] = [];
     public readonly namespace: string;
 
@@ -21,13 +20,6 @@ export class FilterRepository {
         makeAutoObservable(this);
     }
 
-    static getInstance(gateway: FiltersGatewayInterface, namespace: string) {
-        if (!FilterRepository.instance) {
-            FilterRepository.instance = new FilterRepository(gateway, namespace);
-        }
-        return FilterRepository.instance;
-    }
-
     getFilters() {
         return cloneDeep(this.filters);
     }

packages/app-aco/src/components/AdvancedSearch/domain/FilterRepositoryFactory.ts

@@ -0,0 +1,25 @@
+import { ApolloClient } from "apollo-client";
+import {
+    FiltersGatewayInterface,
+    FiltersGraphQLGateway
+} from "~/components/AdvancedSearch/gateways";
+import { FilterRepository } from "./FilterRepository";
+
+class FilterRepositoryFactory {
+    private gateway: FiltersGatewayInterface | undefined;
+    private cache: Map<string, FilterRepository> = new Map();
+
+    getRepository(client: ApolloClient<any>, namespace: string) {
+        if (!this.gateway) {
+            this.gateway = new FiltersGraphQLGateway(client);
+        }
+
+        if (!this.cache.has(namespace)) {
+            this.cache.set(namespace, new FilterRepository(this.gateway, namespace));
+        }
+
+        return this.cache.get(namespace) as FilterRepository;
+    }
+}
+
+export const filterRepositoryFactory = new FilterRepositoryFactory();

packages/app-aco/src/components/AdvancedSearch/domain/index.ts

@@ -4,6 +4,7 @@ export * from "./FieldMapper";
 export * from "./Filter";
 export * from "./FilterMapper";
 export * from "./FilterRepository";
+export * from "./FilterRepositoryFactory";
 export * from "./Loading";
 export * from "./Operation";
 export * from "./Sorter";

packages/app-aco/src/components/AdvancedSearch/index.tsx

@@ -1,2 +1,3 @@
 export * from "./AdvancedSearch";
 export * from "./GraphQLInputMapper";
+export * from "./useFilterRepository";

packages/app-aco/src/components/AdvancedSearch/useFilterRepository.tsx

@@ -0,0 +1,8 @@
+import { useApolloClient } from "@apollo/react-hooks";
+import { filterRepositoryFactory } from "~/components/AdvancedSearch/domain";
+
+export const useFilterRepository = (namespace: string) => {
+    const client = useApolloClient();
+
+    return filterRepositoryFactory.getRepository(client, namespace);
+};

packages/app-headless-cms/src/admin/components/ContentEntries/Filters/Filters.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Filters as BaseFilters, FiltersOnSubmit } from "@webiny/app-admin";
 import { useContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntriesList } from "~/admin/views/contentEntries/hooks";
-import { AdvancedSearch, GraphQLInputMapper } from "@webiny/app-aco";
+import { AdvancedSearch, GraphQLInputMapper, useFilterRepository } from "@webiny/app-aco";
 import { useModel } from "~/admin/hooks";
 import { FieldsMapper } from "./FieldsMapper";
 import { FieldRaw, FilterDTO } from "@webiny/app-aco/components/AdvancedSearch/domain";
@@ -12,6 +12,7 @@ export const Filters = () => {
     const list = useContentEntriesList();
     const { model } = useModel();
     const [fields, setFields] = useState<FieldRaw[] | undefined>();
+    const repository = useFilterRepository(`cms:${model.modelId}`);
 
     useEffect(() => {
         setFields(FieldsMapper.toRaw(model));
@@ -55,7 +56,7 @@ export const Filters = () => {
         >
             <AdvancedSearch
                 fields={fields}
-                namespace={model.modelId}
+                repository={repository}
                 onApplyFilter={applyAdvancedSearch}
             />
         </BaseFilters>