fixup! feat: refactor CardBase with new RouterLink

gravity-ui · May 29, 2023 · 7a4fb6a · 7a4fb6a
1 parent 788e380
commit 7a4fb6a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 32 deletions.
diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 
-import {Button, HTML, Media, RouterLink} from '../../components';
+import {Button, HTML, Media} from '../../components';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
@@ -141,14 +141,12 @@ export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
                                         <div className={b('buttons')} data-qa="header-buttons">
                                             {buttons &&
                                                 buttons.map((button, index) => (
-                                                    <RouterLink href={button.url} key={index}>
-                                                        <Button
-                                                            key={index}
-                                                            className={b('button')}
-                                                            size="xl"
-                                                            {...button}
-                                                        />
-                                                    </RouterLink>
+                                                    <Button
+                                                        key={index}
+                                                        className={b('button')}
+                                                        size="xl"
+                                                        {...button}
+                                                    />
                                                 ))}
                                         </div>
                                     )}

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,6 +3,7 @@ import React, {useCallback, useContext} from 'react';
 import {Button as CommonButton, Icon, Platform, StoreBadge} from '@gravity-ui/uikit';
 
 import {LocaleContext} from '../../context/localeContext/localeContext';
+import {LocationContext} from '../../context/locationContext';
 import {useAnalytics} from '../../hooks';
 import {useMetrika} from '../../hooks/useMetrika';
 import {Github} from '../../icons';
@@ -25,6 +26,7 @@ const b = block('button-block');
 
 const Button = (props: ButtonProps) => {
     const handleMetrika = useMetrika();
+    const {Link} = useContext(LocationContext);
     const {lang, tld} = useContext(LocaleContext);
     const {
         className,
@@ -95,6 +97,7 @@ const Button = (props: ButtonProps) => {
             size={toCommonSize(size as OldButtonSize)}
             href={url ? setUrlTld(url, tld) : undefined}
             width={width}
+            component={Link}
             {...buttonProps}
         >
             {icon && buttonImg.position === 'left' ? icon : null}

diff --git a/src/components/RouterLink/RouterLink.tsx b/src/components/RouterLink/RouterLink.tsx
@@ -22,12 +22,12 @@ const RouterLink = ({
 }: WithChildren<RouterLinkProps>) => {
     const {Link} = useContext(LocationContext);
 
-    const isExternal = href.startsWith('http://') || href.startsWith('https://');
+    const isExternal = href?.startsWith('http://') || href?.startsWith('https://');
     const shouldAnchorTag = typeof href === 'string' && (!Link || isExternal || forceAnchor);
     const component = shouldAnchorTag ? 'a' : Link;
 
     if (!component) {
-        return null;
+        return <div>{JSON.stringify({isExternal, shouldAnchorTag, component})}</div>;
     }
 
     const linkProps = {
@@ -41,7 +41,8 @@ const RouterLink = ({
         {
             href,
             ...(shouldAnchorTag ? linkProps : {}),
-            commonProps,
+            ...commonProps,
+            area: shouldAnchorTag ? '1' : '2',
         },
         children,
     );

diff --git a/src/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.tsx b/src/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Button, RouterLink} from '../../../../../components';
+import {Button} from '../../../../../components';
 import {BlockIdContext} from '../../../../../context/blockIdContext';
 import {ButtonProps} from '../../../../../models';
 import {block} from '../../../../../utils';
@@ -15,17 +15,11 @@ const ANALYTICS_ID = 'navigation';
 type NavigationButtonProps = Pick<NavigationItemProps, 'className'> & ButtonProps;
 
 export const NavigationButton: React.FC<NavigationButtonProps> = (props) => {
-    const {url, target, className} = props;
+    const {url, className} = props;
     const classes = b(null, className);
     return (
         <BlockIdContext.Provider value={ANALYTICS_ID}>
-            {target ? (
-                <Button className={classes} {...props} url={url} />
-            ) : (
-                <RouterLink href={url}>
-                    <Button {...props} className={classes} url={url} />
-                </RouterLink>
-            )}
+            <Button {...props} className={classes} url={url} />
         </BlockIdContext.Provider>
     );
 };
diff --git a/src/sub-blocks/BannerCard/BannerCard.tsx b/src/sub-blocks/BannerCard/BannerCard.tsx
@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 
-import {BackgroundImage, Button, HTML, RouterLink, YFMWrapper} from '../../components';
+import {BackgroundImage, Button, HTML, YFMWrapper} from '../../components';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
 import {BannerCardProps} from '../../models';
 import {block, getThemedValue} from '../../utils';
@@ -42,16 +42,14 @@ export const BannerCard = (props: BannerCardProps) => {
                             />
                         )}
                     </div>
-                    <RouterLink href={url}>
-                        <Button
-                            className={b('button')}
-                            theme="raised"
-                            size="xl"
-                            text={text}
-                            url={url}
-                            target={target}
-                        />
-                    </RouterLink>
+                    <Button
+                        className={b('button')}
+                        theme="raised"
+                        size="xl"
+                        text={text}
+                        url={url}
+                        target={target}
+                    />
                 </div>
                 <BackgroundImage
                     className={b('image')}