fix: numeric sorting in tables (#695)

* Update sorting method for id

* Update sorting method for id (token)

* Update sorting method for id (redemptions)

* Update sorting method for id (channel)

* chore: use same logic for all tables

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

web/src/components/ChannelsTable.js

@@ -286,17 +286,15 @@ const ChannelsTable = () => {
     if (channels.length === 0) return;
     setLoading(true);
     let sortedChannels = [...channels];
-    if (typeof sortedChannels[0][key] === 'string') {
+    sortedChannels.sort((a, b) => {
-      sortedChannels.sort((a, b) => {
+      if (!isNaN(a[key])) {
+        // If the value is numeric, subtract to sort
+        return a[key] - b[key];
+      } else {
+        // If the value is not numeric, sort as strings
         return ('' + a[key]).localeCompare(b[key]);
-      });
+      }
-    } else {
+    });
-      sortedChannels.sort((a, b) => {
-        if (a[key] === b[key]) return 0;
-        if (a[key] > b[key]) return -1;
-        if (a[key] < b[key]) return 1;
-      });
-    }
     if (sortedChannels[0].id === channels[0].id) {
       sortedChannels.reverse();
     }
@@ -304,6 +302,7 @@ const ChannelsTable = () => {
     setLoading(false);
   };
 
+
   return (
     <>
       <Form onSubmit={searchChannels}>

web/src/components/RedemptionsTable.js

@@ -130,7 +130,13 @@ const RedemptionsTable = () => {
     setLoading(true);
     let sortedRedemptions = [...redemptions];
     sortedRedemptions.sort((a, b) => {
-      return ('' + a[key]).localeCompare(b[key]);
+      if (!isNaN(a[key])) {
+        // If the value is numeric, subtract to sort
+        return a[key] - b[key];
+      } else {
+        // If the value is not numeric, sort as strings
+        return ('' + a[key]).localeCompare(b[key]);
+      }
     });
     if (sortedRedemptions[0].id === redemptions[0].id) {
       sortedRedemptions.reverse();

web/src/components/TokensTable.js

@@ -228,7 +228,13 @@ const TokensTable = () => {
     setLoading(true);
     let sortedTokens = [...tokens];
     sortedTokens.sort((a, b) => {
-      return ('' + a[key]).localeCompare(b[key]);
+      if (!isNaN(a[key])) {
+        // If the value is numeric, subtract to sort
+        return a[key] - b[key];
+      } else {
+        // If the value is not numeric, sort as strings
+        return ('' + a[key]).localeCompare(b[key]);
+      }
     });
     if (sortedTokens[0].id === tokens[0].id) {
       sortedTokens.reverse();

web/src/components/UsersTable.js

@@ -133,7 +133,13 @@ const UsersTable = () => {
     setLoading(true);
     let sortedUsers = [...users];
     sortedUsers.sort((a, b) => {
-      return ('' + a[key]).localeCompare(b[key]);
+      if (!isNaN(a[key])) {
+        // If the value is numeric, subtract to sort
+        return a[key] - b[key];
+      } else {
+        // If the value is not numeric, sort as strings
+        return ('' + a[key]).localeCompare(b[key]);
+      }
     });
     if (sortedUsers[0].id === users[0].id) {
       sortedUsers.reverse();