df2ccd9840
* live comments: stable navigator for new outlined comments * navigator keyboard shortcuts: arrow right/escape key * enhance: responsive fixed positioning; cleanup enhance: - two types of padding for desktop and mobile via CSS cleanup: - use appropriate <aside> for navigator - reorder CSS * Comments Navigator Context, new comments dot UI, refs autosorting, auto-untrack children - Navigator Context for item pages UI/UX - WIP: compact comments dot UI on navbars - long press to clear tracked refs - auto-untrack node's children on scroll Logic - auto-sort comment refs via createdAt - remove outline on untrack if called by scroll * stable navigator dot UI positioning * cleanup: better naming, clear structure * CSS visibility tweaks * scroll to start position of ref * fix undefined navigator on other comment calls * remove pulse animation
36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
import Layout from '@/components/layout'
|
|
import { ITEM_FULL } from '@/fragments/items'
|
|
import ItemFull from '@/components/item-full'
|
|
import { getGetServerSideProps } from '@/api/ssrApollo'
|
|
import { useQuery } from '@apollo/client'
|
|
import { useRouter } from 'next/router'
|
|
import PageLoading from '@/components/page-loading'
|
|
import { CommentsNavigatorProvider } from '@/components/use-comments-navigator'
|
|
|
|
export const getServerSideProps = getGetServerSideProps({
|
|
query: ITEM_FULL,
|
|
notFound: data => !data.item || (data.item.status === 'STOPPED' && !data.item.mine)
|
|
})
|
|
|
|
export default function Item ({ ssrData }) {
|
|
const router = useRouter()
|
|
|
|
const { data, fetchMore } = useQuery(ITEM_FULL, { variables: { ...router.query } })
|
|
if (!data && !ssrData) return <PageLoading />
|
|
|
|
const { item } = data || ssrData
|
|
const sub = item.subName || item.root?.subName
|
|
|
|
const fetchMoreComments = async () => {
|
|
await fetchMore({ variables: { ...router.query, cursor: item.comments.cursor } })
|
|
}
|
|
|
|
return (
|
|
<CommentsNavigatorProvider>
|
|
<Layout sub={sub} item={item}>
|
|
<ItemFull item={item} fetchMoreComments={fetchMoreComments} />
|
|
</Layout>
|
|
</CommentsNavigatorProvider>
|
|
)
|
|
}
|