chore: update

package.json

@@ -19,14 +19,14 @@
     "react-qr-hooks": "^1.0.7"
   },
   "devDependencies": {
-    "@types/qrcode": "^1.3.4",
-    "@types/react": "^16.9.42",
+    "@types/qrcode": "^1.3.5",
+    "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/parser": "^3.6.0",
+    "@typescript-eslint/parser": "^3.7.1",
     "copy-webpack-plugin": "6.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^4.2.0",
     "cz-conventional-changelog": "3.2.0",
-    "eslint": "^7.4.0",
+    "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "extensionizer": "^1.0.1",
@@ -36,9 +36,9 @@
     "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",
+    "ts-loader": "^8.0.2",
+    "typescript": "^3.9.7",
+    "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
   },
   "husky": {

src/popup/components/CodePreview/index.tsx

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

src/popup/components/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Tab } from '../../../shared/enums/Tab';
 
@@ -10,23 +10,27 @@ interface Props {
   onChange(value: Tab): void;
 }
 
-const Tabs: React.FC<Props> = ({ items, active, onChange }) => (
-  <nav className="tab-navigation">
-    {Object.entries(items).map(([key, value]) => (
-      <div className="tab-navigation__item" key={key}>
-        <input
-          name={name}
-          value={key}
-          type="radio"
-          id={key}
-          checked={active === key}
-          onChange={(e) => onChange(e.target.value as Tab)}
-        />
+const Tabs: React.FC<Props> = ({ items, active, onChange }) => {
+  console.log('daa');
 
-        <label htmlFor={key}>{value}</label>
-      </div>
-    ))}
-  </nav>
-);
+  return (
+    <nav className="tab-navigation">
+      {Object.entries(items).map(([key, value]) => (
+        <div className="tab-navigation__item" key={key}>
+          <input
+            name={name}
+            value={key}
+            type="radio"
+            id={key}
+            checked={active === key}
+            onChange={(e) => onChange(e.target.value as Tab)}
+          />
 
-export default Tabs;
+          <label htmlFor={key}>{value}</label>
+        </div>
+      ))}
+    </nav>
+  );
+};
+
+export default memo(Tabs);

src/popup/hooks/useTabs.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 
 import { StateContext } from '../context';
 
@@ -10,9 +10,9 @@ import { Tab } from '../../shared/enums/Tab';
 export const useTabs = () => {
   const [{ [StoreKey.CurrentTab]: tab }, dispatch] = useContext(StateContext);
 
-  const setTab = (id: Tab) => {
+  const setTab = useCallback((id: Tab) => {
     dispatch({ type: SET_TAB, payload: id });
-  };
+  }, []);
 
   return { tab, setTab };
 };

src/popup/popup.scss

@@ -4,6 +4,15 @@
   max-height: 500px;
   width: 360px;
 
+  &--full {
+    width: 480px;
+
+    .popup__header,
+    .popup__details {
+      display: none;
+    }
+  }
+
   &__header {
     padding: 10px 0;
     border-bottom: 1px solid #ddd;

src/popup/popup.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, lazy, Suspense } from 'react';
+import React, { useState, useEffect, useMemo, lazy, Suspense } from 'react';
 
 import Tabs from './components/Tabs';
 
@@ -18,6 +18,8 @@ const CodePreview = lazy(() => import('./components/CodePreview'));
 const Details = lazy(() => import('./components/Details'));
 const ErrorMessage = lazy(() => import('./components/ErrorMessage'));
 
+const LETTER_LIMIT = 1000;
+
 export const Popup: React.FC = () => {
   const [decoded, setDecoded] = useState('');
 
@@ -67,12 +69,10 @@ export const Popup: React.FC = () => {
     }
   }, [tab, text, url]);
 
-  const LIMIT = 1000;
-
-  const trimmed = decoded.substr(0, LIMIT);
+  const trimmed = useMemo(() => decoded.substr(0, LETTER_LIMIT), [decoded]);
 
   return (
-    <div className="popup">
+    <div className="popup popup--full">
       <header className="popup__header">
         <Tabs
           items={tabNames}
@@ -96,7 +96,9 @@ export const Popup: React.FC = () => {
 
                 <Details summary={t('detailsSummary', tabNames[tab])}>
                   {trimmed}
-                  <span className="out-of-limit">{decoded.slice(LIMIT)}</span>
+                  <span className="out-of-limit">
+                    {decoded.slice(LETTER_LIMIT)}
+                  </span>
                 </Details>
               </div>
             </>