From 09f7dc216dfefecdbc8e22b15639912aae837f7e Mon Sep 17 00:00:00 2001 From: Harsh Date: Wed, 22 Nov 2023 16:06:30 +0530 Subject: [PATCH] fix(ui-ux): fix route issue --- apps/web/package.json | 5 +- apps/web/src/components/commons/Link.tsx | 7 + .../web/src/components/commons/Pagination.tsx | 3 + apps/web/src/pages/blocks/index.tsx | 1 + pnpm-lock.yaml | 203 ++++++++++++++++-- 5 files changed, 202 insertions(+), 17 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 7f795df2..b746dce4 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -27,6 +27,7 @@ "dayjs-plugin-utc": "^0.1.2", "ethers": "^5.7.2", "lodash": "^4.17.21", + "next": "^14.0.3", "react-code-blocks": "0.0.9-0", "react-dropzone": "^14.2.3", "react-qr-code": "^2.0.11", @@ -36,8 +37,8 @@ }, "devDependencies": { "@cypress/code-coverage": "^3.10.7", - "@netlify/plugin-lighthouse": "^4.1.1", - "@netlify/plugin-nextjs": "^4.38.0", + "@netlify/plugin-lighthouse": "^5.0.0", + "@netlify/plugin-nextjs": "^4.41.2", "@tailwindcss/line-clamp": "^0.4.4", "@testing-library/cypress": "^9.0.0", "@types/node": "18.16.3", diff --git a/apps/web/src/components/commons/Link.tsx b/apps/web/src/components/commons/Link.tsx index 61b5d14a..252142fb 100644 --- a/apps/web/src/components/commons/Link.tsx +++ b/apps/web/src/components/commons/Link.tsx @@ -40,6 +40,13 @@ const Link = forwardRef>( passHref {...props} ref={ref} + as={{ + pathname, + query: { + ...query, + ...networkQuery, + } + }} href={{ pathname, query: { diff --git a/apps/web/src/components/commons/Pagination.tsx b/apps/web/src/components/commons/Pagination.tsx index 762d072b..fc066e74 100644 --- a/apps/web/src/components/commons/Pagination.tsx +++ b/apps/web/src/components/commons/Pagination.tsx @@ -59,6 +59,7 @@ export default function Pagination({ }, next: nextPageParams, }; + console.log({ currentPageNumber }) if (nextPageParamsFromApi === undefined || nextPageParamsFromApi === null) { return [pageButton.previous, pageButton.current]; @@ -81,6 +82,7 @@ export default function Pagination({ }, [source]); useEffect(() => { + console.log(router.query) if ( !previousPagesParams.some( (page) => page?.page_number === (router.query.page_number as string), @@ -99,6 +101,7 @@ export default function Pagination({ }, [router.query]); useEffect(() => { + console.log({ previousPagesParams }, router.query.page_number) // bug: clicking on the arrow button will cause the page to go back to page 1 // If pageNumber > 1 and previousPagesParams (local state) is cleared, go back to page 1 if ( diff --git a/apps/web/src/pages/blocks/index.tsx b/apps/web/src/pages/blocks/index.tsx index d7328e38..5d0b5f92 100644 --- a/apps/web/src/pages/blocks/index.tsx +++ b/apps/web/src/pages/blocks/index.tsx @@ -110,6 +110,7 @@ export async function getServerSideProps( // Pass data to the page via props return { props: { data } }; } catch (e) { + console.log({ e }) return { notFound: true }; } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4a0f7498..f76acbdd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -238,6 +238,9 @@ importers: lodash: specifier: ^4.17.21 version: 4.17.21 + next: + specifier: ^14.0.3 + version: 14.0.3(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0) react-code-blocks: specifier: 0.0.9-0 version: 0.0.9-0(@babel/core@7.23.2)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) @@ -261,11 +264,11 @@ importers: specifier: ^3.10.7 version: 3.12.8(@babel/core@7.23.2)(@babel/preset-env@7.23.2)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.89.0) '@netlify/plugin-lighthouse': - specifier: ^4.1.1 - version: 4.1.1 + specifier: ^5.0.0 + version: 5.0.0 '@netlify/plugin-nextjs': - specifier: ^4.38.0 - version: 4.41.1 + specifier: ^4.41.2 + version: 4.41.2 '@tailwindcss/line-clamp': specifier: ^0.4.4 version: 0.4.4(tailwindcss@3.3.5) @@ -3682,6 +3685,15 @@ packages: dependencies: '@netlify/serverless-functions-api': 1.9.0 is-promise: 4.0.0 + dev: false + + /@netlify/functions@2.4.0: + resolution: {integrity: sha512-dIqhdj5u4Lu/8qbYwtYpn8NfvIyPHbSTV2lAP4ocL+iwC9As06AXT0wa/xOpO2vRWJa0IMxdZaqCPnkyHlHiyg==} + engines: {node: '>=14.0.0'} + dependencies: + '@netlify/serverless-functions-api': 1.11.0 + is-promise: 4.0.0 + dev: true /@netlify/ipx@1.4.5: resolution: {integrity: sha512-QuPxUj8Bn8hXwjdcA1BF+HPLqFJ2e9OCNrKX/s3hoUFjjqQrNSK8lLARAtzGfOM3BRsTXyi/zGdwBE+oJKd0dw==} @@ -3710,13 +3722,43 @@ packages: - encoding - idb-keyval - supports-color + dev: false + + /@netlify/ipx@1.4.6: + resolution: {integrity: sha512-rnKR2LXhtnflitPX9CQIv+XSrNlYIqGsV54xrXifhbtHHjCjCw/lixsi8qwAXqEIgZBC9b4Y7prhHqRtC4oIjw==} + dependencies: + '@netlify/functions': 2.4.0 + etag: 1.8.1 + fs-extra: 11.1.1 + ipx: 1.3.1 + micromatch: 4.0.5 + mkdirp: 3.0.1 + murmurhash: 2.0.1 + node-fetch: 2.7.0 + ufo: 1.3.1 + unstorage: 1.9.0 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@planetscale/database' + - '@upstash/redis' + - '@vercel/kv' + - encoding + - idb-keyval + - supports-color + dev: true /@netlify/node-cookies@0.1.0: resolution: {integrity: sha512-OAs1xG+FfLX0LoRASpqzVntVV/RpYkgpI0VrUnw2u0Q1qiZUzcPffxRK8HF3gc4GjuhG5ahOEMJ9bswBiZPq0g==} engines: {node: ^14.16.0 || >=16.0.0} - /@netlify/plugin-lighthouse@4.1.1: - resolution: {integrity: sha512-eFNzOBOkmNpN9oBro7PSYim/eGZNUJDfV4lJf32HcA2lCzv2fmuZECid7BlfAY3B1KGFh7oT66Z2Pa/OUVbnJw==} + /@netlify/plugin-lighthouse@5.0.0: + resolution: {integrity: sha512-tCaoVYxCU3OB592vChtFkANzUL4kDUNaIk9VCGp3qBecBnH+yFrILUlcqy2d08Is4ecstjTacyHqV+ixKbNYGQ==} engines: {node: '>=14.15 <20'} dependencies: chalk: 4.1.2 @@ -3734,14 +3776,14 @@ packages: - utf-8-validate dev: true - /@netlify/plugin-nextjs@4.41.1: - resolution: {integrity: sha512-/r4Lfp/A9kqyu2KrRPijXDGDdNMGo3rjYrHpc5kNehTZrsFCyAwNVDvOV/akfUlT8wnpibjsoAmlurF9+zfjRA==} + /@netlify/plugin-nextjs@4.41.2: + resolution: {integrity: sha512-+XByVkr9sRszq7xnsZ52EGi5xeTdAtj5PRxvP//xVywlGAi1jYintizdd6PCbI6Ty0Kegwgb0O6FgRKceyUIwA==} engines: {node: '>=12.0.0'} dependencies: '@netlify/blobs': 2.2.0 '@netlify/esbuild': 0.14.39 '@netlify/functions': 1.6.0 - '@netlify/ipx': 1.4.5 + '@netlify/ipx': 1.4.6 '@vercel/node-bridge': 2.2.2 chalk: 4.1.2 chokidar: 3.5.3 @@ -3779,12 +3821,21 @@ packages: - supports-color dev: true + /@netlify/serverless-functions-api@1.11.0: + resolution: {integrity: sha512-3splAsr2CekL7VTwgo6yTvzD2+f269/s+TJafYazonqMNNo31yzvFxD5HpLtni4DNE1ppymVKZ4X/rLN3yl0vQ==} + engines: {node: ^14.18.0 || >=16.0.0} + dependencies: + '@netlify/node-cookies': 0.1.0 + urlpattern-polyfill: 8.0.2 + dev: true + /@netlify/serverless-functions-api@1.9.0: resolution: {integrity: sha512-Jq4uk1Mwa5vyxImupJYXPP+I5yYcp3PtguvXtJRutKdm9DPALXfZVtCQzBWMNdZiqVWCM3La9hvaBsPjSMfeug==} engines: {node: ^14.18.0 || >=16.0.0} dependencies: '@netlify/node-cookies': 0.1.0 urlpattern-polyfill: 8.0.2 + dev: false /@next/env@13.4.19: resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==} @@ -3797,6 +3848,10 @@ packages: resolution: {integrity: sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==} dev: true + /@next/env@14.0.3: + resolution: {integrity: sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA==} + dev: false + /@next/eslint-plugin-next@13.4.19: resolution: {integrity: sha512-N/O+zGb6wZQdwu6atMZHbR7T9Np5SUFUjZqCbj0sXm+MwQO35M8TazVB4otm87GkXYs2l6OPwARd3/PUWhZBVQ==} dependencies: @@ -3832,6 +3887,15 @@ packages: dev: true optional: true + /@next/swc-darwin-arm64@14.0.3: + resolution: {integrity: sha512-64JbSvi3nbbcEtyitNn2LEDS/hcleAFpHdykpcnrstITFlzFgB/bW0ER5/SJJwUPj+ZPY+z3e+1jAfcczRLVGw==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-darwin-x64@13.4.19: resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==} engines: {node: '>= 10'} @@ -3849,6 +3913,15 @@ packages: dev: true optional: true + /@next/swc-darwin-x64@14.0.3: + resolution: {integrity: sha512-RkTf+KbAD0SgYdVn1XzqE/+sIxYGB7NLMZRn9I4Z24afrhUpVJx6L8hsRnIwxz3ERE2NFURNliPjJ2QNfnWicQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-arm64-gnu@13.4.19: resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==} engines: {node: '>= 10'} @@ -3866,6 +3939,15 @@ packages: dev: true optional: true + /@next/swc-linux-arm64-gnu@14.0.3: + resolution: {integrity: sha512-3tBWGgz7M9RKLO6sPWC6c4pAw4geujSwQ7q7Si4d6bo0l6cLs4tmO+lnSwFp1Tm3lxwfMk0SgkJT7EdwYSJvcg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-arm64-musl@13.4.19: resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==} engines: {node: '>= 10'} @@ -3883,6 +3965,15 @@ packages: dev: true optional: true + /@next/swc-linux-arm64-musl@14.0.3: + resolution: {integrity: sha512-v0v8Kb8j8T23jvVUWZeA2D8+izWspeyeDGNaT2/mTHWp7+37fiNfL8bmBWiOmeumXkacM/AB0XOUQvEbncSnHA==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-x64-gnu@13.4.19: resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==} engines: {node: '>= 10'} @@ -3900,6 +3991,15 @@ packages: dev: true optional: true + /@next/swc-linux-x64-gnu@14.0.3: + resolution: {integrity: sha512-VM1aE1tJKLBwMGtyBR21yy+STfl0MapMQnNrXkxeyLs0GFv/kZqXS5Jw/TQ3TSUnbv0QPDf/X8sDXuMtSgG6eg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-linux-x64-musl@13.4.19: resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==} engines: {node: '>= 10'} @@ -3917,6 +4017,15 @@ packages: dev: true optional: true + /@next/swc-linux-x64-musl@14.0.3: + resolution: {integrity: sha512-64EnmKy18MYFL5CzLaSuUn561hbO1Gk16jM/KHznYP3iCIfF9e3yULtHaMy0D8zbHfxset9LTOv6cuYKJgcOxg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-arm64-msvc@13.4.19: resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==} engines: {node: '>= 10'} @@ -3934,6 +4043,15 @@ packages: dev: true optional: true + /@next/swc-win32-arm64-msvc@14.0.3: + resolution: {integrity: sha512-WRDp8QrmsL1bbGtsh5GqQ/KWulmrnMBgbnb+59qNTW1kVi1nG/2ndZLkcbs2GX7NpFLlToLRMWSQXmPzQm4tog==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-ia32-msvc@13.4.19: resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==} engines: {node: '>= 10'} @@ -3951,6 +4069,15 @@ packages: dev: true optional: true + /@next/swc-win32-ia32-msvc@14.0.3: + resolution: {integrity: sha512-EKffQeqCrj+t6qFFhIFTRoqb2QwX1mU7iTOvMyLbYw3QtqTw9sMwjykyiMlZlrfm2a4fA84+/aeW+PMg1MjuTg==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@next/swc-win32-x64-msvc@13.4.19: resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==} engines: {node: '>= 10'} @@ -3968,6 +4095,15 @@ packages: dev: true optional: true + /@next/swc-win32-x64-msvc@14.0.3: + resolution: {integrity: sha512-ERhKPSJ1vQrPiwrs15Pjz/rvDHZmkmvbf/BjPN/UCOI++ODftT0GtasDPi0j+y6PPJi5HsXw+dpRaXUaw4vjuQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@noble/curves@1.2.0: resolution: {integrity: sha512-oYclrNgRaM9SsBUBVbb8M6DTV7ZHRTKugureoYEncY5c65HOmRzvSiTE3y5CYaPYJA/GVkrhXEoF0M3Ya9PMnw==} dependencies: @@ -4561,7 +4697,6 @@ packages: resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} dependencies: tslib: 2.6.2 - dev: true /@tailwindcss/line-clamp@0.4.4(tailwindcss@3.3.5): resolution: {integrity: sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==} @@ -8684,7 +8819,7 @@ packages: /eslint-import-resolver-node@0.3.9: resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==} dependencies: - debug: 3.2.7(supports-color@8.1.1) + debug: 3.2.7(supports-color@5.5.0) is-core-module: 2.13.1 resolve: 1.22.8 transitivePeerDependencies: @@ -8736,7 +8871,7 @@ packages: optional: true dependencies: '@typescript-eslint/parser': 6.9.1(eslint@8.52.0)(typescript@5.2.2) - debug: 3.2.7(supports-color@8.1.1) + debug: 3.2.7(supports-color@5.5.0) eslint: 8.52.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.9.1)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.52.0) @@ -8796,7 +8931,7 @@ packages: array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 array.prototype.flatmap: 1.3.2 - debug: 3.2.7(supports-color@8.1.1) + debug: 3.2.7(supports-color@5.5.0) doctrine: 2.1.0 eslint: 8.52.0 eslint-import-resolver-node: 0.3.9 @@ -8831,7 +8966,7 @@ packages: array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 array.prototype.flatmap: 1.3.2 - debug: 3.2.7(supports-color@8.1.1) + debug: 3.2.7(supports-color@5.5.0) doctrine: 2.1.0 eslint: 8.52.0 eslint-import-resolver-node: 0.3.9 @@ -12579,6 +12714,45 @@ packages: - babel-plugin-macros dev: true + /next@14.0.3(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-AbYdRNfImBr3XGtvnwOxq8ekVCwbFTv/UJoLwmaX89nk9i051AEY4/HAWzU0YpaTDw8IofUpmuIlvzWF13jxIw==} + engines: {node: '>=18.17.0'} + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + react: ^18.2.0 + react-dom: ^18.2.0 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + sass: + optional: true + dependencies: + '@next/env': 14.0.3 + '@swc/helpers': 0.5.2 + busboy: 1.6.0 + caniuse-lite: 1.0.30001559 + postcss: 8.4.31 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.23.2)(react@18.2.0) + watchpack: 2.4.0 + optionalDependencies: + '@next/swc-darwin-arm64': 14.0.3 + '@next/swc-darwin-x64': 14.0.3 + '@next/swc-linux-arm64-gnu': 14.0.3 + '@next/swc-linux-arm64-musl': 14.0.3 + '@next/swc-linux-x64-gnu': 14.0.3 + '@next/swc-linux-x64-musl': 14.0.3 + '@next/swc-win32-arm64-msvc': 14.0.3 + '@next/swc-win32-ia32-msvc': 14.0.3 + '@next/swc-win32-x64-msvc': 14.0.3 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + dev: false + /nextjs-progressbar@0.0.16(next@13.4.19)(react@18.2.0): resolution: {integrity: sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==} peerDependencies: @@ -13436,7 +13610,6 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /postgres-array@2.0.0: resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}