@verdaccio/ui-theme 6.0.0-6-next.10 → 6.0.0-6-next.14

package/.babelrc

@@ -12,7 +12,7 @@
     ],
     "@babel/preset-react"
   ],
-  "plugins": ["react-hot-loader/babel", "@babel/transform-runtime", "emotion"],
+  "plugins": ["react-hot-loader/babel", "@babel/transform-runtime", "@emotion"],
   "env": {
     "test": {
       "presets": [

package/.eslintrc

@@ -11,21 +11,6 @@
     "verdaccio"
   ],
   "rules": {
-    "import/order": ["error", {
-      "pathGroups": [
-        {
-          "pattern": "verdaccio-ui/**",
-          "group": "external",
-          "position": "after"
-        }
-      ],
-      "pathGroupsExcludedImportTypes": ["verdaccio-ui"],
-      "alphabetize": {
-        "order": "asc",
-        "caseInsensitive": true
-      },
-      "newlines-between": "always"
-    }],
     "react/display-name": 0,
     "react/no-deprecated": 1,
     "react/jsx-no-target-blank": 1,

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @verdaccio/ui-theme
 
+## 6.0.0-6-next.14
+
+### Minor Changes
+
+- 048ac95e: feat: align with v5 ui endpoints and ui small bugfix
+
+## 6.0.0-6-next.13
+
+### Major Changes
+
+- 000d4374: feat: upgrade to material ui 5
+
+## 6.0.0-6-next.12
+
+### Major Changes
+
+- 794af76c: Remove Node 12 support
+
+  - We need move to the new `undici` and does not support Node.js 12
+
+### Minor Changes
+
+- 154b2ecd: refactor: remove @verdaccio/commons-api in favor @verdaccio/core and remove duplications
+
+## 6.0.0-6-next.11
+
+### Minor Changes
+
+- 5fed1955: feat: integrate rematch for ui state storage
+
 ## 6.0.0-6-next.10
 
 ### Major Changes

package/jest/api/packages.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "test",
+    "version": "1.0.22",
+    "description": "test",
+    "main": "src/index.js",
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+      "type": "http",
+      "url": "git+https://github.com/test/test.git"
+    },
+    "keywords": [],
+    "author": {
+      "name": "",
+      "email": "",
+      "url": "",
+      "avatar": "data:image/svg+xml;utf8,%3Csvg%20height%3D%22100%22%20viewBox%3D%22-27%2024%20100%20100%22%20width%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2274%22%20id%3D%22a%22%20r%3D%2250%22%2F%3E%3C%2Fdefs%3E%3Cuse%20fill%3D%22%23F5EEE5%22%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3CclipPath%20id%3D%22b%22%3E%3Cuse%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23b)%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M36%2095.9c0%204%204.7%205.2%207.1%205.8%207.6%202%2022.8%205.9%2022.8%205.9%203.2%201.1%205.7%203.5%207.1%206.6v9.8H-27v-9.8c1.3-3.1%203.9-5.5%207.1-6.6%200%200%2015.2-3.9%2022.8-5.9%202.4-.6%207.1-1.8%207.1-5.8V85h26v10.9z%22%20id%3D%22c%22%2F%3E%3C%2Fdefs%3E%3Cuse%20fill%3D%22%23E6C19C%22%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3CclipPath%20id%3D%22d%22%3E%3Cuse%20overflow%3D%22visible%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2FclipPath%3E%3Cpath%20clip-path%3D%22url(%23d)%22%20d%3D%22M23.2%2035h.2c3.3%200%208.2.2%2011.4%202%203.3%201.9%207.3%205.6%208.5%2012.1%202.4%2013.7-2.1%2035.4-6.3%2042.4-4%206.7-9.8%209.2-13.5%209.4H23h-.1c-3.7-.2-9.5-2.7-13.5-9.4-4.2-7-8.7-28.7-6.3-42.4%201.2-6.5%205.2-10.2%208.5-12.1%203.2-1.8%208.1-2%2011.4-2h.2z%22%20fill%3D%22%23D4B08C%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M22.6%2040c19.1%200%2020.7%2013.8%2020.8%2015.1%201.1%2011.9-3%2028.1-6.8%2033.7-4%205.9-9.8%208.1-13.5%208.3h-.5c-3.8-.3-9.6-2.5-13.6-8.4-3.8-5.6-7.9-21.8-6.8-33.8C2.3%2053.7%203.5%2040%2022.6%2040z%22%20fill%3D%22%23F2CEA5%22%2F%3E%3C%2Fsvg%3E"
+    },
+    "license": "ISC",
+    "dependencies": {
+      "lodash": "^4.17.21"
+    },
+    "readmeFilename": "README.md",
+    "bugs": {
+      "url": "https://github.com/test/test/issues"
+    },
+    "homepage": "https://github.com/test/test#readme",
+    "_id": "test@1.0.22",
+    "_nodeVersion": "14.17.4",
+    "_npmVersion": "7.20.5",
+    "dist": {
+      "integrity": "sha512-2IDD0lLzGUL7YJ+17Oh9VtbOwdKLqBLS+ZFATDXi5R22TL2hZ9LBFE10bzsDovNc4xtgwZAk1/K+5LHTye4ztg==",
+      "shasum": "c9152f57636bce762ccb5a83113c42a5831579bc",
+      "tarball": "http://localhost:4873/test/-/test-1.0.22.tgz"
+    },
+    "contributors": [],
+    "time": "2021-08-14T20:15:19.336Z",
+    "users": {}
+  }
+]

