From 6783b05c65fa9a132fd9b0979f6abe8c1254c4e4 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Wed, 9 Oct 2019 15:36:43 +0200 Subject: [PATCH 1/3] refactor: updated routes --- src/App/App.tsx | 3 +- src/App/AppContext.tsx | 20 +++++++++++ src/App/AppRoute.tsx | 53 +++++++++++++++++++++++++++++ src/router.tsx | 76 ------------------------------------------ src/routers.ts | 7 ++++ src/utils/package.ts | 4 --- 6 files changed, 82 insertions(+), 81 deletions(-) create mode 100644 src/App/AppContext.tsx create mode 100644 src/App/AppRoute.tsx delete mode 100644 src/router.tsx create mode 100644 src/routers.ts diff --git a/src/App/App.tsx b/src/App/App.tsx index 10d2ebbea..cb37033bd 100644 --- a/src/App/App.tsx +++ b/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('packages', 'GET'); + // @ts-ignore: FIX THIS TYPE: Type 'any[]' is not assignable to type '[]' this.setState({ packages, isLoading: false, diff --git a/src/App/AppContext.tsx b/src/App/AppContext.tsx new file mode 100644 index 000000000..9d06e08f6 --- /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 000000000..936d12fdb --- /dev/null +++ b/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 ( + }> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default AppRoute; diff --git a/src/router.tsx b/src/router.tsx deleted file mode 100644 index ab71e0789..000000000 --- a/src/router.tsx +++ /dev/null @@ -1,76 +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, AppStateInterface } 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 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 }: Partial) { - return
; - }} - - ); - }; - - public renderHomePage = (): ReactElement => { - return ( - - {function renderConsumerVersionPage({ isUserLoggedIn, packages }: Partial) { - // @ts-ignore - return ; - }} - - ); - }; - - public renderVersionPage = (routerProps): ReactElement => { - return ( - - {function renderConsumerVersionPage({ isUserLoggedIn }: Partial) { - return ; - }} - - ); - }; -} - -export default RouterApp; diff --git a/src/routers.ts b/src/routers.ts new file mode 100644 index 000000000..87f3472a9 --- /dev/null +++ b/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', +} diff --git a/src/utils/package.ts b/src/utils/package.ts index ba9a22847..f2d141433 100644 --- a/src/utils/package.ts +++ b/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 component * @param {array} uplinks From a7b168946b7da1e392518d8366742497d8ad9422 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Thu, 17 Oct 2019 13:09:01 +0200 Subject: [PATCH 2/3] fix: fixed conflicts issues --- src/App/App.test.tsx | 5 +-- src/App/App.tsx | 46 ++++++------------------- src/App/AppRoute.tsx | 81 ++++++++++++++++++++++++++------------------ src/router.tsx | 74 ---------------------------------------- src/routers.ts | 7 ---- 5 files changed, 61 insertions(+), 152 deletions(-) delete mode 100644 src/router.tsx delete mode 100644 src/routers.ts diff --git a/src/App/App.test.tsx b/src/App/App.test.tsx index f197969a0..931c62310 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 fbf09c094..061204848 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; - -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(); @@ -177,9 +153,7 @@ export default class App extends Component<{}, AppStateInterface> { return ( <> - - {this.renderHeader()} - + {this.renderHeader()}