sorting and filtering

frontend/pages/account/tokens.js

@@ -4,6 +4,8 @@ import TokenRequest from "../../src/components/TokenRequest";
 import { useTokens } from "../../src/core/hooks";
 import {
   VStack,
+  Stack,
+  Input,
   Box,
   Center,
   Spinner,
@@ -17,12 +19,14 @@ import {
   ModalHeader,
   ModalBody,
   ModalCloseButton,
+  InputGroup,
 } from "@chakra-ui/react";
 import { getLayout } from "../../src/layouts/AccountLayout";
 
 const Tokens = () => {
   const { onOpen, onClose, isOpen } = useDisclosure();
   const [newToken, setNewToken] = useState(null);
+  const [filter, setFilter] = useState("");
   const [tokens, setTokens] = useState();
   const { list, updateMutation, revoke, isLoading, data } = useTokens();
 
@@ -50,6 +54,7 @@ const Tokens = () => {
     document.title = `Tokens`;
   }, []);
 
+  const handleChange = (event) => setFilter(event.target.value);
   return (
     <Box>
       {isLoading && !tokens ? (
@@ -77,6 +82,17 @@ const Tokens = () => {
           </Modal>
           <Heading variant="tokensScreen"> My API tokens </Heading>
           <VStack overflow="initial" maxH="unset" height="100%" maxW="100%">
+            <Stack direction={["column", "row", null]} w="100%">
+              <InputGroup size="sm" variant="outline">
+                <Input
+                  type="search"
+                  maxW="300px"
+                  borderRadius="md"
+                  placeholder="Type here to filter by label name"
+                  value={filter}
+                  onChange={handleChange}
+                />
+              </InputGroup>
               <Button
                 alignSelf="flex-end"
                 onClick={onOpen}
@@ -86,8 +102,10 @@ const Tokens = () => {
               >
                 Add new token
               </Button>
+            </Stack>
             <TokensList
               data={tokens}
+              filter={filter}
               revoke={revoke}
               isLoading={isLoading}
               update={updateMutation}

frontend/src/components/TokensList.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { Skeleton, IconButton } from "@chakra-ui/react";
 import {
   Table,
@@ -24,16 +24,16 @@ const SORT_DIRECTION_TYPES = {
   ASC: true,
   DESC: false,
 };
-const List = ({ data, revoke, isLoading, update }) => {
+const List = ({ data, revoke, isLoading, update, filter }) => {
   const [stateData, setStateData] = useState(data);
   const userToken = localStorage.getItem("MOONSTREAM_ACCESS_TOKEN");
   const [sortBy, setSortBy] = useState({
     column: SORT_BY_TYPES.LABEL,
     direction: SORT_DIRECTION_TYPES.ASC,
   });
-  useEffect(() => {
+
-    if (data?.token?.length > 0) {
+  const sortedTokens = useMemo(() => {
-      const sortedTokens = data.token.sort(function (a, b) {
+    return data?.token?.sort(function (a, b) {
       var aName = a?.note?.toUpperCase();
       var bName = b?.note?.toUpperCase();
 
@@ -52,10 +52,19 @@ const List = ({ data, revoke, isLoading, update }) => {
         }
       }
     });
+  }, [sortBy, data]);
 
-      setStateData({ ...data, token: [...sortedTokens] });
+  useEffect(() => {
+    if (data?.token?.length > 0) {
+      const filteredTokens = sortedTokens.filter((item) => {
+        if (filter === null || filter === undefined || filter === "") {
+          return true;
+        } else return item.note.includes(filter);
+      });
+
+      setStateData({ ...data, token: [...filteredTokens] });
     }
-  }, [data, sortBy]);
+  }, [data, sortBy, filter, sortedTokens]);
 
   const cellProps = {
     px: ["2px", "6px", "inherit"],
@@ -77,7 +86,9 @@ const List = ({ data, revoke, isLoading, update }) => {
                 variant="link"
                 my={0}
                 size="sm"
-                colorScheme="blue"
+                colorScheme={
+                  sortBy.column !== SORT_BY_TYPES.LABEL ? "blue" : "orange"
+                }
                 onClick={() =>
                   setSortBy({
                     column: SORT_BY_TYPES.LABEL,
@@ -107,7 +118,9 @@ const List = ({ data, revoke, isLoading, update }) => {
                 variant="link"
                 my={0}
                 size="sm"
-                colorScheme="blue"
+                colorScheme={
+                  sortBy.column !== SORT_BY_TYPES.DATE ? "blue" : "orange"
+                }
                 onClick={() =>
                   setSortBy({
                     column: SORT_BY_TYPES.DATE,
@@ -128,8 +141,7 @@ const List = ({ data, revoke, isLoading, update }) => {
                   />
                 }
               >
-                {" "}
+                {`Date Created`}
-                Date Created{" "}
               </Button>
 
               {/* <IconButton
@@ -150,7 +162,7 @@ const List = ({ data, revoke, isLoading, update }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {stateData.token.map((token) => {
+          {stateData.token?.map((token) => {
             if (token.active) {
               if (userToken !== token.id) {
                 return (