fix(Mention): Maintain mention after nym change

Author: brymut

api/resolvers/user.js

@@ -136,6 +136,30 @@ export default {
       if (id) id = Number(id)
       return await models.user.findUnique({ where: { id, name } })
     },
+    userByMention: async (parent, { name, itemId }, { models }) => {
+      let user = await models.user.findUnique({ where: { name } })
+      if (!user && itemId) {
+        const mentions = await models.mention.findMany({
+          where: {
+            itemId: Number(itemId)
+          },
+          include: {
+            user: true,
+            item: true
+          }
+        })
+        const matchingMention = mentions.find(mention => {
+          const text = mention.item?.text || ''
+          const escapedName = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+          const mentionRegex = new RegExp(`\\B@${escapedName}(?![\\w_])`, 'gi')
+          return mentionRegex.test(text)
+        })
+        if (matchingMention) {
+          user = matchingMention.user
+        }
+      }
+      return user
+    },
     users: async (parent, args, { models }) =>
       await models.user.findMany(),
     nameAvailable: async (parent, { name }, { models, me }) => {

api/typeDefs/user.js

@@ -6,6 +6,7 @@ export default gql`
     me: User
     settings: User
     user(id: ID, name: String): User
+    userByMention(name: String!, itemId: ID): User
     users: [User!]
     nameAvailable(name: String!): Boolean!
     topUsers(cursor: String, when: String, from: String, to: String, by: String, limit: Limit! = ${LIMIT}): UsersNullable!

components/text.js

@@ -130,7 +130,7 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
     table: Table,
     p: P,
     code: Code,
-    mention: Mention,
+    mention: (props) => <Mention {...props} itemId={itemId} />,
     sub: Sub,
     item: Item,
     footnote: Footnote,
@@ -147,7 +147,7 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
     },
     img: TextMediaOrLink,
     embed: (props) => <Embed {...props} topLevel={topLevel} />
-  }), [outlawed, rel, TextMediaOrLink, topLevel])
+  }), [outlawed, rel, TextMediaOrLink, topLevel, itemId])
 
   const carousel = useCarousel()
 
@@ -192,15 +192,17 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
   )
 }, isEqual)
 
-function Mention ({ children, node, href, name, id }) {
+function Mention ({ children, node, href, name, id, itemId }) {
   return (
-    <UserPopover name={name}>
-      <Link
-        id={id}
-        href={href}
-      >
-        {children}
-      </Link>
+    <UserPopover name={name} itemId={itemId}>
+      {({ user }) => (
+        <Link
+          id={id}
+          href={user ? `/${user.name}` : href}
+        >
+          {children}
+        </Link>
+      )}
     </UserPopover>
   )
 }

components/user-popover.js

@@ -1,6 +1,6 @@
-import { USER } from '@/fragments/users'
+import { USER, USER_BY_MENTION } from '@/fragments/users'
 import errorStyles from '@/styles/error.module.css'
-import { useLazyQuery } from '@apollo/client'
+import { useLazyQuery, useQuery } from '@apollo/client'
 import classNames from 'classnames'
 import Link from 'next/link'
 import HoverablePopover from './hoverable-popover'
@@ -22,7 +22,16 @@ function StackingSince ({ since }) {
   )
 }
 
-export default function UserPopover ({ name, children }) {
+export default function UserPopover ({ name, itemId, children }) {
+  const { data: mentionData, loading: mentionLoading } = useQuery(
+    USER_BY_MENTION,
+    {
+      variables: { name, itemId },
+      skip: !itemId,
+      fetchPolicy: 'cache-first'
+    }
+  )
+
   const [getUser, { loading, data }] = useLazyQuery(
     USER,
     {
@@ -31,17 +40,25 @@ export default function UserPopover ({ name, children }) {
     }
   )
 
+  const resolvedUser = mentionData?.userByMention
+  const popoverUser = data?.user || resolvedUser
+  const isLoading = loading || (itemId && mentionLoading)
+  const trigger =
+    typeof children === 'function'
+      ? children({ user: resolvedUser })
+      : children
+
   return (
     <HoverablePopover
       onShow={getUser}
-      trigger={children}
-      body={!data || loading
+      trigger={trigger}
+      body={isLoading
         ? <UserSkeleton />
-        : !data.user
+        : !popoverUser
             ? <h1 className={classNames(errorStyles.status, errorStyles.describe)}>USER NOT FOUND</h1>
             : (
-              <UserBase user={data.user} className='mb-0 pb-0'>
-                <StackingSince since={data.user.since} />
+              <UserBase user={popoverUser} className='mb-0 pb-0'>
+                <StackingSince since={popoverUser.since} />
               </UserBase>
               )}
     />

fragments/users.js

@@ -294,6 +294,14 @@ export const USER = gql`
     }
   }`
 
+export const USER_BY_MENTION = gql`
+  ${USER_FIELDS}
+  query UserByMention($name: String!, $itemId: ID) {
+    userByMention(name: $name, itemId: $itemId) {
+      ...UserFields
+    }
+  }`
+
 export const USER_WITH_ITEMS = gql`
   ${USER_FIELDS}
   ${ITEM_FIELDS}