Renewal page query parameters

RegionX-Labs · Sep 21, 2024 · f2b3738 · f2b3738
1 parent 6feb0c6
commit f2b3738
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 16 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,30 @@ 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 core is not set.
+    const core = router.query.core ? Number(router.query.core) : -1;
+    const index = parachains.findIndex((p) => p.core === core);
+
+    if (index >= 0) {
+      setActiveIndex(index);
+    } else {
+      router.push({
+        pathname: '/renew',
+        query: { network, core: parachains[0].core },
+      });
+    }
+  }, [router.query, parachains]);
+
   return status !== ContextStatus.LOADED ? (
     <Backdrop open>
       <CircularProgress />
@@ -53,16 +74,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,24 @@ 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 coreId from query params.
+  const core = router.query.core ? Number(router.query.core) : null;
+
+  const onParaChange = (e: SelectChangeEvent) => {
+    const selectedCoreId = core ? parachains[Number(e.target.value)].core : parachains[0].core;
+
+    // Update the URL with the new `core` query param
+    router.push({
+      pathname: '/renew',
+      query: { network, core: selectedCoreId },
+    });
+  };
 
   return (
     <Stack direction='column' gap={1} margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
@@ -31,11 +52,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).toString()}
+          onChange={onParaChange}
         >
           {parachains.map(({ paraId, core }, index) => (
-            <MenuItem key={index} value={index}>
+            <MenuItem key={index} value={index.toString()}>
               <ParaDisplay {...{ network, paraId, core }} />
             </MenuItem>
           ))}