fix: detailContainer Component - Replaced class by func. comp (#130)

* refactor: coverted class comp. into func.comp

* refactor: added forward ref comp.

* fix: fixed external link color

* fix: fixed typo

* refactor: applied feedbacks

Author: priscilawebdev

src/components/ActionBar/ActionBar.tsx

@@ -4,12 +4,12 @@ import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
 import List from '@material-ui/core/List';
-import Tooltip from '@material-ui/core/Tooltip';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
 import { Fab, ActionListItem } from './styles';
 import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';
+import Tooltip from '../../muiComponents/Tooltip';
 
 export interface Action {
   icon: string;

src/components/AutoComplete/styles.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { css } from 'react-emotion';
 import Paper from '@material-ui/core/Paper';
 
-import TextField from '../TextField';
+import TextField from '../../muiComponents/TextField';
 
 export interface InputFieldProps {
   color: string;
@@ -17,6 +17,7 @@ export const Wrapper = styled('div')({
   },
 });
 
+/* eslint-disable verdaccio/jsx-spread */
 export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
   <TextField
     {...others}

src/components/AvatarTooltip/AvatarTooltip.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 
 import Avatar from '@material-ui/core/Avatar';
-import Tooltip from '@material-ui/core/Tooltip';
 import { isEmail } from '../../utils/url';
 
+import Tooltip from '../../muiComponents/TextField';
+
 export interface AvatarDeveloper {
   name: string;
   packageName: string;

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -1,9 +1,9 @@
-import Tooltip from '@material-ui/core/Tooltip';
 import FileCopy from '@material-ui/icons/FileCopy';
 import React from 'react';
 
 import { copyToClipBoardUtility } from '../../utils/cli-utils';
 import { TEXT } from '../../utils/constants';
+import Tooltip from '../../muiComponents/Tooltip';
 
 import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
 

src/components/CopyToClipBoard/styles.ts

@@ -1,4 +1,4 @@
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '../../muiComponents/IconButton';
 import styled from 'react-emotion';
 
 export const ClipBoardCopy = styled('div')({

src/components/Dependencies/Dependencies.tsx

@@ -76,10 +76,6 @@ class DependencyBlock extends Component<{ title: string; dependencies: [] }> {
 }
 
 class Dependencies extends Component {
-  public state = {
-    tabPosition: 0,
-  };
-
   public render(): ReactElement<HTMLElement> {
     return (
       <DetailContextConsumer>

src/components/DetailContainer/DetailContainer.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import DetailContainer from './DetailContainer';
+
+describe('DetailContainer', () => {
+  test('renders correctly', () => {
+    const { container } = render(<DetailContainer />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  test.todo('should test click on tabs');
+});

src/components/DetailContainer/DetailContainer.tsx

@@ -1,77 +1,33 @@
-import React, { Component, ReactElement, Fragment } from 'react';
-
-import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
-import Readme from '../Readme';
-import Versions from '../Versions';
-import { preventXSS } from '../../utils/sec-utils';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import { Content } from './styles';
-import Dependencies from '../Dependencies';
-import UpLinks from '../UpLinks';
-
-interface DetailContainerState {
-  tabPosition: number;
-}
-
-export const README_LABEL = 'Readme';
-export const DEPS_LABEL = 'Dependencies';
-export const VERSION_LABEL = 'Versions';
-export const UPLINKS_LABEL = 'Uplinks';
-
-class DetailContainer<P> extends Component<P, DetailContainerState> {
-  public state = {
-    tabPosition: 0,
-  };
-
-  public render(): ReactElement<HTMLElement> {
-    return (
-      <DetailContextConsumer>
-        {context => {
-          return this.renderTabs(context as VersionPageConsumerProps);
-        }}
-      </DetailContextConsumer>
-    );
-  }
-
-  private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => {
-    event.preventDefault();
-    this.setState({ tabPosition });
-  };
-
-  private renderListTabs(tabPosition: number): React.ReactElement<HTMLElement> {
-    return (
-      <Tabs indicatorColor={'primary'} onChange={this.handleChange} textColor={'primary'} value={tabPosition} variant={'fullWidth'}>
-        <Tab data-testid={'readme-tab'} id={'readme-tab'} label={README_LABEL} />
-        <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={DEPS_LABEL} />
-        <Tab data-testid={'versions-tab'} id={'versions-tab'} label={VERSION_LABEL} />
-        <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={UPLINKS_LABEL} />
-      </Tabs>
-    );
-  }
-
-  private renderTabs = ({ readMe }) => {
-    const { tabPosition } = this.state;
-
-    return (
-      <Fragment>
-        <Content>
-          {this.renderListTabs(tabPosition)}
-          <br />
-          {tabPosition === 0 && this.renderReadme(readMe)}
-          {tabPosition === 1 && <Dependencies />}
-          {tabPosition === 2 && <Versions />}
-          {tabPosition === 3 && <UpLinks />}
-        </Content>
-      </Fragment>
-    );
-  };
-
-  private renderReadme = (readMe: string): ReactElement<HTMLElement> => {
-    const encodedReadme = preventXSS(readMe);
-
-    return <Readme description={encodedReadme} />;
-  };
-}
+import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
+import Box from '@material-ui/core/Box';
+
+import { DetailContext } from '../../pages/Version';
+
+import DetailContainerTabs from './DetailContainerTabs';
+import DetailContainerContent from './DetailContainerContent';
+import { TabPosition } from './tabs';
+
+const DetailContainer: React.FC = () => {
+  const [tabPosition, setTabPosition] = useState(TabPosition.README);
+  const detailContext = useContext(DetailContext);
+  const { readMe } = detailContext;
+
+  const handleChangeTabPosition = useCallback(
+    (event: ChangeEvent<{}>) => {
+      event.preventDefault();
+      const eventTarget = event.target as HTMLSpanElement;
+      const chosentab = eventTarget.innerText as TabPosition;
+      setTabPosition(TabPosition[chosentab]);
+    },
+    [setTabPosition]
+  );
+
+  return (
+    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
+      <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
+    </Box>
+  );
+};
 
 export default DetailContainer;

src/components/DetailContainer/DetailContainerContent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Dependencies from '../Dependencies';
+import UpLinks from '../UpLinks';
+import Versions from '../Versions';
+
+import DetailContainerContentReadme from './DetailContainerContentReadme';
+import { TabPosition } from './tabs';
+
+interface Props {
+  tabPosition: TabPosition;
+  readDescription?: string;
+}
+
+const DetailContainerContent: React.FC<Props> = ({ tabPosition, readDescription }) => {
+  switch (tabPosition) {
+    case TabPosition.README:
+      return <DetailContainerContentReadme description={readDescription} />;
+    case TabPosition.UPLINKS:
+      return <UpLinks />;
+    case TabPosition.VERSIONS:
+      return <Versions />;
+    case TabPosition.DEPENDENCIES:
+      return <Dependencies />;
+    default:
+      return null;
+  }
+};
+
+export default DetailContainerContent;

src/components/DetailContainer/DetailContainerContentReadme.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { preventXSS } from '../../utils/sec-utils';
+
+import Readme from '../Readme';
+
+interface Props {
+  description?: string;
+}
+
+const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
+  if (!description) return null;
+  const encodedReadme = preventXSS(description);
+  return <Readme description={encodedReadme} />;
+};
+
+export default DetailContainerContentReadme;