diff --git a/components/item-info.js b/components/item-info.js
index 515993f8..b0dbafaf 100644
--- a/components/item-info.js
+++ b/components/item-info.js
@@ -6,7 +6,7 @@ import Dropdown from 'react-bootstrap/Dropdown'
import Countdown from './countdown'
import { abbrNum, numWithUnits } from '@/lib/format'
import { newComments, commentsViewedAt } from '@/lib/new-comments'
-import { datePivot, timeSince } from '@/lib/time'
+import { timeSince } from '@/lib/time'
import { DeleteDropdownItem } from './delete'
import styles from './item.module.css'
import { useMe } from './me'
@@ -28,6 +28,7 @@ import { useToast } from './toast'
import { useShowModal } from './modal'
import classNames from 'classnames'
import SubPopover from './sub-popover'
+import useCanEdit from './use-can-edit'
export default function ItemInfo ({
item, full, commentsText = 'comments',
@@ -35,12 +36,12 @@ export default function ItemInfo ({
onQuoteReply, extraBadges, nested, pinnable, showActionDropdown = true, showUser = true,
setDisableRetry, disableRetry
}) {
- const editThreshold = datePivot(new Date(item.invoice?.confirmedAt ?? item.createdAt), { minutes: 10 })
const { me } = useMe()
const router = useRouter()
const [hasNewComments, setHasNewComments] = useState(false)
const root = useRoot()
const sub = item?.sub || root?.sub
+ const [canEdit, setCanEdit, editThreshold] = useCanEdit(item)
useEffect(() => {
if (!full) {
@@ -48,19 +49,6 @@ export default function ItemInfo ({
}
}, [item])
- // allow anon edits if they have the correct hmac for the item invoice
- // (the server will verify the hmac)
- const [anonEdit, setAnonEdit] = useState(false)
- useEffect(() => {
- const invParams = window.localStorage.getItem(`item:${item.id}:hash:hmac`)
- setAnonEdit(!!invParams && !me && Number(item.user.id) === USER_ID.anon)
- }, [])
-
- // deleted items can never be edited and every item has a 10 minute edit window
- // except bios, they can always be edited but they should never show the countdown
- const noEdit = !!item.deletedAt || (Date.now() >= editThreshold) || item.bio
- const canEdit = !noEdit && ((me && item.mine) || anonEdit)
-
// territory founders can pin any post in their territory
// and OPs can pin any root reply in their post
const isPost = !item.parentId
@@ -160,7 +148,7 @@ export default function ItemInfo ({
<>
diff --git a/components/use-can-edit.js b/components/use-can-edit.js
new file mode 100644
index 00000000..bc31f17a
--- /dev/null
+++ b/components/use-can-edit.js
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+import { datePivot } from '@/lib/time'
+import { useMe } from '@/components/me'
+import { USER_ID } from '@/lib/constants'
+
+export default function useCanEdit (item) {
+ const editThreshold = datePivot(new Date(item.invoice?.confirmedAt ?? item.createdAt), { minutes: 10 })
+ const { me } = useMe()
+
+ // deleted items can never be edited and every item has a 10 minute edit window
+ // except bios, they can always be edited but they should never show the countdown
+ const noEdit = !!item.deletedAt || (Date.now() >= editThreshold) || item.bio
+ const authorEdit = me && item.mine
+ const [canEdit, setCanEdit] = useState(!noEdit && authorEdit)
+
+ useEffect(() => {
+ // allow anon edits if they have the correct hmac for the item invoice
+ // (the server will verify the hmac)
+ const invParams = window.localStorage.getItem(`item:${item.id}:hash:hmac`)
+ const anonEdit = !!invParams && !me && Number(item.user.id) === USER_ID.anon
+ // anonEdit should not override canEdit, but only allow edits if they aren't already allowed
+ setCanEdit(canEdit => canEdit || anonEdit)
+ }, [])
+
+ return [canEdit, setCanEdit, editThreshold]
+}
diff --git a/pages/items/[id]/edit.js b/pages/items/[id]/edit.js
index 67572ca5..707da6fd 100644
--- a/pages/items/[id]/edit.js
+++ b/pages/items/[id]/edit.js
@@ -12,6 +12,7 @@ import { useRouter } from 'next/router'
import PageLoading from '@/components/page-loading'
import { FeeButtonProvider } from '@/components/fee-button'
import SubSelect from '@/components/sub-select'
+import useCanEdit from '@/components/use-can-edit'
export const getServerSideProps = getGetServerSideProps({
query: ITEM,
@@ -26,7 +27,7 @@ export default function PostEdit ({ ssrData }) {
const { item } = data || ssrData
const [sub, setSub] = useState(item.subName)
- const editThreshold = new Date(item?.invoice?.confirmedAt ?? item.createdAt).getTime() + 10 * 60000
+ const [,, editThreshold] = useCanEdit(item)
let FormType = DiscussionForm
let itemType = 'DISCUSSION'