Refactor: Updated developers component structure (#360)

src/components/Developers/Developers.test.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContextProvider } from '../../pages/Version';
 
-import Developers, { DevelopersType } from './Developers';
-import { Fab } from './styles';
+import Developers, { DeveloperType, Fab } from './Developers';
 
 describe('test Developers', () => {
   const packageMeta = {
@@ -35,14 +34,13 @@ describe('test Developers', () => {
   };
 
   test('should render the component with no items', () => {
-    const type: DevelopersType = 'maintainers';
     const packageMeta = {
       latest: {},
     };
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.MAINTAINERS} />
       </DetailContextProvider>
     );
 
@@ -50,11 +48,10 @@ describe('test Developers', () => {
   });
 
   test('should render the component for maintainers with items', () => {
-    const type: DevelopersType = 'maintainers';
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.MAINTAINERS} />
       </DetailContextProvider>
     );
 
@@ -62,11 +59,10 @@ describe('test Developers', () => {
   });
 
   test('should render the component for contributors with items', () => {
-    const type: DevelopersType = 'contributors';
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.CONTRIBUTORS} />
       </DetailContextProvider>
     );
 
@@ -74,7 +70,6 @@ describe('test Developers', () => {
   });
 
   test('should test onClick the component avatar', () => {
-    const type: DevelopersType = 'contributors';
     const packageMeta = {
       latest: {
         packageName: 'foo',
@@ -95,7 +90,7 @@ describe('test Developers', () => {
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} visibleMax={1} />
+        <Developers type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
       </DetailContextProvider>
     );
 

src/components/Developers/Developers.tsx

@@ -1,60 +1,89 @@
-import React, { FC, Fragment } from 'react';
+import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import Add from '@material-ui/icons/Add';
+import styled from '@emotion/styled';
 
 import { DetailContext } from '../../pages/Version';
-import { AvatarTooltip } from '../AvatarTooltip';
+import Tooltip from '../../muiComponents/Tooltip';
+import Avatar from '../../muiComponents/Avatar';
+import Box from '../../muiComponents/Box';
+import Text from '../../muiComponents/Text';
+import FloatingActionButton from '../../muiComponents/FloatingActionButton';
+import { Theme } from '../../design-tokens/theme';
 
-import { Details, StyledText, Content, Fab } from './styles';
+import getUniqueDeveloperValues from './get-unique-developer-values';
 
-export type DevelopersType = 'contributors' | 'maintainers';
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
+  backgroundColor: props.theme && props.theme.palette.primary.main,
+  color: props.theme && props.theme.palette.white,
+}));
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
 
 interface Props {
-  type: DevelopersType;
+  type: DeveloperType;
   visibleMax?: number;
 }
 
+export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
+}));
+
+const StyledBox = styled(Box)({
+  '> *': {
+    margin: 5,
+  },
+});
+
 export const VISIBLE_MAX = 6;
 
-const Developers: FC<Props> = ({ type, visibleMax }) => {
-  const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
-  const { packageMeta } = React.useContext(DetailContext);
+const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
+  const detailContext = useContext(DetailContext);
 
-  const handleLoadMore = (): void => {
-    setVisibleDevs(visibleDevs + VISIBLE_MAX);
-  };
-
-  const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
-    const { name: packageName, version } = packageMeta.latest;
-
-    return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />;
-  };
-
-  const renderDevelopers = (developers, packageMeta): JSX.Element => {
-    const listVisibleDevelopers = developers.slice(0, visibleDevs);
-
-    return (
-      <Fragment>
-        <StyledText variant={'subtitle1'}>{type}</StyledText>
-        <Content>
-          {listVisibleDevelopers.map(developer => (
-            <Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
-          ))}
-          {visibleDevs < developers.length && (
-            <Fab onClick={handleLoadMore} size="small">
-              <Add />
-            </Fab>
-          )}
-        </Content>
-      </Fragment>
-    );
-  };
-
-  const developerList = packageMeta && packageMeta.latest[type];
-  if (!developerList || developerList.length === 0) {
-    return null;
+  if (!detailContext) {
+    throw Error("The app's detail Context was not correct used");
   }
 
-  return renderDevelopers(developerList, packageMeta);
+  const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
+    detailContext.packageMeta,
+    type,
+  ]);
+
+  const [visibleDevelopersMax, setVisibleDevelopersMax] = useState(visibleMax);
+  const [visibleDevelopers, setVisibleDevelopers] = useState(developers);
+
+  useEffect(() => {
+    if (!developers) return;
+    setVisibleDevelopers(developers.slice(0, visibleDevelopersMax));
+  }, [developers, visibleDevelopersMax]);
+
+  const handleSetVisibleDevelopersMax = useCallback(() => {
+    setVisibleDevelopersMax(visibleDevelopersMax + VISIBLE_MAX);
+  }, [visibleDevelopersMax]);
+
+  if (!visibleDevelopers || !developers) return null;
+
+  return (
+    <>
+      <StyledText variant={'subtitle1'}>{type}</StyledText>
+      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
+        {visibleDevelopers.map(visibleDeveloper => (
+          <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
+            <Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
+          </Tooltip>
+        ))}
+        {visibleDevelopersMax < developers.length && (
+          <Fab onClick={handleSetVisibleDevelopersMax} size="small">
+            <Add />
+          </Fab>
+        )}
+      </StyledBox>
+    </>
+  );
 };
 
 export default Developers;

src/components/Developers/get-unique-developer-values.ts

@@ -0,0 +1,12 @@
+import { Developer } from '../../../types/packageMeta';
+
+function getUniqueDeveloperValues(developers?: Array<Developer>): undefined | Array<Developer> {
+  if (!developers) return;
+  return developers.reduce(
+    (accumulator: Array<Developer>, current: Developer) =>
+      accumulator.some(developer => developer.email === current.email) ? accumulator : [...accumulator, current],
+    []
+  );
+}
+
+export default getUniqueDeveloperValues;

src/components/Developers/index.ts

@@ -1 +1 @@
-export { default } from './Developers';
+export { default, DeveloperType } from './Developers';