Merge pull request #1319 from decent-dao/fix/prevent-page-reload-whil…

…e-fetching-safe Use Next.js link to prevent page reload while safe being reloaded
decentdao · Jan 11, 2024 · 3afed3c · 3afed3c
2 parents 700979e + a138a79
commit 3afed3c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/app/daos/[daoAddress]/layout.tsx b/app/daos/[daoAddress]/layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Button, Center, Text, VStack } from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNetwork } from 'wagmi';
@@ -16,6 +17,7 @@ import {
 function InvalidSafe() {
   const { chain } = useNetwork();
   const { t } = useTranslation('common');
+  const router = useRouter();
   return (
     <Center
       padding="3rem"
@@ -30,13 +32,7 @@ function InvalidSafe() {
         </Text>
         <Text>{t('invalidSafe1', { chain: chain ? chain.name : disconnectedChain.name })}</Text>
         <Text paddingBottom="1rem">{t('invalidSafe2')}</Text>
-        <Button
-          onClick={() => {
-            window.location.reload();
-          }}
-        >
-          {t('refresh')}
-        </Button>
+        <Button onClick={router.refresh}>{t('refresh')}</Button>
       </VStack>
     </Center>
   );

diff --git a/src/components/pages/DaoDashboard/Info/ParentLink.tsx b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
@@ -1,4 +1,5 @@
 import { Link, HStack, Image, Text, LinkProps } from '@chakra-ui/react';
+import NextLink from 'next/link';
 import { useTranslation } from 'react-i18next';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { useFractal } from '../../../../providers/App/AppProvider';
@@ -22,6 +23,7 @@ export function ParentLink({ ...rest }: LinkProps) {
       _hover={{ textDecoration: 'none', color: 'gold.500-hover' }}
       href={DAO_ROUTES.dao.relative(nodeHierarchy.parentAddress)}
       marginBottom="1rem"
+      as={NextLink}
       {...rest}
     >
       <HStack>

diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
@@ -1,4 +1,5 @@
 import { Box, Flex, Text, Spacer, HStack, FlexProps, Link, Center } from '@chakra-ui/react';
+import NextLink from 'next/link';
 import { DAO_ROUTES } from '../../../constants/routes';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -74,6 +75,7 @@ export function DAOInfoCard({
       >
         <HStack>
           <Link
+            as={NextLink}
             pointerEvents={isCurrentDAO ? 'none' : undefined}
             href={DAO_ROUTES.dao.relative(displayedAddress)}
             _hover={{ textDecoration: 'none' }}
@@ -101,7 +103,10 @@ export function DAOInfoCard({
             data-testid="DAOInfo-favorite"
           />
           {childCount && childCount > 0 && (
-            <Link href={DAO_ROUTES.hierarchy.relative(displayedAddress)}>
+            <Link
+              href={DAO_ROUTES.hierarchy.relative(displayedAddress)}
+              as={NextLink}
+            >
               <Box
                 bg="chocolate.500"
                 borderRadius="4px"

diff --git a/src/components/ui/utils/ErrorFallback.tsx b/src/components/ui/utils/ErrorFallback.tsx
@@ -1,13 +1,15 @@
 import { Link } from '@chakra-ui/next-js';
 import { Box, Button, Center, Flex, Text } from '@chakra-ui/react';
 import { Alert } from '@decent-org/fractal-ui';
+import { useRouter } from 'next/navigation';
 import { Trans, useTranslation } from 'react-i18next';
 import { CONTENT_HEIGHT } from '../../../constants/common';
 import { URL_DISCORD } from '../../../constants/url';
 import { InfoBox } from '../containers/InfoBox';
 
 export function ErrorFallback() {
   const { t } = useTranslation();
+  const router = useRouter();
   return (
     <Center h={CONTENT_HEIGHT}>
       <Box maxWidth="fit-content">
@@ -36,7 +38,7 @@ export function ErrorFallback() {
                 />
               </Trans>
             </Text>
-            <Button onClick={() => window.location.reload()}>{t('reload')}</Button>
+            <Button onClick={router.refresh}>{t('reload')}</Button>
           </Flex>
         </InfoBox>
       </Box>