Routes - Replaced class by func. comp

src/App/App.tsx

@@ -28,7 +28,7 @@ export interface AppStateInterface {
   scope: string;
   showLoginModal: boolean;
   isUserLoggedIn: boolean;
-  packages: any[];
+  packages: [];
   isLoading: boolean;
 }
 export default class App extends Component<{}, AppStateInterface> {
@@ -85,6 +85,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,

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,53 @@
+import React, { lazy, useContext, Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { Route as Routes } from '../routers';
+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'));
+
+/* eslint react/jsx-max-depth: 0 */
+const AppRoute: React.FC = () => {
+  const appContext = useContext(AppContext);
+  const { isUserLoggedIn, packages } = appContext;
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Switch>
+        <Route exact={true} path={Routes.ROOT}>
+          <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
+        </Route>
+        <Route exact={true} path={Routes.PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </Route>
+        <Route exact={true} path={Routes.PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </Route>
+        <Route exact={true} path={Routes.SCOPE_PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </Route>
+        <Route exact={true} path={Routes.SCOPE_PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </Route>
+        <Route>
+          <NotFound />
+        </Route>
+      </Switch>
+    </Suspense>
+  );
+};
+
+export default AppRoute;

src/routers.ts

@@ -0,0 +1,7 @@
+export 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',
+}

src/utils/package.ts

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