ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix quote reply by removing imperative logic

Browse Source
This commit is contained in:
keyan 2023-11-20 21:37:57 -06:00
parent 2bcf3acda6
commit d211fe93ea
6 changed files with 65 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/comment.js
View File

@ -21,6 +21,7 @@ import ItemInfo from './item-info'
import Badge from 'react-bootstrap/Badge'
import { RootProvider, useRoot } from './root'
import { useMe } from './me'
import { useQuoteReply } from './use-quote-reply'
function Parent ({ item, rootText }) {
const root = useRoot()
@ -108,6 +109,7 @@ export default function Comment ({
const router = useRouter()
const root = useRoot()
const [pendingSats, setPendingSats] = useState(0)
const { ref: textRef, quote, quoteReply, cancelQuote } = useQuoteReply({ text: item.text })
useEffect(() => {
setCollapse(window.localStorage.getItem(`commentCollapse:${item.id}`) || collapse)
@ -136,8 +138,6 @@ export default function Comment ({
? 'fwd'
: null
const bountyPaid = root.bountyPaidTo?.includes(Number(item.id))
const replyRef = useRef()
const contentContainerRef = useRef()
return (
<div
@ -167,7 +167,7 @@ export default function Comment ({
commentTextSingular='reply'
className={`${itemStyles.other} ${styles.other}`}
embellishUser={op && <><span> </span><Badge bg={op === 'fwd' ? 'secondary' : 'boost'} className={`${styles.op} bg-opacity-75`}>{op}</Badge></>}
onQuoteReply={replyRef?.current?.quoteReply}
onQuoteReply={quoteReply}
extraInfo={
<>
{includeParent && <Parent item={item} rootText={rootText} />}
@ -210,7 +210,7 @@ export default function Comment ({
/>
)
: (
<div className={styles.text} ref={contentContainerRef}>
<div className={styles.text} ref={textRef}>
{item.searchText
? <SearchText text={item.searchText} />
: (
@ -227,7 +227,7 @@ export default function Comment ({
: (
<div className={styles.children}>
{!noReply &&
<Reply depth={depth + 1} item={item} replyOpen={replyOpen} ref={replyRef} contentContainerRef={contentContainerRef}>
<Reply depth={depth + 1} item={item} replyOpen={replyOpen} onCancelQuote={cancelQuote} onQuoteReply={quoteReply} quote={quote}>
{root.bounty && !bountyPaid && <PayBounty item={item} />}
</Reply>}
{children}

13
components/form.js
View File

@ -388,7 +388,7 @@ function FormGroup ({ className, label, children }) {
}
function InputInner ({
prepend, append, hint, showValid, onChange, onBlur, overrideValue,
prepend, append, hint, showValid, onChange, onBlur, overrideValue, appendValue,
innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce: debounceTime, maxLength,
...props
}) {
@ -441,6 +441,17 @@ function InputInner ({
}
}, [overrideValue])
useEffect(() => {
if (appendValue) {
const updatedValue = meta.value ? `${meta.value}\n${appendValue}` : appendValue
helpers.setValue(updatedValue)
if (storageKey) {
window.localStorage.setItem(storageKey, updatedValue)
}
innerRef?.current?.focus()
}
}, [appendValue])
const invalid = (!formik || formik.submitCount > 0) && meta.touched && meta.error
useEffect(debounce(() => {

12
components/item-full.js
View File

@ -13,7 +13,7 @@ import Button from 'react-bootstrap/Button'
import { TwitterTweetEmbed } from 'react-twitter-embed'
import YouTube from 'react-youtube'
import useDarkMode from './dark-mode'
import { useEffect, useRef, useState } from 'react'
import { useEffect, useState } from 'react'
import Poll from './poll'
import { commentsViewed } from '../lib/new-comments'
import Related from './related'
@ -25,6 +25,7 @@ import Link from 'next/link'
import { RootProvider } from './root'
import { IMGPROXY_URL_REGEXP } from '../lib/url'
import { numWithUnits } from '../lib/format'
import { useQuoteReply } from './use-quote-reply'
function BioItem ({ item, handleClick }) {
const me = useMe()
@ -122,14 +123,13 @@ function FwdUsers ({ forwards }) {
function TopLevelItem ({ item, noReply, ...props }) {
const ItemComponent = item.isJob ? ItemJob : Item
const replyRef = useRef()
const contentContainerRef = useRef()
const { ref: textRef, quote, quoteReply, cancelQuote } = useQuoteReply({ text: item.text })
return (
<ItemComponent
item={item}
replyRef={replyRef}
full
onQuoteReply={quoteReply}
right={
!noReply &&
<>
@ -140,7 +140,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
belowTitle={item.forwards && item.forwards.length > 0 && <FwdUsers forwards={item.forwards} />}
{...props}
>
<div className={styles.fullItemContainer} ref={contentContainerRef}>
<div className={styles.fullItemContainer} ref={textRef}>
{item.text && <ItemText item={item} />}
{item.url && <ItemEmbed item={item} />}
{item.poll && <Poll item={item} />}
@ -160,7 +160,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
</div>
{!noReply &&
<>
<Reply item={item} replyOpen placeholder={item.ncomments ? undefined : 'start the conversation ...'} ref={replyRef} contentContainerRef={contentContainerRef} />
<Reply item={item} replyOpen placeholder={item.ncomments ? undefined : 'start the conversation ...'} onCancelQuote={cancelQuote} onQuoteReply={quoteReply} quote={quote} />
{!item.position && !item.isJob && !item.parentId && !item.bounty > 0 && <Related title={item.title} itemId={item.id} />}
{item.bounty > 0 && <PastBounties item={item} />}
</>}

4
components/item.js
View File

@ -24,7 +24,7 @@ export function SearchTitle ({ title }) {
})
}
export default function Item ({ item, rank, belowTitle, right, full, children, siblingComments, replyRef }) {
export default function Item ({ item, rank, belowTitle, right, full, children, siblingComments, onQuoteReply }) {
const titleRef = useRef()
const router = useRouter()
const [pendingSats, setPendingSats] = useState(0)
@ -94,7 +94,7 @@ export default function Item ({ item, rank, belowTitle, right, full, children, s
</div>
<ItemInfo
full={full} item={item} pendingSats={pendingSats}
onQuoteReply={replyRef?.current?.quoteReply}
onQuoteReply={onQuoteReply}
nofollow={nofollow}
extraBadges={Number(item?.user?.id) === AD_USER_ID && <Badge className={styles.newComment} bg={null}>AD</Badge>}
/>

77
components/reply.js
View File

@ -3,12 +3,11 @@ import { gql, useMutation } from '@apollo/client'
import styles from './reply.module.css'
import { COMMENTS } from '../fragments/comments'
import { useMe } from './me'
import { forwardRef, useCallback, useEffect, useState, useRef, useImperativeHandle } from 'react'
import { forwardRef, useCallback, useEffect, useState, useRef } from 'react'
import Link from 'next/link'
import { FeeButtonProvider, postCommentBaseLineItems, postCommentUseRemoteLineItems } from './fee-button'
import { commentsViewedAfterComment } from '../lib/new-comments'
import { commentSchema } from '../lib/validate'
import { quote } from '../lib/md'
import { COMMENT_DEPTH_LIMIT } from '../lib/constants'
import { useToast } from './toast'
import { toastDeleteScheduled } from '../lib/form'
@ -30,68 +29,18 @@ export function ReplyOnAnotherPage ({ item }) {
)
}
export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children, placeholder, contentContainerRef }, ref) {
const [reply, setReply] = useState(replyOpen)
export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children, placeholder, onQuoteReply, onCancelQuote, quote }, ref) {
const [reply, setReply] = useState(replyOpen || quote)
const me = useMe()
const parentId = item.id
const replyInput = useRef(null)
const formInnerRef = useRef()
const toaster = useToast()
// Start block to handle iOS Safari's weird selection clearing behavior
const savedRange = useRef()
const savedRangeNode = useRef()
const onTouchEnd = useCallback(() => {
const selection = document.getSelection()
if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).length === 0) {
return
}
const range = selection.getRangeAt(0)
savedRangeNode.current = range.commonAncestorContainer
savedRange.current = range.cloneContents()
}, [])
useEffect(() => {
document.addEventListener('touchend', onTouchEnd)
return () => document.removeEventListener('touchend', onTouchEnd)
}, [])
// End block to handle iOS Safari's weird selection clearing behavior
useImperativeHandle(ref, () => ({
quoteReply: ({ selectionOnly }) => {
if (!reply) {
if (replyOpen || quote || !!window.localStorage.getItem('reply-' + parentId + '-' + 'text')) {
setReply(true)
}
const selection = window.getSelection()
let selectedText = selection.isCollapsed ? undefined : selection.toString()
let isSelectedTextInTarget = contentContainerRef?.current?.contains(selection.anchorNode)
// Start block to handle iOS Safari's weird selection clearing behavior
if (!selectedText && savedRange.current && savedRangeNode.current) {
selectedText = savedRange.current.textContent
isSelectedTextInTarget = contentContainerRef?.current?.contains(savedRangeNode.current)
}
// End block to handle iOS Safari's weird selection clearing behavior
if ((selection.isCollapsed || !isSelectedTextInTarget || !selectedText) && selectionOnly) return
const textToQuote = isSelectedTextInTarget ? selectedText : item.text
let updatedValue
if (formInnerRef.current && formInnerRef.current.values && !formInnerRef.current.values.text) {
updatedValue = quote(textToQuote)
} else if (formInnerRef.current?.values?.text) {
// append quote reply text if the input already has content
updatedValue = `${replyInput.current.value}\n${quote(textToQuote)}`
}
if (updatedValue) {
replyInput.current.value = updatedValue
formInnerRef.current.setValues({ text: updatedValue })
window.localStorage.setItem(`reply-${parentId}-text`, updatedValue)
}
}
}), [reply, item])
useEffect(() => {
setReply(replyOpen || !!window.localStorage.getItem('reply-' + parentId + '-' + 'text'))
}, [])
}, [replyOpen, quote, parentId])
const [upsertComment] = useMutation(
gql`
@ -160,12 +109,17 @@ export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children
: (
<div className={styles.replyButtons}>
<div
className='pe-3' onPointerDown={e => {
if (!reply) {
className='pe-3'
onPointerDown={e => {
if (reply) {
window.localStorage.removeItem('reply-' + parentId + '-' + 'text')
setReply(false)
onCancelQuote?.()
} else {
e.preventDefault()
ref?.current?.quoteReply({ selectionOnly: true })
onQuoteReply({ selectionOnly: true })
setReply(true)
}
setReply(!reply)
}}
>
{reply ? 'cancel' : 'reply'}
@ -187,15 +141,14 @@ export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children
invoiceable
onSubmit={onSubmit}
storageKeyPrefix={`reply-${parentId}`}
innerRef={formInnerRef}
>
<MarkdownInput
name='text'
minRows={6}
autoFocus={!replyOpen}
required
appendValue={quote}
placeholder={placeholder}
innerRef={replyInput}
/>
<ItemButtonBar createText='reply' hasCancel={false} />
</Form>

24
components/use-quote-reply.js Normal file
View File

@ -0,0 +1,24 @@
import { useCallback, useRef, useState } from 'react'
import { quote as quoteMd } from '../lib/md'
export function useQuoteReply ({ text }) {
const ref = useRef(null)
const [quote, setQuote] = useState(null)
const quoteReply = useCallback(({ selectionOnly }) => {
const selection = window.getSelection()
const selectedText = selection.isCollapsed ? undefined : selection.toString()
const isSelectedTextInTarget = ref?.current?.contains(selection.anchorNode)
if ((selection.isCollapsed || !isSelectedTextInTarget || !selectedText) && selectionOnly) return
const textToQuote = isSelectedTextInTarget ? selectedText : text
setQuote(quoteMd(textToQuote))
}, [ref?.current, text])
const cancelQuote = useCallback(() => {
setQuote(null)
}, [])
return { ref, quote, quoteReply, cancelQuote }
}