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

src/components/DetailContainer/DetailContainer.tsx

@@ -1,77 +1,33 @@
-import React, { Component, ReactElement, Fragment } from 'react';
+import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
+import Box from '@material-ui/core/Box';
 
-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';
+import { DetailContext } from '../../pages/Version';
 
-interface DetailContainerState {
-  tabPosition: number;
-}
+import DetailContainerTabs from './DetailContainerTabs';
+import DetailContainerContent from './DetailContainerContent';
+import { TabPosition } from './tabs';
 
-export const README_LABEL = 'Readme';
-export const DEPS_LABEL = 'Dependencies';
-export const VERSION_LABEL = 'Versions';
-export const UPLINKS_LABEL = 'Uplinks';
+const DetailContainer: React.FC = () => {
+  const [tabPosition, setTabPosition] = useState(TabPosition.README);
+  const detailContext = useContext(DetailContext);
+  const { readMe } = detailContext;
 
-class DetailContainer<P> extends Component<P, DetailContainerState> {
-  public state = {
-    tabPosition: 0,
-  };
+  const handleChangeTabPosition = useCallback(
+    (event: ChangeEvent<{}>) => {
+      event.preventDefault();
+      const eventTarget = event.target as HTMLSpanElement;
+      const chosentab = eventTarget.innerText as TabPosition;
+      setTabPosition(TabPosition[chosentab]);
+    },
+    [setTabPosition]
+  );
 
-  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} />;
-  };
-}
+  return (
+    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
+      <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
+    </Box>
+  );
+};
 
 export default DetailContainer;