adjust timestamps, fetch OldItem by id, less expensive oldVersions

api/paidAction/itemUpdate.js

@@ -71,6 +71,8 @@ export async function perform (args, context) {
   if (old.createdAt < new Date(Date.now() - 10 * 60 * 1000) && !old.bio && old.subName !== 'jobs' && !data.deletedAt && !adminItem) {
     await tx.oldItem.create({
       data: {
+        createdAt: old.createdAt,
+        updatedAt: old.updatedAt,
         title: old.title,
         text: old.text,
         url: old.url,

api/resolvers/item.js

@@ -632,6 +632,9 @@ export default {
       }
     },
     item: getItem,
+    oldItem: async (parent, { id }, { models }) => {
+      return await models.oldItem.findUnique({ where: { id: Number(id) } })
+    },
     pageTitleAndUnshorted: async (parent, { url }, { models }) => {
       const res = {}
       try {
@@ -1207,6 +1210,14 @@ export default {
     },
     oldVersions: async (item, args, { models }) => {
       return await models.oldItem.findMany({
+        select: {
+          id: true,
+          createdAt: true,
+          updatedAt: true,
+          cloneBornAt: true,
+          cloneDiedAt: true,
+          originalItemId: true
+        },
         where: { originalItemId: item.id },
         orderBy: { cloneDiedAt: 'desc' } // ordering by cloneDiedAt allows us to see the most recent edits first
       })

api/typeDefs/item.js

@@ -11,6 +11,7 @@ export default gql`
     auctionPosition(sub: String, id: ID, boost: Int): Int!
     boostPosition(sub: String, id: ID, boost: Int): BoostPositions!
     itemRepetition(parentId: ID): Int!
+    oldItem(id: ID!): OldItem
   }
 
   type BoostPositions {

components/item-history.js

@@ -3,26 +3,62 @@ import styles from './item.module.css'
 import Text from './text'
 import { Dropdown } from 'react-bootstrap'
 import { useShowModal } from './modal'
+import { EDIT } from '@/fragments/items'
+import { useQuery } from '@apollo/client'
+import PageLoading from './page-loading'
+
+// OldItem: takes a versionId and shows the old item
+export function OldItem ({ versionId }) {
+  const { data } = useQuery(EDIT, { variables: { id: versionId } })
+  if (!data) return <PageLoading />
+
+  const actionType = data?.oldItem?.cloneBornAt ? 'edited' : 'created'
+  const timestamp = data?.oldItem?.cloneBornAt
+    ? data?.oldItem?.cloneDiedAt
+    : data?.oldItem?.createdAt
 
-// OldItem: takes a version and shows the old item
-export function OldItem ({ version }) {
   return (
     <>
       <div className={styles.other}>
-        {!version.cloneBornAt ? 'created' : 'edited'} {timeSince(new Date(version.cloneBornAt || version.createdAt))} ago
+        {actionType} {timeSince(new Date(timestamp))} ago
       </div>
       <div>
-        <h5>{version.title}</h5>
-        <Text itemId={version.originalItemId} topLevel imgproxyUrls={version.imgproxyUrls}>{version.text}</Text>
+        <h5>{data?.oldItem?.title}</h5>
+        <Text
+          itemId={data?.oldItem?.originalItemId}
+          topLevel
+          imgproxyUrls={data?.oldItem?.imgproxyUrls}
+        >
+          {data?.oldItem?.text}
+        </Text>
       </div>
     </>
   )
 }
 
-// History dropdown: takes an item and by mapping over the oldVersions, it will show the history of the item
-export default function HistoryDropdown ({ item }) {
+export const HistoryDropdownItem = ({ version }) => {
   const showModal = useShowModal()
 
+  const actionType = !version.cloneBornAt ? 'created' : 'edited'
+  const timestamp = version.cloneBornAt
+    ? version.cloneDiedAt
+    : version.createdAt
+
+  return (
+    <Dropdown.Item
+      key={version.id}
+      title={version.cloneBornAt || version.createdAt}
+      onClick={() => showModal((onClose) => <OldItem versionId={version.id} />)}
+    >
+      {actionType} {timeSince(new Date(timestamp))} ago
+    </Dropdown.Item>
+  )
+}
+
+// History dropdown: takes an item and maps over the oldVersions
+export default function HistoryDropdown ({ item }) {
+  const mostRecentTimestamp = item.cloneBornAt || item.oldVersions[0].createdAt
+
   return (
     <Dropdown className='pointer' as='span'>
       <Dropdown.Toggle as='span' onPointerDown={e => e.preventDefault()}>
@@ -33,17 +69,11 @@ export default function HistoryDropdown ({ item }) {
           edited {item.oldVersions.length} times
         </Dropdown.Header>
         <hr className='dropdown-divider' />
-        <Dropdown.Item title={item.oldVersions[0].cloneDiedAt}>
-          edited {timeSince(new Date(item.oldVersions[0].cloneDiedAt))} ago (most recent)
+        <Dropdown.Item title={mostRecentTimestamp}>
+          edited {timeSince(new Date(mostRecentTimestamp))} ago (most recent)
         </Dropdown.Item>
         {item.oldVersions.map((version) => (
-          <Dropdown.Item
-            key={version.id}
-            title={version.cloneBornAt || version.createdAt}
-            onClick={() => showModal((onClose) => <OldItem version={version} />)}
-          >
-            {!version.cloneBornAt ? 'created' : 'edited'} {timeSince(new Date(version.cloneBornAt || version.createdAt))} ago
-          </Dropdown.Item>
+          <HistoryDropdownItem key={version.id} version={version} />
         ))}
       </Dropdown.Menu>
     </Dropdown>

fragments/comments.js

@@ -54,15 +54,8 @@ export const COMMENT_FIELDS = gql`
       id
       createdAt
       updatedAt
-      title
-      text
-      url
-      userId
-      subName
-      imgproxyUrls
       cloneBornAt
       cloneDiedAt
-      deletedAt
       originalItemId
     }
     rel

fragments/items.js

@@ -79,15 +79,8 @@ export const ITEM_FIELDS = gql`
       id
       createdAt
       updatedAt
-      title
-      text
-      url
-      userId
-      subName
-      imgproxyUrls
       cloneBornAt
       cloneDiedAt
-      deletedAt
       originalItemId
     }
     rel
@@ -136,6 +129,24 @@ export const ITEM_FULL_FIELDS = gql`
     }
   }`
 
+export const OLDITEM_FIELDS = gql`
+  fragment OldItemFields on OldItem {
+    id
+    createdAt
+    updatedAt
+    title
+    text
+    url
+    userId
+    subName
+    imgproxyUrls
+    cloneBornAt
+    cloneDiedAt
+    deletedAt
+    originalItemId
+  }
+`
+
 export const ITEM_OTS_FIELDS = gql`
   fragment ItemOtsFields on Item {
     id
@@ -226,3 +237,12 @@ export const RELATED_ITEMS_WITH_ITEM = gql`
     }
   }
 `
+
+export const EDIT = gql`
+  ${OLDITEM_FIELDS}
+  query Edit($id: ID!) {
+    oldItem(id: $id) {
+      ...OldItemFields
+    }
+  }
+`