From 09e50adefc3ec5b1d0fff2e0076a135847e4c437 Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Tue, 11 Apr 2023 17:22:34 -0300
Subject: [PATCH] feat: UI search on nfas list (#211)

* wip: created context for explore view

* feat: add search to context to filter on query

* feat: add search value to query

* feat: add search by name, external URL and ens

* feat: search by name

* chore: remove comments

* chore: rename files explore view (#217)

* chore: rename files explore view

* Update ui/src/views/explore/explore-list/results-search.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* chore: rename nfa search fragment

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* chore: update setPageNumber

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>
---
 ui/graphql/queries.graphql                    |  3 +-
 ...der.styles.ts => explore-header.styles.ts} |  2 +-
 .../{header.tsx => explore-header.tsx}        | 22 +++----
 .../explore-list/explore-list-container.tsx   | 16 +++++
 ui/src/views/explore/explore-list/index.ts    |  1 +
 .../nfa-list/index.ts                         |  0
 .../nfa-list/nfa-list.tsx                     | 15 +++--
 .../nfa-search.tsx}                           | 15 ++++-
 .../results.styles.ts                         |  0
 ui/src/views/explore/explore.context.tsx      | 59 +++++++++++++++++++
 ui/src/views/explore/explore.tsx              |  8 +--
 ui/src/views/explore/list-nfas/index.ts       |  1 -
 ui/src/views/explore/list-nfas/list-nfas.tsx  | 13 ----
 13 files changed, 117 insertions(+), 38 deletions(-)
 rename ui/src/views/explore/{header.styles.ts => explore-header.styles.ts} (87%)
 rename ui/src/views/explore/{header.tsx => explore-header.tsx} (54%)
 create mode 100644 ui/src/views/explore/explore-list/explore-list-container.tsx
 create mode 100644 ui/src/views/explore/explore-list/index.ts
 rename ui/src/views/explore/{list-nfas => explore-list}/nfa-list/index.ts (100%)
 rename ui/src/views/explore/{list-nfas => explore-list}/nfa-list/nfa-list.tsx (79%)
 rename ui/src/views/explore/{list-nfas/results-search.tsx => explore-list/nfa-search.tsx} (67%)
 rename ui/src/views/explore/{list-nfas => explore-list}/results.styles.ts (100%)
 create mode 100644 ui/src/views/explore/explore.context.tsx
 delete mode 100644 ui/src/views/explore/list-nfas/index.ts
 delete mode 100644 ui/src/views/explore/list-nfas/list-nfas.tsx

