Repository Component - Replaced class by func. comp (#323)

src/components/Repository/Repository.tsx

@@ -1,57 +1,80 @@
 /* eslint react/jsx-max-depth: 0 */
 
-import React, { Component, Fragment, ReactElement } from 'react';
+import React from 'react';
+import styled from '@emotion/styled';
 
 import Avatar from '../../muiComponents/Avatar';
-import { DetailContextConsumer } from '../../pages/Version';
+import Text from '../../muiComponents/Text';
+import ListItem from '../../muiComponents/ListItem';
+import ListItemText from '../../muiComponents/ListItemText';
 import { isURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
 import List from '../../muiComponents/List';
+import { DetailContext } from '../../pages/Version';
+import { Theme } from '../../design-tokens/theme';
+import { fontWeight } from '../../utils/styles/sizes';
 
 import git from './img/git.png';
-import { GithubLink, StyledText, RepositoryListItem, RepositoryListItemText } from './styles';
 
-class Repository extends Component {
-  public render(): ReactElement<HTMLElement> {
-    return (
-      <DetailContextConsumer>
-        {context => {
-          return context && context.packageMeta && this.renderRepository(context.packageMeta);
-        }}
-      </DetailContextConsumer>
-    );
+const StyledText = styled(Text)({
+  fontWeight: fontWeight.bold,
+  textTransform: 'capitalize',
+});
+
+const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.primary.main,
+}));
+
+const RepositoryListItem = styled(ListItem)({
+  padding: 0,
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+const RepositoryListItemText = styled(ListItemText)({
+  padding: '0 10px',
+  margin: 0,
+});
+
+/* eslint-disable react/jsx-wrap-multilines */
+const Repository: React.FC = () => {
+  const detailContext = React.useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  if (!packageMeta?.latest?.repository?.url || !isURL(packageMeta.latest.repository.url)) {
+    return null;
   }
 
-  private renderRepositoryText(url: string): ReactElement<HTMLElement> {
-    return (
-      <GithubLink href={url} target="_blank">
-        {url}
-      </GithubLink>
-    );
-  }
+  const { url } = packageMeta.latest.repository;
 
-  private renderRepository = packageMeta => {
-    const { repository: { url = null } = {} } = packageMeta.latest;
-
-    if (!url || isURL(url) === false) {
-      return null;
+  const getCorrectRepositoryURL = (): string => {
+    if (!url.includes('git+')) {
+      return url;
     }
 
-    return (
-      <Fragment>
-        <List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
-          <RepositoryListItem button={true}>
-            <Avatar src={git} />
-            <RepositoryListItemText primary={this.renderContent(url)} />
-          </RepositoryListItem>
-        </List>
-      </Fragment>
-    );
+    return url.split('git+')[1];
   };
 
-  private renderContent(url: string): ReactElement<HTMLElement> {
-    return <CopyToClipBoard text={url}>{this.renderRepositoryText(url)}</CopyToClipBoard>;
-  }
-}
+  const repositoryURL = getCorrectRepositoryURL();
+
+  return (
+    <List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
+      <RepositoryListItem button={true}>
+        <Avatar src={git} />
+        <RepositoryListItemText
+          primary={
+            <CopyToClipBoard text={repositoryURL}>
+              <GithubLink href={repositoryURL} target="_blank">
+                {repositoryURL}
+              </GithubLink>
+            </CopyToClipBoard>
+          }
+        />
+      </RepositoryListItem>
+    </List>
+  );
+};
 
 export default Repository;