Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better empty state handling for home

Browse Source
This commit is contained in:
Jackson Harper
2024-06-25 19:40:45 +08:00
parent 595e7ddf50
commit 98015f1ec8
1 changed files with 47 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/web/components/nav-containers/HomeContainer.tsx
View File

@ -28,6 +28,7 @@ import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
import { Toaster } from 'react-hot-toast'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import useLibraryItemActions from '../../lib/hooks/useLibraryItemActions'
import { SyncLoader } from 'react-spinners'
export function HomeContainer(): JSX.Element {
const router = useRouter()
@ -44,6 +45,23 @@ export function HomeContainer(): JSX.Element {
window.localStorage.setItem('nav-return', router.asPath)
}, [router.asPath])
if (homeData.error && homeData.errorMessage == 'PENDING') {
return (
<VStack
distribution="center"
alignment="center"
css={{
width: '100%',
bg: '$readerBg',
minHeight: '100vh',
minWidth: '320px',
}}
>
<SyncLoader color={theme.colors.omnivoreGray.toString()} size={8} />
</VStack>
)
}
return (
<VStack
distribution="start"
@ -74,11 +92,11 @@ export function HomeContainer(): JSX.Element {
}}
>
{homeData.sections?.map((homeSection, idx) => {
if (homeSection.items.length < 1) {
return <SpanBox key={`section-${idx}`}></SpanBox>
}
switch (homeSection.layout) {
case 'just_added':
if (homeSection.items.length < 1) {
return <SpanBox key={`section-${idx}`}></SpanBox>
}
return (
<JustAddedHomeSection
key={`section-${idx}`}
@ -103,6 +121,9 @@ export function HomeContainer(): JSX.Element {
/>
)
case 'hidden':
if (homeSection.items.length < 1) {
return <SpanBox key={`section-${idx}`}></SpanBox>
}
return (
<HiddenHomeSection
key={`section-${idx}`}
@ -235,13 +256,6 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
const [items, dispatchList] = useReducer(listReducer, [])
function handleDelete(item: HomeItem) {
dispatchList({
type: 'REMOVE_ITEM',
itemId: item.id,
})
}
useEffect(() => {
dispatchList({
type: 'RESET',
@ -249,6 +263,29 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
})
}, [props])
console.log(
'props.homeSection.items.length: ',
props.homeSection.items.length
)
if (props.homeSection.items.length < 1) {
return (
<VStack
distribution="start"
css={{
height: '540px',
width: '100%',
gap: '20px',
'@mdDown': {
gap: '10px',
},
bg: '$homeCardHover',
}}
>
Your top picks are empty.
</VStack>
)
}
return (
<VStack
distribution="start"