Skip to content

Commit

Permalink
feat: scroll-restore at all page (#149)
Browse files Browse the repository at this point in the history
* feat: scroll-restore at all page

* test: update e2e test

* test: update e2e test with wait alias

* test: wait for 2sec

* test: change get to find

* test: cypress version update and logic changed

* test: append reload

* test: wait twice

* test: delete wait

* test: disable test
  • Loading branch information
hyesungoh authored Nov 12, 2023
1 parent 3bad461 commit 98bd0e2
Show file tree
Hide file tree
Showing 8 changed files with 75 additions and 59 deletions.
28 changes: 15 additions & 13 deletions apps/blog/cypress/e2e/root/scroll-restoration.spec.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
describe('root - store restoration', { testIsolation: false }, () => {
it('should restore scroll position when reload', () => {
const SCROLL_Y_POSITION = 30;
// NOTE: https://github.com/cypress-io/cypress/issues/14857

cy.visit('/');
cy.wait(1000);
cy.window().then($window => {
$window.scrollTo(0, SCROLL_Y_POSITION);
});
// describe('root - store restoration', { testIsolation: false }, () => {
// it('should restore scroll position when go back', () => {
// const SCROLL_Y_POSITION = 30;

cy.reload();
cy.wait(2000);
// cy.visit('/');
// cy.window().then($window => {
// $window.scrollTo(0, SCROLL_Y_POSITION);
// });

cy.window().its('scrollY').should('not.eq', 0);
});
});
// cy.get('main').find('a').first().click();

// cy.go('back', { timeout: 10000 });

// cy.window().its('scrollY').should('not.eq', 0);
// });
// });
2 changes: 1 addition & 1 deletion apps/blog/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
},
"devDependencies": {
"config": "*",
"cypress": "^12.8.1",
"cypress": "^13.5.0",
"tsconfig": "*"
}
}
6 changes: 2 additions & 4 deletions apps/blog/src/hooks/useScrollRestoration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,16 @@ function useScrollRestoration() {
useEffect(() => {
if ('scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual';
restoreScrollPos(router.asPath);

const onBeforeUnload = event => {
const onBeforeUnload = () => {
saveScrollPos(router.asPath);
delete event['returnValue'];
};

const onRouteChangeStart = () => {
saveScrollPos(router.asPath);
};

const onRouteChangeComplete = url => {
const onRouteChangeComplete = (url: string) => {
if (shouldScrollRestore) {
shouldScrollRestore = false;
restoreScrollPos(url);
Expand Down
3 changes: 3 additions & 0 deletions apps/blog/src/pages/_app.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { NextUIProvider } from '@nextui-org/react';
import { darkTheme, lightTheme } from 'core';
import { KBarProvider, useRegisterActions } from 'kbar';

import useScrollRestoration from '../hooks/useScrollRestoration';
import generateKbarAction from '../libs/kbarActions';

const KbarComponent = dynamic(() => import('core/components/Kbar'), {
Expand All @@ -16,6 +17,8 @@ export default function BlogApp({ Component, pageProps }: AppProps) {
const router = useRouter();
const kbarActions = generateKbarAction(router);

useScrollRestoration();

return (
<NextThemesProvider
defaultTheme="system"
Expand Down
2 changes: 0 additions & 2 deletions apps/blog/src/pages/category/[category].page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { MainHeader } from '../../components/Header';
import PostCard from '../../components/PostCard';
import SEO from '../../components/SEO';
import useInfiniteScroll from '../../hooks/useInfiniteScroll';
import useScrollRestoration from '../../hooks/useScrollRestoration';
import { getAllCategories, getAllPostsByCategory } from '../../libs/api';

interface Props {
Expand All @@ -16,7 +15,6 @@ interface Props {

function EachCategory({ category, allPosts }: Props) {
const { theme } = useTheme();
useScrollRestoration();

const { setTarget, elements: posts, isEnded } = useInfiniteScroll<PostType>({ offset: 12, fullElements: allPosts });

Expand Down
2 changes: 0 additions & 2 deletions apps/blog/src/pages/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { MainHeader } from '../components/Header';
import PostCard from '../components/PostCard';
import SEO from '../components/SEO';
import useInfiniteScroll from '../hooks/useInfiniteScroll';
import useScrollRestoration from '../hooks/useScrollRestoration';
import { getAllPosts } from '../libs/api';

interface Props {
Expand All @@ -14,7 +13,6 @@ interface Props {

function Blog({ allPosts }: Props) {
const { theme } = useTheme();
useScrollRestoration();

const {
setTarget,
Expand Down
2 changes: 1 addition & 1 deletion apps/resume/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
},
"devDependencies": {
"config": "*",
"cypress": "^12.8.1",
"cypress": "^13.5.0",
"tsconfig": "*"
}
}
89 changes: 53 additions & 36 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -728,10 +728,10 @@
dependencies:
"@jridgewell/trace-mapping" "0.3.9"

"@cypress/request@^2.88.10":
version "2.88.10"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
integrity sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==
"@cypress/request@^3.0.0":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
dependencies:
aws-sign2 "~0.7.0"
aws4 "^1.8.0"
Expand All @@ -746,9 +746,9 @@
json-stringify-safe "~5.0.1"
mime-types "~2.1.19"
performance-now "^2.1.0"
qs "~6.5.2"
qs "6.10.4"
safe-buffer "^5.1.2"
tough-cookie "~2.5.0"
tough-cookie "^4.1.3"
tunnel-agent "^0.6.0"
uuid "^8.3.2"

Expand Down Expand Up @@ -2583,11 +2583,6 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.42.tgz#d7e8f22700efc94d125103075c074396b5f41f9b"
integrity sha512-Q5BPGyGKcvQgAMbsr7qEGN/kIPN6zZecYYABeTDBizOsau+2NMdSVTar9UQw21A2+JyA2KRNDYaYrPB0Rpk2oQ==

"@types/node@^14.14.31":
version "14.18.21"
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.21.tgz#0155ee46f6be28b2ff0342ca1a9b9fd4468bef41"
integrity sha512-x5W9s+8P4XteaxT/jKF0PSb7XEvo5VmqEWgsMlyeY4ZlLK8I6aH6g5TPPyDlLAep+GYf4kefb7HFyc7PAO3m+Q==

"@types/node@^18.15.11":
version "18.15.11"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
Expand All @@ -2598,6 +2593,13 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==

"@types/node@^18.17.5":
version "18.18.9"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.9.tgz#5527ea1832db3bba8eb8023ce8497b7d3f299592"
integrity sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==
dependencies:
undici-types "~5.26.4"

"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
Expand Down Expand Up @@ -3788,10 +3790,10 @@ commander@^10.0.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.0.tgz#71797971162cd3cf65f0b9d24eb28f8d303acdf1"
integrity sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==

commander@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
commander@^6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==

common-tags@^1.8.0:
version "1.8.2"
Expand Down Expand Up @@ -3950,14 +3952,14 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==

cypress@^12.8.1:
version "12.8.1"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.8.1.tgz#0c6e67f34554d553138697aaf349b637d80004eb"
integrity sha512-lIFbKdaSYAOarNLHNFa2aPZu6YSF+8UY4VRXMxJrFUnk6RvfG0AWsZ7/qle/aIz30TNUD4aOihz2ZgS4vuQVSA==
cypress@^13.5.0:
version "13.5.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.5.0.tgz#8c149074186130972f08b2cdce6ded41f014bacd"
integrity sha512-oh6U7h9w8wwHfzNDJQ6wVcAeXu31DlIYlNOBvfd6U4CcB8oe4akawQmH+QJVOMZlM42eBoCne015+svVqdwdRQ==
dependencies:
"@cypress/request" "^2.88.10"
"@cypress/request" "^3.0.0"
"@cypress/xvfb" "^1.2.4"
"@types/node" "^14.14.31"
"@types/node" "^18.17.5"
"@types/sinonjs__fake-timers" "8.1.1"
"@types/sizzle" "^2.3.2"
arch "^2.2.0"
Expand All @@ -3969,7 +3971,7 @@ cypress@^12.8.1:
check-more-types "^2.24.0"
cli-cursor "^3.1.0"
cli-table3 "~0.6.1"
commander "^5.1.0"
commander "^6.2.1"
common-tags "^1.8.0"
dayjs "^1.10.4"
debug "^4.3.4"
Expand All @@ -3987,12 +3989,13 @@ cypress@^12.8.1:
listr2 "^3.8.3"
lodash "^4.17.21"
log-symbols "^4.0.0"
minimist "^1.2.6"
minimist "^1.2.8"
ospath "^1.2.2"
pretty-bytes "^5.6.0"
process "^0.11.10"
proxy-from-env "1.0.0"
request-progress "^3.0.0"
semver "^7.3.2"
semver "^7.5.3"
supports-color "^8.1.1"
tmp "~0.2.1"
untildify "^4.0.0"
Expand Down Expand Up @@ -7685,7 +7688,7 @@ minimist-options@4.1.0:
is-plain-obj "^1.1.0"
kind-of "^6.0.3"

minimist@^1.1.1:
minimist@^1.1.1, minimist@^1.2.8:
version "1.2.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
Expand Down Expand Up @@ -8298,6 +8301,11 @@ pretty-format@^28.1.3:
ansi-styles "^5.0.0"
react-is "^18.0.0"

process@^0.11.10:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==

prompts@^2.0.1:
version "2.4.2"
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
Expand Down Expand Up @@ -8330,7 +8338,7 @@ proxy-from-env@1.0.0:
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==

psl@^1.1.28, psl@^1.1.33:
psl@^1.1.33:
version "1.8.0"
resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
Expand Down Expand Up @@ -8358,10 +8366,12 @@ q@^1.5.1:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==

qs@~6.5.2:
version "6.5.3"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
qs@6.10.4:
version "6.10.4"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
dependencies:
side-channel "^1.0.4"

querystringify@^2.1.1:
version "2.2.0"
Expand Down Expand Up @@ -8833,7 +8843,7 @@ semver@7.3.8:
dependencies:
lru-cache "^6.0.0"

semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
semver@7.x, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3:
version "7.5.4"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
Expand Down Expand Up @@ -9465,13 +9475,15 @@ tough-cookie@^4.0.0:
universalify "^0.2.0"
url-parse "^1.5.3"

tough-cookie@~2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
tough-cookie@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
dependencies:
psl "^1.1.28"
psl "^1.1.33"
punycode "^2.1.1"
universalify "^0.2.0"
url-parse "^1.5.3"

tr46@^3.0.0:
version "3.0.0"
Expand Down Expand Up @@ -9736,6 +9748,11 @@ unbox-primitive@^1.0.2:
has-symbols "^1.0.3"
which-boxed-primitive "^1.0.2"

undici-types@~5.26.4:
version "5.26.5"
resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==

unified@^10.0.0, unified@^10.1.2:
version "10.1.2"
resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
Expand Down

2 comments on commit 98bd0e2

@vercel
Copy link

@vercel vercel bot commented on 98bd0e2 Nov 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

comet-land-resume – ./apps/resume

comet-land-resume-git-main-hyesungoh.vercel.app
comet-land-resume-hyesungoh.vercel.app
comet-land-resume.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 98bd0e2 Nov 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

comet-land-blog – ./apps/blog

comet-land-blog-hyesungoh.vercel.app
comet-land-blog-git-main-hyesungoh.vercel.app
comet-land-blog.vercel.app

Please sign in to comment.