chore: update

.eslintrc.js

@@ -1,7 +1,13 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
-  plugins: ['prettier'],
+  extends: [
+    'prettier',
+    'react-app',
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: ['prettier', '@typescript-eslint', 'jsx-a11y'],
   env: {
     browser: true,
     node: true,
@@ -13,7 +19,6 @@ module.exports = {
       module: true,
     },
   },
-  rules: {
-    'no-unused-vars': ['off'],
-  },
+
+  rules: { 'no-unused-vars': 'off' },
 };

package.json

@@ -14,32 +14,37 @@
   },
   "dependencies": {
     "qrcode": "^1.4.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-qr-hooks": "^1.0.7"
   },
   "devDependencies": {
-    "@types/qrcode": "^1.3.4",
-    "@types/react": "^16.9.42",
-    "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/parser": "^3.6.0",
-    "copy-webpack-plugin": "6.0.3",
-    "css-loader": "^3.6.0",
-    "cz-conventional-changelog": "3.2.0",
-    "eslint": "^7.4.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "@types/qrcode": "^1.3.5",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/parser": "^4.10.0",
+    "copy-webpack-plugin": "7.0.0",
+    "css-loader": "^5.0.1",
+    "cz-conventional-changelog": "3.3.0",
+    "eslint": "^7.15.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.3.0",
     "extensionizer": "^1.0.1",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.11",
+    "husky": "^4.3.6",
+    "lint-staged": "^10.5.3",
     "node-sass": "^4.14.1",
-    "prettier": "^2.0.5",
-    "sass-loader": "^9.0.2",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^8.0.0",
-    "typescript": "^3.9.6",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
+    "prettier": "^2.2.1",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.12",
+    "typescript": "^4.1.3",
+    "webpack": "^5.10.3",
+    "webpack-cli": "^4.2.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   },
   "husky": {
     "hooks": {
@@ -51,10 +56,5 @@
       "npm run prettier",
       "npm run lint"
     ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
   }
 }

src/background.ts

@@ -31,6 +31,7 @@ extension.contextMenus.onClicked.addListener((info: Info) => {
 
     const openPopup = extension.browserAction.openPopup;
 
+    // this check is needed because Firefox and Chromium based browsers implement openPopup differently
     if (openPopup.length === 0) {
       openPopup(() => null);
     } else {

src/popup/components/CodePreview/index.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { useQrEncode } from 'react-qr-hooks';
 
-interface Props {
+interface CodePreviewProps {
   readonly decoded: string;
 }
 
-const CodePreview: React.FC<Props> = ({ decoded }) => {
+const CodePreview = memo<CodePreviewProps>(({ decoded }) => {
   const encoded = useQrEncode(decoded, {
     width: 360,
   });
 
   return <img src={encoded} alt={decoded} />;
-};
+});
 
 export default CodePreview;

src/popup/components/Details/index.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import './Details.scss';
 
-interface Props {
+interface DetailsProps {
   readonly summary: string;
+  readonly children: React.ReactNode;
 }
 
-const Details: React.FC<Props> = ({ summary, children }) => (
+const Details = memo<DetailsProps>(({ summary, children }) => (
   <details>
     <summary>{summary}</summary>
 
     <p>{children}</p>
   </details>
-);
+));
 
 export default Details;

src/popup/components/ErrorMessage/ErrorMessage.scss

@@ -1,3 +1,5 @@
 .error-message {
   text-align: center;
+  word-break: break-word;
+  padding: 0 10px;
 }

src/popup/components/ErrorMessage/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import './ErrorMessage.scss';
 
-interface Props {
+interface ErrorMessageProps {
   readonly message: string;
 }
 
-const ErrorMessage: React.FC<Props> = ({ message }) => (
+const ErrorMessage = memo<ErrorMessageProps>(({ message }) => (
   <p className="error-message">{message}</p>
-);
+));
 
 export default ErrorMessage;

src/popup/components/OutOfLimit/index.tsx

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+
+interface OutOfLimitProps {
+  readonly decoded: string;
+  readonly limit: number;
+}
+
+const OutOfLimit = memo<OutOfLimitProps>(({ decoded, limit }) => (
+  <span className="out-of-limit">{decoded.slice(limit)}</span>
+));
+
+export default OutOfLimit;

src/popup/components/Tabs/index.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Tab } from '../../../shared/enums/Tab';
 
 import './Tabs.scss';
 
-interface Props {
+interface TabsProps {
   readonly items: Record<Tab, string>;
   readonly active: Tab;
-  onChange(value: Tab): void;
+  onChange: (value: Tab) => void;
 }
 
-const Tabs: React.FC<Props> = ({ items, active, onChange }) => (
+const Tabs = memo<TabsProps>(({ items, active, onChange }) => (
   <nav className="tab-navigation">
     {Object.entries(items).map(([key, value]) => (
       <div className="tab-navigation__item" key={key}>
         <input
-          name={name}
+          name={key}
           value={key}
           type="radio"
           id={key}
@@ -27,6 +27,6 @@ const Tabs: React.FC<Props> = ({ items, active, onChange }) => (
       </div>
     ))}
   </nav>
-);
+));
 
 export default Tabs;

src/popup/constants/supportedProtocols.ts

@@ -1 +1 @@
-export const supportedProtocols = ['http', 'https'];
+export const SUPPORTED_PROTOCOLS = ['http', 'https'];

src/popup/context.tsx

@@ -21,21 +21,23 @@ export const StateContext = React.createContext<
   [PopupState, React.Dispatch<ActionTypes>]
 >([initialState, () => null]);
 
-export const StateProvider: React.FC = ({ children }) => {
+interface StateProviderProps {
+  readonly children: React.ReactNode;
+}
+
+export const StateProvider = ({ children }: StateProviderProps) => {
   const [state, dispatch] = useReducer(stateReducer, initialState);
 
   useEffect(() => {
     extension.storage.local.get(
       [StoreKey.SelectedText, StoreKey.CurrentTab],
       (res: PopupState) => {
-        const data = res;
-
-        if (!data[StoreKey.CurrentTab]) {
-          data[StoreKey.SelectedText] = '';
-          data[StoreKey.CurrentTab] = Tab.Url;
+        if (!res[StoreKey.CurrentTab]) {
+          res[StoreKey.SelectedText] = '';
+          res[StoreKey.CurrentTab] = Tab.Url;
         }
 
-        dispatch({ type: INIT, payload: data });
+        dispatch({ type: INIT, payload: res });
       }
     );
   }, []);

src/popup/hooks/useTabs.ts

@@ -1,18 +1,25 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 
 import { StateContext } from '../context';
 
-import { SET_TAB } from '../store/actions';
+import { SET_ACTIVE_TAB } from '../store/actions';
 
 import { StoreKey } from '../../shared/enums/StoreKey';
 import { Tab } from '../../shared/enums/Tab';
 
+type SetActiveTabCallbackType = (id: Tab) => void;
+
 export const useTabs = () => {
-  const [{ [StoreKey.CurrentTab]: tab }, dispatch] = useContext(StateContext);
+  const [{ [StoreKey.CurrentTab]: activeTab }, dispatch] = useContext(
+    StateContext
+  );
 
-  const setTab = (id: Tab) => {
-    dispatch({ type: SET_TAB, payload: id });
-  };
+  const setActiveTab = useCallback<SetActiveTabCallbackType>(
+    (id) => {
+      dispatch({ type: SET_ACTIVE_TAB, payload: id });
+    },
+    [dispatch]
+  );
 
-  return { tab, setTab };
+  return { activeTab, setActiveTab };
 };

src/popup/hooks/useText.ts

@@ -1,21 +1,28 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 
 import { StateContext } from '../context';
 
-import { CLEAR_TEXT, SET_TEXT } from '../store/actions';
+import { SET_TEXT, CLEAR_TEXT } from '../store/actions';
 
 import { StoreKey } from '../../shared/enums/StoreKey';
 
+type SetTextCallbackType = (value: string) => void;
+
 export const useText = () => {
   const [{ [StoreKey.SelectedText]: text }, dispatch] = useContext(
     StateContext
   );
 
-  const setText = (value: string) => {
-    dispatch({ type: SET_TEXT, payload: value });
-  };
+  const setText = useCallback<SetTextCallbackType>(
+    (value) => {
+      dispatch({ type: SET_TEXT, payload: value });
+    },
+    [dispatch]
+  );
 
-  const clearText = () => dispatch({ type: CLEAR_TEXT });
+  const clearText = useCallback(() => dispatch({ type: CLEAR_TEXT }), [
+    dispatch,
+  ]);
 
   return { text, setText, clearText };
 };

src/popup/hooks/useUrl.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import extension from 'extensionizer';
 
-import { supportedProtocols } from '../constants/supportedProtocols';
+import { SUPPORTED_PROTOCOLS } from '../constants/supportedProtocols';
 
 interface TabQueryResult {
   readonly url: string;
@@ -16,9 +16,9 @@ export const useUrl = () => {
     extension.tabs.query(
       { currentWindow: true, active: true },
       (res: TabQueryResult[]) => {
-        const currentPageProtocol = res[0].url.split(':')[0];
+        const currentPageProtocol = res[0].url.split('://')[0];
 
-        if (supportedProtocols.includes(currentPageProtocol)) {
+        if (SUPPORTED_PROTOCOLS.includes(currentPageProtocol)) {
           setUrl(res[0].url);
 
           setUnsupportedProtocol('');

src/popup/interfaces/index.ts

@@ -1,4 +1,4 @@
-import { INIT, SET_TAB, CLEAR_TEXT, SET_TEXT } from '../store/actions';
+import { INIT, SET_ACTIVE_TAB, CLEAR_TEXT, SET_TEXT } from '../store/actions';
 
 import { StoreKey } from '../../shared/enums/StoreKey';
 import { Tab } from '../../shared/enums/Tab';
@@ -13,16 +13,16 @@ export interface InitAction {
   readonly payload: PopupState;
 }
 
-export interface SetTabAction {
-  readonly type: typeof SET_TAB;
+export interface SetActiveTabAction {
+  readonly type: typeof SET_ACTIVE_TAB;
   readonly payload: Tab;
 }
 
-export interface ClearTextAction {
-  readonly type: typeof CLEAR_TEXT;
-}
-
 export interface SetTextAction {
   readonly type: typeof SET_TEXT;
   readonly payload: string;
 }
+
+export interface ClearTextAction {
+  readonly type: typeof CLEAR_TEXT;
+}