forked from Archives/Athou_commafeed
85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
import { t, Trans } from "@lingui/macro"
|
|
import { ActionIcon, Anchor, Box, Center, Divider, Group, Title, useMantineTheme } from "@mantine/core"
|
|
import { useViewportSize } from "@mantine/hooks"
|
|
import { Constants } from "app/constants"
|
|
import { EntrySourceType, loadEntries } from "app/slices/entries"
|
|
import { redirectToCategoryDetails, redirectToFeedDetails } from "app/slices/redirect"
|
|
import { useAppDispatch, useAppSelector } from "app/store"
|
|
import { flattenCategoryTree } from "app/utils"
|
|
import { FeedEntries } from "components/content/FeedEntries"
|
|
import { useEffect } from "react"
|
|
import { TbEdit } from "react-icons/tb"
|
|
import { useLocation, useParams } from "react-router-dom"
|
|
|
|
function NoSubscriptionHelp() {
|
|
return (
|
|
<Box>
|
|
<Center>
|
|
<Trans>
|
|
You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?
|
|
</Trans>
|
|
</Center>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
interface FeedEntriesPageProps {
|
|
sourceType: EntrySourceType
|
|
}
|
|
|
|
export function FeedEntriesPage(props: FeedEntriesPageProps) {
|
|
const location = useLocation()
|
|
const { id = Constants.categoryIds.all } = useParams()
|
|
const viewport = useViewportSize()
|
|
const theme = useMantineTheme()
|
|
const rootCategory = useAppSelector(state => state.tree.rootCategory)
|
|
const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
|
|
const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl)
|
|
const hasMore = useAppSelector(state => state.entries.hasMore)
|
|
const readType = useAppSelector(state => state.user.settings?.readingMode)
|
|
const order = useAppSelector(state => state.user.settings?.readingOrder)
|
|
const dispatch = useAppDispatch()
|
|
|
|
const titleClicked = () => {
|
|
if (props.sourceType === "category") dispatch(redirectToCategoryDetails(id))
|
|
else dispatch(redirectToFeedDetails(id))
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!readType || !order) return
|
|
dispatch(
|
|
loadEntries({
|
|
sourceType: props.sourceType,
|
|
req: { id, readType, order },
|
|
})
|
|
)
|
|
}, [dispatch, props.sourceType, id, readType, order, location.state])
|
|
|
|
const hideEditButton = props.sourceType === "category" && id === Constants.categoryIds.all
|
|
|
|
const noSubscriptions = rootCategory && flattenCategoryTree(rootCategory).every(c => c.feeds.length === 0)
|
|
if (noSubscriptions) return <NoSubscriptionHelp />
|
|
return (
|
|
// add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding
|
|
<Box mb={viewport.height - Constants.layout.headerHeight - 210}>
|
|
<Group spacing="xl">
|
|
{sourceWebsiteUrl && (
|
|
<Anchor href={sourceWebsiteUrl} target="_blank" rel="noreferrer" variant="text">
|
|
<Title order={3}>{sourceLabel}</Title>
|
|
</Anchor>
|
|
)}
|
|
{!sourceWebsiteUrl && <Title order={3}>{sourceLabel}</Title>}
|
|
{sourceLabel && !hideEditButton && (
|
|
<ActionIcon onClick={titleClicked} variant="subtle" color={theme.primaryColor}>
|
|
<TbEdit size={18} />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
|
|
<FeedEntries />
|
|
|
|
{!hasMore && <Divider my="xl" label={t`No more entries`} labelPosition="center" />}
|
|
</Box>
|
|
)
|
|
}
|