diff --git a/ui/graphql/queries.graphql b/ui/graphql/queries.graphql
index b648cff..60fe637 100644
--- a/ui/graphql/queries.graphql
+++ b/ui/graphql/queries.graphql
@@ -1,9 +1,10 @@
-query lastNFAsPaginated($pageSize: Int, $skip: Int) {
+query lastNFAsPaginated($pageSize: Int, $skip: Int, $searchValue: String) {
   tokens(
     first: $pageSize
     skip: $skip
     orderDirection: desc
     orderBy: tokenId
+    where: { name_contains_nocase: $searchValue }
   ) {
     id
     tokenId
diff --git a/ui/src/views/explore/header.styles.ts b/ui/src/views/explore/explore-header.styles.ts
similarity index 87%
rename from ui/src/views/explore/header.styles.ts
rename to ui/src/views/explore/explore-header.styles.ts
index 0433a46..6f2f03e 100644
--- a/ui/src/views/explore/header.styles.ts
+++ b/ui/src/views/explore/explore-header.styles.ts
@@ -1,7 +1,7 @@
 import { Flex } from '@/components';
 import { styled } from '@/theme';
 
-export abstract class Header {
+export abstract class ExploreHeaderStyles {
   static readonly Container = styled(Flex, {
     flexDirection: 'column',
     gap: '$6',
diff --git a/ui/src/views/explore/header.tsx b/ui/src/views/explore/explore-header.tsx
similarity index 54%
rename from ui/src/views/explore/header.tsx
rename to ui/src/views/explore/explore-header.tsx
index 2a5cfe7..bd3665a 100644
--- a/ui/src/views/explore/header.tsx
+++ b/ui/src/views/explore/explore-header.tsx
@@ -2,17 +2,17 @@ import { Link } from 'react-router-dom';
 
 import { Button } from '@/components';
 
-import { Header as HS } from './header.styles';
+import { ExploreHeaderStyles as S } from './explore-header.styles';
 
-export const Header: React.FC = () => (
-  <HS.Container>
-    <HS.Text>
-      <HS.GrayText>
+export const ExploreHeader: React.FC = () => (
+  <S.Container>
+    <S.Text>
+      <S.GrayText>
         Created with a focus on decentralizing your applications,
-      </HS.GrayText>
-      <HS.WhiteText> NFAs are the only thing you need.</HS.WhiteText>
-    </HS.Text>
-    <HS.ButtonContainer>
+      </S.GrayText>
+      <S.WhiteText> NFAs are the only thing you need.</S.WhiteText>
+    </S.Text>
+    <S.ButtonContainer>
       <Button as={Link} to="/mint" colorScheme="blue" variant="outline">
         Create an NFA
       </Button>
@@ -20,6 +20,6 @@ export const Header: React.FC = () => (
       <Button as={Link} to="/create-ap" colorScheme="gray" variant="outline">
         Host an Access Point
       </Button>
-    </HS.ButtonContainer>
-  </HS.Container>
+    </S.ButtonContainer>
+  </S.Container>
 );
diff --git a/ui/src/views/explore/explore-list/explore-list-container.tsx b/ui/src/views/explore/explore-list/explore-list-container.tsx
new file mode 100644
index 0000000..da1ea25
--- /dev/null
+++ b/ui/src/views/explore/explore-list/explore-list-container.tsx
@@ -0,0 +1,16 @@
+import { Flex } from '@/components';
+
+import { Explore } from '../explore.context';
+import { NFAListFragment } from './nfa-list';
+import { NFASearchFragment } from './nfa-search';
+
+export const ExploreListContainer: React.FC = () => {
+  return (
+    <Flex css={{ flexDirection: 'column' }}>
+      <Explore.Provider>
+        <NFASearchFragment />
+        <NFAListFragment />
+      </Explore.Provider>
+    </Flex>
+  );
+};
diff --git a/ui/src/views/explore/explore-list/index.ts b/ui/src/views/explore/explore-list/index.ts
new file mode 100644
index 0000000..da6013c
--- /dev/null
+++ b/ui/src/views/explore/explore-list/index.ts
@@ -0,0 +1 @@
+export * from './explore-list-container';
diff --git a/ui/src/views/explore/list-nfas/nfa-list/index.ts b/ui/src/views/explore/explore-list/nfa-list/index.ts
similarity index 100%
rename from ui/src/views/explore/list-nfas/nfa-list/index.ts
rename to ui/src/views/explore/explore-list/nfa-list/index.ts
diff --git a/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx b/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx
similarity index 79%
rename from ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx
rename to ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx
index 9ff7dd5..e0a3409 100644
--- a/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx
+++ b/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx
@@ -1,10 +1,12 @@
 import { useQuery } from '@apollo/client';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { Flex, NFACard, NFACardSkeleton, NoResults } from '@/components';
 import { lastNFAsPaginatedDocument } from '@/graphclient';
 import { useWindowScrollEnd } from '@/hooks';
 
+import { Explore } from '../../explore.context';
+
 const pageSize = 10; //Set this size to test pagination
 
 const LoadingSkeletons: React.FC = () => (
@@ -16,9 +18,9 @@ const LoadingSkeletons: React.FC = () => (
   </>
 );
 
-export const NFAList: React.FC = () => {
-  const [pageNumber, setPageNumber] = useState(0);
-  const [endReached, setEndReached] = useState(false);
+export const NFAListFragment: React.FC = () => {
+  const { endReached, pageNumber, search, setEndReached, setPageNumber } =
+    Explore.useContext();
 
   const {
     data: { tokens } = { tokens: [] },
@@ -28,7 +30,8 @@ export const NFAList: React.FC = () => {
     fetchPolicy: 'cache-and-network',
     variables: {
       pageSize,
-      skip: pageNumber * pageSize,
+      searchValue: search,
+      skip: pageNumber * pageSize, //skip is for the pagination
     },
     onCompleted: (data) => {
       if (data.tokens.length - tokens.length < pageSize) setEndReached(true);
@@ -43,7 +46,7 @@ export const NFAList: React.FC = () => {
 
   useWindowScrollEnd(() => {
     if (isLoading || endReached || queryError) return;
-    setPageNumber((prevState) => prevState + 1);
+    setPageNumber(pageNumber + 1);
   });
 
   if (queryError) return <div>Error</div>; //TODO handle error
diff --git a/ui/src/views/explore/list-nfas/results-search.tsx b/ui/src/views/explore/explore-list/nfa-search.tsx
similarity index 67%
rename from ui/src/views/explore/list-nfas/results-search.tsx
rename to ui/src/views/explore/explore-list/nfa-search.tsx
index 6d56408..82f32d2 100644
--- a/ui/src/views/explore/list-nfas/results-search.tsx
+++ b/ui/src/views/explore/explore-list/nfa-search.tsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
 
 import { Dropdown, DropdownItem, Flex, Input } from '@/components';
+import { useDebounce } from '@/hooks';
 
+import { Explore } from '../explore.context';
 import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles';
 
 const orderResults: DropdownItem[] = [
@@ -9,11 +11,21 @@ const orderResults: DropdownItem[] = [
   { value: 'z-a', label: 'Sort Z-A' },
 ];
 
-export const ResultsSearch: React.FC = () => {
+export const NFASearchFragment: React.FC = () => {
+  const { setSearch } = Explore.useContext();
   const [selectedValue, setSelectedValue] = useState<DropdownItem>(
     orderResults[0]
   ); //TODO replace for context
 
+  const handleSearch = useDebounce(
+    (searchValue: string) => setSearch(searchValue),
+    200
+  );
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    handleSearch(e.target.value);
+  };
+
   return (
     <Flex css={{ justifyContent: 'space-between' }}>
       <ResultsContainer>
@@ -25,6 +37,7 @@ export const ResultsSearch: React.FC = () => {
           placeholder="Search"
           leftIcon="search"
           css={{ width: '23rem' }}
+          onChange={handleSearchChange}
         />
         <Dropdown
           items={orderResults}
diff --git a/ui/src/views/explore/list-nfas/results.styles.ts b/ui/src/views/explore/explore-list/results.styles.ts
similarity index 100%
rename from ui/src/views/explore/list-nfas/results.styles.ts
rename to ui/src/views/explore/explore-list/results.styles.ts
diff --git a/ui/src/views/explore/explore.context.tsx b/ui/src/views/explore/explore.context.tsx
new file mode 100644
index 0000000..2103097
--- /dev/null
+++ b/ui/src/views/explore/explore.context.tsx
@@ -0,0 +1,59 @@
+import { useState } from 'react';
+
+import { OrderDirection } from '@/../.graphclient';
+import { createContext } from '@/utils';
+
+export type ExploreContext = {
+  search: string;
+  orderBy: string;
+  orderDirection: OrderDirection;
+  pageNumber: number;
+  endReached: boolean;
+  setSearch: (search: string) => void;
+  setOrderBy: (orderBy: string) => void;
+  setOrderDirection: (orderDirection: OrderDirection) => void;
+  setPageNumber: (pageNumber: number) => void;
+  setEndReached: (isEndReaced: boolean) => void;
+};
+
+const [ExploreProvider, useContext] = createContext<ExploreContext>({
+  name: 'Explore.Context',
+  hookName: 'Explore.useContext',
+  providerName: 'Explore.Provider',
+});
+
+export abstract class Explore {
+  static readonly useContext = useContext;
+
+  static readonly Provider: React.FC<Explore.ProviderProps> = ({
+    children,
+  }: Explore.ProviderProps) => {
+    const [search, setSearch] = useState('');
+    const [orderBy, setOrderBy] = useState('');
+    const [orderDirection, setOrderDirection] =
+      useState<OrderDirection>('desc');
+    const [pageNumber, setPageNumber] = useState(0);
+    const [endReached, setEndReached] = useState(false);
+
+    const context = {
+      search,
+      orderBy,
+      orderDirection,
+      pageNumber,
+      endReached,
+      setSearch,
+      setOrderBy,
+      setOrderDirection,
+      setPageNumber,
+      setEndReached,
+    };
+
+    return <ExploreProvider value={context}>{children}</ExploreProvider>;
+  };
+}
+
+export namespace Explore {
+  export type ProviderProps = {
+    children: React.ReactNode;
+  };
+}
diff --git a/ui/src/views/explore/explore.tsx b/ui/src/views/explore/explore.tsx
index c36872e..49451a0 100644
--- a/ui/src/views/explore/explore.tsx
+++ b/ui/src/views/explore/explore.tsx
@@ -1,12 +1,12 @@
 import { Explore as ES } from './explore.styles';
-import { Header } from './header';
-import { ListNfas } from './list-nfas';
+import { ExploreHeader } from './explore-header';
+import { ExploreListContainer } from './explore-list';
 
 export const Explore: React.FC = () => {
   return (
     <ES.Container>
-      <Header />
-      <ListNfas />
+      <ExploreHeader />
+      <ExploreListContainer />
     </ES.Container>
   );
 };
diff --git a/ui/src/views/explore/list-nfas/index.ts b/ui/src/views/explore/list-nfas/index.ts
deleted file mode 100644
index acea138..0000000
--- a/ui/src/views/explore/list-nfas/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './list-nfas';
diff --git a/ui/src/views/explore/list-nfas/list-nfas.tsx b/ui/src/views/explore/list-nfas/list-nfas.tsx
deleted file mode 100644
index 5ea1fe1..0000000
--- a/ui/src/views/explore/list-nfas/list-nfas.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Flex } from '@/components';
-
-import { NFAList } from './nfa-list';
-import { ResultsSearch } from './results-search';
-
-export const ListNfas: React.FC = () => {
-  return (
-    <Flex css={{ flexDirection: 'column' }}>
-      <ResultsSearch />
-      <NFAList />
-    </Flex>
-  );
-};