From 4c2e9ddc82cd534ef109229cfa5aff22d3e1de3e Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sun, 10 Nov 2024 00:49:51 +0100
Subject: [PATCH] feat(admin/users): change default sort

---
 .../components/admin/users/users_table.tsx    | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/inertia/components/admin/users/users_table.tsx b/inertia/components/admin/users/users_table.tsx
index ec9d2c6..79dc976 100644
--- a/inertia/components/admin/users/users_table.tsx
+++ b/inertia/components/admin/users/users_table.tsx
@@ -8,7 +8,7 @@ import {
 } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TbSearch } from 'react-icons/tb';
 import { Th } from '~/components/admin/users/th';
@@ -25,6 +25,11 @@ export type UserWithCounts = User & {
 };
 export type UsersWithCounts = UserWithCounts[];
 
+export type Columns = keyof UserWithCounts;
+
+const DEFAULT_SORT_BY: Columns = 'lastSeenAt';
+const DEFAULT_SORT_DIRECTION = true;
+
 export interface UsersTableProps {
 	users: UsersWithCounts;
 	totalCollections: number;
@@ -37,10 +42,19 @@ export function UsersTable({
 	totalLinks,
 }: UsersTableProps) {
 	const { t } = useTranslation();
-	const [search, setSearch] = useState('');
-	const [sortedData, setSortedData] = useState(users);
-	const [sortBy, setSortBy] = useState<keyof UserWithCounts | null>(null);
-	const [reverseSortDirection, setReverseSortDirection] = useState(false);
+
+	const [search, setSearch] = useState<string>('');
+	const [sortBy, setSortBy] = useState<Columns | null>(DEFAULT_SORT_BY);
+	const [reverseSortDirection, setReverseSortDirection] = useState(
+		DEFAULT_SORT_DIRECTION
+	);
+	const [sortedData, setSortedData] = useState(() =>
+		sortData(users, {
+			sortBy: sortBy,
+			reversed: reverseSortDirection,
+			search: '',
+		})
+	);
 
 	const setSorting = (field: keyof UserWithCounts) => {
 		const reversed = field === sortBy ? !reverseSortDirection : false;
@@ -49,7 +63,7 @@ export function UsersTable({
 		setSortedData(sortData(users, { sortBy: field, reversed, search }));
 	};
 
-	const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+	const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const { value } = event.currentTarget;
 		setSearch(value);
 		setSortedData(
@@ -83,7 +97,7 @@ export function UsersTable({
 	return (
 		<ScrollArea>
 			<TextInput
-				placeholder="Search by any field"
+				placeholder={`Search by any field (${users.length} users)`}
 				mb="md"
 				leftSection={<TbSearch style={{ width: rem(16), height: rem(16) }} />}
 				value={search}