diff --git a/components/NodesData.js b/components/NodesData.js
index 11e9eb7..b0ffa10 100644
--- a/components/NodesData.js
+++ b/components/NodesData.js
@@ -1,5 +1,6 @@
import React, { useEffect, useState, useRef } from "react";
import axios from "axios";
+import { FilterOutlined, SortAscendingOutlined } from '@ant-design/icons';
import Cookies from "js-cookie";
const EREBRUS_GATEWAY_URL = process.env.NEXT_PUBLIC_EREBRUS_BASE_URL;
@@ -17,7 +18,8 @@ const NodesData = () => {
const filterRef = useRef(null);
const [sortBy, setSortBy] = useState("");
const [isOpen, setIsOpen] = useState(false);
-
+ const [sortByDisplay, setSortByDisplay] = useState("");
+
useEffect(() => {
@@ -48,6 +50,13 @@ const NodesData = () => {
setShowFilters(false);
};
+ const sortOptions = {
+ name: "Name",
+ status: "Status",
+ region: "Region",
+ networkSpeed: "Network Speed"
+ };
+
const handleSort = (key) => {
console.log("in handle sort ")
setSortConfig((prevConfig) => {
@@ -61,22 +70,20 @@ const NodesData = () => {
};
const handleSortChange = (value) => {
- console.log("in handle sort chnage ")
+ console.log("in handle sort change ");
if (value) {
-
handleSort(value);
- console.log("in handle sort chnage done ", )
+ console.log("in handle sort change done ");
setSortBy(value);
+ setSortByDisplay(sortOptions[value]);
setTimeout(() => {
setIsOpen(false);
}, 100);
-
}
-
-
};
+
useEffect(() => {
const handleClickOutside = (event) => {
if (
@@ -249,7 +256,7 @@ const NodesData = () => {
onClick={() => setShowFilters(!showFilters)}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-12 rounded"
>
- {statusFilter !== 'all' || regionFilter !== 'all' || chainFilter !== 'all' ? 'Filters Applied' : 'Filters'}
+