diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx index fa4ff3b4e..3bde57674 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx @@ -25,8 +25,6 @@ function FunnelIssueDetails(props: Props) { funnelStore.fetchIssue(funnelId, issueId); }, []); - console.log('funnelIssue', funnelIssue) - return ( { funnelIssue && funnelStore.issuesSort); const issuesFilter = useObserver(() => funnelStore.issuesFilter.map((issue: any) => issue.value)); const issues = useObserver(() => funnelStore.issues); - const filteredIssues = useObserver(() => issuesFilter.length > 0 ? issues.filter((issue: any) => issuesFilter.includes(issue.type)) : issues); + let filteredIssues = useObserver(() => issuesFilter.length > 0 ? issues.filter((issue: any) => issuesFilter.includes(issue.type)) : issues); + filteredIssues = useObserver(() => issuesSort.sort ? filteredIssues.slice().sort((a, b) => a[issuesSort.sort] - b[issuesSort.sort]): filteredIssues); + filteredIssues = useObserver(() => issuesSort.order === 'desc' ? filteredIssues.reverse() : filteredIssues); - return ( + return useObserver(() => (
{filteredIssues.map((issue, index) => (
@@ -17,7 +20,7 @@ function FunnelIssuesList(props) {
))}
- ); + )); } export default FunnelIssuesList; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx index 782be0eb3..cdd9a0c3c 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesSort/FunnelIssuesSort.tsx @@ -1,3 +1,4 @@ +import { useStore } from 'App/mstore'; import React from 'react'; import Select from 'Shared/Select'; @@ -11,9 +12,16 @@ const sortOptions = [ ] interface Props { - onChange?: (value: string) => void; + // onChange?: (value: string) => void; } function FunnelIssuesSort(props: Props) { + const { funnelStore } = useStore(); + + const onSortChange = (opt) => { + const [ sort, order ] = opt.value.split('-'); + funnelStore.updateKey('issuesSort', { sort, order }); + } + return (