Use peer filter values

Author: gustavlrsn

components/dashboard/filters/FilterDropdown.tsx

@@ -204,7 +204,7 @@ const FilterButton = ({ filterKey, setFilter, filters, tmpValue, open, highlight
 };
 
 function FilterDropdown<FV, FM>({
-  filterKey: currentFilterKey,
+  filterKey: initialFilterKey,
   remainingFilters,
   filters,
   setFilter,
@@ -223,28 +223,34 @@ function FilterDropdown<FV, FM>({
   locked?: boolean;
 }) {
   const [open, setOpen] = React.useState(false);
-  const [filterKey, setFilterKey] = React.useState(currentFilterKey);
-  const [tmpValue, setTmpValue] = React.useState(values[currentFilterKey]);
+  const [activeFilterKey, setActiveFilterKey] = React.useState(initialFilterKey);
+  const currentFilterValue = values[initialFilterKey];
+  const [tmpValue, setTmpValue] = React.useState(currentFilterValue);
 
   React.useEffect(() => {
-    setFilterKey(currentFilterKey);
-    setTmpValue(values[currentFilterKey]);
-  }, [remainingFilters, currentFilterKey, values]);
+    // Reset if the currently selected filter type is no longer available
+    // (e.g., it was just applied and moved to displayed filters)
+    if (activeFilterKey && remainingFilters && !remainingFilters.includes(activeFilterKey)) {
+      setActiveFilterKey(initialFilterKey);
+    }
+    // Always sync tmpValue with the current filter value
+    setTmpValue(currentFilterValue);
+  }, [activeFilterKey, initialFilterKey, currentFilterValue, remainingFilters]);
 
   return (
     <Popover
       open={open}
       onOpenChange={open => {
         if (!locked) {
-          setFilterKey(currentFilterKey);
-          setTmpValue(values[currentFilterKey]);
+          setActiveFilterKey(initialFilterKey);
+          setTmpValue(values[initialFilterKey]);
           setOpen(open);
         }
       }}
     >
       <PopoverAnchor>
         <FilterButton
-          filterKey={filterKey}
+          filterKey={activeFilterKey}
           filters={filters}
           tmpValue={tmpValue}
           setFilter={setFilter}
@@ -255,19 +261,19 @@ function FilterDropdown<FV, FM>({
         />
       </PopoverAnchor>
       <PopoverContent className="w-[260px] p-0" align="start">
-        {filterKey ? (
+        {activeFilterKey ? (
           <SetFilter
             tmpValue={tmpValue}
             setTmpValue={setTmpValue}
             filters={filters}
-            filterKey={filterKey}
+            filterKey={activeFilterKey}
             setFilter={setFilter}
             setOpen={setOpen}
             meta={meta}
             values={values}
           />
         ) : (
-          <ChooseFilterType remainingFilters={remainingFilters} filters={filters} setFilterKey={setFilterKey} />
+          <ChooseFilterType remainingFilters={remainingFilters} filters={filters} setFilterKey={setActiveFilterKey} />
         )}
       </PopoverContent>
     </Popover>

components/dashboard/filters/Filterbar.tsx

@@ -12,12 +12,15 @@ import { Separator } from '../../ui/Separator';
 import FilterDropdown from './FilterDropdown';
 
 function useGetFilterbarOptions(filters, values, defaultSchemaValues, meta) {
-  const filterKeys = Object.keys(filters);
+  const filterKeys = React.useMemo(() => Object.keys(filters), [filters]);
   const [displayedFilters, setDisplayedFilters] = React.useState(
     filterKeys.filter(key => filterShouldDisplay(key, { values, filters, defaultSchemaValues, meta })),
   );
-  const remainingFilters = filterKeys.filter(key =>
-    filterShouldBeInAddFilterOptions(key, { values, filters, defaultSchemaValues, meta }),
+
+  const remainingFilters = React.useMemo(
+    () =>
+      filterKeys.filter(key => filterShouldBeInAddFilterOptions(key, { values, filters, defaultSchemaValues, meta })),
+    [filterKeys, values, filters, defaultSchemaValues, meta],
   );
 
   // When the values change, this effect makes sure to update the displayed filter keys array and maintain the order of the filters

…ts/dashboard/filters/CreatedByFilter.tsx …shboard/filters/OrderCreatedByFilter.tsxcomponents/dashboard/filters/CreatedByFilter.tsx renamed to components/dashboard/filters/OrderCreatedByFilter.tsx components/dashboard/filters/CreatedByFilter.tsx renamed to components/dashboard/filters/OrderCreatedByFilter.tsx

@@ -6,10 +6,11 @@ import { z } from 'zod';
 import type { FilterComponentProps, FilterConfig } from '@/lib/filters/filter-types';
 import { isMulti } from '@/lib/filters/schemas';
 import { gql } from '@/lib/graphql/helpers';
-import type { AccountHoverCardFieldsFragment } from '@/lib/graphql/types/v2/graphql';
+import type { AccountHoverCardFieldsFragment, HostContext } from '@/lib/graphql/types/v2/graphql';
 import type { ExpectedFundsFilter } from '@/lib/graphql/types/v2/schema';
 
 import { accountHoverCardFields } from '../../AccountHoverCard';
+import type { FilterValues as OrderFilterValues } from '../sections/contributions/filters';
 
 import ComboSelectFilter from './ComboSelectFilter';
 import { AccountRenderer } from './HostedAccountFilter';
@@ -20,8 +21,15 @@ const createdByFilterSearchQuery = gql`
     $searchTerm: String
     $expectedFundsFilter: ExpectedFundsFilter
     $hostContext: HostContext
+    $status: [OrderStatus]
   ) {
-    orders(account: $account, filter: INCOMING, expectedFundsFilter: $expectedFundsFilter, hostContext: $hostContext) {
+    orders(
+      account: $account
+      filter: INCOMING
+      expectedFundsFilter: $expectedFundsFilter
+      hostContext: $hostContext
+      status: $status
+    ) {
       createdByUsers(searchTerm: $searchTerm, limit: 20) {
         nodes {
           id
@@ -33,7 +41,7 @@ const createdByFilterSearchQuery = gql`
   ${accountHoverCardFields}
 `;
 
-export type CreatedByFilterMeta = {
+export type OrderCreatedByFilterMeta = {
   accountSlug: string;
   expectedFundsFilter?: ExpectedFundsFilter;
 };
@@ -46,13 +54,19 @@ const resultNodeToOption = (account: Partial<AccountHoverCardFieldsFragment>) =>
   value: account.slug,
 });
 
-// This filter is currently only for Host Expected Funds,
-// if generalized to other tools we should provide the correct filters through the metadata
-function CreatedByFilter({ meta, ...props }: FilterComponentProps<z.infer<typeof schema>, CreatedByFilterMeta>) {
-  const [options, setOptions] = React.useState<{ label: React.ReactNode; keywords: string[]; value: string }[]>([]);
+type RequiredFilterValueTypes = {
+  hostContext?: HostContext;
+  expectedFundsFilter?: ExpectedFundsFilter;
+  status?: OrderFilterValues['status'];
+};
 
+function OrderCreatedByFilter({
+  meta,
+  values,
+  ...props
+}: FilterComponentProps<z.infer<typeof schema>, OrderCreatedByFilterMeta, RequiredFilterValueTypes>) {
+  const [options, setOptions] = React.useState<{ label: React.ReactNode; keywords: string[]; value: string }[]>([]);
   const [search, { loading, data }] = useLazyQuery(createdByFilterSearchQuery, {
-    variables: { expectedFundsFilter: 'ONLY_PENDING', hostContext: 'ALL' },
     fetchPolicy: 'cache-first',
     notifyOnNetworkStatusChange: true,
   });
@@ -63,11 +77,13 @@ function CreatedByFilter({ meta, ...props }: FilterComponentProps<z.infer<typeof
         variables: {
           account: { slug: meta.accountSlug },
           searchTerm: searchTerm || undefined,
-          account: { slug: meta.accountSlug },
+          hostContext: values.hostContext,
+          expectedFundsFilter: values.expectedFundsFilter,
+          status: values.status,
         },
       });
     },
-    [meta.accountSlug, search],
+    [meta.accountSlug, search, values.hostContext, values.expectedFundsFilter, values.status],
   );
 
   // Load initial options on mount
@@ -76,9 +92,12 @@ function CreatedByFilter({ meta, ...props }: FilterComponentProps<z.infer<typeof
       variables: {
         account: { slug: meta.accountSlug },
         searchTerm: undefined,
+        hostContext: values.hostContext,
+        expectedFundsFilter: values.expectedFundsFilter,
+        status: values.status,
       },
     });
-  }, [meta.accountSlug, search]);
+  }, [meta.accountSlug, search, values.hostContext, values.expectedFundsFilter, values.status]);
 
   React.useEffect(() => {
     if (!loading && data?.orders?.createdByUsers?.nodes) {
@@ -89,11 +108,11 @@ function CreatedByFilter({ meta, ...props }: FilterComponentProps<z.infer<typeof
   return <ComboSelectFilter options={options} loading={loading} searchFunc={searchFunc} isMulti {...props} />;
 }
 
-export const createdByFilter: FilterConfig<z.infer<typeof schema>> = {
+export const orderCreatedByFilter: FilterConfig<z.infer<typeof schema>> = {
   schema: schema,
   filter: {
     labelMsg: defineMessage({ defaultMessage: 'Created by', id: 'Agreement.createdBy' }),
-    Component: CreatedByFilter,
+    Component: OrderCreatedByFilter,
     valueRenderer: ({ value, ...props }) => <AccountRenderer account={{ slug: value }} {...props} />,
   },
   toVariables: (values, key) => ({ [key]: values.map(slug => ({ slug })) }),

components/dashboard/sections/contributions/HostExpectedFunds.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { useQuery } from '@apollo/client';
 import { PlusIcon } from 'lucide-react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import type { z } from 'zod';
+import { z } from 'zod';
 
 import type { FilterComponentConfigs, FiltersToVariables, Views } from '../../../../lib/filters/filter-types';
 import { gql } from '../../../../lib/graphql/helpers';
@@ -16,9 +16,9 @@ import { UpgradePlanCTA } from '@/components/platform-subscriptions/UpgradePlanC
 import { Button } from '../../../ui/Button';
 import { DashboardContext } from '../../DashboardContext';
 import DashboardHeader from '../../DashboardHeader';
-import { createdByFilter, type CreatedByFilterMeta } from '../../filters/CreatedByFilter';
 import { expectedDateFilter } from '../../filters/DateFilter';
 import { HostContextFilter, hostContextFilter } from '../../filters/HostContextFilter';
+import { orderCreatedByFilter, type OrderCreatedByFilterMeta } from '../../filters/OrderCreatedByFilter';
 import type { DashboardSectionProps } from '../../types';
 
 import ContributionsTable from './ContributionsTable';
@@ -101,23 +101,24 @@ const hostExpectedFundsMetadataQuery = gql`
 const schema = baseSchema.extend({
   expectedDate: expectedDateFilter.schema,
   hostContext: hostContextFilter.schema,
-  createdBy: createdByFilter.schema,
+  createdBy: orderCreatedByFilter.schema,
+  expectedFundsFilter: z.literal(ExpectedFundsFilter.ONLY_PENDING).default(ExpectedFundsFilter.ONLY_PENDING),
 });
 
-type FilterMeta = BaseFilterMeta & CreatedByFilterMeta;
+type FilterMeta = BaseFilterMeta & OrderCreatedByFilterMeta;
 
 type FilterValues = z.infer<typeof schema>;
 
 const toVariables: FiltersToVariables<FilterValues, DashboardOrdersQueryVariables, FilterMeta> = {
   ...(baseToVariables as FiltersToVariables<FilterValues, DashboardOrdersQueryVariables, FilterMeta>),
   expectedDate: expectedDateFilter.toVariables,
-  createdBy: createdByFilter.toVariables,
+  createdBy: orderCreatedByFilter.toVariables,
 };
 
 const filters: FilterComponentConfigs<FilterValues, FilterMeta> = {
   ...baseFilters,
   expectedDate: expectedDateFilter.filter,
-  createdBy: createdByFilter.filter,
+  createdBy: orderCreatedByFilter.filter,
 };
 
 function HostExpectedFunds({ accountSlug }: DashboardSectionProps) {
@@ -194,7 +195,6 @@ function HostExpectedFunds({ accountSlug }: DashboardSectionProps) {
       slug: accountSlug,
       filter: 'INCOMING',
       includeIncognito: true,
-      expectedFundsFilter: ExpectedFundsFilter.ONLY_PENDING,
       ...queryFilter.variables,
     },