prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move highlights into the main navigation container

Browse source
This commit is contained in:
Jackson Harper 2024-06-11 12:47:59 +08:00
parent 3a7698eb16
commit 950037af7e
4 changed files with 68 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/web/components/templates/library/LibraryItemsContainer.tsx
View file

@ -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>
)

80
packages/web/pages/highlights/index.tsx
View file

@ -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

15
packages/web/pages/library/index.tsx
View file

@ -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>
)
}

18
packages/web/pages/subscriptions/index.tsx
View file

@ -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>
)
}