feat: infinite scroll history tab #125
Conversation
samsiegart
force-pushed
the
infinite-scroll-history
branch
from
9bc586f
to
52ca2ab
Compare
Deploying dapp-econ-gov with
|
| Latest commit: |
4b97341
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d2e9b8b5.dapp-econ-gov.pages.dev |
| Branch Preview URL: | https://infinite-scroll-history.dapp-econ-gov.pages.dev |
|
Cloudflare deployment logs are available here |
| @@ -77,5 +77,6 @@ | |||
| "vite": "^3.2.7", | |||
| "vite-tsconfig-paths": "^3.5.1", | |||
| "vitest": "^0.25.3" | |||
| } | |||
| }, | |||
| "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" | |||
There was a problem hiding this comment.
sha seems excessive. how was this added?
There was a problem hiding this comment.
I think corepack just added it when I did yarn install. Should I just remove this diff from the PR?
There was a problem hiding this comment.
good to leave if that's how it works now
| /> | ||
| </motion.div> | ||
| )); | ||
| const receivedItems = |
There was a problem hiding this comment.
let's try to avoid nested ternaries. (surprised we don't have a lint rule)
would this work?
const receivedItems = dataLoaded ?
instanceStatus === 'received' && questionsWithAnswers.map(
)
: (
<div className="italic text-center mt-16">No questions yet.</div>
);
There was a problem hiding this comment.
Not quite as suggested but just changed it to not use a nested ternary. FWIW I'm not super against nested ternaries personally, I think they can be convenient when writing jsx
src/components/HistoryPanel.tsx
Outdated
| outcome={ | ||
| aData?.question === qData.questionHandle ? aData : undefined | ||
| } |
There was a problem hiding this comment.
these come from the same tuple so why wouldn't they match? If you're just handling no outcome, can QuestionDetails be responsible for that?
| outcome={ | |
| aData?.question === qData.questionHandle ? aData : undefined | |
| } | |
| outcome={aData} |
There was a problem hiding this comment.
Oh yea good catch. This wasn't part of my change but just reduced this down to outcome={aData}
src/components/HistoryPanel.tsx
Outdated
| } | ||
| const loader = ( | ||
| <div ref={loaderRef}> | ||
| {!dataLoaded && ( |
| if (paginationSize && curPageSize >= paginationSize) { | ||
| setData(items); | ||
| await fetchNextP; | ||
| fetchNextP = new Promise<void>(res => |
There was a problem hiding this comment.
this is a little hard for me to follow. res resolves when the effect triggered by setFetchNextPage completes?
Could it work with a counter of pages fetched? That might be a clearer state to trigger
There was a problem hiding this comment.
I tried doing something more iterative with iterable[Symbol.asyncIterator]() but it was more messy and I gave up working through bugs. Just added some comments even though this is a little tricky with the promises.
samsiegart
force-pushed
the
infinite-scroll-history
branch
from
52ca2ab
to
4b97341
Compare
| @@ -77,5 +77,6 @@ | |||
| "vite": "^3.2.7", | |||
| "vite-tsconfig-paths": "^3.5.1", | |||
| "vitest": "^0.25.3" | |||
| } | |||
| }, | |||
| "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" | |||
There was a problem hiding this comment.
I think corepack just added it when I did yarn install. Should I just remove this diff from the PR?
| /> | ||
| </motion.div> | ||
| )); | ||
| const receivedItems = |
There was a problem hiding this comment.
Not quite as suggested but just changed it to not use a nested ternary. FWIW I'm not super against nested ternaries personally, I think they can be convenient when writing jsx
src/components/HistoryPanel.tsx
Outdated
| outcome={ | ||
| aData?.question === qData.questionHandle ? aData : undefined | ||
| } |
There was a problem hiding this comment.
Oh yea good catch. This wasn't part of my change but just reduced this down to outcome={aData}
src/components/HistoryPanel.tsx
Outdated
| } | ||
| const loader = ( | ||
| <div ref={loaderRef}> | ||
| {!dataLoaded && ( |
| if (paginationSize && curPageSize >= paginationSize) { | ||
| setData(items); | ||
| await fetchNextP; | ||
| fetchNextP = new Promise<void>(res => |
There was a problem hiding this comment.
I tried doing something more iterative with iterable[Symbol.asyncIterator]() but it was more messy and I gave up working through bugs. Just added some comments even though this is a little tricky with the promises.
fixes #124
demo https://infinite-scroll-history.dapp-econ-gov.pages.dev/