當有很多文字片段時改善使用者體驗

igncp · Jan 22, 2024 · 70e9758 · 70e9758
1 parent 328dbc8
commit 70e9758
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/packages/react-ui/src/containers/Panel/Panel.tsx b/packages/react-ui/src/containers/Panel/Panel.tsx
@@ -44,6 +44,7 @@ type Props = {
     defaultPronunciation?: string
     langOpts?: T_LangOpts
   }
+  initialFragmentIndex?: number
   languageManager: LanguageManager
   languageUIManager: LanguageUIManager
   onHideRequest?: () => void
@@ -75,6 +76,7 @@ const getLanguageDefinitions = (languageManager: LanguageManager) => {
 
 const Panel = ({
   _stories = {},
+  initialFragmentIndex,
   languageManager,
   languageUIManager,
   onHideRequest,
@@ -230,10 +232,17 @@ const Panel = ({
       const lastFragments = await storage.getValue('fragments')
 
       if (lastFragments) {
-        setFragments(JSON.parse(lastFragments))
+        const parsedFragments = JSON.parse(lastFragments)
+
+        setFragments({
+          ...parsedFragments,
+          ...(initialFragmentIndex !== undefined && {
+            index: initialFragmentIndex,
+          }),
+        })
       }
     })()
-  }, [])
+  }, [initialFragmentIndex])
 
   const SPECIAL_CHARS = langHandler!.getSpecialChars()
   const langOpts = _stories.langOpts ?? uiHandler.getLangOpts()
@@ -311,7 +320,7 @@ const Panel = ({
     return () => {
       document.removeEventListener('keydown', handleShortcuts)
     }
-  }, [lastThreeKeys, isShowingEdition, isShowingPronunciation])
+  }, [lastThreeKeys, isShowingEdition, isShowingPronunciation, fragments])
 
   const clearValues = () => {
     // eslint-disable-next-line no-extra-semi,padding-line-between-statements

diff --git a/packages/web-app/package.json b/packages/web-app/package.json
@@ -11,9 +11,10 @@
   "name": "writing-trainer-web-app",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build": "npm run build:deps && next build",
+    "build:deps": "cd ../react-ui && npm run build && cd ../web-app && rm -rf .next",
     "check": "npm run eslint && npm run prettier:check && npm run build",
-    "develop": "cd ../react-ui && npm run build && cd ../web-app && rm -rf .next && next dev",
+    "develop": "npm run build:deps && next dev",
     "eslint": "eslint . --ext ts --ext tsx --ext js",
     "format": "bash ../../helpers/format.sh",
     "prettier": "../../node_modules/.bin/prettier \"**/*.{js,jsx,ts,tsx,json,md}\"",

diff --git a/packages/web-app/src/components/main-page.tsx b/packages/web-app/src/components/main-page.tsx
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 import React, { useState, useEffect } from 'react'
 import { Panel, Button } from 'writing-trainer-react-ui'
 
@@ -18,6 +19,8 @@ const PANEL_UI = {
 const IndexPage = () => {
   const [theme, setTheme] = useState('')
 
+  const { query } = useRouter()
+
   useEffect(() => {
     const localTheme = localStorage.getItem('theme')
 
@@ -52,6 +55,9 @@ const IndexPage = () => {
       <div style={{ position: 'relative' }}>
         <Panel
           UI={PANEL_UI}
+          initialFragmentIndex={
+            query.fragmentIndex ? Number(query.fragmentIndex) : undefined
+          }
           languageManager={languageManager}
           languageUIManager={languageUIManager}
           services={panelServices}