From 3d885322fb9b498f7f334fb035a1eabc894b54b5 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 13 Feb 2023 16:34:01 +0700 Subject: [PATCH 1/6] fix: flickering page when renaming --- CHANGELOG.md | 1 + src/lib/pages/contract-list/slug.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 68837c6f6..e45a7e110 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -142,6 +142,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#187](https://github.com/alleslabs/celatone-frontend/pull/187) Fix renaming list flicker to the all lists for a second - [#185](https://github.com/alleslabs/celatone-frontend/pull/185) Fix sentry in next.config.js - [#183](https://github.com/alleslabs/celatone-frontend/pull/183) Fix build failed because sentry env - [#175](https://github.com/alleslabs/celatone-frontend/pull/175) Fix css related issue and tag selection input diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 6d811760b..1cba37dce 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -58,9 +58,11 @@ const ContractsByList = observer(() => { : getContractLists().find((item) => item.slug === listSlug); useEffect(() => { - if (isHydrated && contractListInfo === undefined) { - navigate({ pathname: "/contract-list" }); - } + const timeoutId = setTimeout(() => { + if (isHydrated && contractListInfo === undefined) + navigate({ pathname: "/contract-list" }); + return () => clearTimeout(timeoutId); + }, 100); }, [contractListInfo, isHydrated, navigate]); if (!contractListInfo) return null; From 89b48d123d8ad846257d20404991adc7fa8d67e3 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 13 Feb 2023 16:46:51 +0700 Subject: [PATCH 2/6] fix: change timeout period to 500ms --- src/lib/pages/contract-list/slug.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 1cba37dce..eb257b4d5 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -62,7 +62,7 @@ const ContractsByList = observer(() => { if (isHydrated && contractListInfo === undefined) navigate({ pathname: "/contract-list" }); return () => clearTimeout(timeoutId); - }, 100); + }, 500); }, [contractListInfo, isHydrated, navigate]); if (!contractListInfo) return null; From d054fd647d5cf44f10604a1f5baee4562f8622a8 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 13 Feb 2023 17:41:52 +0700 Subject: [PATCH 3/6] fix: return position --- src/lib/pages/contract-list/slug.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index eb257b4d5..e3b6f275d 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -61,8 +61,8 @@ const ContractsByList = observer(() => { const timeoutId = setTimeout(() => { if (isHydrated && contractListInfo === undefined) navigate({ pathname: "/contract-list" }); - return () => clearTimeout(timeoutId); }, 500); + return () => clearTimeout(timeoutId); }, [contractListInfo, isHydrated, navigate]); if (!contractListInfo) return null; From 488de7545118e666f317a5250cd6a950286d35f1 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 13 Feb 2023 18:13:34 +0700 Subject: [PATCH 4/6] fix: refactor navigate --- src/lib/components/modal/list/EditListName.tsx | 3 ++- src/lib/pages/contract-list/index.tsx | 2 +- src/lib/pages/contract-list/slug.tsx | 2 +- .../instantiate/component/InstantiateOffchainForm.tsx | 10 ++++++++-- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx index bb1e93334..11d451d23 100644 --- a/src/lib/components/modal/list/EditListName.tsx +++ b/src/lib/components/modal/list/EditListName.tsx @@ -80,7 +80,8 @@ export function EditListNameModal({ handleSave(); if (reroute) navigate({ - pathname: `/contract-list/${formatSlugName(listName)}`, + pathname: "/contract-list/[slug]", + query: { slug: formatSlugName(listName) }, replace: true, }); }} diff --git a/src/lib/pages/contract-list/index.tsx b/src/lib/pages/contract-list/index.tsx index 798f5e323..5ac9c2e31 100644 --- a/src/lib/pages/contract-list/index.tsx +++ b/src/lib/pages/contract-list/index.tsx @@ -15,7 +15,7 @@ const AllContractListsPage = observer(() => { const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()]; const handleListSelect = (slug: string) => { - navigate({ pathname: `/contract-list/${slug}` }); + navigate({ pathname: "/contract-list/[slug]", query: { slug } }); }; return ( diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index e3b6f275d..8950b91fb 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -61,7 +61,7 @@ const ContractsByList = observer(() => { const timeoutId = setTimeout(() => { if (isHydrated && contractListInfo === undefined) navigate({ pathname: "/contract-list" }); - }, 500); + }, 100); return () => clearTimeout(timeoutId); }, [contractListInfo, isHydrated, navigate]); diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx index 96b122f9b..84b6fdf03 100644 --- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx +++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx @@ -72,7 +72,10 @@ export const InstantiateOffChainForm = observer( data.tags, data.lists ); - navigate({ pathname: "/contract-list/instantiated-by-me" }); + navigate({ + pathname: "/contract-list/[slug]", + query: { slug: "instantiated-by-me" }, + }); })(); }; @@ -109,7 +112,10 @@ export const InstantiateOffChainForm = observer( w="128px" variant="outline-gray" onClick={() => - navigate({ pathname: "/contract-list/instantiated-by-me" }) + navigate({ + pathname: "/contract-list/[slug]", + query: { slug: "instantiated-by-me" }, + }) } > Skip From 6461a9a98644f529549e68b12bc553d737001ea4 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Mon, 13 Feb 2023 18:41:10 +0700 Subject: [PATCH 5/6] fix: add todo --- src/lib/pages/contract-list/slug.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx index 8950b91fb..5c3d39b20 100644 --- a/src/lib/pages/contract-list/slug.tsx +++ b/src/lib/pages/contract-list/slug.tsx @@ -58,6 +58,7 @@ const ContractsByList = observer(() => { : getContractLists().find((item) => item.slug === listSlug); useEffect(() => { + // TODO: find a better approach? const timeoutId = setTimeout(() => { if (isHydrated && contractListInfo === undefined) navigate({ pathname: "/contract-list" }); From 7a9e5e827a990216c1c4c9a86a9321aee164a00c Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 14 Feb 2023 10:55:17 +0700 Subject: [PATCH 6/6] fix: comments --- .../instantiate/component/InstantiateOffchainForm.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx index 84b6fdf03..a244fe5f5 100644 --- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx +++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx @@ -6,9 +6,11 @@ import { useForm } from "react-hook-form"; import { useInternalNavigate } from "lib/app-provider"; import { OffChainForm } from "lib/components/OffChainForm"; import type { OffchainDetail } from "lib/components/OffChainForm"; +import { INSTANTIATED_LIST_NAME } from "lib/data"; import { useContractStore } from "lib/hooks"; import { useUserKey } from "lib/hooks/useUserKey"; import type { ContractAddr, HumanAddr, LVPair } from "lib/types"; +import { formatSlugName } from "lib/utils"; interface InstantiateOffChainFormProps { title?: string; @@ -30,6 +32,7 @@ export const InstantiateOffChainForm = observer( const navigate = useInternalNavigate(); const { updateContractLocalInfo } = useContractStore(); const userKey = useUserKey(); + const instantiatedListSlug = formatSlugName(INSTANTIATED_LIST_NAME); const { control, @@ -74,7 +77,7 @@ export const InstantiateOffChainForm = observer( ); navigate({ pathname: "/contract-list/[slug]", - query: { slug: "instantiated-by-me" }, + query: { slug: instantiatedListSlug }, }); })(); }; @@ -114,7 +117,7 @@ export const InstantiateOffChainForm = observer( onClick={() => navigate({ pathname: "/contract-list/[slug]", - query: { slug: "instantiated-by-me" }, + query: { slug: instantiatedListSlug }, }) } >