[materialite] A more filters to the repliear app [2/n]

client/src/app.tsx

@@ -11,7 +11,10 @@ import {generateKeyBetween} from 'fractional-indexing';
 import type {UndoManager} from '@rocicorp/undo';
 import {HotKeys} from 'react-hotkeys';
 import {
+  useCreatedFilterState,
+  useCreatorFilterState,
   useIssueDetailState,
+  useModifiedFilterState,
   useOrderByState,
   usePriorityFilterState,
   useStatusFilterState,
@@ -27,11 +30,24 @@ import {
   IssueUpdateWithID,
   ISSUE_KEY_PREFIX,
 } from 'shared';
-import {getFilters, getIssueOrder} from './filters';
 import {Layout} from './layout/layout';
 import {db} from './materialite/db';
 import {useQuery} from '@vlcn.io/materialite-react';
 import {issueFromKeyAndValue} from './issue/issue';
+import {
+  getCreatedFilter,
+  getCreatorFilter,
+  getCreators,
+  getIssueOrder,
+  getModifiedFilter,
+  getPriorities,
+  getPriorityFilter,
+  getStatuses,
+  getStatusFilter,
+  getViewFilter,
+  getViewStatuses,
+  hasNonViewFilters as doesHaveNonViewFilters,
+} from './filters';
 
 type AppProps = {
   rep: Replicache<M>;
@@ -72,34 +88,66 @@ function onNewDiff(diff: Diff) {
 
 const App = ({rep, undoManager}: AppProps) => {
   const [view] = useViewState();
-  const [priorityFilter] = usePriorityFilterState();
-  const [statusFilter] = useStatusFilterState();
   const [orderBy] = useOrderByState();
   const [detailIssueID, setDetailIssueID] = useIssueDetailState();
   const [menuVisible, setMenuVisible] = useState(false);
+  const [priorityFilter] = usePriorityFilterState();
+  const [statusFilter] = useStatusFilterState();
+  const [createdFilter] = useCreatedFilterState();
+  const [creatorFilter] = useCreatorFilterState();
+  const [modifiedFilter] = useModifiedFilterState();
+  const [hasNonViewFilters, setHasNonViewFilters] = useState(false);
 
-  const [filters, setFilters] = useState(
-    getFilters(view, priorityFilter, statusFilter),
-  );
   const issueOrder = getIssueOrder(view, orderBy);
 
   const [, filterdIssues] = useQuery(() => {
     const start = performance.now();
     const source = db.issues.getSortedSource(issueOrder);
-    const ret = source.stream
-      .filter(issue => filters.issuesFilter(issue))
-      .materialize(source.comparator);
 
+    const viewStatuses = getViewStatuses(view);
+    const statuses = getStatuses(statusFilter);
+    const statusFilterFn = getStatusFilter(viewStatuses, statuses);
+    const filterFns = [
+      statusFilterFn,
+      getPriorityFilter(getPriorities(priorityFilter)),
+      getCreatorFilter(getCreators(creatorFilter)),
+      getCreatedFilter(createdFilter),
+      getModifiedFilter(modifiedFilter),
+    ];
+
+    const hasNonViewFilters = !!(
+      doesHaveNonViewFilters(viewStatuses, statuses) ||
+      filterFns.filter(f => f !== null && f !== statusFilterFn).length > 0
+    );
+    setHasNonViewFilters(hasNonViewFilters);
+
+    let {stream} = source;
+    for (const filter of filterFns) {
+      if (filter !== null) {
+        stream = stream.filter(filter);
+      }
+    }
+
+    const ret = stream.materialize(source.comparator);
     console.log(`Filter update duration: ${performance.now() - start}ms`);
     return ret;
-  }, [issueOrder, filters]);
+  }, [
+    view,
+    issueOrder,
+    priorityFilter?.join(),
+    statusFilter?.join(),
+    createdFilter?.join(),
+    creatorFilter?.join(),
+    modifiedFilter?.join(),
+  ]);
+
   const [, viewIssueCount] = useQuery(() => {
+    const viewStatuses = getViewStatuses(view);
+    const viewFilterFn = getViewFilter(viewStatuses);
+
     const source = db.issues.getSortedSource(issueOrder);
-    return source.stream
-      .filter(issue => filters.viewFilter(issue))
-      .size()
-      .materializeValue(0);
-  }, [filters]);
+    return source.stream.filter(viewFilterFn).size().materializeValue(0);
+  }, [view]);
 
   const partialSync = useSubscribe(
     rep,
@@ -132,14 +180,6 @@ const App = ({rep, undoManager}: AppProps) => {
     });
   }, [rep]);
 
