fix: routes - Replaced class by func. comp (#159)

* refactor: updated routes

* fix: fixed conflicts issues

* fix: rollback port

Author: priscilawebdev

src/App/App.test.tsx

@@ -4,7 +4,8 @@ import { mount, ReactWrapper } from 'enzyme';
 import storage from '../utils/storage';
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 
-import App, { AppStateInterface } from './App';
+import App from './App';
+import { AppProps } from './AppContext';
 
 jest.mock('../utils/storage', () => {
   class LocalStorageMock {
@@ -33,7 +34,7 @@ jest.mock('../utils/api', () => ({
 }));
 
 describe('App', () => {
-  let wrapper: ReactWrapper<{}, AppStateInterface, App>;
+  let wrapper: ReactWrapper<{}, AppProps, App>;
 
   beforeEach(() => {
     wrapper = mount(<App />);

src/App/App.tsx

@@ -1,47 +1,23 @@
 import React, { Component, ReactElement } from 'react';
 import isNil from 'lodash/isNil';
+import 'normalize.css';
+import 'typeface-roboto/index.css';
 
 import storage from '../utils/storage';
 import { makeLogin, isTokenExpire } from '../utils/login';
 import Loading from '../components/Loading';
 import LoginModal from '../components/Login';
 import Header from '../components/Header';
 import { Container, Content } from '../components/Layout';
-import RouterApp from '../router';
 import API from '../utils/api';
-import 'typeface-roboto/index.css';
 import '../utils/styles/global';
-import 'normalize.css';
 import Footer from '../components/Footer';
-import { FormError } from '../components/Login/Login';
-import { PackageInterface } from '../components/Package/Package';
-
-interface AppContextData {
-  logoUrl: string;
-  scope: string;
-  isUserLoggedIn: boolean;
-  packages: PackageInterface[];
-  user: {
-    username?: string;
-  };
-}
-export const AppContext = React.createContext<AppContextData>({
-  logoUrl: window.VERDACCIO_LOGO,
-  user: {},
-  scope: window.VERDACCIO_SCOPE || '',
-  isUserLoggedIn: false,
-  packages: [],
-});
-const AppContextProvider = AppContext.Provider;
-export const AppContextConsumer = AppContext.Consumer;
-
-export interface AppStateInterface extends AppContextData {
-  error?: FormError;
-  showLoginModal: boolean;
-  isLoading: boolean;
-}
-export default class App extends Component<{}, AppStateInterface> {
-  public state: AppStateInterface = {
+
+import AppRoute from './AppRoute';
+import { AppProps, AppContextProvider } from './AppContext';
+
+export default class App extends Component<{}, AppProps> {
+  public state: AppProps = {
     logoUrl: window.VERDACCIO_LOGO,
     user: {},
     scope: window.VERDACCIO_SCOPE || '',
@@ -57,7 +33,7 @@ export default class App extends Component<{}, AppStateInterface> {
   }
 
   // eslint-disable-next-line no-unused-vars
-  public componentDidUpdate(_: AppStateInterface, prevState: AppStateInterface): void {
+  public componentDidUpdate(_: AppProps, prevState: AppProps): void {
     const { isUserLoggedIn } = this.state;
     if (prevState.isUserLoggedIn !== isUserLoggedIn) {
       this.loadOnHandler();
@@ -94,6 +70,7 @@ export default class App extends Component<{}, AppStateInterface> {
   public loadOnHandler = async () => {
     try {
       const packages = await API.request<any[]>('packages', 'GET');
+      // @ts-ignore: FIX THIS TYPE:  Type 'any[]' is not assignable to type '[]'
       this.setState({
         packages,
         isLoading: false,
@@ -176,9 +153,7 @@ export default class App extends Component<{}, AppStateInterface> {
     return (
       <>
         <Content>
-          <RouterApp onLogout={this.handleLogout} onToggleLoginModal={this.handleToggleLoginModal}>
-            {this.renderHeader()}
-          </RouterApp>
+          <AppRoute>{this.renderHeader()}</AppRoute>
         </Content>
         <Footer />
       </>

src/App/AppContext.tsx

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+
+import { FormError } from '../components/Login/Login';
+
+export interface AppProps {
+  error?: FormError;
+  logoUrl: string;
+  user: {
+    username?: string;
+  };
+  scope: string;
+  showLoginModal: boolean;
+  isUserLoggedIn: boolean;
+  packages: [];
+  isLoading: boolean;
+}
+
+export const AppContext = createContext<Partial<AppProps>>({});
+export const AppContextProvider = AppContext.Provider;
+export const AppContextConsumer = AppContext.Consumer;

src/App/AppRoute.tsx

@@ -0,0 +1,68 @@
+import React, { lazy, useContext, Suspense } from 'react';
+import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+
+import Loading from '../components/Loading';
+
+import { AppContext } from './AppContext';
+
+const NotFound = lazy(() => import('../components/NotFound'));
+const VersionContextProvider = lazy(() => import('../pages/Version/VersionContextProvider'));
+const VersionPage = lazy(() => import('../pages/Version'));
+const HomePage = lazy(() => import('../pages/home'));
+
+enum Route {
+  ROOT = '/',
+  SCOPE_PACKAGE = '/-/web/detail/@:scope/:package',
+  SCOPE_PACKAGE_VERSION = '/-/web/detail/@:scope/:package/v/:version',
+  PACKAGE = '/-/web/detail/:package',
+  PACKAGE_VERSION = '/-/web/detail/:package/v/:version',
+}
+
+const history = createBrowserHistory({
+  basename: window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix,
+});
+
+/* eslint react/jsx-max-depth: 0 */
+const AppRoute: React.FC = ({ children }) => {
+  const appContext = useContext(AppContext);
+  const { isUserLoggedIn, packages } = appContext;
+
+  return (
+    <Router history={history}>
+      <Suspense fallback={<Loading />}>
+        {children}
+        <Switch>
+          <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+            <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
+          </ReactRouterDomRoute>
+          <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+            <VersionContextProvider>
+              <VersionPage />
+            </VersionContextProvider>
+          </ReactRouterDomRoute>
+          <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+            <VersionContextProvider>
+              <VersionPage />
+            </VersionContextProvider>
+          </ReactRouterDomRoute>
+          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+            <VersionContextProvider>
+              <VersionPage />
+            </VersionContextProvider>
+          </ReactRouterDomRoute>
+          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+            <VersionContextProvider>
+              <VersionPage />
+            </VersionContextProvider>
+          </ReactRouterDomRoute>
+          <ReactRouterDomRoute>
+            <NotFound />
+          </ReactRouterDomRoute>
+        </Switch>
+      </Suspense>
+    </Router>
+  );
+};
+
+export default AppRoute;

src/router.tsx

@@ -59,10 +59,6 @@ export function formatDateDistance(lastUpdate: Date | string | number): string {
   return distanceInWordsToNow(new Date(lastUpdate));
 }
 
-export function buildScopePackage(scope: string, packageName: string): string {
-  return `@${scope}/${packageName}`;
-}
-
 /**
  * For <LastSync /> component
  * @param {array} uplinks