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

fix nested comment sorting

This commit is contained in:
keyan 2023-07-25 19:45:35 -05:00
parent 19835aef5f
commit 8ab018af88
12 changed files with 44 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api/resolvers/item.js
View File

@ -482,9 +482,6 @@ export default {
LIMIT 3`
}, similar)
},
comments: async (parent, { id, sort }, { me, models }) => {
return comments(me, models, id, sort)
},
auctionPosition: async (parent, { id, sub, bid }, { models, me }) => {
const createdAt = id ? (await getItem(parent, { id }, { models, me })).createdAt : new Date()
let where
@ -848,12 +845,11 @@ export default {
}
return await models.user.findUnique({ where: { id: item.fwdUserId } })
},
comments: async (item, args, { me, models }) => {
if (item.comments) {
return item.comments
}
comments: async (item, { sort }, { me, models }) => {
if (item.comments) return item.comments
if (item.ncomments === 0) return []
return comments(me, models, item.id, defaultCommentSort(item.pinId, item.bioId, item.createdAt))
return comments(me, models, item.id, sort || defaultCommentSort(item.pinId, item.bioId, item.createdAt))
},
wvotes: async (item) => {
return item.weightedVotes - item.weightedDownVotes

3
api/typeDefs/item.js
View File

@ -4,7 +4,6 @@ export default gql`
extend type Query {
items(sub: String, sort: String, type: String, cursor: String, name: String, when: String, by: String, limit: Int): Items
item(id: ID!): Item
comments(id: ID!, sort: String): [Item!]!
pageTitleAndUnshorted(url: String!): TitleUnshorted
dupes(url: String!): [Item!]
related(cursor: String, title: String, id: ID, minMatch: String, limit: Int): Items
@ -99,7 +98,7 @@ export default gql`
freebie: Boolean!
paidImgLink: Boolean
ncomments: Int!
comments: [Item!]!
comments(sort: String): [Item!]!
path: String
position: Int
prior: Int

52
components/comments.js
View File

@ -1,20 +1,17 @@
import { gql, useApolloClient, useLazyQuery } from '@apollo/client'
import { useState } from 'react'
import Comment, { CommentSkeleton } from './comment'
import styles from './header.module.css'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import { COMMENTS_QUERY } from '../fragments/items'
import { COMMENTS } from '../fragments/comments'
import { abbrNum } from '../lib/format'
import { defaultCommentSort } from '../lib/item'
import { useRouter } from 'next/router'
export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
const [sort, setSort] = useState(defaultCommentSort(pinned, bio, parentCreatedAt))
const router = useRouter()
const sort = router.query.sort || defaultCommentSort(pinned, bio, parentCreatedAt)
const getHandleClick = sort => {
return () => {
setSort(sort)
handleSort(sort)
}
}
@ -63,47 +60,26 @@ export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, comm
}
export default function Comments ({ parentId, pinned, bio, parentCreatedAt, commentSats, comments, ...props }) {
const client = useApolloClient()
const [loading, setLoading] = useState()
const [getComments] = useLazyQuery(COMMENTS_QUERY, {
fetchPolicy: 'cache-first',
onCompleted: data => {
client.writeFragment({
id: `Item:${parentId}`,
fragment: gql`
${COMMENTS}
fragment Comments on Item {
comments {
...CommentsRecursive
}
}
`,
fragmentName: 'Comments',
data: {
comments: data.comments
}
})
setLoading(false)
}
})
const router = useRouter()
return (
<>
{comments.length
{comments?.length > 0
? <CommentsHeader
commentSats={commentSats} parentCreatedAt={parentCreatedAt}
pinned={pinned} bio={bio} handleSort={sort => {
setLoading(true)
getComments({ variables: { id: parentId, sort } })
const query = router.query
delete query.nodata
router.push({
pathname: router.pathname,
query: { ...router.query, sort }
}, router.asPath, { scroll: false })
}}
/>
: null}
{loading
? <CommentsSkeleton />
: comments.map(item => (
<Comment depth={1} key={item.id} item={item} {...props} />
))}
{comments.map(item => (
<Comment depth={1} key={item.id} item={item} {...props} />
))}
</>
)
}

8
components/item-full.js
View File

@ -178,11 +178,9 @@ export default function ItemFull ({ item, bio, rank, ...props }) {
{item.parentId
? <Comment topLevel item={item} replyOpen includeParent noComments {...props} />
: (
<div className='mt-1'>{
bio
? <BioItem item={item} {...props} />
: <TopLevelItem item={item} {...props} />
}
<div>{bio
? <BioItem item={item} {...props} />
: <TopLevelItem item={item} {...props} />}
</div>)}
{item.comments &&
<div className={styles.comments}>

4
components/top-header.js
View File

@ -19,8 +19,8 @@ export default function TopHeader ({ sub, cat }) {
if (typeof query.by !== 'undefined') {
if (query.by === '' ||
(what === 'stackers' && !USER_SORTS.includes(query.by)) ||
(what !== 'stackers' && !ITEM_SORTS.includes(query.by))) {
(what === 'stackers' && (query.by === 'stacked' || !USER_SORTS.includes(query.by))) ||
(what !== 'stackers' && (query.by === 'votes' || !ITEM_SORTS.includes(query.by)))) {
delete query.by
}
}

49
fragments/comments.js
View File

@ -49,6 +49,7 @@ export const COMMENTS_ITEM_EXT_FIELDS = gql`
}
}`
// we only get the first COMMENT_DEPTH_LIMIT comments
export const COMMENTS = gql`
${COMMENT_FIELDS}
@ -72,54 +73,6 @@ export const COMMENTS = gql`
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

24
fragments/items.js
View File

@ -116,41 +116,21 @@ export const ITEM = gql`
}
}`
export const COMMENTS_QUERY = gql`
${COMMENTS}
query Comments($id: ID!, $sort: String) {
comments(id: $id, sort: $sort) {
...CommentsRecursive
}
}
`
export const ITEM_FULL = gql`
${ITEM_FULL_FIELDS}
${POLL_FIELDS}
${COMMENTS}
query Item($id: ID!) {
query Item($id: ID!, $sort: String) {
item(id: $id) {
...ItemFullFields
prior
...PollFields
comments {
comments(sort: $sort) {
...CommentsRecursive
}
}
}`
export const ITEM_WITH_COMMENTS = gql`
${ITEM_FULL_FIELDS}
${COMMENTS}
fragment ItemWithComments on Item {
...ItemFullFields
comments {
...CommentsRecursive
}
}`
export const RELATED_ITEMS = gql`
${ITEM_FIELDS}
query Related($title: String, $id: ID, $cursor: String, $limit: Int) {

14
fragments/users.js
View File

@ -1,6 +1,6 @@
import { gql } from '@apollo/client'
import { COMMENTS_ITEM_EXT_FIELDS } from './comments'
import { ITEM_FIELDS, ITEM_WITH_COMMENTS } from './items'
import { COMMENTS, COMMENTS_ITEM_EXT_FIELDS } from './comments'
import { ITEM_FIELDS, ITEM_FULL_FIELDS } from './items'
export const ME = gql`
{
@ -174,12 +174,16 @@ export const TOP_COWBOYS = gql`
export const USER_FULL = gql`
${USER_FIELDS}
${ITEM_WITH_COMMENTS}
query User($name: String!) {
${ITEM_FULL_FIELDS}
${COMMENTS}
query User($name: String!, $sort: String) {
user(name: $name) {
...UserFields
bio {
...ItemWithComments
...ItemFullFields
comments(sort: $sort) {
...CommentsRecursive
}
}
}
}`

6
lib/item.js
View File

@ -3,9 +3,9 @@ import { dayPivot } from './time'
export const defaultCommentSort = (pinned, bio, createdAt) => {
// pins sort by recent
if (pinned || bio) return 'recent'
// old items sort by top
if (new Date(createdAt) < dayPivot(new Date(), -OLD_ITEM_DAYS)) return 'top'
if (pinned) return 'recent'
// old items (that aren't bios) sort by top
if (!bio && new Date(createdAt) < dayPivot(new Date(), -OLD_ITEM_DAYS)) return 'top'
// everything else sorts by hot
return 'hot'
}

2
pages/[name]/index.js
View File

@ -97,7 +97,7 @@ export default function User ({ ssrData }) {
const router = useRouter()
const me = useMe()
const { data } = useQuery(USER_FULL, { variables: { name: router.query.name } })
const { data } = useQuery(USER_FULL, { variables: { ...router.query } })
if (!data && !ssrData) return <PageLoading />
const { user } = data || ssrData

4
pages/_app.js
View File

@ -39,6 +39,8 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
// this nodata var will get passed to the server on back/foward and
// 1. prevent data from reloading and 2. perserve scroll
// (2) is not possible while intercepting nav with beforePopState
if (router.query.nodata) return
router.replace({
pathname: router.pathname,
query: { ...router.query, nodata: true }
@ -48,7 +50,7 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
throw e
}
})
}, [router.asPath])
}, [router.pathname, router.query])
/*
If we are on the client, we populate the apollo cache with the

2
pages/items/[id]/index.js
View File

@ -12,7 +12,7 @@ export const getServerSideProps = getGetServerSideProps(ITEM_FULL, null,
export default function Item ({ ssrData }) {
const router = useRouter()
const { data } = useQuery(ITEM_FULL, { variables: { id: router.query.id } })
const { data } = useQuery(ITEM_FULL, { variables: { ...router.query } })
if (!data && !ssrData) return <PageLoading />
const { item } = data || ssrData