DRY up the NavigationLink and NavigationExternalLink into one component

decentdao · Apr 26, 2024 · 95e0488 · 95e0488
1 parent a13cb0c
commit 95e0488
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 100 deletions.
diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx
diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx
@@ -1,50 +1,102 @@
 import { Box, Hide, Text, Flex } from '@chakra-ui/react';
 import { Icon } from '@phosphor-icons/react';
+import { TFunction } from 'i18next';
+import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-interface INavigationLink {
-  href: string;
+function LinkContainer({ link }: { link: ReactElement }) {
+  return <Box py={3}>{link}</Box>;
+}
+
+function LinkContent({
+  labelKey,
+  NavigationIcon,
+  t,
+}: {
   labelKey: string;
-  testId: string;
   NavigationIcon: Icon;
-  target?: string;
-  rel?: string;
-  closeDrawer?: () => void;
+  t: TFunction<'navigation', undefined>;
+}) {
+  return (
+    <Flex>
+      <Box w={6}>{<NavigationIcon size={24} />}</Box>
+      <Box
+        mx={3}
+        whiteSpace="nowrap"
+      >
+        {t(labelKey)}
+      </Box>
+      <Hide above="md">
+        <Text textStyle="text-md-mono-medium">{t(labelKey)}</Text>
+      </Hide>
+    </Flex>
+  );
 }
 
 export function NavigationLink({
+  href,
   labelKey,
   testId,
   NavigationIcon,
+  scope,
   closeDrawer,
-  href,
   ...rest
-}: INavigationLink) {
+}: {
+  href: string;
+  labelKey: string;
+  testId: string;
+  NavigationIcon: Icon;
+  scope: 'internal' | 'external';
+  closeDrawer?: () => void;
+}) {
   const { t } = useTranslation('navigation');
 
-  return (
-    <Box py={3}>
-      <Link
-        data-testid={testId}
-        aria-label={t(labelKey)}
-        to={href}
-        {...rest}
-        onClick={closeDrawer}
-      >
-        <Flex>
-          <Box w={6}>{<NavigationIcon size={24} />}</Box>
-          <Box
-            mx={3}
-            whiteSpace="nowrap"
-          >
-            {t(labelKey)}
-          </Box>
-          <Hide above="md">
-            <Text textStyle="text-md-mono-medium">{t(labelKey)}</Text>
-          </Hide>
-        </Flex>
-      </Link>
-    </Box>
+  const linkContent = (
+    <LinkContent
+      labelKey={labelKey}
+      NavigationIcon={NavigationIcon}
+      t={t}
+    />
   );
+
+  if (scope === 'internal') {
+    return (
+      <LinkContainer
+        link={
+          <Link
+            data-testid={testId}
+            aria-label={t(labelKey)}
+            to={href}
+            onClick={closeDrawer}
+            {...rest}
+          >
+            {linkContent}
+          </Link>
+        }
+      />
+    );
+  }
+
+  if (scope === 'external') {
+    return (
+      <LinkContainer
+        link={
+          <a
+            data-testid={testId}
+            aria-label={t(labelKey)}
+            href={href}
+            onClick={closeDrawer}
+            {...rest}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {linkContent}
+          </a>
+        }
+      />
+    );
+  }
+
+  return null;
 }
diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx
@@ -13,7 +13,6 @@ import { DAO_ROUTES } from '../../../../constants/routes';
 import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url';
 import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { NavigationExternalLink } from './NavigationExternalLink';
 import { NavigationLink } from './NavigationLink';
 
 function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) {
@@ -36,28 +35,28 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) {
         borderLeftWidth={1}
         borderRightWidth={1}
       >
-        <NavigationExternalLink
+        <NavigationLink
           href={URL_FAQ}
-          ariaLabelKey="ariaLabelFAQ"
-          tooltipKey="faq"
+          labelKey="faq"
           testId="navigationExternal-faq"
           NavigationIcon={Question}
+          scope="external"
           closeDrawer={closeDrawer}
         />
-        <NavigationExternalLink
+        <NavigationLink
           href={URL_DISCORD}
-          ariaLabelKey="ariaLabelDiscord"
-          tooltipKey="discord"
+          labelKey="discord"
           testId="navigationExternal-discord"
           NavigationIcon={DiscordLogo}
+          scope="external"
           closeDrawer={closeDrawer}
         />
-        <NavigationExternalLink
+        <NavigationLink
           href={URL_DOCS}
-          ariaLabelKey="ariaLabelDocumentation"
-          tooltipKey="documentation"
+          labelKey="documentation"
           testId="navigationExternal-documentation"
           NavigationIcon={BookOpen}
+          scope="external"
           closeDrawer={closeDrawer}
         />
       </Box>
@@ -112,34 +111,39 @@ function InternalLinks({
           labelKey="home"
           testId="navigation-daoHomeLink"
           NavigationIcon={House}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
         <NavigationLink
           href={DAO_ROUTES.hierarchy.relative(addressPrefix, address)}
           labelKey="nodes"
           testId="navigation-hierarchy"
           NavigationIcon={GitFork}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
         <NavigationLink
           href={DAO_ROUTES.proposals.relative(addressPrefix, address)}
           labelKey="proposals"
           testId="navigation-proposalsLink"
           NavigationIcon={Scroll}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
         <NavigationLink
           href={DAO_ROUTES.treasury.relative(addressPrefix, address)}
           labelKey="treasury"
           testId="navigation-treasuryLink"
           NavigationIcon={Coins}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
         <NavigationLink
           href={DAO_ROUTES.proposalTemplates.relative(addressPrefix, address)}
           labelKey="proposalTemplates"
           testId="navigation-proposalTemplatesLink"
           NavigationIcon={SquaresFour}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
       </Box>

diff --git a/src/i18n/locales/en/navigation.json b/src/i18n/locales/en/navigation.json
@@ -11,8 +11,5 @@
   "ariaLabelHome": "Navigate Safe Home",
   "ariaLabelProposals": "Navigate Safe Proposals",
   "ariaLabelActivities": "Navigate Safe Activities",
-  "ariaLabelTreasury": "Navigate Safe Treasury",
-  "ariaLabelFAQ": "Link to FAQ",
-  "ariaLabelDiscord": "Link to Discord",
-  "ariaLabelDocumentation": "Link to documentation"
+  "ariaLabelTreasury": "Navigate Safe Treasury"
 }
diff --git a/src/i18n/locales/uk/navigation.json b/src/i18n/locales/uk/navigation.json
@@ -4,8 +4,5 @@
   "treasury": "Скарбниця",
   "faq": "FAQ",
   "documentation": "Документація",
-  "ariaLabelFractalBrand": "Перейти до Головної",
-  "ariaLabelFAQ": "Посилання на FAQ",
-  "ariaLabelDiscord": "Посилання на Discord",
-  "ariaLabelDocumentation": "Посилання на документацію"
+  "ariaLabelFractalBrand": "Перейти до Головної"
 }