Renewal page query parameters (#236)

* Renewal page query parameters * search based on core & paraId * fix * last touches
RegionX-Labs · Sep 21, 2024 · d0a1b73 · d0a1b73
1 parent 6feb0c6
commit d0a1b73
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 22 deletions.
diff --git 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<number>(0);
+  const router = useRouter();
+  const { network } = router.query;
+
+  const [activeIndex, setActiveIndex] = useState(0);
   const [renewalEnabled, setRenewalEnabled] = useState<boolean>(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 ? (
     <Backdrop open>
       <CircularProgress />
@@ -53,16 +76,12 @@ const Renewal = () => {
             boxShadow: 'none',
           }}
         >
-          <SelectParachain
-            activeIdx={activeIdx}
-            parachains={parachains}
-            setActiveIdx={setActiveIdx}
-          />
+          <SelectParachain parachains={parachains} />
           <RenewableParaInfo
-            parachain={parachains[activeIdx]}
+            parachain={parachains[activeIndex]}
             setRenewalEnabled={setRenewalEnabled}
           />
-          <RenewAction parachain={parachains[activeIdx]} enabled={renewalEnabled} />
+          <RenewAction parachain={parachains[activeIndex]} enabled={renewalEnabled} />
         </Paper>
       </Box>
     </>

diff --git 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 (
     <Stack direction='column' gap={1} margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
@@ -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) => (
-            <MenuItem key={index} value={index}>
+            <MenuItem key={index} value={index.toString()}>
               <ParaDisplay {...{ network, paraId, core }} />
             </MenuItem>
           ))}

diff --git 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) => (
             <StyledTableRow key={index}>
               <StyledTableCell style={{ width: '10%' }} align='center'>
                 <Link href={`${SUSBCAN_RELAY_URL[network]}/parachain/${id}`}>{id}</Link>
@@ -219,7 +219,9 @@ export const ParachainTable = ({
                 ) : state === ParaState.IDLE_PARA ? (
                   <ParaActionButton onClick={onBuy}>Buy Coretime</ParaActionButton>
                 ) : state === ParaState.ACTIVE_RENEWABLE_PARA ? (
-                  <ParaActionButton onClick={() => onRenew(id)}>Renew Coretime</ParaActionButton>
+                  <ParaActionButton onClick={() => onRenew(id, core)}>
+                    Renew Coretime
+                  </ParaActionButton>
                 ) : (
                   <Typography>No action required</Typography>
                 )}

diff --git 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
@@ -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
@@ -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 },
     });
   };