garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

replace complex eslint config with biome

Browse Source
This commit is contained in:
Athou
2024-06-13 21:54:14 +02:00
parent 9115797dee
commit 3810dedf47
102 changed files with 7186 additions and 9488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
commafeed-client/src/components/header/MarkAllAsReadButton.tsx
View File

@@ -1,97 +1,97 @@
import { Trans } from "@lingui/macro"
import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
import { markAllEntries } from "app/entries/thunks"
import { useAppDispatch, useAppSelector } from "app/store"
import { ActionButton } from "components/ActionButton"
import { useState } from "react"
import { TbChecks } from "react-icons/tb"
export function MarkAllAsReadButton(props: { iconSize: number }) {
const [opened, setOpened] = useState(false)
const [threshold, setThreshold] = useState(0)
const source = useAppSelector(state => state.entries.source)
const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
const dispatch = useAppDispatch()
const buttonClicked = () => {
if (markAllAsReadConfirmation) {
setThreshold(0)
setOpened(true)
} else {
dispatch(
markAllEntries({
sourceType: source.type,
req: {
id: source.id,
read: true,
olderThan: Date.now(),
insertedBefore: entriesTimestamp,
},
})
)
}
}
return (
<>
<Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
<Stack>
<Text size="sm">
{threshold === 0 && (
<Trans>
Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
</Trans>
)}
{threshold > 0 && (
<Trans>
Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
</Trans>
)}
</Text>
<Slider
py="xl"
min={0}
max={28}
marks={[
{ value: 0, label: "0" },
{ value: 7, label: "7" },
{ value: 14, label: "14" },
{ value: 21, label: "21" },
{ value: 28, label: "28" },
]}
value={threshold}
onChange={setThreshold}
/>
<Group justify="flex-end">
<Button variant="default" onClick={() => setOpened(false)}>
<Trans>Cancel</Trans>
</Button>
<Button
color="red"
onClick={() => {
setOpened(false)
dispatch(
markAllEntries({
sourceType: source.type,
req: {
id: source.id,
read: true,
olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
insertedBefore: entriesTimestamp,
},
})
)
}}
>
<Trans>Confirm</Trans>
</Button>
</Group>
</Stack>
</Modal>
<ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
</>
)
}
import { Trans } from "@lingui/macro"
import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
import { markAllEntries } from "app/entries/thunks"
import { useAppDispatch, useAppSelector } from "app/store"
import { ActionButton } from "components/ActionButton"
import { useState } from "react"
import { TbChecks } from "react-icons/tb"
export function MarkAllAsReadButton(props: { iconSize: number }) {
const [opened, setOpened] = useState(false)
const [threshold, setThreshold] = useState(0)
const source = useAppSelector(state => state.entries.source)
const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
const dispatch = useAppDispatch()
const buttonClicked = () => {
if (markAllAsReadConfirmation) {
setThreshold(0)
setOpened(true)
} else {
dispatch(
markAllEntries({
sourceType: source.type,
req: {
id: source.id,
read: true,
olderThan: Date.now(),
insertedBefore: entriesTimestamp,
},
})
)
}
}
return (
<>
<Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
<Stack>
<Text size="sm">
{threshold === 0 && (
<Trans>
Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
</Trans>
)}
{threshold > 0 && (
<Trans>
Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
</Trans>
)}
</Text>
<Slider
py="xl"
min={0}
max={28}
marks={[
{ value: 0, label: "0" },
{ value: 7, label: "7" },
{ value: 14, label: "14" },
{ value: 21, label: "21" },
{ value: 28, label: "28" },
]}
value={threshold}
onChange={setThreshold}
/>
<Group justify="flex-end">
<Button variant="default" onClick={() => setOpened(false)}>
<Trans>Cancel</Trans>
</Button>
<Button
color="red"
onClick={() => {
setOpened(false)
dispatch(
markAllEntries({
sourceType: source.type,
req: {
id: source.id,
read: true,
olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
insertedBefore: entriesTimestamp,
},
})
)
}}
>
<Trans>Confirm</Trans>
</Button>
</Group>
</Stack>
</Modal>
<ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
</>
)
}