fix: remove prevent default and use react context (#411)

* fix: remove prevent default and use react context

* chore: remove string check

Author: juanpicado

src/components/DetailSidebar/DetailSidebar.tsx

@@ -38,7 +38,7 @@ const DetailSidebar: React.FC = () => {
       />
       <ActionBar />
       <Install />
-      {packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
+      <DetailSidebarFundButton />
       <Repository />
       <Engines />
       <Dist />

src/components/DetailSidebar/DetailSidebarFundButton.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { render } from '../../utils/test-react-testing-library';
+import { DetailContext, DetailContextProps } from '../../pages/Version';
+
+import DetailSidebarFundButton from './DetailSidebarFundButton';
+
+const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({ contextValue }) => (
+  <DetailContext.Provider value={contextValue}>
+    <DetailSidebarFundButton />
+  </DetailContext.Provider>
+);
+
+const detailContextValue: DetailContextProps = {
+  packageName: 'foo',
+  readMe: 'test',
+  enableLoading: () => {},
+  isLoading: false,
+  hasNotBeenFound: false,
+  packageMeta: {
+    _uplinks: {},
+    latest: {
+      name: '@verdaccio/local-storage',
+      version: '8.0.1-next.1',
+      dist: { fileCount: 0, unpackedSize: 0, tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz' },
+      homepage: 'https://verdaccio.org',
+      bugs: {
+        url: 'https://github.com/verdaccio/monorepo/issues',
+      },
+    },
+  },
+};
+
+describe('test DetailSidebarFundButton', () => {
+  test('should not display the button if fund is missing', () => {
+    const wrapper = render(<ComponentToBeRendered contextValue={detailContextValue} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is missing', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {},
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not a string', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: null,
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not an url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'somethign different as url',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should display the button if url is a valid url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'https://opencollective.com/verdaccio',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.getByText('Fund')).toBeTruthy();
+  });
+});

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -1,10 +1,12 @@
-import React, { MouseEvent } from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
 
 import Button from '../../muiComponents/Button';
 import Link from '../Link';
+import { isURL } from '../../utils/url';
 import { Theme } from '../../design-tokens/theme';
+import { DetailContext } from '../../pages/Version';
 
 const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
   marginTop: theme && theme.spacing(1),
@@ -21,21 +23,21 @@ const StyledFundStrong = styled('strong')({
   marginRight: 3,
 });
 
-interface Props {
-  to: string;
-}
-
 /* eslint-disable react/jsx-no-bind */
-const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
-  const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
+const DetailSidebarFundButton: React.FC = () => {
+  const detailContext = useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  const fundingUrl = packageMeta?.latest?.funding?.url as string;
+
+  if (!isURL(fundingUrl)) {
+    return null;
+  }
+
   return (
-    <StyledLink external={true} to={to}>
-      <Button
-        color="primary"
-        fullWidth={true}
-        onClick={preventDefault}
-        startIcon={<StyledFavoriteIcon />}
-        variant="outlined">
+    <StyledLink external={true} to={fundingUrl}>
+      <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
         <StyledFundStrong>{'Fund'}</StyledFundStrong>
         {'this package'}
       </Button>