replace old client with new client from commafeed-ui repository

2022-08-13 10:56:07 +02:00
parent ac7b6eeb21
commit 04894f118b
183 changed files with 20326 additions and 12678 deletions
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -0,0 +1,97 @@
+import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Constants } from "app/constants"
+import { markEntry, selectEntry } from "app/slices/entries"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { Entry } from "app/types"
+import React, { useEffect, useRef } from "react"
+import { FeedEntryBody } from "./FeedEntryBody"
+import { FeedEntryFooter } from "./FeedEntryFooter"
+import { FeedEntryHeader } from "./FeedEntryHeader"
+
+interface FeedEntryProps {
+    entry: Entry
+    expanded: boolean
+}
+
+const useStyles = createStyles((theme, props: FeedEntryProps) => {
+    let backgroundColor
+    if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
+    else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
+
+    return {
+        paper: {
+            backgroundColor,
+            marginTop: theme.spacing.xs,
+            marginBottom: theme.spacing.xs,
+            [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
+                marginTop: "6px",
+                marginBottom: "6px",
+            },
+        },
+        body: {
+            maxWidth: "650px",
+        },
+    }
+})
+
+export function FeedEntry(props: FeedEntryProps) {
+    const { classes } = useStyles(props)
+    const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
+    const dispatch = useAppDispatch()
+
+    const headerClicked = (e: React.MouseEvent) => {
+        if (e.button === 1 || e.ctrlKey || e.metaKey) {
+            // middle click
+            dispatch(markEntry({ entry: props.entry, read: true }))
+        } else if (e.button === 0) {
+            // main click
+            // don't trigger the link
+            e.preventDefault()
+
+            dispatch(selectEntry(props.entry))
+        }
+    }
+
+    // scroll to entry when expanded
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        setTimeout(() => {
+            if (!ref.current) return
+            if (!props.expanded) return
+
+            document.getElementById(Constants.dom.mainScrollAreaId)?.scrollTo({
+                // having a small gap between the top of the content and the top of the page is sexier
+                top: ref.current.offsetTop - 3,
+                behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
+            })
+        })
+    }, [props.expanded, scrollSpeed])
+
+    return (
+        <div ref={ref}>
+            <Paper shadow="xs" withBorder className={classes.paper}>
+                <Anchor
+                    variant="text"
+                    href={props.entry.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={headerClicked}
+                    onAuxClick={headerClicked}
+                >
+                    <Box p="xs">
+                        <FeedEntryHeader entry={props.entry} expanded={props.expanded} />
+                    </Box>
+                </Anchor>
+                {props.expanded && (
+                    <Box px="xs" pb="xs">
+                        <Box className={classes.body}>
+                            <FeedEntryBody entry={props.entry} />
+                        </Box>
+                        <Divider variant="dashed" my="xs" />
+                        <FeedEntryFooter entry={props.entry} />
+                    </Box>
+                )}
+            </Paper>
+        </div>
+    )
+}