chore: update deps & little refactor

scffs · Dec 1, 2023 · f876595 · f876595
1 parent 4951f66
commit f876595
Show file tree

Hide file tree

Showing 3 changed files with 623 additions and 614 deletions.
diff --git a/package.json b/package.json
@@ -14,36 +14,36 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vkontakte/icons": "^2.82.0",
-    "@vkontakte/vk-bridge": "^2.11.2",
-    "@vkontakte/vk-mini-apps-router": "^1.1.1",
+    "@vkontakte/icons": "^2.85.0",
+    "@vkontakte/vk-bridge": "^2.12.2",
+    "@vkontakte/vk-mini-apps-router": "^1.3.1",
     "@vkontakte/vkui": "^5.9.6",
     "preact": "^10.18.2",
     "react": "npm:@preact/compat",
     "react-dom": "npm:@preact/compat"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.6.0",
+    "@preact/preset-vite": "^2.7.0",
     "@rollup/plugin-terser": "^0.4.3",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.11",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "@vitejs/plugin-react": "^4.2.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.45.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-standard-with-typescript": "^40.0.0",
     "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-n": "^16.0.2",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "0.4.4",
-    "gh-pages": "^6.0.0",
-    "typescript": "*",
-    "vite": "^4.4.5"
+    "gh-pages": "^6.1.0",
+    "typescript": "^5.0.4",
+    "vite": "^5.0.4"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,10 +10,10 @@ import { VIEW_PROFILE } from './routes';
 import { Pages } from './types';
 
 import Suspense from './components/Suspense';
+import ModalRoot from './components/ModalRoot';
 
 const Sidebar = lazy(() => import('./components/Sidebar'));
 const Epic = lazy(() => import('./components/Epic'));
-const ModalRoot = lazy(() => import('./components/ModalRoot'));
 
 const App = () => {
   const platform = usePlatform();
@@ -23,9 +23,9 @@ const App = () => {
   const { view: activeView = VIEW_PROFILE } = useActiveVkuiLocation();
   const routeNavigator = useRouteNavigator();
 
-  const onStoryChange = async (currentView: Pages) => {
+  const onStoryChange = useCallback(async (currentView: Pages) => {
     await routeNavigator.push(`/${currentView}`);
-  };
+  }, []);
 
   const modals = <ModalRoot />;
 
@@ -38,12 +38,22 @@ const App = () => {
   }, [appearance]);
 
   useEffect(() => {
-    const savedTheme = localStorage.getItem('theme');
+    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark';
+
     if (savedTheme) {
-      setAppearance(savedTheme as 'light' | 'dark');
+      setAppearance(savedTheme);
     }
   }, []);
 
+  const sidebar = viewWidth.tabletPlus && (
+    <SplitCol className={viewWidth.tabletPlus.className} fixed width={280} maxWidth={280}>
+      {isVKCOM && <PanelHeader />}
+      <Suspense id='sidebar'>
+        <Sidebar activeView={activeView as Pages} onStoryChange={onStoryChange} />
+      </Suspense>
+    </SplitCol>
+  );
+
   return (
     <ConfigProvider appearance={appearance}>
       <AppRoot>
@@ -52,14 +62,7 @@ const App = () => {
           header={isVKCOM && <PanelHeader separator={false} />}
           style={{ justifyContent: 'center' }}
         >
-          {viewWidth.tabletPlus && (
-            <SplitCol className={viewWidth.tabletPlus.className} fixed width={280} maxWidth={280}>
-              {isVKCOM && <PanelHeader /> }
-              <Suspense id='sidebar'>
-                <Sidebar activeView={activeView as Pages} onStoryChange={onStoryChange} />
-              </Suspense>
-            </SplitCol>
-          )}
+          {sidebar}
           <SplitCol width='100%' maxWidth='600px' stretchedOnMobile autoSpaced>
             <Epic onStoryChange={onStoryChange} toggleAppearance={toggleAppearance} />
           </SplitCol>