load and merge filters

ui/src/app/components/routes/Routes.js

@@ -62,6 +62,7 @@ const RoutesLoading = () => {
   );
 };
 
+
 const createRoutesSet = (type, useRoutes) => () => {
   const results = useRoutes();
   const pageKey = {

ui/src/app/context/filters.js

@@ -65,6 +65,9 @@ const filtersEqual = (a, b) => {
  * Deep copy of filters
  */
 const cloneFilters = (filters) => {
+  return filters;
+
+  /*
   const nextFilters = [
     {...filters[FILTER_GROUP_SOURCES]},
     {...filters[FILTER_GROUP_ASNS]},
@@ -83,6 +86,7 @@ const cloneFilters = (filters) => {
   nextFilters[FILTER_GROUP_LARGE_COMMUNITIES].filters =
     [...nextFilters[FILTER_GROUP_LARGE_COMMUNITIES].filters];
   return nextFilters;
+  */
 }
 
 
@@ -114,31 +118,6 @@ const cmpFilterCommunity = (set, filter) => {
   return null;
 }
 
-/*
- * Merge filters
- */
-const _mergeFilters = (a, b) => {
-  let groups = initializeFilterState();
-  let setCmp = [];
-  setCmp[FILTER_GROUP_SOURCES] = cmpFilterValue;
-  setCmp[FILTER_GROUP_ASNS] = cmpFilterValue;
-  setCmp[FILTER_GROUP_COMMUNITIES] = cmpFilterCommunity;
-  setCmp[FILTER_GROUP_EXT_COMMUNITIES] = cmpFilterCommunity;
-  setCmp[FILTER_GROUP_LARGE_COMMUNITIES] = cmpFilterCommunity;
-  for (const i in groups) {
-    groups[i].filters = mergeFilterSet(setCmp[i], a[i].filters, b[i].filters);
-  }
-  return groups;
-}
-
-const mergeFilters = (a, ...other) => {
-  let result = cloneFilters(a);
-  for (const filters of other) {
-    result = _mergeFilters(result, cloneFilters(filters));
-  }
-  return result;
-}
-
 /*
  * Merge list of filters
  */
@@ -156,6 +135,43 @@ const mergeFilterSet = (inSet, a, b) => {
   return result;
 }
 
+
+/*
+ * Merge filters
+ */
+const _mergeFilters = (a, b) => {
+  let groups = initializeFilterState();
+  if (!a || !b) {
+    return groups;
+  }
+  let setCmp = [];
+  setCmp[FILTER_GROUP_SOURCES] = cmpFilterValue;
+  setCmp[FILTER_GROUP_ASNS] = cmpFilterValue;
+  setCmp[FILTER_GROUP_COMMUNITIES] = cmpFilterCommunity;
+  setCmp[FILTER_GROUP_EXT_COMMUNITIES] = cmpFilterCommunity;
+  setCmp[FILTER_GROUP_LARGE_COMMUNITIES] = cmpFilterCommunity;
+  for (const i in groups) {
+    if (a[i]?.filters && b[i]?.filters) {
+      groups[i].filters = mergeFilterSet(setCmp[i], a[i].filters, b[i].filters);
+    }
+    else if(a[i]?.filters) {
+      groups[i].filters = a[i].filters;
+    }
+    else if(b[i]?.filters) {
+      groups[i].filters = b[i].filters;
+    }
+  }
+  return groups;
+}
+
+const mergeFilters = (a, ...other) => {
+  let result = a;
+  for (const filters of other) {
+    result = _mergeFilters(result, filters);
+  }
+  return result;
+}
+
 /*
  * Does a single group have any filters?
  */
@@ -281,3 +297,58 @@ const decodeFiltersApplied = (params) => {
   return groups;
 }
 
+
+/*
+ * FiltersContext
+ */
+const initialContext = {
+  applied: [],
+  available: [],
+};
+
+const FiltersContext = createContext(initialContext);
+
+export const useFilters = () => useContext(FiltersContext);
+
+const useRoutesFilters = (routes) => {
+  return useMemo(() => {
+    if (!routes.requested || routes.loading) {
+      return { applied: [], available: [] };
+    }
+    return {
+      applied: routes.filtersApplied,
+      available: routes.filtersAvailable,
+    };
+  }, [routes]);
+}
+
+/**
+ * RoutesFiltersProvider merged the filters from the
+ * received, filtered and noexport responses
+ */
+export const RoutesFiltersProvider = ({children}) => {
+  const received = useRoutesFilters(useRoutesReceived());
+  const filtered = useRoutesFilters(useRoutesFiltered());
+  const noexport = useRoutesFilters(useRoutesNotExported());
+
+  const filters = useMemo(() => {
+    const applied = mergeFilters(
+      received.applied,
+      filtered.applied,
+      noexport.applied,
+    );
+    const available = mergeFilters(
+      received.available,
+      filtered.available,
+      noexport.available,
+    );
+    return { applied, available };
+  }, [received, filtered, noexport]);
+
+  return (
+    <FiltersContext.Provider value={filters}>
+      {children}
+    </FiltersContext.Provider>
+  );
+};
+

ui/src/app/pages/RoutesPage.js

@@ -34,6 +34,10 @@ import { RoutesReceivedProvider
        , useRoutesLoading
        }
   from 'app/context/routes';
+import { RoutesFiltersProvider
+       , useFilters
+       }
+  from 'app/context/filters';
 
 import PageHeader
   from 'app/components/page/Header';
@@ -94,6 +98,8 @@ const RoutesPageSearch = () => {
 const RoutesPageContent = () => {
   const localRelatedPeers = useLocalRelatedPeers();
   const isLoading = useRoutesLoading();
+  const filters = useFilters();
+  console.log(filters);
 
   let pageClass = "routeservers-page";
   if (localRelatedPeers.length > 1) {
@@ -126,10 +132,6 @@ const RoutesPageContent = () => {
                          linkProps={this.props.linkProps}
                          filtersApplied={this.props.filtersApplied}
                          filtersAvailable={this.props.filtersAvailable} />
-          <RelatedPeersCard
-            neighbors={this.props.allRelatedPeers}
-            rsId={this.props.params.routeserverId} 
-            protocolId={this.props.params.protocolId} />
             */ }
         </div>
       </div>
@@ -173,7 +175,9 @@ const RoutesPage = () => {
       query={query.q}
       page={query.pr}>{/* innermost used for api status */}
 
+      <RoutesFiltersProvider>
         <RoutesPageContent />
+      </RoutesFiltersProvider>
 
     </RoutesReceivedProvider>
     </RoutesFilteredProvider>