chore: some web fixes & deps (#415)

Diary-SPO · Nov 3, 2024 · 7b900ab · 7b900ab
1 parent daae0c6
commit 7b900ab
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 191 deletions.
diff --git a/apps/crypto/package.json b/apps/crypto/package.json
@@ -6,10 +6,10 @@
   "author": "scffs",
   "license": "MIT",
   "dependencies": {
-    "bun": "^1.1.29"
+    "bun": "^1.1.34"
   },
   "devDependencies": {
-    "bun-types": "^1.1.29"
+    "bun-types": "^1.1.34"
   },
   "exports": {
     ".": "./src/index.ts"

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -2,6 +2,7 @@
   "name": "@diary-spo/web",
   "private": true,
   "version": "8.0.0",
+  "homepage": ".",
   "type": "module",
   "scripts": {
     "dev": "rsbuild dev",

diff --git a/apps/web/rsbuild.config.ts b/apps/web/rsbuild.config.ts
@@ -8,11 +8,12 @@ const { publicVars } = loadEnv({ prefixes: ['VITE_'] })
 export default defineConfig({
   plugins: [pluginReact(), pluginBasicSsl()],
   output: {
-    polyfill: 'usage',
+    // polyfill: 'usage',
     minify: true
   },
   server: {
-    port: 5173
+    port: 5173,
+    base: import.meta.env.VITE_MODE === 'prod' ? './' : undefined
   },
   html: {
     template: './index.html'

diff --git a/apps/web/src/app/AppWrapper/App/Epic/index.tsx b/apps/web/src/app/AppWrapper/App/Epic/index.tsx
@@ -21,7 +21,6 @@ import {
 } from '../../../../pages'
 
 import type { Pages } from '../../../../shared/types.ts'
-import { Suspense } from '../../../../shared/ui'
 
 import type { FC } from 'react'
 import Tabbar from './Tabbar'
@@ -50,21 +49,11 @@ const Epic: FC<IEpic> = ({ onStoryChange }) => {
         activePanel={activePanel}
         onSwipeBack={() => routeNavigator.back()}
       >
-        <Suspense id={MAIN_SETTINGS} mode='screen'>
-          <LoginForm id={MAIN_SETTINGS} />
-        </Suspense>
-        <Suspense id={VIEW_SCHEDULE} mode='screen'>
-          <Schedule id={VIEW_SCHEDULE} />
-        </Suspense>
-        <Suspense id={VIEW_MARKS} mode='screen'>
-          <Achievements id={VIEW_MARKS} />
-        </Suspense>
-        <Suspense id={VIEW_NOTIFICATIONS} mode='screen'>
-          <Notifications id={VIEW_NOTIFICATIONS} />
-        </Suspense>
-        <Suspense id={VIEW_SETTINGS} mode='screen'>
-          <Settings id={VIEW_SETTINGS} />
-        </Suspense>
+        <LoginForm id={MAIN_SETTINGS} />
+        <Schedule id={VIEW_SCHEDULE} />
+        <Achievements id={VIEW_MARKS} />
+        <Notifications id={VIEW_NOTIFICATIONS} />
+        <Settings id={VIEW_SETTINGS} />
       </View>
     </VKUIEpic>
   )

diff --git a/apps/web/src/app/AppWrapper/App/index.tsx b/apps/web/src/app/AppWrapper/App/index.tsx
@@ -22,10 +22,9 @@ import {
   useAdaptivityConditionalRender,
   usePlatform
 } from '@vkontakte/vkui'
-import { type FC, lazy } from 'react'
+import type { FC } from 'react'
 
 import type { Pages } from '../../../shared/types.ts'
-import { Suspense } from '../../../shared/ui'
 import {
   MAIN_SETTINGS,
   VIEW_MARKS,
@@ -35,7 +34,7 @@ import {
 } from '../../routes'
 import ModalRoot from './ModalRoot'
 
-const Epic = lazy(() => import('./Epic'))
+import Epic from './Epic'
 
 const App: FC = () => {
   const routeNavigator = useRouteNavigator()
@@ -113,11 +112,9 @@ const App: FC = () => {
             </Panel>
           </SplitCol>
         )}
-        <Suspense id='Epic'>
-          <SplitCol width='100%' maxWidth='700px' stretchedOnMobile autoSpaced>
-            <Epic onStoryChange={onStoryChange} />
-          </SplitCol>
-        </Suspense>
+        <SplitCol width='100%' maxWidth='700px' stretchedOnMobile autoSpaced>
+          <Epic onStoryChange={onStoryChange} />
+        </SplitCol>
       </SplitLayout>
     </AppRoot>
   )

diff --git a/apps/web/src/app/AppWrapper/index.tsx b/apps/web/src/app/AppWrapper/index.tsx
@@ -8,10 +8,11 @@ import {
 } from '@vkontakte/vkui'
 import { lazy } from 'react'
 
+import { Suspense } from '../../shared'
 import { router } from '../routes/router'
 
-const NotFoundCorrect = lazy(() => import('./NotFound'))
-const App = lazy(() => import('./App'))
+import App from './App'
+import NotFoundCorrect from './NotFound'
 
 vkBridge.send('VKWebAppInit')
 
@@ -27,7 +28,9 @@ const AppWrapper = () => {
           platform={platform}
           isWebView={vkBridge.isWebView()}
         >
-          <App />
+          <Suspense id='App' mode='screen'>
+            <App />
+          </Suspense>
         </ConfigProvider>
       </RouterProvider>
     </AdaptivityProvider>

diff --git a/apps/web/src/assets/images/diary-ava.png b/apps/web/src/assets/images/diary-ava.png
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -1,6 +1,5 @@
 import { lazy } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Suspense } from './shared/ui'
 
 import '@vkontakte/vkui/dist/cssm/styles/themes.css'
 import './app/styles/index.css'
@@ -9,8 +8,4 @@ const AppWrapper = lazy(() => import('./app/AppWrapper'))
 
 const app = document.getElementById('app')
 
-createRoot(app!).render(
-  <Suspense id='RootAppWrapper' mode='screen'>
-    <AppWrapper />
-  </Suspense>
-)
+createRoot(app!).render(<AppWrapper />)
diff --git a/apps/web/src/pages/Achievements/hooks/useActiveTab.tsx b/apps/web/src/pages/Achievements/hooks/useActiveTab.tsx
@@ -1,13 +1,11 @@
 import type { PerformanceCurrent } from '@diary-spo/shared'
-import { lazy } from 'react'
 
-import { Suspense } from '../../../shared'
 import type { Tabs } from '../types.ts'
 
-const Summary = lazy(() => import('../Tabs/Summary'))
-const FinalMarks = lazy(() => import('../Tabs/FinalMarks'))
-const MarksByGroup = lazy(() => import('../Tabs/MarksByGroup'))
-const SubjectsList = lazy(() => import('../Tabs/SubjectsList'))
+import FinalMarks from '../Tabs/FinalMarks'
+import MarksByGroup from '../Tabs/MarksByGroup'
+import SubjectsList from '../Tabs/SubjectsList'
+import Summary from '../Tabs/Summary'
 
 export const useActiveTab = (
   selected: Tabs,
@@ -19,53 +17,35 @@ export const useActiveTab = (
   isLoading: boolean,
   setIsLoading: (value: boolean) => void
 ) => {
-  let activeTabComponent = null
-
   switch (selected) {
     case 'summary':
-      activeTabComponent = (
-        <Suspense id='UserInfo'>
-          <Summary
-            totalNumberOfMarks={totalNumberOfMarks}
-            averageMark={averageMark}
-            markCounts={markCounts}
-          />
-        </Suspense>
+      return (
+        <Summary
+          totalNumberOfMarks={totalNumberOfMarks}
+          averageMark={averageMark}
+          markCounts={markCounts}
+        />
       )
-      break
     case 'current':
-      activeTabComponent = (
-        <Suspense id='MarksByGroup'>
-          {/*TODO: fix*/}
-          <MarksByGroup marksForSubject={marksForSubject} />
-        </Suspense>
-      )
-      break
+      // TODO: fix
+      return <MarksByGroup marksForSubject={marksForSubject} />
     case 'finalMarks':
-      activeTabComponent = (
-        <Suspense id='FinalMarks'>
-          <FinalMarks
-            setIsError={setIsError}
-            isLoading={isLoading}
-            setIsLoading={setIsLoading}
-          />
-        </Suspense>
+      return (
+        <FinalMarks
+          setIsError={setIsError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+        />
       )
-      break
     case 'attestation':
-      activeTabComponent = (
-        <Suspense id='AttestationTab'>
-          <SubjectsList
-            setIsError={setIsError}
-            isLoading={isLoading}
-            setIsLoading={setIsLoading}
-          />
-        </Suspense>
+      return (
+        <SubjectsList
+          setIsError={setIsError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+        />
       )
-      break
     default:
-      break
+      return null
   }
-
-  return <main className='activeTabWrapper'>{activeTabComponent}</main>
 }
diff --git a/apps/web/src/pages/Achievements/index.tsx b/apps/web/src/pages/Achievements/index.tsx
@@ -7,7 +7,7 @@ import {
   TabsItem,
   Tabs as VKUITabs
 } from '@vkontakte/vkui'
-import { type FC, Suspense, useEffect, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import { handleResponse, isApiError, isNeedToUpdateCache } from '../../shared'
 
 import type { Props } from '../types.ts'
@@ -19,7 +19,11 @@ import type { Tabs } from './types.ts'
 import { getPerformance } from '../../shared/api'
 import { VKUI_ACCENT_BG, VKUI_RED } from '../../shared/config'
 import { useRateLimitExceeded, useSnackbar } from '../../shared/hooks'
-import { ErrorPlaceholder, PanelHeaderWithBack } from '../../shared/ui'
+import {
+  ErrorPlaceholder,
+  PanelHeaderWithBack,
+  Suspense
+} from '../../shared/ui'
 import LoadingData from './LoadingData.tsx'
 import { useActiveTab } from './hooks/useActiveTab.tsx'
 
@@ -153,9 +157,7 @@ const Achievements: FC<Props> = ({ id }) => {
         {isLoading && <LoadingData />}
       </PullToRefresh>
 
-      {!isLoading && !isError && (
-        <Suspense fallback='Загрузка...'>{activeTab}</Suspense>
-      )}
+      {!isLoading && !isError && <Suspense id='tab'>{activeTab}</Suspense>}
 
       {isError && <ErrorPlaceholder />}
 

diff --git a/apps/web/src/pages/LoginForm/index.tsx b/apps/web/src/pages/LoginForm/index.tsx
@@ -205,9 +205,6 @@ const LoginForm: FC<Props> = ({ id }) => {
               {isLoading ? 'Пытаюсь войти...' : 'Войти'}
             </Button>
           </FormItem>
-          <Div>
-            <Link href={ADMIN_PAGE}>Портал администратора</Link>
-          </Div>
         </form>
         {snackbar}
       </Group>

diff --git a/apps/web/src/pages/Notifications.tsx b/apps/web/src/pages/Notifications.tsx
@@ -96,60 +96,59 @@ const Notifications: FC<Props> = ({ id }) => {
     )
   }
 
-  const notificationsList =
-    notifications?.length &&
-    notifications?.map(
-      ({
-        title,
-        id: _id,
-        date,
-        isForEmployees,
-        isForParents,
-        isForStudents,
-        text
-      }) => (
-        <Group
-          key={_id}
-          description={
-            <div style={{ display: 'flex', gap: 10 }}>
-              {isForEmployees && (
-                <SubtitleWithBorder>Для работников</SubtitleWithBorder>
-              )}
-
-              {isForParents && (
-                <SubtitleWithBorder color='yellow-outline'>
-                  Для родителей
-                </SubtitleWithBorder>
-              )}
-              {isForStudents && (
-                <SubtitleWithBorder color='green-outline'>
-                  Для студентов
-                </SubtitleWithBorder>
-              )}
-            </div>
-          }
-          header={
-            <Header mode='tertiary'>
-              {new Date(date).toLocaleDateString()}
-            </Header>
-          }
-        >
-          <Card mode='shadow'>
-            <Div>
-              <Title level='3' Component='h3'>
-                {title}
-              </Title>
-              <Text>{text}</Text>
-            </Div>
-          </Card>
-        </Group>
-      )
-    )
-
   return (
     <Panel nav={id}>
       <PanelHeaderWithBack title='Объявления' />
-      <Div>{notificationsList}</Div>
+      <Div>
+        {Boolean(notifications?.length) &&
+          notifications?.map(
+            ({
+              title,
+              id: _id,
+              date,
+              isForEmployees,
+              isForParents,
+              isForStudents,
+              text
+            }) => (
+              <Group
+                key={_id}
+                description={
+                  <div style={{ display: 'flex', gap: 10 }}>
+                    {isForEmployees && (
+                      <SubtitleWithBorder>Для работников</SubtitleWithBorder>
+                    )}
+
+                    {isForParents && (
+                      <SubtitleWithBorder color='yellow-outline'>
+                        Для родителей
+                      </SubtitleWithBorder>
+                    )}
+                    {isForStudents && (
+                      <SubtitleWithBorder color='green-outline'>
+                        Для студентов
+                      </SubtitleWithBorder>
+                    )}
+                  </div>
+                }
+                header={
+                  <Header mode='tertiary'>
+                    {new Date(date).toLocaleDateString()}
+                  </Header>
+                }
+              >
+                <Card mode='shadow'>
+                  <Div>
+                    <Title level='3' Component='h3'>
+                      {title}
+                    </Title>
+                    <Text>{text}</Text>
+                  </Div>
+                </Card>
+              </Group>
+            )
+          )}
+      </Div>
 
       {Boolean(!notifications?.length && !isError) && (
         <Placeholder header='Объявлений нет' />