replace old client with new client from commafeed-ui repository

commafeed-client/src/pages/app/FeedEntriesPage.tsx

@@ -0,0 +1,84 @@
+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>
+    )
+}