From 3441efed93eee395b7590f01fc9a4d0d5ef1c4ce Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 3 Feb 2022 17:02:08 +0100 Subject: [PATCH] feat(ui) - filters - filter item add user click --- .../BugFinder/SessionList/SessionList.js | 27 +++++++++++++------ .../FilterAutoComplete/FilterAutoComplete.css | 4 +-- .../SaveFunnelButton/SaveFunnelButton.tsx | 2 +- .../shared/SessionSearch/SessionSearch.tsx | 16 ++++++----- frontend/app/duck/search.js | 7 +++++ 5 files changed, 38 insertions(+), 18 deletions(-) diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js index fa0d282be..bad305cbe 100644 --- a/frontend/app/components/BugFinder/SessionList/SessionList.js +++ b/frontend/app/components/BugFinder/SessionList/SessionList.js @@ -4,7 +4,10 @@ import { applyFilter, addAttribute, addEvent } from 'Duck/filters'; import { fetchSessions } from 'Duck/search'; import SessionItem from 'Shared/SessionItem'; import SessionListHeader from './SessionListHeader'; -import { KEYS } from 'Types/filter/customFilter'; +// import { KEYS } from 'Types/filter/customFilter'; +import { addFilter } from 'Duck/search'; +import { filtersMap } from 'Types/filter/newFilter'; +import { FilterKey } from 'Types/filter/filterType'; const ALL = 'all'; const PER_PAGE = 10; @@ -18,12 +21,13 @@ var timeoutId; activeTab: state.getIn([ 'sessions', 'activeTab' ]), allList: state.getIn([ 'sessions', 'list' ]), total: state.getIn([ 'sessions', 'total' ]), - filters: state.getIn([ 'filters', 'appliedFilter', 'filters' ]), + filters: state.getIn([ 'search', 'instance', 'filters' ]), }), { applyFilter, addAttribute, addEvent, fetchSessions, + addFilter, }) export default class SessionList extends React.PureComponent { state = { @@ -43,13 +47,20 @@ export default class SessionList extends React.PureComponent { addPage = () => this.setState({ showPages: this.state.showPages + 1 }) onUserClick = (userId, userAnonymousId) => { + let userFilter = filtersMap[FilterKey.USERID]; if (userId) { - this.props.addAttribute({ label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId }) + userFilter = filtersMap[FilterKey.USERID]; + userFilter.value = [userId]; + // userFilter = { label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId } + // this.props.addAttribute({ label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId }) } else { - this.props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId }) + userFilter = filtersMap[FilterKey.USERANONYMOUSID]; + userFilter.value = [userAnonymousId]; + // this.props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId }) } - - this.props.applyFilter() + + this.props.addFilter(userFilter); + // this.props.applyFilter() } timeout = () => { @@ -84,8 +95,8 @@ export default class SessionList extends React.PureComponent { allList, activeTab } = this.props; - - const hasUserFilter = filters.map(i => i.key).includes(KEYS.USERID); + const _filterKeys = filters.map(i => i.key); + const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID); const { showPages } = this.state; const displayedCount = Math.min(showPages * PER_PAGE, list.size); diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css index 291bfda97..2d6041eac 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css @@ -65,7 +65,7 @@ padding: 8px 10px; cursor: pointer; border-radius: 3px; - transition: all 0.4s; + /* transition: all 0.4s; */ margin-bottom: 5px; max-width: 100%; & .label { @@ -76,6 +76,6 @@ &:hover { background-color: $gray-lightest; - transition: all 0.2s; + /* transition: all 0.2s; */ } } \ No newline at end of file diff --git a/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx b/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx index fc52d4083..195fe95b7 100644 --- a/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx +++ b/frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { IconButton } from 'UI'; -import FunnelSaveModal from 'Components/Funnels/FunnelSaveModal'; +import FunnelSaveModal from 'App/components/Funnels/FunnelSaveModal'; export default function SaveFunnelButton() { const [showModal, setshowModal] = useState(false) diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx index ebe4926a7..ee89e7db9 100644 --- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx +++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx @@ -5,12 +5,13 @@ import FilterSelection from 'Shared/Filters/FilterSelection'; import SaveFilterButton from 'Shared/SaveFilterButton'; import { connect } from 'react-redux'; import { IconButton, Button } from 'UI'; -import { edit } from 'Duck/search'; +import { edit, addFilter } from 'Duck/search'; import SaveFunnelButton from '../SaveFunnelButton'; interface Props { appliedFilter: any; edit: typeof edit; + addFilter: typeof addFilter; } function SessionSearch(props) { const { appliedFilter } = props; @@ -18,12 +19,13 @@ function SessionSearch(props) { const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).size > 0; const onAddFilter = (filter) => { - filter.value = [""] - const newFilters = appliedFilter.filters.concat(filter); - props.edit({ - ...appliedFilter.filter, - filters: newFilters, - }); + props.addFilter(filter); + // filter.value = [""] + // const newFilters = appliedFilter.filters.concat(filter); + // props.edit({ + // ...appliedFilter.filter, + // filters: newFilters, + // }); } const onUpdateFilter = (filterIndex, filter) => { diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js index 42f9ca327..6b819e7c6 100644 --- a/frontend/app/duck/search.js +++ b/frontend/app/duck/search.js @@ -19,6 +19,7 @@ const FETCH = fetchType(name); const SAVE = saveType(name); const EDIT = editType(name); const REMOVE = removeType(name); +const ADD_FILTER = `${name}/ADD_FILTER`; const APPLY_SAVED_SEARCH = `${name}/APPLY_SAVED_SEARCH`; const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`; const UPDATE = `${name}/UPDATE`; @@ -189,4 +190,10 @@ export const clearSearch = () => (dispatch, getState) => { return dispatch({ type: CLEAR_SEARCH, }); +} + +export const addFilter = (filter) => (dispatch, getState) => { + const instance = getState().getIn([ 'search', 'instance']); + const filters = instance.filters.push(filter); + return dispatch(edit(instance.set('filters', filters))); } \ No newline at end of file