From 40da6b37b2af1686336e92508dbd087621736408 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= Date: Sun, 14 Feb 2021 13:12:35 +0100 Subject: [PATCH 1/6] [#27] Initial regex filters structure --- Frontend/src/components/Home.tsx | 4 +- .../src/components/changes/ChangesList.tsx | 72 ++------------- .../{ => filters}/ChangeFilterSelector.tsx | 4 +- .../changes/filters/ChangesFilters.tsx | 89 +++++++++++++++++++ .../filters/CustomFilterCreationModal.tsx | 17 ++++ Frontend/src/hooks/useChanges.ts | 18 +++- 6 files changed, 134 insertions(+), 70 deletions(-) rename Frontend/src/components/changes/{ => filters}/ChangeFilterSelector.tsx (97%) create mode 100644 Frontend/src/components/changes/filters/ChangesFilters.tsx create mode 100644 Frontend/src/components/changes/filters/CustomFilterCreationModal.tsx diff --git a/Frontend/src/components/Home.tsx b/Frontend/src/components/Home.tsx index 7ceed50..1088dc4 100644 --- a/Frontend/src/components/Home.tsx +++ b/Frontend/src/components/Home.tsx @@ -2,6 +2,7 @@ import React from "react"; import { Alert } from "reactstrap"; import { useChanges } from "../hooks/useChanges"; import { ChangesList } from "./changes/ChangesList"; +import { ChangesFilters } from "./changes/filters/ChangesFilters"; import { RepositoryErrors } from "./RepositoryErrors"; import "./styles/global.scss"; @@ -12,6 +13,7 @@ export function Home(): React.ReactElement { changes, setChanges, errors, + filter, setFilter, isHidden, notifyHiddenChanges, @@ -26,10 +28,10 @@ export function Home(): React.ReactElement { {connectionError} + >; - setFilter: Dispatch>; isHidden: (change: ChangeWrapper) => boolean; notifyHiddenChanges: boolean; setNotifyHiddenChanges: Dispatch>; }; -const changeTypes = Object.keys(ChangeType).filter((t) => typeof t === "string"); -const changeObjectTypes = Object.keys(ChangeObjectType).filter((t) => typeof t === "string"); - export function ChangesList({ changes, setChanges, - setFilter, isHidden, notifyHiddenChanges, setNotifyHiddenChanges, }: Props): React.ReactElement { - const [filtersTogglerId] = useId(); - const useFilterChanged = (filterType: keyof Filter): ((elements: Map) => void) => - useCallback( - (filter: Map) => - setFilter((f) => ({ - ...f, - [filterType]: filter, - })), - [filterType], - ); - - const onRepositoriesFilterChanged = useFilterChanged("repositories"); - const onUsersFilterChanged = useFilterChanged("users"); - const onTypesFilterChanged = useFilterChanged("types"); - const onObjectTypesFilterChanged = useFilterChanged("objectTypes"); - const markAllAsRead = React.useCallback(() => { setChanges((oldChanges) => oldChanges.map((change) => ({ ...cloneDeep(change), seen: true }))); }, [setChanges]); @@ -73,45 +49,9 @@ export function ChangesList({ > {notifyHiddenChanges ? "✅" : "❌"} Notify hidden changes - - - - Filters - - - - c.repository, [])} - onChanged={onRepositoriesFilterChanged} - /> - (c.change.user ? c.change.user.name : ""), [])} - textSelector={useCallback((o) => (o === "" ? No user : o), [])} - onChanged={onUsersFilterChanged} - /> - c.change.type, [])} - onChanged={onTypesFilterChanged} - /> - c.change.objectType, [])} - onChanged={onObjectTypesFilterChanged} - /> - - - - - Total: {changes.length}, Visible: {changes.filter((c) => !isHidden(c)).length} +
+ Total: {changes.length}, Visible: {changes.filter((c) => !isHidden(c)).length} +
{changes .map((change) =>