From 349106a2be596bc0240565812dae381d4f2c8ea0 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Date: Tue, 14 Jun 2022 11:14:56 +0200
Subject: [PATCH] fix: sort order across the app

discussed with Nicolae and Nuno
---
 frontend/src/component/Reporting/ReportTable/ReportTable.tsx | 2 +-
 frontend/src/component/admin/users/UsersList/UsersList.tsx   | 4 +++-
 .../feature/FeatureToggleList/FeatureToggleListTable.tsx     | 2 +-
 .../FeatureMetricsTable/FeatureMetricsTable.tsx              | 5 +----
 .../Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx  | 5 +----
 .../src/component/segments/SegmentTable/SegmentTable.tsx     | 2 +-
 frontend/src/utils/sortTypes.ts                              | 2 +-
 7 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/Reporting/ReportTable/ReportTable.tsx b/frontend/src/component/Reporting/ReportTable/ReportTable.tsx
index e692454fb2..ab35369951 100644
--- a/frontend/src/component/Reporting/ReportTable/ReportTable.tsx
+++ b/frontend/src/component/Reporting/ReportTable/ReportTable.tsx
@@ -55,7 +55,7 @@ export const ReportTable = ({ projectId, features }: IReportTableProps) => {
     const initialState = useMemo(
         () => ({
             hiddenColumns: [],
-            sortBy: [{ id: 'createdAt', desc: true }],
+            sortBy: [{ id: 'createdAt' }],
         }),
         []
     );
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index 5c658955cd..a8e61b6335 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -119,6 +119,7 @@ const UsersList = () => {
                 Cell: DateCell,
                 disableGlobalFilter: true,
                 sortType: 'date',
+                minWidth: 120,
             },
             {
                 Header: 'Avatar',
@@ -169,6 +170,7 @@ const UsersList = () => {
                 ),
                 disableGlobalFilter: true,
                 sortType: 'date',
+                minWidth: 150,
             },
             {
                 Header: 'Actions',
@@ -193,7 +195,7 @@ const UsersList = () => {
 
     const initialState = useMemo(() => {
         return {
-            sortBy: [{ id: 'createdAt', desc: false }],
+            sortBy: [{ id: 'createdAt' }],
             hiddenColumns: isBillingUsers ? [] : ['type'],
         };
     }, [isBillingUsers]);
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 4fb113786d..177a3e3e6a 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -99,7 +99,7 @@ const columns = [
     },
 ];
 
-const defaultSort: SortingRule<string> = { id: 'createdAt', desc: true };
+const defaultSort: SortingRule<string> = { id: 'createdAt' };
 
 const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
     'FeatureToggleListTable:v1',
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
index c7a827caf9..912a7cc7ca 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
@@ -20,10 +20,7 @@ export const FeatureMetricsTable = ({
 }: IFeatureMetricsTableProps) => {
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('md'));
 
-    const initialState = useMemo(
-        () => ({ sortBy: [{ id: 'timestamp', desc: true }] }),
-        []
-    );
+    const initialState = useMemo(() => ({ sortBy: [{ id: 'timestamp' }] }), []);
 
     const {
         getTableProps,
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 2283f794d1..d20971c284 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -67,10 +67,7 @@ const staticColumns = ['Actions', 'name'];
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
-} = {
-    id: 'createdAt',
-    desc: true,
-};
+} = { id: 'createdAt' };
 
 export const ProjectFeatureToggles = ({
     features,
diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
index e6e0b5eb38..e59cd7e9bd 100644
--- a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
+++ b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx
@@ -30,7 +30,7 @@ export const SegmentTable = () => {
     const { segments, loading } = useSegments();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const [initialState] = useState({
-        sortBy: [{ id: 'createdAt', desc: false }],
+        sortBy: [{ id: 'createdAt' }],
         hiddenColumns: ['description'],
     });
 
diff --git a/frontend/src/utils/sortTypes.ts b/frontend/src/utils/sortTypes.ts
index fc8ba2badb..2fc43e3702 100644
--- a/frontend/src/utils/sortTypes.ts
+++ b/frontend/src/utils/sortTypes.ts
@@ -7,7 +7,7 @@ export const sortTypes = {
     date: (v1: any, v2: any, id: string) => {
         const a = new Date(v1?.values?.[id] || 0);
         const b = new Date(v2?.values?.[id] || 0);
-        return a?.getTime() - b?.getTime();
+        return b?.getTime() - a?.getTime(); // newest first by default
     },
     boolean: (v1: any, v2: any, id: string) => {
         const a = v1?.values?.[id];