fix: version Page - Replaces class by func. (#171)

* refactor: updated version page

* refactor: rollback context

* fix: added version provider

src/pages/Version/Version.test.tsx

@@ -1,92 +1,59 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
+import { render } from '@testing-library/react';
 import { waitForElement } from '@testing-library/dom';
 
-import vueMetadata from '../../../test/fixtures/metadata/vue.json';
-import ErrorBoundary from '../../App/AppError';
+import { NOT_FOUND_TEXT } from '../../components/NotFound';
 
 import Version from './Version';
+import { DetailContext } from './context';
+import data from './__partials__/data.json';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
 jest.mock('../../muiComponents/Avatar');
 
-// eslint-disable-next-line react/display-name
-jest.mock('../../components/NotFound', () => () => <div>{'Not found'}</div>);
+const detailContextValue = {
+  packageName: 'foo',
+  packageMeta: data,
+  readMe: 'Read me!',
+  enableLoading: jest.fn(),
+  isLoading: false,
+  hasNotBeenFound: false,
+  version: '1.0.0',
+};
 
 describe('test Version page', () => {
-  jest.setTimeout(40000000);
-  beforeAll(() => {
-    // FIXME: a better way to mock this
-    // @ts-ignore
-    global.window.VERDACCIO_API_URL = 'http://test';
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    // @ts-ignore
-    fetch.resetMocks();
-  });
-
+  /* eslint-disable react/jsx-max-depth */
   test('should render the version page', async () => {
-    const readmeText = 'test';
-    // @ts-ignore
-    fetch.mockResponses(
-      [[JSON.stringify(vueMetadata)], { status: 200, headers: { 'content-type': 'application/json' } }],
-      [[`<p align="center">${readmeText}</p>`], { status: 200, headers: { 'content-type': 'text/html' } }]
-    );
-
     const { getByTestId, getByText } = render(
-      <ErrorBoundary>
-        <MemoryRouter>
-          <Version match={{ params: { ['package']: 'vue' } }}></Version>
-        </MemoryRouter>
-      </ErrorBoundary>
+      <MemoryRouter>
+        <DetailContext.Provider value={detailContextValue}>
+          <Version />
+        </DetailContext.Provider>
+      </MemoryRouter>
     );
-
-    // first it display loading
-    const hasLoading = getByTestId('loading');
-    expect(hasLoading).toBeTruthy();
-
     // we wait fetch response (mocked above)
     await waitForElement(() => getByTestId('version-layout'));
-
     // check whether readme was loaded
-    const hasReadme = getByText(readmeText);
-
+    const hasReadme = getByText(detailContextValue.readMe);
     expect(hasReadme).toBeTruthy();
   });
 
   test('should render 404 page if the resources are not found', async () => {
-    // @ts-ignore
-    fetch.mockResponses(
-      [[JSON.stringify({})], { status: 404, headers: { 'content-type': 'application/json' } }],
-      [[``], { status: 404, headers: { 'content-type': 'text/html' } }]
+    const { getByText } = render(
+      <MemoryRouter>
+        <DetailContext.Provider
+          value={{
+            ...detailContextValue,
+            hasNotBeenFound: true,
+          }}>
+          <Version />
+        </DetailContext.Provider>
+      </MemoryRouter>
     );
-
-    const { getByTestId, getByText } = render(
-      <ErrorBoundary>
-        <MemoryRouter>
-          <Version match={{ params: { ['package']: 'vue' } }}></Version>
-        </MemoryRouter>
-      </ErrorBoundary>
-    );
-
-    // first it display loading
-    const hasLoading = getByTestId('loading');
-    expect(hasLoading).toBeTruthy();
-
     // we wait fetch response (mocked above)
-    await waitForElement(() => getByText('Not found'));
-
-    // check whether readme was loaded
-    const hasReadme = getByText('Not found');
-
-    expect(hasReadme).toBeTruthy();
+    const notFoundElement = await waitForElement(() => getByText(NOT_FOUND_TEXT));
+    expect(notFoundElement).toBeTruthy();
   });
 
   // Wanna contribute? Here we some scenarios we need to test

src/pages/Version/Version.tsx

@@ -1,98 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 
-import { callDetailPage, callReadme } from '../../utils/calls';
-import { buildScopePackage } from '../../utils/package';
 import Loading from '../../components/Loading/Loading';
 import NotFound from '../../components/NotFound';
 
-import { Layout } from './Layout';
-import { DetailContextProvider } from './context';
-import { StateInterface } from './types';
+import VersionLayout from './VersionLayout';
+import { DetailContext } from './context';
 
-export function getRouterPackageName(params): string {
-  const packageName = params.package;
-  const { scope } = params;
-  if (scope) {
-    return buildScopePackage(scope, packageName);
+const Version: React.FC = () => {
+  const detailContext = useContext(DetailContext);
+  const { isLoading, hasNotBeenFound } = detailContext;
+
+  if (isLoading) {
+    return <Loading />;
   }
 
-  return packageName;
-}
-
-function fillTitle(text: string): string {
-  return `Verdaccio - ${text}`;
-}
-
-function isVersionValid(packageMeta, packageVersion): boolean {
-  const hasVersion = typeof packageVersion !== 'undefined';
-  if (!hasVersion) {
-    // if is undefined, that means versions does not exist, we continue
-    return true;
+  if (hasNotBeenFound) {
+    return <NotFound />;
   }
 
-  const hasMatchVersion = Object.keys(packageMeta.versions).includes(packageVersion);
-  return hasMatchVersion;
-}
-
-const Version = ({ match: { params } }) => {
-  const pkgName = getRouterPackageName(params);
-  const [readMe, setReadme] = useState();
-  const [packageName, setPackageName] = useState(pkgName);
-  // eslint-disable-next-line no-unused-vars
-  const [packageVersion, setPackageVersion] = useState(params.version);
-  const [packageMeta, setPackageMeta] = useState();
-  const [isLoading, setIsLoading] = useState(true);
-  const [notFound, setNotFound] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const packageMeta = (await callDetailPage(packageName, packageVersion)) as Partial<StateInterface>;
-        const readMe = (await callReadme(packageName, packageVersion)) as Partial<StateInterface>;
-        if (isVersionValid(packageMeta, packageVersion)) {
-          setReadme(readMe);
-          setPackageMeta(packageMeta);
-          setIsLoading(false);
-        } else {
-          setIsLoading(false);
-          setNotFound(true);
-        }
-      } catch (error) {
-        setNotFound(true);
-        setIsLoading(false);
-      }
-    })();
-  }, [packageName, packageVersion]);
-
-  useEffect(() => {
-    if (!packageVersion) {
-      document.title = fillTitle(packageName);
-    } else {
-      document.title = fillTitle(`${packageName}@${packageVersion}`);
-    }
-  }, [packageName, packageVersion]);
-
-  useEffect(() => {
-    const pkgName = getRouterPackageName(params);
-
-    setPackageName(pkgName);
-    setPackageVersion(params.version);
-  }, [params, setPackageName, setPackageVersion]);
-
-  const isNotFound = notFound || typeof packageMeta === 'undefined' || typeof packageName === 'undefined' || typeof readMe === 'undefined';
-  const renderContent = (): React.ReactElement<HTMLElement> => {
-    if (isLoading) {
-      return <Loading />;
-    } else if (isNotFound) {
-      return <NotFound />;
-    } else {
-      return <Layout />;
-    }
-  };
-
-  return (
-    <DetailContextProvider value={{ packageMeta, packageVersion, readMe, packageName, enableLoading: setIsLoading }}>{renderContent()}</DetailContextProvider>
-  );
+  return <VersionLayout />;
 };
 
 export default Version;

src/pages/Version/VersionContextProvider.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { callDetailPage, callReadme } from '../../utils/calls';
+
+import getRouterPackageName from './get-route-package-name';
+import { DetailContext } from './context';
+import isPackageVersionValid from './is-package-version-valid';
+
+interface Params {
+  scope?: string;
+  package: string;
+  version?: string;
+}
+
+const VersionContextProvider: React.FC = ({ children }) => {
+  const { version, package: pkgName, scope } = useParams<Params>();
+  const [packageName, setPackageName] = useState(getRouterPackageName(pkgName, scope));
+  const [packageVersion, setPackageVersion] = useState(version);
+  const [packageMeta, setPackageMeta] = useState();
+  const [readMe, setReadme] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasNotBeenFound, setHasNotBeenFound] = useState();
+
+  useEffect(() => {
+    const updatedPackageName = getRouterPackageName(pkgName, scope);
+    setPackageName(updatedPackageName);
+  }, [pkgName, scope]);
+
+  useEffect(() => {
+    setPackageVersion(version);
+  }, [version]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const packageMeta = await callDetailPage(packageName, packageVersion);
+        const readMe = await callReadme(packageName, packageVersion);
+        if (isPackageVersionValid(packageMeta, packageVersion)) {
+          setReadme(readMe);
+          setPackageMeta(packageMeta);
+          setIsLoading(false);
+        } else {
+          setIsLoading(false);
+          setHasNotBeenFound(true);
+        }
+      } catch (error) {
+        setHasNotBeenFound(true);
+        setIsLoading(false);
+      }
+    })();
+  }, [packageName, packageVersion]);
+
+  return (
+    <DetailContext.Provider
+      value={{
+        packageMeta,
+        packageVersion,
+        readMe,
+        packageName,
+        isLoading,
+        hasNotBeenFound,
+      }}>
+      {children}
+    </DetailContext.Provider>
+  );
+};
+
+export default VersionContextProvider;

