Bring up a list of contracts with @

web/components/editor/mention-list.tsx

@@ -1,24 +1,26 @@
 import { SuggestionProps } from '@tiptap/suggestion'
 import clsx from 'clsx'
-import { User } from 'common/user'
+import { Contract } from 'common/contract'
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { contractPath } from 'web/lib/firebase/contracts'
 import { Avatar } from '../avatar'
 
 // copied from https://tiptap.dev/api/nodes/mention#usage
-export const MentionList = forwardRef((props: SuggestionProps<User>, ref) => {
-  const { items: users, command } = props
+const M = forwardRef((props: SuggestionProps<Contract>, ref) => {
+  const { items: contracts, command } = props
 
   const [selectedIndex, setSelectedIndex] = useState(0)
-  useEffect(() => setSelectedIndex(0), [users])
+  useEffect(() => setSelectedIndex(0), [contracts])
 
   const submitUser = (index: number) => {
-    const user = users[index]
-    if (user) command({ id: user.id, label: user.username } as any)
+    const contract = contracts[index]
+    if (contract)
+      command({ id: contract.id, label: contractPath(contract) } as any)
   }
 
   const onUp = () =>
-    setSelectedIndex((i) => (i + users.length - 1) % users.length)
-  const onDown = () => setSelectedIndex((i) => (i + 1) % users.length)
+    setSelectedIndex((i) => (i + contracts.length - 1) % contracts.length)
+  const onDown = () => setSelectedIndex((i) => (i + 1) % contracts.length)
   const onEnter = () => submitUser(selectedIndex)
 
   useImperativeHandle(ref, () => ({
@@ -41,23 +43,26 @@ export const MentionList = forwardRef((props: SuggestionProps<User>, ref) => {
 
   return (
     <div className="w-42 absolute z-10 overflow-x-hidden rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-      {!users.length ? (
+      {!contracts.length ? (
         <span className="m-1 whitespace-nowrap">No results...</span>
       ) : (
-        users.map((user, i) => (
+        contracts.map((contract, i) => (
           <button
             className={clsx(
-              'flex h-8 w-full cursor-pointer select-none items-center gap-2 truncate px-4',
+              'flex h-8 w-full cursor-pointer select-none items-center gap-2 truncate px-4 hover:bg-indigo-200',
               selectedIndex === i ? 'bg-indigo-500 text-white' : 'text-gray-900'
             )}
             onClick={() => submitUser(i)}
-            key={user.id}
+            key={contract.id}
           >
-            <Avatar avatarUrl={user.avatarUrl} size="xs" />
-            {user.username}
+            <Avatar avatarUrl={contract.creatorAvatarUrl} size="xs" />
+            {contract.question}
           </button>
         ))
       )}
     </div>
   )
 })
+
+// Just to keep the formatting pretty
+export { M as MentionList }

web/components/editor/mention-suggestion.ts

@@ -3,7 +3,8 @@ import { ReactRenderer } from '@tiptap/react'
 import { searchInAny } from 'common/util/parse'
 import { orderBy } from 'lodash'
 import tippy from 'tippy.js'
-import { getCachedUsers } from 'web/hooks/use-users'
+import { getCachedContracts } from 'web/hooks/use-contracts'
+// import { getCachedUsers } from 'web/hooks/use-users'
 import { MentionList } from './mention-list'
 
 type Suggestion = MentionOptions['suggestion']
@@ -15,13 +16,10 @@ const beginsWith = (text: string, query: string) =>
 export const mentionSuggestion: Suggestion = {
   items: async ({ query }) =>
     orderBy(
-      (await getCachedUsers()).filter((u) =>
-        searchInAny(query, u.username, u.name)
+      (await getCachedContracts()).filter((c) =>
+        searchInAny(query, c.question)
       ),
-      [
-        (u) => [u.name, u.username].some((s) => beginsWith(s, query)),
-        'followerCountCached',
-      ],
+      [(c) => [c.question].some((s) => beginsWith(s, query))],
       ['desc', 'desc']
     ).slice(0, 5),
   render: () => {

web/components/editor/mention.tsx

@@ -5,14 +5,18 @@ import {
   ReactNodeViewRenderer,
 } from '@tiptap/react'
 import clsx from 'clsx'
-import { Linkify } from '../linkify'
+import { useContract } from 'web/hooks/use-contract'
+import { ContractCard } from '../contract/contract-card'
 
 const name = 'mention-component'
 
 const MentionComponent = (props: any) => {
+  const contract = useContract(props.node.attrs.id)
+
   return (
     <NodeViewWrapper className={clsx(name, 'not-prose text-indigo-700')}>
-      <Linkify text={'@' + props.node.attrs.label} />
+      {/* <Linkify text={'@' + props.node.attrs.label} /> */}
+      {contract && <ContractCard contract={contract} />}
     </NodeViewWrapper>
   )
 }

web/hooks/use-contracts.ts

@@ -11,8 +11,9 @@ import {
   listenForNewContracts,
   getUserBetContracts,
   getUserBetContractsQuery,
+  listAllContracts,
 } from 'web/lib/firebase/contracts'
-import { useQueryClient } from 'react-query'
+import { QueryClient, useQueryClient } from 'react-query'
 import { MINUTE_MS } from 'common/util/time'
 
 export const useContracts = () => {
@@ -25,6 +26,12 @@ export const useContracts = () => {
   return contracts
 }
 
+const q = new QueryClient()
+export const getCachedContracts = async () =>
+  q.fetchQuery(['contracts'], () => listAllContracts(1000), {
+    staleTime: Infinity,
+  })
+
 export const useActiveContracts = () => {
   const [activeContracts, setActiveContracts] = useState<
     Contract[] | undefined