package/jest/jest.config.js

@@ -10,9 +10,9 @@ module.exports = Object.assign({}, config, {
     '^.+\\.(js|ts|tsx)$': 'babel-jest',
   },
   moduleFileExtensions: ['js', 'ts', 'tsx'],
-  testURL: 'http://localhost',
+  testURL: 'http://localhost:9000/',
   rootDir: '..',
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '<rootDir>/jest/setup-env.ts'],
   setupFiles: ['<rootDir>/jest/setup.ts'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-syntax-highlighter)'],
   modulePathIgnorePatterns: [

package/jest/server-handlers.ts

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const packagesPayload = require('./api/packages.json');
+
+export const handlers = [
+  rest.get('http://localhost:9000/-/verdaccio/data/packages', (req, res, ctx) => {
+    return res(ctx.json(packagesPayload));
+  }),
+];

package/jest/server.ts

@@ -0,0 +1,6 @@
+import { setupServer } from 'msw/node';
+
+import { handlers } from './server-handlers';
+
+const server = setupServer(...handlers);
+export { server };

package/jest/setup-env.ts

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+import 'whatwg-fetch';
+
+import { server } from './server';
+
+// mock load translations to avoid warnings
+jest.mock('../src/i18n/loadTranslationFile');
+
+beforeAll(() => {
+  server.listen({
+    onUnhandledRequest: 'warn',
+  });
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => {
+  server.close();
+});

package/jest/setup.ts

@@ -2,29 +2,24 @@
  * Setup configuration for Jest
  * This file includes global settings for the JEST environment.
  */
-import { GlobalWithFetchMock } from 'jest-fetch-mock';
 import 'mutationobserver-shim';
 
 // @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
 global.__VERDACCIO_BASENAME_UI_OPTIONS = {
-  base: 'http://localhost',
+  base: 'http://localhost:9000/',
   protocol: 'http',
   host: 'localhost',
   primaryColor: '#4b5e40',
   url_prefix: '',
   darkMode: false,
   language: 'en-US',
-  uri: 'http://localhost:4873',
+  uri: 'http://localhost:9000/',
   pkgManagers: ['pnpm', 'yarn', 'npm'],
   title: 'Verdaccio Dev UI',
   scope: '',
   version: 'v1.0.0',
 };
 
-const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
-customGlobal.fetch = require('jest-fetch-mock');
-customGlobal.fetchMock = customGlobal.fetch;
-
 // mocking few DOM methods
 // @ts-ignore : Property 'document' does not exist on type 'Global'.
 if (global.document) {

package/jest/unit/components/__mocks__/token.ts

@@ -1,7 +1,6 @@
 /**
  * Token Utility
  */
-
 import dayjs from 'dayjs';
 import { Base64 } from 'js-base64';
 

package/jest/unit/components/store/login.ts

@@ -1,4 +1,5 @@
 import { API_ERROR } from '../../../../lib/constants';
+
 /**
  * API mock for login endpoint
  * @param {object}  config configuration of api call

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@verdaccio/ui-theme",
-	"version": "6.0.0-6-next.10",
+	"version": "6.0.0-6-next.14",
 	"description": "Verdaccio User Interface",
 	"author": {
 		"name": "Verdaccio Contributors",
@@ -13,78 +13,86 @@
 	"homepage": "https://verdaccio.org",
 	"main": "index.js",
 	"engines": {
-		"node": ">=10",
+		"node": ">=14",
 		"npm": ">=6"
 	},
 	"devDependencies": {
-		"@emotion/core": "10.1.1",
-		"@emotion/jest": "11.3.0",
-		"@emotion/styled": "10.0.27",
-		"@emotion/styled-base": "^10.0.31",
-		"@material-ui/core": "4.11.4",
-		"@material-ui/icons": "4.11.2",
-		"@material-ui/styles": "4.11.4",
-		"@testing-library/dom": "8.2.0",
-		"@testing-library/jest-dom": "5.14.1",
-		"@testing-library/react": "12.0.0",
-		"@verdaccio/node-api": "6.0.0-6-next.20",
-		"autosuggest-highlight": "3.1.1",
-		"babel-loader": "8.2.2",
+		"@types/react": "17.0.38",
+		"@types/react-autosuggest": "10.1.5",
+		"@types/react-dom": "17.0.11",
+		"@types/react-helmet": "6.1.5",
+		"@types/redux": "3.6.0",
+		"@types/react-router-dom": "5.3.2",
+		"@types/react-virtualized": "9.21.16",
+		"@emotion/react": "11.7.1",
+		"@emotion/jest": "11.7.1",
+		"@emotion/styled": "11.6.0",
+		"@emotion/css": "11.7.1",
+		"@emotion/babel-plugin": "11.7.2",
+		"@mui/icons-material": "5.2.5",
+		"@mui/material": "5.2.8",
+		"@mui/styles": "5.2.3",
+		"@rematch/core": "2.2.0",
+		"@rematch/loading": "2.1.2",
+		"@testing-library/dom": "8.11.1",
+		"@testing-library/jest-dom": "5.16.1",
+		"@testing-library/react": "12.1.2",
+		"@verdaccio/node-api": "6.0.0-6-next.26",
+		"@verdaccio/types": "11.0.0-6-next.10",
+		"babel-loader": "8.2.3",
 		"babel-plugin-dynamic-import-node": "2.3.3",
-		"babel-plugin-emotion": "10.2.2",
 		"bundlesize": "0.18.1",
-		"css-loader": "6.2.0",
-		"dayjs": "1.10.6",
-		"emotion": "10.0.27",
-		"emotion-theming": "10.0.27",
+		"css-loader": "6.5.1",
+		"dayjs": "1.10.7",
 		"friendly-errors-webpack-plugin": "1.7.0",
 		"github-markdown-css": "4.0.0",
 		"harmony-reflect": "1.6.2",
 		"history": "4.10.1",
-		"html-webpack-plugin": "5.3.2",
-		"i18next": "20.6.0",
+		"html-webpack-plugin": "5.5.0",
+		"i18next": "20.6.1",
 		"in-publish": "2.0.1",
-		"js-base64": "3.6.1",
+		"country-flag-icons": "1.4.19",
+		"js-base64": "3.7.2",
 		"js-yaml": "3.14.1",
 		"localstorage-memory": "1.0.3",
 		"lodash": "4.17.21",
-		"mini-css-extract-plugin": "2.2.2",
+		"mini-css-extract-plugin": "2.4.6",
 		"mutationobserver-shim": "0.3.7",
-		"node-mocks-http": "1.10.1",
+		"node-mocks-http": "1.11.0",
 		"normalize.css": "8.0.1",
 		"optimize-css-assets-webpack-plugin": "6.0.1",
 		"ora": "5.4.1",
-		"prop-types": "15.7.2",
 		"react": "17.0.2",
-		"react-autosuggest": "10.1.0",
 		"react-dom": "17.0.2",
-		"react-hook-form": "7.14.2",
+		"react-hook-form": "7.23.0",
 		"react-hot-loader": "4.13.0",
-		"react-i18next": "11.11.4",
+		"react-i18next": "11.15.3",
 		"react-router": "5.2.1",
 		"react-router-dom": "5.3.0",
 		"react-virtualized": "9.22.3",
+		"react-redux": "7.2.6",
+		"redux": "4.1.2",
 		"rimraf": "3.0.2",
-		"standard-version": "9.3.1",
-		"style-loader": "3.2.1",
+		"msw": "0.36.4",
+		"style-loader": "3.3.1",
 		"stylelint": "13.13.1",
 		"stylelint-config-recommended": "5.0.0",
 		"stylelint-config-styled-components": "0.1.1",
 		"stylelint-processor-styled-components": "1.10.0",
-		"stylelint-webpack-plugin": "3.0.1",
-		"supertest": "6.1.6",
-		"terser-webpack-plugin": "5.2.3",
+		"stylelint-webpack-plugin": "3.1.0",
+		"supertest": "6.2.1",
+		"terser-webpack-plugin": "5.3.0",
 		"url-loader": "4.1.1",
-		"validator": "13.6.0",
-		"webpack": "5.52.0",
-		"webpack-bundle-analyzer": "4.4.2",
+		"validator": "13.7.0",
+		"webpack": "5.66.0",
+		"webpack-bundle-analyzer": "4.5.0",
 		"webpack-bundle-size-analyzer": "3.1.0",
 		"webpack-cli": "^4.7.2",
-		"webpack-dev-server": "3.11.2",
-		"webpack-manifest-plugin": "4.0.2",
+		"webpack-dev-server": "3.11.3",
+		"webpack-manifest-plugin": "4.1.1",
 		"webpack-merge": "5.8.0",
 		"whatwg-fetch": "3.6.2",
-		"xss": "1.0.9"
+		"xss": "1.0.10"
 	},
 	"keywords": [
 		"private",
@@ -129,7 +137,7 @@
 		"type-check": "tsc --noEmit -p tsconfig.build.json",
 		"start": "babel-node tools/dev.server.js",
 		"test:clean": "jest --clearCache",
-		"test": "cross-env BABEL_ENV=test cross-env NODE_ENV=test cross-env TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
+		"test": "cross-env BABEL_ENV=test cross-env NODE_ENV=test cross-env TZ=UTC jest --config ./jest/jest.config.js --runInBand",
 		"test:update-snapshot": "yarn run test -- -u",
 		"test:size": "bundlesize",
 		"lint": "pnpm lint:js && pnpm lint:css",

package/src/App/App.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-
-import storage from 'verdaccio-ui/utils/storage';
-import { render, waitFor, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
+import {
+  act,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from 'verdaccio-ui/utils/test-react-testing-library';
 
 // eslint-disable-next-line jest/no-mocks-import
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
-
+import { store } from '../store';
 import App from './App';
 
 jest.mock('verdaccio-ui/utils/storage', () => {
@@ -30,68 +34,88 @@ jest.mock('verdaccio-ui/utils/storage', () => {
   return new LocalStorageMock();
 });
 
-jest.mock('verdaccio-ui/providers/API/api', () => ({
-  // eslint-disable-next-line jest/no-mocks-import
-  request: require('../../jest/unit/components/__mocks__/api').default.request,
-}));
+// force the windows to expand to display items
+// https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
+jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600);
+jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(600);
 
 /* eslint-disable react/jsx-no-bind*/
 describe('<App />', () => {
-  // test('should display the Header component ', async () => {
-  //   const { queryByTestId } = render(<App />);
-  //
-  //   expect(queryByTestId('loading')).toBeTruthy();
-  //
-  //   // wait for the Header component appearance and return the element
-  //   const headerElement = await waitFor(() => queryByTestId('header'));
-  //   expect(headerElement).toBeTruthy();
-  // });
-
-  test('handleLogout - logouts the user and clear localstorage', async () => {
-    storage.setItem('username', 'verdaccio');
-    storage.setItem('token', generateTokenWithTimeRange(24));
-
-    const { queryByTestId } = render(<App />);
+  describe('login - log out', () => {
+    test('handleLogout - logouts the user and clear localstorage', async () => {
+      const { queryByTestId } = renderWithStore(<App />, store);
+      store.dispatch.login.logInUser({
+        username: 'verdaccio',
+        token: generateTokenWithTimeRange(24),
+      });
+
+      // wait for the Account's circle element component appearance and return the element
+      const accountCircleElement = await waitFor(() => queryByTestId('logInDialogIcon'));
+      expect(accountCircleElement).toBeTruthy();
+
+      if (accountCircleElement) {
+        fireEvent.click(accountCircleElement);
+
+        // wait for the Button's logout element component appearance and return the element
+        const buttonLogoutElement = await waitFor(() => queryByTestId('logOutDialogIcon'));
+        expect(buttonLogoutElement).toBeTruthy();
+
+        if (buttonLogoutElement) {
+          fireEvent.click(buttonLogoutElement);
+
+          expect(queryByTestId('greetings-label')).toBeFalsy();
+        }
+      }
+    }, 10000);
 
-    // wait for the Account's circle element component appearance and return the element
-    const accountCircleElement = await waitFor(() => queryByTestId('header--menu-accountcircle'));
-    expect(accountCircleElement).toBeTruthy();
+    test('isUserAlreadyLoggedIn: token already available in storage', async () => {
+      const { queryByTestId, queryAllByText } = renderWithStore(<App />, store);
+      store.dispatch.login.logInUser({
+        username: 'verdaccio',
+        token: generateTokenWithTimeRange(24),
+      });
 
-    if (accountCircleElement) {
-      fireEvent.click(accountCircleElement);
+      // wait for the Account's circle element component appearance and return the element
+      const accountCircleElement = await waitFor(() => queryByTestId('logInDialogIcon'));
+      expect(accountCircleElement).toBeTruthy();
 
-      // wait for the Button's logout element component appearance and return the element
-      const buttonLogoutElement = await waitFor(() => queryByTestId('header--button-logout'));
-      expect(buttonLogoutElement).toBeTruthy();
+      if (accountCircleElement) {
+        fireEvent.click(accountCircleElement);
 
-      if (buttonLogoutElement) {
-        fireEvent.click(buttonLogoutElement);
+        // wait for the Greeting's label element component appearance and return the element
+        const greetingsLabelElement = await waitFor(() => queryByTestId('greetings-label'));
+        expect(greetingsLabelElement).toBeTruthy();
 
-        expect(queryByTestId('greetings-label')).toBeFalsy();
+        if (greetingsLabelElement) {
+          expect(queryAllByText('verdaccio')).toBeTruthy();
+        }
       }
-    }
+    }, 10000);
   });
 
-  test('isUserAlreadyLoggedIn: token already available in storage', async () => {
-    storage.setItem('username', 'verdaccio');
-    storage.setItem('token', generateTokenWithTimeRange(24));
+  describe('list packages', () => {
+    test('should display the Header component', async () => {
+      renderWithStore(<App />, store);
 
-    const { queryByTestId, queryAllByText } = render(<App />);
+      await waitFor(() => {
+        expect(screen.queryByTestId('loading')).toBeTruthy();
+      });
 
-    // wait for the Account's circle element component appearance and return the element
-    const accountCircleElement = await waitFor(() => queryByTestId('header--menu-accountcircle'));
-    expect(accountCircleElement).toBeTruthy();
+      // wait for the Header component appearance and return the element
+      const headerElement = await waitFor(() => screen.queryByTestId('header'));
+      expect(headerElement).toBeTruthy();
+    });
 
-    if (accountCircleElement) {
-      fireEvent.click(accountCircleElement);
+    test('should display package lists', async () => {
+      act(() => {
+        renderWithStore(<App />, store);
+      });
 
-      // wait for the Greeting's label element component appearance and return the element
-      const greetingsLabelElement = await waitFor(() => queryByTestId('greetings-label'));
-      expect(greetingsLabelElement).toBeTruthy();
+      await waitFor(() => {
+        expect(screen.getByTestId('package-item-list')).toBeInTheDocument();
+      });
 
-      if (greetingsLabelElement) {
-        expect(queryAllByText('verdaccio')).toBeTruthy();
-      }
-    }
+      expect(store.getState().packages.response).toHaveLength(1);
+    }, 10000);
   });
 });

package/src/App/App.tsx

@@ -1,24 +1,18 @@
 /* eslint-disable react/jsx-max-depth */
 import styled from '@emotion/styled';
-import isNil from 'lodash/isNil';
-import React, { useState, useEffect, Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { Router } from 'react-router-dom';
-
 import Box from 'verdaccio-ui/components/Box';
 import Loading from 'verdaccio-ui/components/Loading';
-import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
 import StyleBaseline from 'verdaccio-ui/design-tokens/StyleBaseline';
+import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
-import { isTokenExpire } from 'verdaccio-ui/utils/login';
-import storage from 'verdaccio-ui/utils/storage';
 
-import AppContextProvider from './AppContextProvider';
+import '../i18n/config';
 import AppRoute, { history } from './AppRoute';
 import Footer from './Footer';
 import Header from './Header';
 
-import '../../i18n/config';
-
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor: theme?.palette.background.default,
 }));
@@ -32,35 +26,8 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   },
 }));
 
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
-  const [user, setUser] = useState<undefined | { username: string | null }>();
-  /**
-   * Logout user
-   * Required by: <Header />
-   */
-  const logout = () => {
-    storage.removeItem('username');
-    storage.removeItem('token');
-    setUser(undefined);
-  };
-
-  const checkUserAlreadyLoggedIn = () => {
-    // checks for token validity
-    const token = storage.getItem('token');
-    const username = storage.getItem('username');
-
-    if (isTokenExpire(token) || isNil(username)) {
-      logout();
-      return;
-    }
-
-    setUser({ username });
-  };
-
   useEffect(() => {
-    checkUserAlreadyLoggedIn();
     loadDayJSLocale();
   }, []);
 
@@ -70,12 +37,10 @@ const App: React.FC = () => {
       <StyledBox display="flex" flexDirection="column" height="100%">
         <>
           <Router history={history}>
-            <AppContextProvider user={user}>
-              <Header />
-              <StyledBoxContent flexGrow={1}>
-                <AppRoute />
-              </StyledBoxContent>
-            </AppContextProvider>
+            <Header />
+            <StyledBoxContent flexGrow={1}>
+              <AppRoute />
+            </StyledBoxContent>
           </Router>
           <Footer />
         </>

package/src/App/AppRoute.tsx

@@ -1,9 +1,7 @@
 import { createBrowserHistory } from 'history';
-import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
+import React from 'react';
+import { Route as ReactRouterDomRoute, Router, Switch } from 'react-router-dom';
 
-import AppContext from './AppContext';
 import loadable from './utils/loadable';
 
 const NotFound = loadable(
@@ -28,22 +26,11 @@ export const history = createBrowserHistory({
 });
 
 const AppRoute: React.FC = () => {
-  const appContext = useContext(AppContext);
-  const { t } = useTranslation();
-
-  if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
-  }
-
-  const { user } = appContext;
-
-  const isUserLoggedIn = user?.username;
-
   return (
     <Router history={history}>
       <Switch>
         <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-          <HomePage isUserLoggedIn={!!isUserLoggedIn} />
+          <HomePage />
         </ReactRouterDomRoute>
         <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
           <VersionContextProvider>

package/src/App/Footer/Footer.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Footer from './Footer';