feat: sorting on explore view (#220)

* chore: add orderBy params on query

* feat: add sorting on explore view

ui/graphql/queries.graphql

@@ -1,9 +1,15 @@
-query lastNFAsPaginated($pageSize: Int, $skip: Int, $searchValue: String) {
+query lastNFAsPaginated(
+  $pageSize: Int
+  $skip: Int
+  $orderBy: Token_orderBy
+  $orderDirection: OrderDirection
+  $searchValue: String
+) {
   tokens(
     first: $pageSize
     skip: $skip
-    orderDirection: desc
-    orderBy: tokenId
+    orderDirection: $orderDirection
+    orderBy: $orderBy
     where: { name_contains_nocase: $searchValue }
   ) {
     id

ui/src/providers/apollo-provider.tsx

@@ -43,7 +43,7 @@ const client = new ApolloClient({
       Query: {
         fields: {
           tokens: {
-            keyArgs: ['where'],
+            keyArgs: ['where', 'orderBy', 'orderDirection'],
             merge: mergeByKey('id'),
           },
         },

ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx

@@ -19,8 +19,15 @@ const LoadingSkeletons: React.FC = () => (
 );
 
 export const NFAListFragment: React.FC = () => {
-  const { endReached, pageNumber, search, setEndReached, setPageNumber } =
-    Explore.useContext();
+  const {
+    endReached,
+    orderBy,
+    orderDirection,
+    pageNumber,
+    search,
+    setEndReached,
+    setPageNumber,
+  } = Explore.useContext();
 
   const {
     data: { tokens } = { tokens: [] },
@@ -31,6 +38,8 @@ export const NFAListFragment: React.FC = () => {
     variables: {
       pageSize,
       searchValue: search,
+      orderBy,
+      orderDirection,
       skip: pageNumber * pageSize, //skip is for the pagination
     },
     onCompleted: (data) => {

ui/src/views/explore/explore-list/nfa-search.tsx

@@ -7,15 +7,50 @@ import { Explore } from '../explore.context';
 import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles';
 
 const orderResults: DropdownItem[] = [
-  { value: 'a-z', label: 'Sort A-Z' },
-  { value: 'z-a', label: 'Sort Z-A' },
+  { value: 'newest', label: 'Newest' },
+  { value: 'oldest', label: 'Oldest' },
+  { value: 'a-z', label: 'Name A-Z' },
+  { value: 'z-a', label: 'Name Z-A' },
 ];
 
 export const NFASearchFragment: React.FC = () => {
-  const { setSearch } = Explore.useContext();
+  const {
+    setEndReached,
+    setOrderBy,
+    setOrderDirection,
+    setSearch,
+    setPageNumber,
+  } = Explore.useContext();
   const [selectedValue, setSelectedValue] = useState<DropdownItem>(
     orderResults[0]
-  ); //TODO replace for context
+  );
+
+  const handleSortChange = (item: DropdownItem): void => {
+    setSelectedValue(item);
+    setPageNumber(0);
+    setEndReached(false);
+
+    switch (item.value) {
+      case 'newest':
+        setOrderBy('tokenId');
+        setOrderDirection('desc');
+        break;
+      case 'oldest':
+        setOrderBy('tokenId');
+        setOrderDirection('asc');
+        break;
+      case 'a-z':
+        setOrderBy('name');
+        setOrderDirection('asc');
+        break;
+      case 'z-a':
+        setOrderBy('name');
+        setOrderDirection('desc');
+        break;
+      default:
+        break;
+    }
+  };
 
   const handleSearch = useDebounce(
     (searchValue: string) => setSearch(searchValue),
@@ -42,7 +77,7 @@ export const NFASearchFragment: React.FC = () => {
         <Dropdown
           items={orderResults}
           selectedValue={selectedValue}
-          onChange={setSelectedValue}
+          onChange={handleSortChange}
           backgroundColor="slate4"
           textColor="slate11"
           optionsWidth="40"

ui/src/views/explore/explore.context.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 
-import { OrderDirection } from '@/../.graphclient';
+import { OrderDirection, Token_orderBy } from '@/graphclient';
 import { createContext } from '@/utils';
 
 export type ExploreContext = {
   search: string;
-  orderBy: string;
+  orderBy: Token_orderBy;
   orderDirection: OrderDirection;
   pageNumber: number;
   endReached: boolean;
@@ -29,7 +29,7 @@ export abstract class Explore {
     children,
   }: Explore.ProviderProps) => {
     const [search, setSearch] = useState('');
-    const [orderBy, setOrderBy] = useState('');
+    const [orderBy, setOrderBy] = useState('tokenId');
     const [orderDirection, setOrderDirection] =
       useState<OrderDirection>('desc');
     const [pageNumber, setPageNumber] = useState(0);