From d0a1b730374c2a10afa698afbeff5811b541dc7d Mon Sep 17 00:00:00 2001 From: Sergej Sakac <73715684+Szegoo@users.noreply.github.com> Date: Sat, 21 Sep 2024 18:57:07 +0200 Subject: [PATCH] Renewal page query parameters (#236) * Renewal page query parameters * search based on core & paraId * fix * last touches --- src/components/Renew/renewPage.tsx | 37 +++++++++++++----- src/components/Renew/select.tsx | 39 +++++++++++++++---- .../Tables/ParachainTable/index.tsx | 8 ++-- src/hooks/parasInfo.ts | 4 +- src/models/paras/index.ts | 1 + src/pages/paras/index.tsx | 4 +- 6 files changed, 71 insertions(+), 22 deletions(-) diff --git a/src/components/Renew/renewPage.tsx b/src/components/Renew/renewPage.tsx index d5023b1f..f34a2a28 100644 --- a/src/components/Renew/renewPage.tsx +++ b/src/components/Renew/renewPage.tsx @@ -1,5 +1,6 @@ import { Backdrop, Box, CircularProgress, Paper, Typography, useTheme } from '@mui/material'; -import { useState } from 'react'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; import { useRenewableParachains } from '@/hooks/renewableParas'; @@ -14,10 +15,32 @@ import { SelectParachain } from './select'; const Renewal = () => { const theme = useTheme(); - const [activeIdx, setActiveIdx] = useState(0); + const router = useRouter(); + const { network } = router.query; + + const [activeIndex, setActiveIndex] = useState(0); const [renewalEnabled, setRenewalEnabled] = useState(true); const { status, parachains } = useRenewableParachains(); + useEffect(() => { + if (parachains.length === 0) return; + + // Intentionally set to -1 so that the user gets rerouted if the core or the paraId is not set. + const core = router.query.core ? Number(router.query.core) : -1; + const paraId = router.query.paraId ? Number(router.query.paraId) : -1; + + const index = parachains.findIndex((p) => p.core === core && p.paraId === paraId); + + if (index >= 0) { + setActiveIndex(index); + } else { + router.push({ + pathname: '', + query: { network, paraId: parachains[0].paraId, core: parachains[0].core }, + }); + } + }, [router.query, parachains]); + return status !== ContextStatus.LOADED ? ( @@ -53,16 +76,12 @@ const Renewal = () => { boxShadow: 'none', }} > - + - + diff --git a/src/components/Renew/select.tsx b/src/components/Renew/select.tsx index d8193527..f252e294 100644 --- a/src/components/Renew/select.tsx +++ b/src/components/Renew/select.tsx @@ -1,4 +1,13 @@ -import { FormControl, InputLabel, MenuItem, Select, Stack, Typography } from '@mui/material'; +import { + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, + Stack, + Typography, +} from '@mui/material'; +import { useRouter } from 'next/router'; import { RenewableParachain } from '@/hooks'; import theme from '@/utils/muiTheme'; @@ -9,12 +18,28 @@ import { useNetwork } from '@/contexts/network'; interface SelectParachainProps { parachains: RenewableParachain[]; - activeIdx: number; - setActiveIdx: (_: number) => void; } -export const SelectParachain = ({ parachains, activeIdx, setActiveIdx }: SelectParachainProps) => { +export const SelectParachain = ({ parachains }: SelectParachainProps) => { const { network } = useNetwork(); + const router = useRouter(); + + // Get core and paraId from query params. + const core = router.query.core ? Number(router.query.core) : null; + const paraId = router.query.paraId ? Number(router.query.paraId) : null; + + const onParaChange = (e: SelectChangeEvent) => { + const selectedCoreId = core ? parachains[Number(e.target.value)].core : parachains[0].core; + const selectedParaId = paraId + ? parachains[Number(e.target.value)].paraId + : parachains[0].paraId; + + // Update the URL with the new `core` query param + router.push({ + pathname: '', + query: { network, paraId: selectedParaId, core: selectedCoreId }, + }); + }; return ( @@ -31,11 +56,11 @@ export const SelectParachain = ({ parachains, activeIdx, setActiveIdx }: SelectP sx={{ borderRadius: '1rem' }} labelId='label-parachain-select' label='Parachain' - value={activeIdx} - onChange={(e) => setActiveIdx(Number(e.target.value))} + value={parachains.findIndex((p) => p.core === core && p.paraId === paraId).toString()} + onChange={onParaChange} > {parachains.map(({ paraId, core }, index) => ( - + ))} diff --git a/src/components/Tables/ParachainTable/index.tsx b/src/components/Tables/ParachainTable/index.tsx index 7135c857..888ed469 100644 --- a/src/components/Tables/ParachainTable/index.tsx +++ b/src/components/Tables/ParachainTable/index.tsx @@ -43,7 +43,7 @@ interface ParachainTableProps { onUpgrade: (_id: number) => void; onBuy: () => void; onWatch: (_id: number, _watching: boolean) => void; - onRenew: (_id: number) => void; + onRenew: (_id: number, _core: number) => void; }; orderBy: string; direction: Order; @@ -151,7 +151,7 @@ export const ParachainTable = ({ {(rowsPerPage > 0 ? parachains.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : parachains - ).map(({ id, name, state, watching, logo, homepage }, index) => ( + ).map(({ id, core, name, state, watching, logo, homepage }, index) => ( {id} @@ -219,7 +219,9 @@ export const ParachainTable = ({ ) : state === ParaState.IDLE_PARA ? ( Buy Coretime ) : state === ParaState.ACTIVE_RENEWABLE_PARA ? ( - onRenew(id)}>Renew Coretime + onRenew(id, core)}> + Renew Coretime + ) : ( No action required )} diff --git a/src/hooks/parasInfo.ts b/src/hooks/parasInfo.ts index d6c138e9..0e798d6b 100644 --- a/src/hooks/parasInfo.ts +++ b/src/hooks/parasInfo.ts @@ -125,7 +125,7 @@ export const useParasInfo = () => { ? ParaState.ONDEMAND_PARACHAIN : ParaState.IDLE_PARA; - paras.push({ id, state, name, logo, homepage } as ParachainInfo); + paras.push({ id, core: isRenewable?.core, state, name, logo, homepage } as ParachainInfo); } return paras; }; @@ -141,6 +141,8 @@ export const useParasInfo = () => { if (manager === activeAccount?.address) { paras.push({ id, + // Paras in `RESERVED` state can't have a core assigned. + core: 0, state: ParaState.RESERVED, name: '', }); diff --git a/src/models/paras/index.ts b/src/models/paras/index.ts index 87aaab88..e38e2c75 100644 --- a/src/models/paras/index.ts +++ b/src/models/paras/index.ts @@ -20,6 +20,7 @@ export enum ParaState { } export type ParachainInfo = { id: number; + core: number; state: ParaState; name: string; watching?: boolean; diff --git a/src/pages/paras/index.tsx b/src/pages/paras/index.tsx index 22310ca6..60875e9f 100644 --- a/src/pages/paras/index.tsx +++ b/src/pages/paras/index.tsx @@ -67,10 +67,10 @@ const ParachainManagement = () => { }; // Renew coretime with the given para id - const onRenew = (paraId: number) => { + const onRenew = (paraId: number, core: number) => { router.push({ pathname: 'renew', - query: { network, paraId }, + query: { network, paraId, core }, }); };