diff --git a/src/App/App.test.tsx b/src/App/App.test.tsx
index f197969..931c623 100644
--- a/src/App/App.test.tsx
+++ b/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();
diff --git a/src/App/App.tsx b/src/App/App.tsx
index fd0e8ba..0612048 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,5 +1,7 @@
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';
@@ -7,41 +9,15 @@ 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({
- logoUrl: window.VERDACCIO_LOGO,
- user: {},
- scope: window.VERDACCIO_SCOPE || '',
- isUserLoggedIn: false,
- packages: [],
-});
-const AppContextProvider = AppContext.Provider;
-export const AppContextConsumer = AppContext.Consumer;
+import AppRoute from './AppRoute';
+import { AppProps, AppContextProvider } from './AppContext';
-export interface AppStateInterface extends AppContextData {
- error?: FormError;
- showLoginModal: boolean;
- isLoading: boolean;
-}
-export default class App extends Component<{}, AppStateInterface> {
- public state: AppStateInterface = {
+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('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 (
<>
-
- {this.renderHeader()}
-
+ {this.renderHeader()}
diff --git a/src/App/AppContext.tsx b/src/App/AppContext.tsx
new file mode 100644
index 0000000..9d06e08
--- /dev/null
+++ b/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>({});
+export const AppContextProvider = AppContext.Provider;
+export const AppContextConsumer = AppContext.Consumer;
diff --git a/src/App/AppRoute.tsx b/src/App/AppRoute.tsx
new file mode 100644
index 0000000..46c745e
--- /dev/null
+++ b/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 (
+
+ }>
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AppRoute;
diff --git a/src/router.tsx b/src/router.tsx
deleted file mode 100644
index d780a43..0000000
--- a/src/router.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint react/jsx-max-depth:0 */
-
-import React, { Component, ReactElement } from 'react';
-import { Router, Route, Switch } from 'react-router-dom';
-import { createBrowserHistory } from 'history';
-
-import { AppContextConsumer } from './App/App';
-import Header from './components/Header';
-
-const history = createBrowserHistory({
- basename: window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix,
-});
-
-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'));
-
-interface RouterAppProps {
- onLogout: () => void;
- onToggleLoginModal: () => void;
-}
-
-class RouterApp extends Component {
- public render(): ReactElement {
- return (
-
-
- {this.renderHeader()}
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- public renderHeader = (): ReactElement => {
- const { onLogout, onToggleLoginModal } = this.props;
-
- return (
-
- {function renderConsumerVersionPage({ logoUrl, scope = '', user }) {
- return ;
- }}
-
- );
- };
-
- public renderHomePage = (): ReactElement => {
- return (
-
- {function renderConsumerVersionPage({ isUserLoggedIn, packages }) {
- return ;
- }}
-
- );
- };
-
- public renderVersionPage = (): ReactElement => {
- return (
-
-
-
- );
- };
-}
-
-export default RouterApp;
diff --git a/src/utils/package.ts b/src/utils/package.ts
index cb43022..5330b68 100644
--- a/src/utils/package.ts
+++ b/src/utils/package.ts
@@ -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 component
* @param {array} uplinks