From 950037af7e1e049b10b6a642ae883fcf74629ddf Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 11 Jun 2024 12:47:59 +0800
Subject: [PATCH] Move highlights into the main navigation container

---
 .../library/LibraryItemsContainer.tsx         |  5 +-
 packages/web/pages/highlights/index.tsx       | 80 ++++++++++++++-----
 packages/web/pages/library/index.tsx          | 15 +---
 packages/web/pages/subscriptions/index.tsx    | 18 ++---
 4 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryItemsContainer.tsx b/packages/web/components/templates/library/LibraryItemsContainer.tsx
index 5e9c3f771..7e391bfe4 100644
--- a/packages/web/components/templates/library/LibraryItemsContainer.tsx
+++ b/packages/web/components/templates/library/LibraryItemsContainer.tsx
@@ -6,6 +6,7 @@ import { useKBar } from 'kbar'
 import { useState } from 'react'
 import { LibraryContainer } from './LibraryContainer'
 import { LibrarySideBar } from './LibrarySideBar'
+import { HighlightsList } from '../../../pages/highlights'
 
 export function LibraryItemsContainer(): JSX.Element {
   const router = useRouter()
@@ -15,8 +16,8 @@ export function LibraryItemsContainer(): JSX.Element {
       <Allotment.Pane minSize={200}>
         <LibraryContainer />
       </Allotment.Pane>
-      {/* <Allotment.Pane snap maxSize={230}>
-        <LibrarySideBar />
+      {/* <Allotment.Pane snap maxSize={400}>
+        <HighlightsList />
       </Allotment.Pane> */}
     </Allotment>
   )
diff --git a/packages/web/pages/highlights/index.tsx b/packages/web/pages/highlights/index.tsx
index abd6619f4..2a8adf898 100644
--- a/packages/web/pages/highlights/index.tsx
+++ b/packages/web/pages/highlights/index.tsx
@@ -74,31 +74,69 @@ export default function Highlights(): JSX.Element {
         path: '/highlights',
       }}
     >
-      <VStack
-        css={{
-          maxWidth: '70%',
-          padding: '20px',
-          margin: '30px 50px 0 0',
-        }}
-      >
-        {highlights.map((highlight) => {
-          return (
-            viewer.viewerData?.me && (
-              <HighlightCard
-                key={highlight.id}
-                highlight={highlight}
-                viewer={viewer.viewerData.me}
-                router={router}
-                mutate={mutate}
-              />
-            )
-          )
-        })}
-      </VStack>
+      <HighlightsList />
     </NavigationLayout>
   )
 }
 
+export function HighlightsList(): JSX.Element {
+  const router = useRouter()
+  const viewer = useGetViewerQuery()
+  const [showFilterMenu, setShowFilterMenu] = useState(false)
+  const [_, setShowAddLinkModal] = useState(false)
+
+  const { isLoading, setSize, size, data, mutate } = useGetHighlights({
+    first: PAGE_SIZE,
+  })
+
+  const hasMore = useMemo(() => {
+    if (!data) {
+      return false
+    }
+    return data[data.length - 1].highlights.pageInfo.hasNextPage
+  }, [data])
+
+  const handleFetchMore = useCallback(() => {
+    if (isLoading || !hasMore) {
+      return
+    }
+    setSize(size + 1)
+  }, [isLoading, hasMore, setSize, size])
+
+  useFetchMore(handleFetchMore)
+
+  const highlights = useMemo(() => {
+    if (!data) {
+      return []
+    }
+    return data.flatMap((res) => res.highlights.edges.map((edge) => edge.node))
+  }, [data])
+
+  return (
+    <VStack
+      css={{
+        maxWidth: '70%',
+        padding: '20px',
+        margin: '30px 50px 0 0',
+      }}
+    >
+      {highlights.map((highlight) => {
+        return (
+          viewer.viewerData?.me && (
+            <HighlightCard
+              key={highlight.id}
+              highlight={highlight}
+              viewer={viewer.viewerData.me}
+              router={router}
+              mutate={mutate}
+            />
+          )
+        )
+      })}
+    </VStack>
+  )
+}
+
 type HighlightCardProps = {
   highlight: Highlight
   viewer: UserBasicData
diff --git a/packages/web/pages/library/index.tsx b/packages/web/pages/library/index.tsx
index 67d14c46b..f8aa17a2e 100644
--- a/packages/web/pages/library/index.tsx
+++ b/packages/web/pages/library/index.tsx
@@ -1,12 +1,6 @@
 import { NavigationLayout } from '../../components/templates/NavigationLayout'
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { HomeFeedContainer } from '../../components/templates/homeFeed/HomeFeedContainer'
-import { Box, VStack } from '../../components/elements/LayoutPrimitives'
+import { Box } from '../../components/elements/LayoutPrimitives'
 import { LibraryContainer } from '../../components/templates/library/LibraryContainer'
-import { LibraryItemsContainer } from '../../components/templates/library/LibraryItemsContainer'
-import { LibrarySideBar } from '../../components/templates/library/LibrarySideBar'
-import { Allotment, LayoutPriority } from 'allotment'
-import 'allotment/dist/style.css'
 
 export default function Library(): JSX.Element {
   return (
@@ -17,16 +11,9 @@ export default function Library(): JSX.Element {
         path: '/library',
       }}
     >
-      {/* <Allotment>
-        <Allotment.Pane priority={LayoutPriority.High}> */}
       <Box css={{ width: '100%', height: '100%', overflowY: 'auto' }}>
         <LibraryContainer />
       </Box>
-      {/* </Allotment.Pane>
-        <Allotment.Pane maxSize={480}>
-          <LibrarySideBar text="SIDEBAR" />
-        </Allotment.Pane>
-      </Allotment> */}
     </NavigationLayout>
   )
 }
diff --git a/packages/web/pages/subscriptions/index.tsx b/packages/web/pages/subscriptions/index.tsx
index 0a68a24cf..48d669fb8 100644
--- a/packages/web/pages/subscriptions/index.tsx
+++ b/packages/web/pages/subscriptions/index.tsx
@@ -1,7 +1,8 @@
 import { NavigationLayout } from '../../components/templates/NavigationLayout'
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { HomeFeedContainer } from '../../components/templates/homeFeed/HomeFeedContainer'
-import { VStack } from '../../components/elements/LayoutPrimitives'
+import { Box, VStack } from '../../components/elements/LayoutPrimitives'
+import { LibraryContainer } from '../../components/templates/library/LibraryContainer'
 
 export default function Subscriptions(): JSX.Element {
   return (
@@ -12,18 +13,9 @@ export default function Subscriptions(): JSX.Element {
         path: '/subscriptions',
       }}
     >
-      <VStack
-        alignment="start"
-        distribution="center"
-        css={{
-          px: '70px',
-          backgroundColor: '$thLibraryBackground',
-          '@lgDown': { px: '20px' },
-          '@mdDown': { px: '10px' },
-        }}
-      >
-        <div>Subscriptions will go here</div>
-      </VStack>
+      <Box css={{ width: '100%', height: '100%', overflowY: 'auto' }}>
+        <LibraryContainer />
+      </Box>
     </NavigationLayout>
   )
 }