Merge branch 'master' into autocomplete-ln-addr

components/adv-post-form.js

@@ -7,6 +7,7 @@ import Info from './info'
 import { numWithUnits } from '../lib/format'
 import styles from './adv-post-form.module.css'
 import { useMe } from './me'
+import { useRouter } from 'next/router'
 
 const EMPTY_FORWARD = { nym: '', pct: '' }
 
@@ -19,6 +20,7 @@ export function AdvPostInitial ({ forward, boost }) {
 
 export default function AdvPostForm () {
   const me = useMe()
+  const router = useRouter()
 
   return (
     <AccordianItem
@@ -81,7 +83,7 @@ export default function AdvPostForm () {
               )
             }}
           </VariableInput>
-          {me &&
+          {me && router.query.type === 'discussion' &&
             <Checkbox
               label={
                 <div className='d-flex align-items-center'>crosspost to nostr

components/form.js

@@ -91,6 +91,7 @@ export function InputSkeleton ({ label, hint }) {
   )
 }
 
+const DEFAULT_MENTION_INDICES = { start: -1, end: -1 }
 export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, onKeyDown, innerRef, ...props }) {
   const [tab, setTab] = useState('write')
   const [, meta, helpers] = useField(props)
@@ -122,7 +123,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
   }, [innerRef, selectionRange.start, selectionRange.end])
 
   const [mentionQuery, setMentionQuery] = useState()
-  const [mentionIndices, setMentionIndices] = useState({ start: -1, end: -1 })
+  const [mentionIndices, setMentionIndices] = useState(DEFAULT_MENTION_INDICES)
   const [userSuggestDropdownStyle, setUserSuggestDropdownStyle] = useState({})
   const insertMention = useCallback((name) => {
     const { start, end } = mentionIndices
@@ -133,33 +134,9 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
     helpers.setValue(updatedValue)
     setSelectionRange({ start: first.length, end: first.length })
     innerRef.current.focus()
-  }, [mentionIndices, innerRef, helpers])
+  }, [mentionIndices, innerRef, helpers?.setValue])
 
