feat(ui) - funnels - issues sort

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 (
         <Loader loading={loading}>
             { funnelIssue && <FunnelIssuesListItem

frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx

@@ -5,11 +5,14 @@ import FunnelIssuesListItem from '../FunnelIssuesListItem';
 
 function FunnelIssuesList(props) {
     const { funnelStore } = useStore();
+    const issuesSort = useObserver(() => 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(() => (
         <div>
             {filteredIssues.map((issue, index) => (
                 <div key={index} className="mb-4">
@@ -17,7 +20,7 @@ function FunnelIssuesList(props) {
                 </div>
             ))}
         </div>
-    );
+    ));
 }
 
 export default FunnelIssuesList;

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 (
         <div>
             <Select
@@ -21,7 +29,7 @@ function FunnelIssuesSort(props: Props) {
                 defaultValue={sortOptions[0].value}
                 options={sortOptions}
                 alignRight={true}
-                onChange={props.onChange}
+                onChange={onSortChange}
             />
         </div>
     );

frontend/app/mstore/funnelStore.ts

@@ -21,6 +21,10 @@ export default class FunnelStore {
     issuesFilter: any = []
 
     issueInstance: FunnelIssue | null = null
+    issuesSort = {
+        sort: "afectedUsers",
+        order: 'desc',
+    }
     
     constructor() {
         makeAutoObservable(this, {