-  useEffect(() => {
-    const f = getFilters(view, priorityFilter, statusFilter);
-    if (f.equals(filters)) {
-      return;
-    }
-    setFilters(f);
-  }, [view, priorityFilter?.join(), statusFilter?.join()]);
-
   const handleCreateIssue = useCallback(
     async (issue: Omit<Issue, 'kanbanOrder'>, description: Description) => {
       const minKanbanOrderIssue = db.issues
@@ -245,10 +285,10 @@ const App = ({rep, undoManager}: AppProps) => {
         view={view}
         detailIssueID={detailIssueID}
         isLoading={!partialSyncComplete}
-        filters={filters}
         viewIssueCount={viewIssueCount || 0}
         filteredIssues={filterdIssues}
         rep={rep}
+        hasNonViewFilters={hasNonViewFilters}
         onCloseMenu={handleCloseMenu}
         onToggleMenu={handleToggleMenu}
         onUpdateIssues={handleUpdateIssues}

client/src/filters.ts

@@ -1,91 +1,131 @@
-import {isEqual} from 'lodash';
 import {Issue, Order, Priority, Status} from 'shared';
 
-export class Filters {
-  private readonly _viewStatuses: Set<Status> | undefined;
-  private readonly _issuesStatuses: Set<Status> | undefined;
-  private readonly _issuesPriorities: Set<Priority> | undefined;
-  readonly hasNonViewFilters: boolean;
-  constructor(
-    view: string | null,
-    priorityFilter: Priority[] | null,
-    statusFilter: Status[] | null,
-  ) {
-    this._viewStatuses = undefined;
-    switch (view?.toLowerCase()) {
-      case 'active':
-        this._viewStatuses = new Set(['IN_PROGRESS', 'TODO']);
-        break;
-      case 'backlog':
-        this._viewStatuses = new Set(['BACKLOG']);
-        break;
-      default:
-        this._viewStatuses = undefined;
-    }
+export type Op = '<=' | '>=';
+export type DateQueryArg = `${number}|${Op}`;
 
-    this._issuesStatuses = undefined;
-    this._issuesPriorities = undefined;
-    this.hasNonViewFilters = false;
-    if (statusFilter) {
-      this._issuesStatuses = new Set<Status>();
-      for (const s of statusFilter) {
-        if (!this._viewStatuses || this._viewStatuses.has(s)) {
-          this.hasNonViewFilters = true;
-          this._issuesStatuses.add(s);
-        }
-      }
-    }
-    if (!this.hasNonViewFilters) {
-      this._issuesStatuses = this._viewStatuses;
+export function hasNonViewFilters(
+  viewStatuses: Set<string>,
+  statuses: Set<Status>,
+) {
+  for (const s of statuses) {
+    if (viewStatuses.has(s)) {
+      return true;
     }
+  }
 
-    if (priorityFilter) {
-      this._issuesPriorities = new Set<Priority>();
-      for (const p of priorityFilter) {
-        this.hasNonViewFilters = true;
-        this._issuesPriorities.add(p);
-      }
-      if (this._issuesPriorities.size === 0) {
-        this._issuesPriorities = undefined;
-      }
-    }
+  return false;
+}
+
+export function getViewStatuses(view: string | null): Set<Status> {
+  switch (view?.toLowerCase()) {
+    case 'active':
+      return new Set(['IN_PROGRESS', 'TODO']);
+    case 'backlog':
+      return new Set(['BACKLOG']);
+    default:
+      return new Set();
+  }
+}
+
+export function getStatuses(statusFilter: Status[] | null): Set<Status> {
+  return new Set(statusFilter ? statusFilter : []);
+}
+
+export function getPriorities(
+  priorityFilter: Priority[] | null,
+): Set<Priority> {
+  return new Set(priorityFilter ? priorityFilter : []);
+}
+
+export function getPriorityFilter(
+  priorities: Set<Priority>,
+): null | ((issue: Issue) => boolean) {
+  if (priorities.size === 0) {
+    return null;
+  }
+  return issue => priorities.has(issue.priority);
+}
+
+export function getStatusFilter(
+  viewStatuses: Set<Status>,
+  statuses: Set<Status>,
+): null | ((issue: Issue) => boolean) {
+  const filterStatuses = statuses.size === 0 ? viewStatuses : statuses;
+  if (filterStatuses.size === 0) {
+    return null;
   }
+  return issue => filterStatuses.has(issue.status);
+}
+
+export function getCreatorFilter(
+  creators: Set<string>,
+): null | ((issue: Issue) => boolean) {
+  if (creators.size === 0) {
+    return null;
+  }
+  return issue => creators.has(issue.creator.toLowerCase());
+}
+
+export function getViewFilter(
+  viewStatuses: Set<Status>,
+): (issue: Issue) => boolean {
+  return issue =>
+    viewStatuses.size === 0 ? true : viewStatuses.has(issue.status);
+}
 
-  viewFilter(issue: Issue): boolean {
-    return this._viewStatuses ? this._viewStatuses.has(issue.status) : true;
+export function getModifiedFilter(
+  args: DateQueryArg[] | null,
+): ((issue: Issue) => boolean) | null {
+  if (args === null) {
+    return null;
   }
+  return createTimeFilter('modified', args);
+}
+
+export function getCreatedFilter(
+  args: DateQueryArg[] | null,
+): null | ((issue: Issue) => boolean) {
+  if (args === null) {
+    return null;
+  }
+  return createTimeFilter('created', args);
+}
 
-  issuesFilter(issue: Issue): boolean {
-    if (this._issuesStatuses) {
-      if (!this._issuesStatuses.has(issue.status)) {
-        return false;
-      }
+function createTimeFilter(
+  property: 'created' | 'modified',
+  args: DateQueryArg[] | null,
+): (issue: Issue) => boolean {
+  let before: number | null = null;
+  let after: number | null = null;
+  for (const arg of args || []) {
+    const [timePart, op] = arg.split('|') as [string, Op];
+    const time = parseInt(timePart);
+    switch (op) {
+      case '<=':
+        before = before ? Math.min(before, time) : time;
+        break;
+      case '>=':
+        after = after ? Math.max(after, time) : time;
+        break;
     }
-    if (this._issuesPriorities) {
-      if (!this._issuesPriorities.has(issue.priority)) {
-        return false;
-      }
+  }
+  return issue => {
+    if (before && issue[property] > before) {
+      return false;
+    }
+    if (after && issue[property] < after) {
+      return false;
     }
     return true;
-  }
+  };
+}
 
-  equals(other: Filters): boolean {
-    return (
-      this === other ||
-      (isEqual(this._viewStatuses, other._viewStatuses) &&
-        isEqual(this._issuesStatuses, other._issuesStatuses) &&
-        isEqual(this._issuesPriorities, other._issuesPriorities) &&
-        isEqual(this.hasNonViewFilters, other.hasNonViewFilters))
-    );
-  }
+export function getCreators(creatorFilter: string[] | null): Set<string> {
+  return new Set(creatorFilter ? creatorFilter : []);
 }
 
-export function getFilters(
-  view: string | null,
-  priorityFilter: Priority[] | null,
-  statusFilter: Status[] | null,
-): Filters {
-  return new Filters(view, priorityFilter, statusFilter);
+export function getTitleFilter(title: string): (issue: Issue) => boolean {
+  return issue => issue.title.toLowerCase().includes(title.toLowerCase());
 }
 
 export function getIssueOrder(