-  return (
+  const onChangeInner = useCallback((formik, e) => {
-    <FormGroup label={label} className={groupClassName}>
-      <div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
-        <Nav variant='tabs' defaultActiveKey='write' activeKey={tab} onSelect={tab => setTab(tab)}>
-          <Nav.Item>
-            <Nav.Link eventKey='write'>write</Nav.Link>
-          </Nav.Item>
-          <Nav.Item>
-            <Nav.Link eventKey='preview' disabled={!meta.value}>preview</Nav.Link>
-          </Nav.Item>
-          <a
-            className='ms-auto text-muted d-flex align-items-center'
-            href='https://guides.github.com/features/mastering-markdown/' target='_blank' rel='noreferrer'
-          >
-            <Markdown width={18} height={18} />
-          </a>
-        </Nav>
-        <div className={`position-relative ${tab === 'write' ? '' : 'd-none'}`}>
-          <UserSuggest
-            query={mentionQuery}
-            onSelect={insertMention}
-            dropdownStyle={userSuggestDropdownStyle}
-          >{({ onKeyDown: userSuggestOnKeyDown, resetSuggestions }) => (
-            <InputInner
-              {...props} onChange={(formik, e) => {
     if (onChange) onChange(formik, e)
     if (setHasImgLink) {
       setHasImgLink(mdHas(e.target.value, ['link', 'image']))
@@ -186,20 +163,20 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
     if (/^@[\w_]*$/.test(currentSegment)) {
       setMentionQuery(currentSegment)
       setMentionIndices({ start: priorSpace + 1, end: nextSpace })
-                } else {
-                  setMentionQuery(undefined)
-                  setMentionIndices({ start: -1, end: -1 })
-                }
-
       const { top, left } = textAreaCaret(e.target, e.target.selectionStart)
       setUserSuggestDropdownStyle({
         position: 'absolute',
         top: `${top + Number(window.getComputedStyle(e.target).lineHeight.replace('px', ''))}px`,
         left: `${left}px`
       })
-              }}
+    } else {
-              innerRef={innerRef}
+      setMentionQuery(undefined)
-              onKeyDown={(e) => {
+      setMentionIndices(DEFAULT_MENTION_INDICES)
+    }
+  }, [onChange, setHasImgLink, setMentionQuery, setMentionIndices, setUserSuggestDropdownStyle])
+
+  const onKeyDownInner = useCallback((userSuggestOnKeyDown) => {
+    return (e) => {
       const metaOrCtrl = e.metaKey || e.ctrlKey
       if (metaOrCtrl) {
         if (e.key === 'k') {
@@ -228,7 +205,37 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
       }
 
       if (onKeyDown) onKeyDown(e)
-              }}
+    }
+  }, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown])
+
+  return (
+    <FormGroup label={label} className={groupClassName}>
+      <div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
+        <Nav variant='tabs' defaultActiveKey='write' activeKey={tab} onSelect={tab => setTab(tab)}>
+          <Nav.Item>
+            <Nav.Link eventKey='write'>write</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link eventKey='preview' disabled={!meta.value}>preview</Nav.Link>
+          </Nav.Item>
+          <a
+            className='ms-auto text-muted d-flex align-items-center'
+            href='https://guides.github.com/features/mastering-markdown/' target='_blank' rel='noreferrer'
+          >
+            <Markdown width={18} height={18} />
+          </a>
+        </Nav>
+        <div className={`position-relative ${tab === 'write' ? '' : 'd-none'}`}>
+          <UserSuggest
+            query={mentionQuery}
+            onSelect={insertMention}
+            dropdownStyle={userSuggestDropdownStyle}
+          >{({ onKeyDown: userSuggestOnKeyDown, resetSuggestions }) => (
+            <InputInner
+              innerRef={innerRef}
+              {...props}
+              onChange={onChangeInner}
+              onKeyDown={onKeyDownInner(userSuggestOnKeyDown)}
               onBlur={resetSuggestions}
             />)}
           </UserSuggest>
@@ -301,6 +308,32 @@ function InputInner ({
 
   const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined
 
+  const onKeyDownInner = useCallback((e) => {
+    const metaOrCtrl = e.metaKey || e.ctrlKey
+    if (metaOrCtrl) {
+      if (e.key === 'Enter') formik?.submitForm()
+    }
+
+    if (onKeyDown) onKeyDown(e)
+  }, [formik?.submitForm, onKeyDown])
+
+  const onChangeInner = useCallback((e) => {
+    field?.onChange(e)
+
+    if (storageKey) {
+      window.localStorage.setItem(storageKey, e.target.value)
+    }
+
+    if (onChange) {
+      onChange(formik, e)
+    }
+  }, [field?.onChange, storageKey, onChange])
+
+  const onBlurInner = useCallback((e) => {
+    field?.onBlur?.(e)
+    onBlur && onBlur(e)
+  }, [field?.onBlur, onBlur])
+
   useEffect(() => {
     if (overrideValue) {
       helpers.setValue(overrideValue)
@@ -332,31 +365,12 @@ function InputInner ({
       <InputGroup hasValidation className={inputGroupClassName}>
         {prepend}
         <BootstrapForm.Control
-          onKeyDown={(e) => {
-            const metaOrCtrl = e.metaKey || e.ctrlKey
-            if (metaOrCtrl) {
-              if (e.key === 'Enter') formik?.submitForm()
-            }
-
-            if (onKeyDown) onKeyDown(e)
-          }}
           ref={innerRef}
-          {...field} {...props}
+          {...field}
-          onChange={(e) => {
+          {...props}
-            field.onChange(e)
+          onKeyDown={onKeyDownInner}
-
+          onChange={onChangeInner}
-            if (storageKey) {
+          onBlur={onBlurInner}
-              window.localStorage.setItem(storageKey, e.target.value)
-            }
-
-            if (onChange) {
-              onChange(formik, e)
-            }
-          }}
-          onBlur={(e) => {
-            field.onBlur?.(e)
-            onBlur && onBlur(e)
-          }}
           isInvalid={invalid}
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
@@ -394,6 +408,7 @@ function InputInner ({
   )
 }
 
+const INITIAL_SUGGESTIONS = { array: [], index: 0 }
 export function UserSuggest ({
   query, onSelect, dropdownStyle, children,
   transformUser = user => user, selectWithTab = true, filterUsers = () => true
@@ -419,7 +434,6 @@ export function UserSuggest ({
     }
   })
 
-  const INITIAL_SUGGESTIONS = { array: [], index: 0 }
   const [suggestions, setSuggestions] = useState(INITIAL_SUGGESTIONS)
   const resetSuggestions = useCallback(() => setSuggestions(INITIAL_SUGGESTIONS), [])
 
@@ -623,7 +637,7 @@ export function Form ({
     }
   }, [])
 
-  function clearLocalStorage (values) {
+  const clearLocalStorage = useCallback((values) => {
     Object.keys(values).forEach(v => {
       window.localStorage.removeItem(storageKeyPrefix + '-' + v)
       if (Array.isArray(values[v])) {
@@ -636,7 +650,7 @@ export function Form ({
           })
       }
     })
-  }
+  }, [storageKeyPrefix])
 
   // if `invoiceable` is set,
   // support for payment per invoice if they are lurking or don't have enough balance
@@ -648,14 +662,7 @@ export function Form ({
     onSubmit = useInvoiceable(onSubmit, { callback: clearLocalStorage, ...options })
   }
 
-  return (
+  const onSubmitInner = useCallback(async (values, ...args) => {
-    <Formik
-      initialValues={initial}
-      validateOnChange={validateOnChange}
-      validationSchema={schema}
-      initialTouched={validateImmediately && initial}
-      validateOnBlur={false}
-      onSubmit={async (values, ...args) => {
     try {
       if (onSubmit) {
         const options = await onSubmit(values, ...args)
@@ -666,7 +673,16 @@ export function Form ({
       console.log(err)
       toaster.danger(err.message || err.toString?.())
     }
-      }}
+  }, [onSubmit, toaster, clearLocalStorage, storageKeyPrefix])
+
+  return (
+    <Formik
+      initialValues={initial}
+      validateOnChange={validateOnChange}
+      validationSchema={schema}
+      initialTouched={validateImmediately && initial}
+      validateOnBlur={false}
+      onSubmit={onSubmitInner}
       innerRef={innerRef}
     >
       <FormikForm {...props} noValidate>

components/use-crossposter.js

@@ -6,7 +6,6 @@ import { useQuery } from '@apollo/client'
 import { SETTINGS } from '../fragments/users'
 
 async function discussionToEvent (item) {
-  const pubkey = await window.nostr.getPublicKey()
   const createdAt = Math.floor(Date.now() / 1000)
 
   return {
@@ -14,8 +13,7 @@ async function discussionToEvent (item) {
     kind: 30023,
     content: item.text,
     tags: [
-      ['d', `https://stacker.news/items/${item.id}`],
+      ['d', item.id.toString()],
-      ['a', `30023:${pubkey}:https://stacker.news/items/${item.id}`, 'wss://relay.nostr.band'],
       ['title', item.title],
       ['published_at', createdAt.toString()]
     ]

prisma/seed.js

@@ -1,5 +1,27 @@
 const { PrismaClient } = require('@prisma/client')
 const prisma = new PrismaClient()
+
+function selectRandomly (items) {
+  return items[Math.floor(Math.random() * items.length)]
+}
+
+async function addComments (parentIds, nComments, userIds, commentText) {
+  const clonedParentIds = [...parentIds]
+  const clonedUserIds = [...userIds]
+  for (let i = 0; i < nComments; i++) {
+    const selectedParent = selectRandomly(clonedParentIds)
+    const selectedUserId = selectRandomly(clonedUserIds)
+    const newComment = await prisma.item.create({
+      data: {
+        parentId: selectedParent,
+        userId: selectedUserId,
+        text: commentText
+      }
+    })
+    clonedParentIds.push(newComment.id)
+  }
+}
+
 async function main () {
   const k00b = await prisma.user.upsert({
     where: { name: 'k00b' },
@@ -155,6 +177,17 @@ async function main () {
       }
     }
   })
+
+  const bigCommentPost = await prisma.item.create({
+    data: {
+      title: 'a discussion post with a lot of comments',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+      userId: k00b.id,
+      subName: 'bitcoin'
+    }
+  })
+
+  addComments([bigCommentPost.id], 200, [k00b.id, anon.id, satoshi.id, greg.id, stan.id], 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
 }
 main()
   .catch(e => {