From 7fd2319bd663f00f56490a3645f856372455a20d Mon Sep 17 00:00:00 2001 From: Harsh Date: Wed, 22 Nov 2023 16:06:30 +0530 Subject: [PATCH 1/2] 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 | 5 +- apps/web/src/pages/blocks/index.tsx | 1 + pnpm-lock.yaml | 205 ++++++++++++++++-- 5 files changed, 207 insertions(+), 16 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 7f795df2..4ba367b7 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": "13.4.12", "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..bfa688ba 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 ( @@ -106,7 +109,7 @@ export default function Pagination({ previousPagesParams.length === 0 ) { setPreviousPagesParams([]); - router.push(pathName); + // router.push(pathName); } }, [router.query]); 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..88530169 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: 13.4.12 + version: 13.4.12(@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,25 @@ 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.12: + resolution: {integrity: sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ==} + dev: false /@next/env@13.4.19: resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==} @@ -3815,6 +3870,15 @@ packages: glob: 7.1.7 dev: true + /@next/swc-darwin-arm64@13.4.12: + resolution: {integrity: sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /@next/swc-darwin-arm64@13.4.19: resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==} engines: {node: '>= 10'} @@ -3832,6 +3896,15 @@ packages: dev: true optional: true + /@next/swc-darwin-x64@13.4.12: + resolution: {integrity: sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==} + engines: {node: '>= 10'} + cpu: [x64] + 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 +3922,15 @@ packages: dev: true optional: true + /@next/swc-linux-arm64-gnu@13.4.12: + resolution: {integrity: sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + 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 +3948,15 @@ packages: dev: true optional: true + /@next/swc-linux-arm64-musl@13.4.12: + resolution: {integrity: sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==} + 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 +3974,15 @@ packages: dev: true optional: true + /@next/swc-linux-x64-gnu@13.4.12: + resolution: {integrity: sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==} + engines: {node: '>= 10'} + cpu: [x64] + 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 +4000,15 @@ packages: dev: true optional: true + /@next/swc-linux-x64-musl@13.4.12: + resolution: {integrity: sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==} + 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 +4026,15 @@ packages: dev: true optional: true + /@next/swc-win32-arm64-msvc@13.4.12: + resolution: {integrity: sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + 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 +4052,15 @@ packages: dev: true optional: true + /@next/swc-win32-ia32-msvc@13.4.12: + resolution: {integrity: sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==} + engines: {node: '>= 10'} + cpu: [ia32] + 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 +4078,15 @@ packages: dev: true optional: true + /@next/swc-win32-x64-msvc@13.4.12: + resolution: {integrity: sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==} + engines: {node: '>= 10'} + cpu: [x64] + 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'} @@ -8684,7 +8820,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 +8872,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 +8932,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 +8967,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 @@ -12501,6 +12637,49 @@ packages: next: 13.4.19(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0) dev: false + /next@13.4.12(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==} + engines: {node: '>=16.8.0'} + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + fibers: '>= 3.1.0' + react: ^18.2.0 + react-dom: ^18.2.0 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + fibers: + optional: true + sass: + optional: true + dependencies: + '@next/env': 13.4.12 + '@swc/helpers': 0.5.1 + busboy: 1.6.0 + caniuse-lite: 1.0.30001559 + postcss: 8.4.14 + 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 + zod: 3.21.4 + optionalDependencies: + '@next/swc-darwin-arm64': 13.4.12 + '@next/swc-darwin-x64': 13.4.12 + '@next/swc-linux-arm64-gnu': 13.4.12 + '@next/swc-linux-arm64-musl': 13.4.12 + '@next/swc-linux-x64-gnu': 13.4.12 + '@next/swc-linux-x64-musl': 13.4.12 + '@next/swc-win32-arm64-msvc': 13.4.12 + '@next/swc-win32-ia32-msvc': 13.4.12 + '@next/swc-win32-x64-msvc': 13.4.12 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + dev: false + /next@13.4.19(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==} engines: {node: '>=16.8.0'} From 27db024e1c6c50940854380603520258fceaf997 Mon Sep 17 00:00:00 2001 From: Harsh Date: Wed, 22 Nov 2023 19:23:14 +0530 Subject: [PATCH 2/2] removed console --- apps/web/src/components/commons/Link.tsx | 7 ------- apps/web/src/components/commons/Pagination.tsx | 5 +---- apps/web/src/pages/blocks/index.tsx | 1 - 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/apps/web/src/components/commons/Link.tsx b/apps/web/src/components/commons/Link.tsx index 252142fb..61b5d14a 100644 --- a/apps/web/src/components/commons/Link.tsx +++ b/apps/web/src/components/commons/Link.tsx @@ -40,13 +40,6 @@ 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 bfa688ba..762d072b 100644 --- a/apps/web/src/components/commons/Pagination.tsx +++ b/apps/web/src/components/commons/Pagination.tsx @@ -59,7 +59,6 @@ export default function Pagination({ }, next: nextPageParams, }; - console.log({ currentPageNumber }) if (nextPageParamsFromApi === undefined || nextPageParamsFromApi === null) { return [pageButton.previous, pageButton.current]; @@ -82,7 +81,6 @@ export default function Pagination({ }, [source]); useEffect(() => { - console.log(router.query) if ( !previousPagesParams.some( (page) => page?.page_number === (router.query.page_number as string), @@ -101,7 +99,6 @@ 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 ( @@ -109,7 +106,7 @@ export default function Pagination({ previousPagesParams.length === 0 ) { setPreviousPagesParams([]); - // router.push(pathName); + router.push(pathName); } }, [router.query]); diff --git a/apps/web/src/pages/blocks/index.tsx b/apps/web/src/pages/blocks/index.tsx index 5d0b5f92..d7328e38 100644 --- a/apps/web/src/pages/blocks/index.tsx +++ b/apps/web/src/pages/blocks/index.tsx @@ -110,7 +110,6 @@ export async function getServerSideProps( // Pass data to the page via props return { props: { data } }; } catch (e) { - console.log({ e }) return { notFound: true }; } }