From c5e6bb15342ab1826a053ef7c1047e87393cdd55 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Sun, 5 Jun 2022 20:00:38 +0800
Subject: [PATCH] Update sort by readAt query on Web

---
 .../templates/homeFeed/LibrarySearchBar.tsx   | 24 +++++++++++++++----
 .../queries/useGetLibraryItemsQuery.tsx       |  2 ++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
index 6e08f3f33..561680306 100644
--- a/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/homeFeed/LibrarySearchBar.tsx
@@ -22,7 +22,7 @@ type LibraryFilter =
   | 'type:file'
   | 'type:highlights'
   | `saved:${string}`
-  | `sort:updated`
+  | `sort:read`
 
 // get last week's date
 const recentlySavedStartDate = new Date(
@@ -122,13 +122,27 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
           </form>
         </Box>
         {searchTerm && (
-          <Button style='plainIcon' onClick={(event) => {
+          <Button
+            style="plainIcon"
+            onClick={(event) => {
               event.preventDefault()
               setSearchTerm('')
               props.applySearchQuery('')
               inputRef.current?.blur()
-            }} css={{ display: 'flex', flexDirection: 'row', mr: '8px', height: '100%', alignItems: 'center' }}>
-              <X width={16} height={16} color={theme.colors.grayTextContrast.toString()} />
+            }}
+            css={{
+              display: 'flex',
+              flexDirection: 'row',
+              mr: '8px',
+              height: '100%',
+              alignItems: 'center',
+            }}
+          >
+            <X
+              width={16}
+              height={16}
+              color={theme.colors.grayTextContrast.toString()}
+            />
           </Button>
         )}
       </HStack>
@@ -175,7 +189,7 @@ export function DropdownFilterMenu(
         hideSeparator
       />
       <DropdownOption
-        onSelect={() => props.onFilterChange(`sort:updated`)}
+        onSelect={() => props.onFilterChange(`sort:read`)}
         title="Recently Read"
         hideSeparator
       />
diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
index 89f45aa79..0aad1edc1 100644
--- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
@@ -76,6 +76,7 @@ export type LibraryItemNode = {
   state: State
   pageType: PageType
   siteName?: string
+  readAt?: string
 }
 
 export type PageInfo = {
@@ -127,6 +128,7 @@ export function useGetLibraryItemsQuery({
               annotation
               state
               siteName
+              readAt
             }
           }
           pageInfo {