src/pages/Version/VersionLayout.tsx

@@ -1,28 +1,20 @@
-import React, { FC, ReactElement } from 'react';
+import React from 'react';
 import Grid from '@material-ui/core/Grid';
 
 import DetailContainer from '../../components/DetailContainer';
 import DetailSidebar from '../../components/DetailSidebar';
 
-function renderDetail(): ReactElement<HTMLElement> {
-  return <DetailContainer />;
-}
-
-function renderSidebar(): ReactElement<HTMLElement> {
-  return <DetailSidebar />;
-}
-
-const Layout: FC<{}> = () => {
+const VersionLayout: React.FC = () => {
   return (
     <Grid className={'container content'} container={true} data-testid="version-layout" spacing={0}>
       <Grid item={true} md={8} xs={12}>
-        {renderDetail()}
+        <DetailContainer />
       </Grid>
       <Grid item={true} md={4} xs={12}>
-        {renderSidebar()}
+        <DetailSidebar />
       </Grid>
     </Grid>
   );
 };
 
-export { Layout };
+export default VersionLayout;

src/pages/Version/context.ts

@@ -1,8 +1,26 @@
-import React, { Consumer, Provider } from 'react';
+import { createContext, Consumer, Provider } from 'react';
 
-import { DetailContextProps, VersionPageConsumerProps } from './types';
+import { PackageMetaInterface } from '../../../types/packageMeta';
+export interface DetailContextProps {
+  packageMeta: PackageMetaInterface;
+  packageVersion?: string;
+  readMe: string;
+  packageName: string;
+  enableLoading: () => void;
+  isLoading: boolean;
+  hasNotBeenFound: boolean;
+}
 
-export const DetailContext = React.createContext<Partial<DetailContextProps>>({});
+export interface VersionPageConsumerProps {
+  packageMeta: PackageMetaInterface;
+  readMe: string;
+  packageName: string;
+  packageVersion?: string;
+  // FIXME: looking for the appropiated type here
+  enableLoading: any;
+}
+
+export const DetailContext = createContext<Partial<DetailContextProps>>({});
 
 export const DetailContextProvider: Provider<Partial<VersionPageConsumerProps>> = DetailContext.Provider;
 export const DetailContextConsumer: Consumer<Partial<VersionPageConsumerProps>> = DetailContext.Consumer;

src/pages/Version/get-route-package-name.ts

@@ -0,0 +1,9 @@
+function getRouterPackageName(packageName: string, scope?: string): string {
+  if (scope) {
+    return `@${scope}/${packageName}`;
+  }
+
+  return packageName;
+}
+
+export default getRouterPackageName;

src/pages/Version/index.ts

@@ -1,3 +1,2 @@
-export { DetailContextProps, VersionPageConsumerProps } from './types';
-export { DetailContext, DetailContextConsumer, DetailContextProvider } from './context';
+export { DetailContext, DetailContextConsumer, DetailContextProvider, DetailContextProps, VersionPageConsumerProps } from './context';
 export { default } from './Version';

src/pages/Version/is-package-version-valid.ts

@@ -0,0 +1,16 @@
+import { PackageMetaInterface } from '../../../types/packageMeta';
+
+function isPackageVersionValid(packageMeta: Partial<PackageMetaInterface>, packageVersion?: string): boolean {
+  if (!packageVersion || typeof packageVersion === 'undefined') {
+    // if is undefined, that means versions does not exist, we continue
+    return true;
+  }
+
+  if (packageMeta.versions) {
+    return Object.keys(packageMeta.versions).includes(packageVersion);
+  }
+
+  return false;
+}
+
+export default isPackageVersionValid;

src/pages/Version/styles.ts

@@ -1,11 +0,0 @@
-import styled from 'react-emotion';
-
-import colors from '../../utils/styles/colors';
-import { fontSize } from '../../utils/styles/sizes';
-import DialogTitle from '../../muiComponents/DialogTitle';
-
-export const Title = styled(DialogTitle)({
-  backgroundColor: colors.primary,
-  color: colors.white,
-  fontSize: fontSize.lg,
-});

src/pages/Version/types.ts

@@ -1,30 +0,0 @@
-import { PackageMetaInterface } from '../../../types/packageMeta';
-
-export interface DetailContextProps {
-  packageMeta: PackageMetaInterface;
-  packageVersion?: string;
-  readMe: string;
-  packageName: string;
-  enableLoading: () => void;
-}
-
-export interface VersionPageConsumerProps {
-  packageMeta: PackageMetaInterface;
-  readMe: string;
-  packageName: string;
-  packageVersion?: string;
-  // FIXME: looking for the appropiated type here
-  enableLoading: any;
-}
-
-export interface PropsInterface {
-  match: boolean;
-}
-
-export interface StateInterface {
-  readMe: string;
-  packageName: string;
-  packageMeta?: PackageMetaInterface;
-  isLoading: boolean;
-  notFound: boolean;
-}

src/router.tsx

@@ -12,6 +12,7 @@ const history = createBrowserHistory({
 });
 
 const NotFound = React.lazy(() => import('./components/NotFound'));
+const VersionContextProvider = React.lazy(() => import('./pages/Version/VersionContextProvider'));
 const VersionPackage = React.lazy(() => import('./pages/Version'));
 const HomePage = React.lazy(() => import('./pages/home'));
 
@@ -61,13 +62,11 @@ class RouterApp extends Component<RouterAppProps> {
     );
   };
 
-  public renderVersionPage = (routerProps): ReactElement<HTMLDivElement> => {
+  public renderVersionPage = (): ReactElement<HTMLDivElement> => {
     return (
-      <AppContextConsumer>
-        {function renderConsumerVersionPage({ isUserLoggedIn }) {
-          return <VersionPackage {...routerProps} isUserLoggedIn={isUserLoggedIn} />;
-        }}
-      </AppContextConsumer>
+      <VersionContextProvider>
+        <VersionPackage />
+      </VersionContextProvider>
     );
   };
 }