poi-plugin-quest-info-2 0.5.1 → 0.5.5

package/README.md

@@ -5,14 +5,29 @@
 
 A [poi](https://github.com/poooi/poi) plugin that helps you view quest info. Data maintained by [kcanotify-gamedata](https://github.com/antest1/kcanotify-gamedata) & [kc3-translations](https://github.com/KC3Kai/kc3-translations) & [kcQuests](https://github.com/kcwikizh/kcQuests).
 
+![image](https://user-images.githubusercontent.com/18554747/143771661-00965277-5c45-454d-b4f0-57083ec3065d.png)
+
 ## Installation
 
 Paste `poi-plugin-quest-info-2` in the plugins tab and click the install button.
 
+## Features
+
+- Translated quest info.(English/Simplified Chinese/Traditional Chinese/Korean)
+- Task panel translation.
+- Quest search and filter.
+- Sync with game quest data.
+- Auto switch to quest tab when enter quest views.
+
 ## Thanks
 
 - [poi](https://github.com/poooi/poi)
-- [kcanotify-gamedata](https://github.com/antest1/kcanotify-gamedata)
-- [poi-plugin-tabex](https://github.com/momocow/poi-plugin-tabex)
 - [plugin-quest](https://github.com/poooi/plugin-quest)
+- [kcanotify-gamedata](https://github.com/antest1/kcanotify-gamedata)
 - [kcQuests](https://github.com/kcwikizh/kcQuests)
+- [舰娘百科](https://zh.kcwiki.cn/wiki/%E8%88%B0%E5%A8%98%E7%99%BE%E7%A7%91)
+- [poi-plugin-tabex](https://github.com/momocow/poi-plugin-tabex)
+
+## License
+
+MIT

package/build/kcQuestsData/DATA_VERSION

@@ -1 +1 @@
-eb8a7fca38fed2c16e027f2563e93e826d24e30f
+004638c4fa18cf4d37e45f3a8704bffe7cdaa49e

package/build/kcQuestsData/index.ts

@@ -4,4 +4,4 @@ export const KcwikiQuestData = {
   'zh-CN': zh_CN,
 }
 
-export const version = 'eb8a7fca38fed2c16e027f2563e93e826d24e30f'
+export const version = '004638c4fa18cf4d37e45f3a8704bffe7cdaa49e'

package/build/kcQuestsData/quests-scn.json

@@ -803,12 +803,6 @@
     "memo": "使用霰/霞/阳炎/不知火出击，击破BOSS，B胜及以上可以携带其他舰娘 奖励:开发资材 *2 家具箱（大） *1",
     "name": "「第十八驱逐队」出击！"
   },
-  "240": {
-    "code": "B22",
-    "desc": "派出包含「第三十驱逐队 (第一次)」的舰队出击，与 3-2 | 基斯岛近海 (3-2) 的敌人交战！",
-    "memo": "使用睦月/如月/弥生/望月出击，击破BOSS，B胜及以上可以携带其他舰娘C败北可，D败北不可 奖励:间宫 *1",
-    "name": "「第三十驱逐队（第一次）」出击！"
-  },
   "241": {
     "code": "Bw7",
     "desc": "向北方海域深处出击，捕捉敌人北方舰队的主力，消灭他们！",
@@ -827,6 +821,12 @@
     "memo": "击破BOSS战（S胜）两次 奖励:开发资材 *2 改修资材 *2",
     "name": "掌握南方海域珊瑚诸岛的制空权！"
   },
+  "244": {
+    "code": "B22",
+    "desc": "派出包含「第三十驱逐队 (第一次)」的舰队出击，与 3-2 | 基斯岛近海 (3-2) 的敌人交战！",
+    "memo": "使用睦月/如月/弥生/望月出击，击破BOSS，B胜及以上可以携带其他舰娘C败北可，D败北不可 奖励:间宫 *1",
+    "name": "「第三十驱逐队（第一次）」出击！"
+  },
   "245": {
     "code": "WB01",
     "desc": "在第一舰队旗舰配备高练度 (Lv.90～99) 的舰娘出击，在 2-3 | 东部奥廖尔海 (2-3) 的拂晓刻下胜利！",
@@ -3235,14 +3235,14 @@
   },
   "957": {
     "code": "B172 ",
-    "desc": "以山风改二 / 山风改二丁作为旗舰，编成僚舰三艘或以上的驱逐舰或海防舰的舰队，出击南西诸岛冲，制油所地带沿岸，南西诸岛防卫线以及镇守府近海！把侵入近海的敌人全都消灭吧！",
+    "desc": "以山风改二 / 山风改二丁作为旗舰，编成含旗舰在内共三艘或以上的驱逐舰或海防舰的舰队，出击南西诸岛冲，制油所地带沿岸，南西诸岛防卫线以及镇守府近海！把侵入近海的敌人全都消灭吧！",
     "memo": "编成山风改二(丁)为旗舰，3艘及以上DD/DE的舰队1-2、1-3、1-4、1-5各一次S胜 奖励:三式水中探信仪改",
     "name": "【山风改二】，拔锚！"
   },
   "958": {
     "code": "B173 ",
     "desc": "【山风改二 / 山风改二丁】【江风改二】【海风改二】任选两艘编成舰队，出击南西诸岛巴士海峡，塔威塔威泊地海域深处，南方海域前面，中部北海域孔雀岛海域，击灭敌方战力吧！",
-    "memo": "包含山风改二(丁)/江风改二/海风改二任意两艘的舰队2-2、7-2P2、5-1、6-4各一次S胜 奖励:以下奖励三选一：改修资材 ×5 大発動艇 ×3 新型兵装资材 ×2",
+    "memo": "包含山风改二(丁)/江风改二/海风改二任意两艘的舰队2-2、7-2P2、5-1、6-4各一次S胜 奖励:以下奖励三选一：改修资材 ×5大発動艇 ×3新型兵装资材 ×2",
     "name": "改白露型驱逐舰，【山风改二】，奋战！"
   },
   "1101": {
@@ -3284,7 +3284,7 @@
   "1107": {
     "code": "F102 ",
     "desc": "把钢材出口，再买入铝材，以此增加陆航的兵力吧！废弃【舰战】【舰攻】类装备各两个，再准备钢材 24000 以及 10 个开发资材！※完成任务时准备的材料会消失。",
-    "memo": "废弃舰战×2、舰攻×2完成任务时消耗钢材×24000、开发资材×10 奖励:以下奖励三选一：九六式陸攻 ×2一式陸攻 新型航空兵装资材",
+    "memo": "年常任务(9月)废弃舰战×2、舰攻×2完成任务时消耗钢材×24000、开发资材×10 奖励:以下奖励三选一：九六式陸攻 ×2一式陸攻 新型航空兵装资材",
     "name": "【钢材出口】增加陆基航空队的兵力吧！"
   },
   "1108": {

package/build/kcanotifyGamedata/DATA_VERSION

@@ -1 +1 @@
-5.3.3.0
+5.3.3.1

package/build/kcanotifyGamedata/index.ts

@@ -12,4 +12,4 @@ export const QuestData = {
   'ko-KR': ko_KR,
 }
 
-export const version = '5.3.3.0'
+export const version = '5.3.3.1'

package/build/kcanotifyGamedata/quests-ko.json

@@ -3165,7 +3165,7 @@
     "code": "B173",
     "name": "개 시라츠유급 구축함 「야마카제 개2」, 분전한다!",
     "desc": "「야마카제 개2/정」 「카와카제 개2」 「우미카제 개2」 중에서 2척 이상을 포함한 함대로, 남서제도 해역 바시 해협, 타위타위 정박지 앞바다 심부, 남방해역 전면, 중부 북해역 피콕 섬 앞바다에 출격, 적 전력을 격멸하라!",
-    "memo": "※야마카제 개2/정, 카와카제 개2, 우미카제 개2 중 총 2척 이상을 포함한 함대로 2-2, 5-1, 6-4, 7-2-2 각각 S승리 1회 / 보상 : 연료 880, 탄약 880, 보크사이트 880, (개수자재×5 or 대발동정×3 or 신형병장자재×2), (전투상보/12.7cm 연장포 C형 개2 or 61cm 4연장(산소)어뢰 후기형)"
+    "memo": "※야마카제 개2/정, 카와카제 개2, 우미카제 개2 중 총 2척 이상을 포함한 함대로 2-2, 5-1, 6-4, 7-2-2 각각 S승리 1회 / 보상 : 연료 880, 탄약 880, 보크사이트 880, (개수자재×5 or 대발동정×3 or 신형병장자재×2), (전투상보 or 12.7cm 연장포 C형 개2 or 61cm 4연장(산소)어뢰 후기형)"
   },
   "959": {
     "code": "B174",
@@ -3177,7 +3177,7 @@
     "code": "B175",
     "name": "속 : 「진수부 꽁치 축제」 발동 준비!",
     "desc": "경순(연습순양함 포함) · 잠수모함 · 특무함을 기함으로한 함대로, 북방해역 모레이 해, 키스 섬 앞바다, 알폰시노 방면, 북방해역 전역, 북방 AL 해역에 전개! 북방해역에서의 꽁치잡이에 대비하라!",
-    "memo": "※경순양함/연습순양함, 잠수모함, 특무함 기함인 함대로 3-1, 3-2, 3-3, 3-4, 3-5 각각 S승리 1회 보상 : 연료 500, 탄약 500, 강재 500, (숙련견시원×2 or 특주가구장인 or 개수자재×4)1, (2식 폭뢰×3 or 야간작전 항공요원×2 or 2식 대정)"
+    "memo": "※경순양함/연습순양함, 잠수모함, 특무함 기함인 함대로 3-1, 3-2, 3-3, 3-4, 3-5 각각 S승리 1회 보상 : 연료 500, 탄약 500, 강재 500, (숙련견시원×2 or 특주가구장인 or 개수자재×4), (2식 폭뢰×3 or 야간작전 항공요원×2 or 2식 대정)"
   },
   "961": {
     "code": "B176",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-quest-info-2",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "private": false,
   "description": "show quest info",
   "homepage": "https://github.com/lawvs/poi-plugin-quest-2/",

package/src/App.tsx

@@ -4,7 +4,7 @@ import { Text } from '@blueprintjs/core'
 
 import { Toolbar, useFilterQuest } from './Toolbar'
 import { StoreProvider } from './store'
-import { usePluginTranslation } from './poi'
+import { usePluginTranslation } from './poi/hooks'
 import { QuestList } from './components/QuestList'
 
 const Container = styled.div`

package/src/Settings.tsx

@@ -4,7 +4,7 @@ import { IconNames } from '@blueprintjs/icons'
 import styled from 'styled-components'
 import { version as PACKAGE_VERSION, homepage } from '../package.json'
 import { version as DATA_VERSION } from '../build/kcanotifyGamedata'
-import { usePluginTranslation } from './poi'
+import { usePluginTranslation } from './poi/hooks'
 import {
   useRemoveStorage,
   StoreProvider,

package/src/Toolbar.tsx

@@ -12,8 +12,9 @@ import {
   CATEGORY_TAGS,
   ALL_TAGS,
 } from './tags'
-import type { KcanotifyQuestExt } from './questHelper'
-import { IN_POI, usePluginTranslation } from './poi'
+import type { UnionQuest } from './questHelper'
+import { usePluginTranslation } from './poi/hooks'
+import { IN_POI } from './poi/env'
 
 const ToolbarWrapper = styled.div`
   display: flex;
@@ -157,10 +158,10 @@ const useToolbarFilter = () => {
     .map((i) => i.toUpperCase())
 
   const stringFilter = useCallback(
-    (quest: KcanotifyQuestExt) => {
-      const text = `${quest.code} ${quest.name} ${quest.desc} ${
-        quest.memo ?? ''
-      }`
+    (quest: UnionQuest) => {
+      const text = `${quest.docQuest.code} ${quest.docQuest.name} ${
+        quest.docQuest.desc
+      } ${quest.docQuest.memo ?? ''}`
       if (!searchKeywords) {
         return true
       }
@@ -172,7 +173,7 @@ const useToolbarFilter = () => {
   )
 
   const toolbarFilter = useCallback(
-    (quest: KcanotifyQuestExt) => {
+    (quest: UnionQuest) => {
       return [...tagsFilter, stringFilter].every((filter) => filter(quest))
     },
     [stringFilter, tagsFilter]

package/src/__tests__/kcanotifyData.spec.ts

@@ -1,7 +1,7 @@
 import { version, QuestData } from '../../build/kcanotifyGamedata'
 
 test('should Kcanotify Game data version correct', () => {
-  expect(version).toMatchInlineSnapshot(`"5.3.3.0"`)
+  expect(version).toMatchInlineSnapshot(`"5.3.3.1"`)
 })
 
 test('should Kcanotify Game data keys correct', () => {

package/src/__tests__/kcwikiData.spec.ts

@@ -1,9 +1,15 @@
-import { KcwikiQuestData } from '../../build/kcQuestsData'
+import { version, KcwikiQuestData } from '../../build/kcQuestsData'
+
+test('should KcwikiQuestData Game data version correct', () => {
+  expect(version).toMatchInlineSnapshot(
+    `"004638c4fa18cf4d37e45f3a8704bffe7cdaa49e"`
+  )
+})
 
 test('should KcwikiQuestData Game data keys correct', () => {
   expect(Object.keys(KcwikiQuestData)).toMatchInlineSnapshot(`
-Array [
-  "zh-CN",
-]
-`)
+    Array [
+      "zh-CN",
+    ]
+  `)
 })

package/src/components/QuestCard.tsx

@@ -2,7 +2,7 @@ import { Card, Elevation, H5, Text, Tooltip, Icon } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
-import { usePluginTranslation } from '../poi'
+import { usePluginTranslation } from '../poi/hooks'
 import {
   guessQuestCategory,
   QUEST_CATEGORY,
@@ -75,7 +75,7 @@ const questIconMap = {
 } as const
 
 const questStatusMap: Record<QUEST_STATUS, React.FC> = {
-  [QUEST_STATUS.Locked]: function Locked() {
+  [QUEST_STATUS.LOCKED]: function Locked() {
     const { t } = usePluginTranslation()
     return (
       <Tooltip content={t('Locked')}>
@@ -84,8 +84,8 @@ const questStatusMap: Record<QUEST_STATUS, React.FC> = {
     )
   },
   // Display nothing
-  [QUEST_STATUS.Default]: () => null,
-  [QUEST_STATUS.InProgress]: function InProgress() {
+  [QUEST_STATUS.DEFAULT]: () => null,
+  [QUEST_STATUS.IN_PROGRESS]: function InProgress() {
     const { t } = usePluginTranslation()
     return (
       <Tooltip content={t('In Progress')}>
@@ -93,7 +93,7 @@ const questStatusMap: Record<QUEST_STATUS, React.FC> = {
       </Tooltip>
     )
   },
-  [QUEST_STATUS.Completed]: function Completed() {
+  [QUEST_STATUS.COMPLETED]: function Completed() {
     const { t } = usePluginTranslation()
     return (
       <Tooltip content={t('Completed')}>
@@ -101,7 +101,7 @@ const questStatusMap: Record<QUEST_STATUS, React.FC> = {
       </Tooltip>
     )
   },
-  [QUEST_STATUS.AlreadyCompleted]: function AlreadyCompleted() {
+  [QUEST_STATUS.ALREADY_COMPLETED]: function AlreadyCompleted() {
     const { t } = usePluginTranslation()
     return (
       <Tooltip content={t('Already Completed')}>
@@ -126,7 +126,7 @@ export const LargeQuestCard: React.FC<QuestCardProps> = ({
   name,
   desc,
   tips,
-  status = QUEST_STATUS.Default,
+  status = QUEST_STATUS.DEFAULT,
   onClick,
   style,
 }) => {
@@ -159,7 +159,7 @@ export const MinimalQuestCard: React.FC<QuestCardProps> = ({
   name,
   desc,
   tips,
-  status = QUEST_STATUS.Default,
+  status = QUEST_STATUS.DEFAULT,
   onClick,
   style,
 }) => {

package/src/components/QuestList.tsx

@@ -7,10 +7,14 @@ import {
   List,
   ListRowRenderer,
 } from 'react-virtualized'
+import type { ListRowProps } from 'react-virtualized'
 import styled from 'styled-components'
-import { KcanotifyQuestExt, QUEST_STATUS } from '../questHelper'
+import { QUEST_STATUS } from '../questHelper'
+import type { UnionQuest } from '../questHelper'
 import { useLargeCard } from '../store'
 import { QuestCard } from './QuestCard'
+import { useIsQuestPluginTab } from '../poi/hooks'
+import { QUEST_API_STATE } from '../poi/types'
 
 const QuestListWrapper = styled.div`
   flex: 1;
@@ -23,26 +27,29 @@ const cache = new CellMeasurerCache({
   fixedWidth: true,
 })
 
-export const QuestList: React.FC<{ quests: KcanotifyQuestExt[] }> = ({
-  quests,
-}) => {
-  const { largeCard } = useLargeCard()
-  const listRef = useRef<List>(null)
-
-  useEffect(() => {
-    const changedIdx = quests.findIndex((i) => i.gameId === largeCard)
-    cache.clearAll()
-    listRef.current?.recomputeRowHeights(changedIdx)
-  }, [quests, largeCard])
+const questStateToQuestStatus = (
+  state: QUEST_API_STATE | undefined
+): QUEST_STATUS => {
+  switch (state) {
+    case QUEST_API_STATE.DEFAULT:
+      return QUEST_STATUS.DEFAULT
+    case QUEST_API_STATE.COMPLETED:
+      return QUEST_STATUS.COMPLETED
+    case QUEST_API_STATE.IN_PROGRESS:
+      return QUEST_STATUS.IN_PROGRESS
+    default:
+      return QUEST_STATUS.DEFAULT
+  }
+}
 
-  const onResize = useCallback(() => {
-    cache.clearAll()
-    listRef.current?.recomputeRowHeights()
-  }, [])
+const useQuestsRowRenderer = (quests: UnionQuest[]) => {
+  const rowRenderer = useCallback(
+    ({ key, index, style, parent }: ListRowProps) => {
+      const quest = quests[index]
+      const { gameId } = quest
+      const { code, name, desc, memo } = quest.docQuest
+      const questStatus = questStateToQuestStatus(quest.gameQuest?.api_state)
 
-  const rowRenderer: ListRowRenderer = useCallback(
-    ({ key, index, style, parent }) => {
-      const { gameId, code, name, desc, memo, active } = quests[index]
       return (
         <CellMeasurer
           cache={cache}
@@ -59,7 +66,7 @@ export const QuestList: React.FC<{ quests: KcanotifyQuestExt[] }> = ({
               name={name}
               desc={desc}
               tips={memo}
-              status={active ? QUEST_STATUS.InProgress : QUEST_STATUS.Default}
+              status={questStatus}
             ></QuestCard>
           </div>
         </CellMeasurer>
@@ -67,6 +74,33 @@ export const QuestList: React.FC<{ quests: KcanotifyQuestExt[] }> = ({
     },
     [quests]
   )
+  return rowRenderer
+}
+
+export const QuestList: React.FC<{ quests: UnionQuest[] }> = ({ quests }) => {
+  const { largeCard } = useLargeCard()
+  const activeTab = useIsQuestPluginTab()
+  const listRef = useRef<List>(null)
+  const rowRenderer: ListRowRenderer = useQuestsRowRenderer(quests)
+
+  useEffect(() => {
+    const largeCardIdx = quests.findIndex((i) => i.gameId === largeCard)
+    cache.clearAll()
+    listRef.current?.recomputeRowHeights(largeCardIdx)
+  }, [quests, largeCard])
+
+  useEffect(() => {
+    if (activeTab) {
+      cache.clearAll()
+      listRef.current?.recomputeRowHeights()
+    }
+  }, [activeTab])
+
+  const onResize = useCallback(() => {
+    cache.clearAll()
+    listRef.current?.recomputeRowHeights()
+  }, [])
+
   if (!quests.length) {
     // Prevent Uncaught Error: Requested index 0 is outside of range 0..0
     // See https://github.com/bvaughn/react-virtualized/issues/1016

package/src/patch.ts

@@ -1,5 +1,6 @@
 import { name as PACKAGE_NAME } from '../package.json'
-import { getPoiStore, importFromPoi } from './poi'
+import { getPoiStore } from './poi/store'
+import { importFromPoi } from './poi/env'
 import { QuestData } from '../build/kcanotifyGamedata'
 import { KcwikiQuestData } from '../build/kcQuestsData'
 import {
@@ -7,6 +8,8 @@ import {
   getStorage,
   isSupportedLanguages,
 } from './store'
+import type { i18n } from 'i18next'
+
 const LEGACY_QUEST_PLUGIN_ID = 'poi-plugin-quest-info'
 const HACK_KEY = `__patched-from-${PACKAGE_NAME}`
 
@@ -57,36 +60,37 @@ export const patchLegacyQuestPluginReducer = async () => {
     return
   }
 
-  const language = (globalThis as any).i18next.language
-  const initState = {
-    [HACK_KEY]: true,
-    quests: getQuestState(language),
-    questStatus: {},
-  }
+  try {
+    const i18next: i18n = await importFromPoi('views/env-parts/i18next')
+    const language = i18next.language
+    const initState = {
+      [HACK_KEY]: true,
+      quests: getQuestState(language),
+      questStatus: {},
+    }
 
-  const reducer = (
-    state = initState,
-    action: { type: string; [x: string]: any }
-  ) => {
-    switch (action.type) {
-      case '@@Config':
-        // change language
-        if (action.path === 'poi.misc.language') {
-          const newLanguage = action.value
-          return {
-            ...state,
-            quests: getQuestState(newLanguage),
+    const reducer = (
+      state = initState,
+      action: { type: string; [x: string]: any }
+    ) => {
+      switch (action.type) {
+        case '@@Config':
+          // change language
+          if (action.path === 'poi.misc.language') {
+            const newLanguage = action.value
+            return {
+              ...state,
+              quests: getQuestState(newLanguage),
+            }
           }
-        }
+      }
+      return state
     }
-    return state
-  }
 
-  try {
     const { extendReducer } = await importFromPoi('views/create-store')
     extendReducer(LEGACY_QUEST_PLUGIN_ID, reducer)
   } catch (e) {
-    console.warn('Hack quest plugin reducer error', e)
+    console.error('Hack quest plugin reducer error', e)
   }
 }
 
@@ -105,6 +109,6 @@ export const clearPatchLegacyQuestPluginReducer = async () => {
     const clearReducer = undefined
     extendReducer('poi-plugin-quest-info', clearReducer)
   } catch (e) {
-    console.warn('Clear hack quest plugin reducer error', e)
+    console.error('Clear hack quest plugin reducer error', e)
   }
 }

package/src/poi/env.ts

@@ -0,0 +1,16 @@
+export const IN_POI = 'POI_VERSION' in globalThis
+/**
+ * Prevent webpack early error
+ * Module not found: Error: Can't resolve 'views/create-store'
+ * TODO fix webpack warn
+ * Critical dependency: the request of a dependency is an expression
+ */
+
+export const importFromPoi = <T = any>(path: string): Promise<T> => {
+  if (!IN_POI) {
+    return new Promise(() => {
+      // Never resolve
+    })
+  }
+  return import(path)
+}

package/src/poi/hooks.ts

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { observePluginStore, observePoiStore } from './store'
+import { name as PACKAGE_NAME } from '../../package.json'
+import type { GameQuest, PoiQuestState, PoiState } from './types'
+
+export const useActiveQuest = () => {
+  const [activeQuests, setActiveQuests] = useState<PoiQuestState>({})
+
+  useEffect(() => {
+    const listener = (activeQuests: PoiQuestState) =>
+      setActiveQuests(activeQuests)
+
+    return observePoiStore(listener, activeQuestsSelector)
+  }, [])
+
+  return activeQuests
+}
+
+export const activeQuestsSelector = (state: PoiState): PoiQuestState =>
+  state?.info?.quests?.activeQuests ?? {}
+
+export const usePluginTranslation = () => {
+  return useTranslation(PACKAGE_NAME)
+}
+
+export const useGameQuest = () => {
+  const [quests, setQuests] = useState<GameQuest[]>([])
+  useEffect(() => {
+    const listener = (quests: GameQuest[] | null) => setQuests(quests ?? [])
+    // See reducer.ts
+    return observePluginStore(listener, (i) => i?._?.questList)
+  }, [])
+  return quests
+}
+
+const UNKNOWN_TAB = 'unknown'
+const useActiveTab = () => {
+  const [activeMainTab, setActiveMainTab] = useState<string>(UNKNOWN_TAB)
+
+  useEffect(() => {
+    const listener = (activeMainTab: string) => setActiveMainTab(activeMainTab)
+    // poooi/poi/views/redux/ui.es
+    return observePoiStore(
+      listener,
+      (state) => state?.ui?.activeMainTab ?? UNKNOWN_TAB
+    )
+  }, [])
+
+  return activeMainTab
+}
+
+export const useIsQuestPluginTab = () => {
+  const activeMainTab = useActiveTab()
+  return activeMainTab === PACKAGE_NAME
+}

package/src/poi/store.ts

@@ -0,0 +1,80 @@
+import { name as PACKAGE_NAME } from '../../package.json'
+import type { PluginState } from '../reducer'
+import { IN_POI, importFromPoi } from './env'
+import type { PoiState, Store } from './types'
+
+const noop = () => {}
+const id = <T>(x: T) => x
+
+/**
+ * See https://redux.js.org/api/store#subscribelistener
+ */
+const observeStore = <State, SelectedState = State>(
+  store: Store<State>,
+  onChange: (state: SelectedState) => void,
+  selector: (s: State) => SelectedState = id as any
+) => {
+  let currentState: SelectedState
+
+  const handleChange = () => {
+    const nextState = selector(store.getState())
+    if (nextState !== currentState) {
+      currentState = nextState
+      onChange(currentState)
+    }
+  }
+
+  const unsubscribe = store.subscribe(handleChange)
+  handleChange()
+  return unsubscribe
+}
+
+export const observePoiStore = <SelectedState = PoiState>(
+  onChange: (state: SelectedState) => void,
+  selector: (state: PoiState) => SelectedState = id as any
+) => {
+  let valid = true
+  let unsubscribe = noop
+  getPoiStore().then((store) => {
+    if (!valid) {
+      return
+    }
+    unsubscribe = observeStore(store, onChange, selector)
+  })
+
+  return () => {
+    valid = false
+    unsubscribe()
+  }
+}
+
+export const observePluginStore = <SelectedState = PluginState>(
+  onChange: (state: SelectedState) => void,
+  selector: (state: PluginState) => SelectedState = id as any
+) => observePoiStore(onChange, (s) => selector(s?.ext[PACKAGE_NAME]))
+
+const fallbackStore: Store<PoiState> = {
+  getState: noop as () => PoiState,
+  subscribe: () => (() => {}) as () => () => void,
+}
+
+let globalStore: Store<PoiState> | null = null
+/**
+ * Get poi global Store if in poi env
+ */
+export const getPoiStore: () => Promise<Store<PoiState>> = async () => {
+  if (globalStore !== null) {
+    return globalStore
+  }
+  if (IN_POI) {
+    try {
+      const { store } = await importFromPoi('views/create-store')
+      globalStore = store
+      return store
+    } catch (error) {
+      console.warn('Load global store error', error)
+    }
+  }
+  globalStore = fallbackStore
+  return fallbackStore
+}

package/src/poi/types.ts

@@ -0,0 +1,117 @@
+import type { PluginState } from '../reducer'
+
+export enum QUEST_API_STATE {
+  DEFAULT = 1,
+  IN_PROGRESS = 2,
+  COMPLETED = 3,
+}
+
+// See https://github.com/poooi/poi/blob/master/views/redux/info/quests.es
+export type GameQuest = {
+  api_state: QUEST_API_STATE
+  api_no: number
+  api_title: string
+  api_detail: string
+  /**
+   * 任务类别
+   *
+   * 1. Composition
+   * 1. Sortie
+   * 1. Exercise
+   * 1. Expedition
+   * 1. Supply/Docking
+   * 1. Arsenal
+   * 1. Modernization
+   *
+   * @see https://github.com/poooi/plugin-quest/blob/master/index.es#L49-L57
+   */
+  api_category: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+  /**
+   * 任务类型
+   *
+   * 1. One-time
+   * 1. Daily
+   * 1. Weekly
+   * 1. -3rd/-7th/-0th
+   * 1. -2nd/-8th
+   * 1. Monthly
+   * 1. Quarterly
+   *
+   * @see https://github.com/poooi/plugin-quest/blob/master/index.es#L69-L77
+   */
+  api_type: 1 | 2 | 3 | 4 | 5 | 6 | 7
+  // Rewards 油弹钢铝
+  api_get_material: [number, number, number, number]
+  api_invalid_flag: 0
+  api_label_type: 1
+  // 0: Empty: [0.0, 0.5)
+  // 1: 50%: [0.5, 0.8)
+  // 2: 80%: [0.8, 1.0)
+  api_progress_flag: 0 | 1 | 2
+  api_select_rewards?: [
+    {
+      api_count: number
+      api_kind: number
+      api_mst_id: number
+      api_no: number
+    }[]
+  ]
+  api_voice_id: 0
+  api_bonus_flag: 1
+}
+
+type QuestListAction = {
+  type: '@@Response/kcsapi/api_get_member/questlist'
+  path: '/kcsapi/api_get_member/questlist'
+  postBody: {
+    api_verno: '1'
+    api_tab_id:
+      | '0' // All
+      | '9' // In progress
+      | '1' // Daily
+      | '2' // Weekly
+      | '3' // Monthly
+      | '4' // Once
+      | '5' // Others
+  }
+  body: {
+    api_completed_kind: number
+    // api_list.length
+    api_count: number
+    // In progress count
+    api_exec_count: number
+    api_exec_type: number
+    api_list: GameQuest[]
+  }
+}
+
+type OtherAction = {
+  type: 'otherString' // TODO fix me
+  path?: string
+  postBody?: unknown
+  body?: unknown
+}
+
+export type PoiAction = QuestListAction | OtherAction
+
+export type PoiState = {
+  ui: {
+    activeMainTab: string
+    activeFleetId?: number
+    activePluginName?: string
+  }
+  ext: {
+    // TODO fix use constant PACKAGE_NAME
+    [packageName: string]: PluginState
+  }
+  plugins: { id: string; enabled: boolean; [x: string]: unknown }[]
+  [x: string]: any
+}
+
+export type Store<S> = {
+  getState: () => S
+  subscribe: (listener: () => void) => () => void
+}
+
+// state.info.quests.activeQuests
+export type PoiQuestState = Record<number, { time: number; detail: GameQuest }>

package/src/questHelper.ts

@@ -1,6 +1,7 @@
 import { QuestData } from '../build/kcanotifyGamedata'
+import { GameQuest, QUEST_API_STATE } from './poi/types'
 
-type KcanotifyQuest = {
+type DocQuest = {
   code: string
   name: string
   desc: string
@@ -9,9 +10,10 @@ type KcanotifyQuest = {
   tracking?: number[][]
 }
 
-export type KcanotifyQuestExt = KcanotifyQuest & {
+export type UnionQuest = {
   gameId: string
-  active?: boolean
+  gameQuest?: GameQuest
+  docQuest: DocQuest
 }
 
 const questStartsFilter = (str: string) =>
@@ -26,16 +28,18 @@ export const quarterlyQuest = questStartsFilter('(季任)')
 // (年任) (年任 / x 月)
 export const yearlyQuest = questStartsFilter('(年任')
 
-export const isInProgressQuest = (quest: KcanotifyQuestExt) => quest.active
-export const isDailyQuest = (quest: KcanotifyQuestExt) =>
+export const isInProgressQuest = (quest: UnionQuest) =>
+  quest.gameQuest?.api_state === QUEST_API_STATE.IN_PROGRESS ||
+  quest.gameQuest?.api_state === QUEST_API_STATE.COMPLETED
+export const isDailyQuest = (quest: UnionQuest) =>
   dailyQuest.includes(quest.gameId)
-export const isWeeklyQuest = (quest: KcanotifyQuestExt) =>
+export const isWeeklyQuest = (quest: UnionQuest) =>
   weeklyQuest.includes(quest.gameId)
-export const isMonthlyQuest = (quest: KcanotifyQuestExt) =>
+export const isMonthlyQuest = (quest: UnionQuest) =>
   monthlyQuest.includes(quest.gameId)
-export const isQuarterlyQuest = (quest: KcanotifyQuestExt) =>
+export const isQuarterlyQuest = (quest: UnionQuest) =>
   quarterlyQuest.includes(quest.gameId)
-export const isYearlyQuest = (quest: KcanotifyQuestExt) =>
+export const isYearlyQuest = (quest: UnionQuest) =>
   yearlyQuest.includes(quest.gameId)
 
 export enum QUEST_CATEGORY {
@@ -154,28 +158,28 @@ export const guessQuestCategory = (
   }
 }
 
-export const isCompositionQuest = ({ code }: KcanotifyQuestExt) =>
+export const isCompositionQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.Composition
-export const isSortieQuest = ({ code }: KcanotifyQuestExt) =>
+export const isSortieQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.Sortie
-export const isExerciseQuest = ({ code }: KcanotifyQuestExt) =>
+export const isExerciseQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.Exercise
-export const isExpeditionQuest = ({ code }: KcanotifyQuestExt) =>
+export const isExpeditionQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.Expedition
-export const isSupplyOrDockingQuest = ({ code }: KcanotifyQuestExt) =>
+export const isSupplyOrDockingQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.SupplyOrDocking
-export const isArsenalQuest = ({ code }: KcanotifyQuestExt) =>
+export const isArsenalQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.Arsenal
-export const isModernizationQuest = ({ code }: KcanotifyQuestExt) =>
+export const isModernizationQuest = ({ code }: DocQuest) =>
   guessQuestCategory(code).type === QUEST_CATEGORY.Modernization
-export const isUnknownCategoryQuest = ({ code }: KcanotifyQuestExt) =>
+export const isUnknownCategoryQuest = ({ code }: DocQuest) =>
   // Starts with unknown character
   /^[^ABCDEFG]/.test(code)
 
 export enum QUEST_STATUS {
-  Locked,
-  Default,
-  InProgress,
-  Completed,
-  AlreadyCompleted,
+  LOCKED,
+  DEFAULT,
+  IN_PROGRESS,
+  COMPLETED,
+  ALREADY_COMPLETED,
 }

package/src/reducer.ts

@@ -1,4 +1,4 @@
-import type { GameQuest, PoiAction } from './poi'
+import type { GameQuest, PoiAction } from './poi/types'
 
 const initState = {
   questList: null as null | GameQuest[],

package/src/store/quest.ts

@@ -1,16 +1,9 @@
-import { useCallback, useEffect, useState } from 'react'
-import { checkIsKcwikiSupportedLanguages } from '.'
+import { useCallback } from 'react'
 import { QuestData } from '../../build/kcanotifyGamedata'
-import {
-  activeQuestsSelector,
-  GameQuest,
-  observePluginStore,
-  observePoiStore,
-  PoiQuestState,
-  usePluginTranslation,
-} from '../poi'
-import { getCategory, KcanotifyQuestExt } from '../questHelper'
-import { useKcwikiData } from './kcwiki'
+import { useGameQuest, usePluginTranslation } from '../poi/hooks'
+import { getCategory } from '../questHelper'
+import type { UnionQuest } from '../questHelper'
+import { useKcwikiData, checkIsKcwikiSupportedLanguages } from './kcwiki'
 import { useStore } from './store'
 
 const DEFAULT_LANG = 'ja-JP'
@@ -35,19 +28,6 @@ export const useLanguage = () => {
   return lang
 }
 
-const useActiveQuest = () => {
-  const [activeQuests, setActiveQuests] = useState<PoiQuestState>({})
-
-  useEffect(() => {
-    const listener = (activeQuests: PoiQuestState) =>
-      setActiveQuests(activeQuests)
-
-    return observePoiStore(listener, activeQuestsSelector)
-  }, [])
-
-  return activeQuests
-}
-
 const useQuestMap = () => {
   const lang = useLanguage()
   const kcwikiData = useKcwikiData(lang)
@@ -57,37 +37,21 @@ const useQuestMap = () => {
   return QuestData[lang]
 }
 
-const useGameQuest = () => {
-  const [quests, setQuests] = useState<GameQuest[] | null>(null)
-  useEffect(() => {
-    const listener = (quests: GameQuest[] | null) => setQuests(quests)
-    // See reducer.ts
-    return observePluginStore(listener, (i) => i?._?.questList)
-  }, [])
-  return quests
-}
-
-export const useQuest = (): KcanotifyQuestExt[] => {
-  const activeQuest = useActiveQuest()
-  const questMap = useQuestMap()
+export const useQuest = (): UnionQuest[] => {
+  const docQuestMap = useQuestMap()
   const gameQuest = useGameQuest()
   const {
     store: { syncWithGame },
   } = useStore()
 
-  if (syncWithGame) {
-    if (gameQuest == null) {
-      // TODO tip use to sync quest data
-      return []
-    }
+  if (syncWithGame && gameQuest.length) {
     return gameQuest.map((quest) => {
       const gameId = String(quest.api_no)
-      const active = gameId in activeQuest
-      if (gameId in questMap) {
+      if (gameId in docQuestMap) {
         return {
           gameId,
-          active,
-          ...questMap[gameId as unknown as keyof typeof questMap],
+          gameQuest: quest,
+          docQuest: docQuestMap[gameId as keyof typeof docQuestMap],
         }
       }
 
@@ -95,18 +59,21 @@ export const useQuest = (): KcanotifyQuestExt[] => {
       // May be a new quest
       return {
         gameId,
-        active,
-        code: `${getCategory(quest.api_category).wikiSymbol}?`,
-        name: quest.api_title,
-        desc: quest.api_detail,
+        gameQuest: quest,
+        docQuest: {
+          code: `${getCategory(quest.api_category).wikiSymbol}?`,
+          name: quest.api_title,
+          desc: quest.api_detail,
+        },
       }
     })
   } else {
     // Return all recorded quests
-    return Object.entries(questMap).map(([gameId, val]) => ({
+    return Object.entries(docQuestMap).map(([gameId, val]) => ({
       gameId,
-      active: gameId in activeQuest,
-      ...val,
+      // Maybe empty
+      gameQuest: gameQuest.find((quest) => quest.api_no === Number(gameId))!,
+      docQuest: val,
     }))
   }
 }

package/src/tags.ts

@@ -1,4 +1,4 @@
-import { IN_POI } from './poi'
+import { IN_POI } from './poi/env'
 import {
   isDailyQuest,
   isMonthlyQuest,
@@ -15,6 +15,7 @@ import {
   isUnknownCategoryQuest,
   isInProgressQuest,
 } from './questHelper'
+import type { UnionQuest } from './questHelper'
 
 const yes = () => true as const
 
@@ -25,16 +26,21 @@ export const ALL_CATEGORY_TAG = {
 
 export const ALL_TYPE_TAG = ALL_CATEGORY_TAG
 
+const withDocQuest =
+  (filterFn: (q: UnionQuest['docQuest']) => boolean) =>
+  (unionQuest: UnionQuest) =>
+    filterFn(unionQuest.docQuest)
+
 export const CATEGORY_TAGS = [
   ALL_CATEGORY_TAG,
-  { name: 'Composition', filter: isCompositionQuest },
-  { name: 'Sortie', filter: isSortieQuest },
-  { name: 'Exercise', filter: isExerciseQuest },
-  { name: 'Expedition', filter: isExpeditionQuest },
-  { name: 'Supply / Docking', filter: isSupplyOrDockingQuest },
-  { name: 'Arsenal', filter: isArsenalQuest },
-  { name: 'Modernization', filter: isModernizationQuest },
-  { name: 'Others', filter: isUnknownCategoryQuest },
+  { name: 'Composition', filter: withDocQuest(isCompositionQuest) },
+  { name: 'Sortie', filter: withDocQuest(isSortieQuest) },
+  { name: 'Exercise', filter: withDocQuest(isExerciseQuest) },
+  { name: 'Expedition', filter: withDocQuest(isExpeditionQuest) },
+  { name: 'Supply / Docking', filter: withDocQuest(isSupplyOrDockingQuest) },
+  { name: 'Arsenal', filter: withDocQuest(isArsenalQuest) },
+  { name: 'Modernization', filter: withDocQuest(isModernizationQuest) },
+  { name: 'Others', filter: withDocQuest(isUnknownCategoryQuest) },
 ] as const
 
 export const TYPE_TAGS = [

package/src/poi.ts

@@ -1,211 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { name as PACKAGE_NAME } from '../package.json'
-import type { PluginState } from './reducer'
-
-// See https://github.com/poooi/poi/blob/master/views/redux/info/quests.es
-export type GameQuest = {
-  // 1 Default
-  // 2 In progress
-  // 3 Completed
-  api_state: 1 | 2 | 3
-  api_no: number
-  api_title: string
-  api_detail: string
-  /**
-   * 任务类别
-   *
-   * 1. Composition
-   * 1. Sortie
-   * 1. Exercise
-   * 1. Expedition
-   * 1. Supply/Docking
-   * 1. Arsenal
-   * 1. Modernization
-   *
-   * @see https://github.com/poooi/plugin-quest/blob/master/index.es#L49-L57
-   */
-  api_category: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
-  /**
-   * 任务类型
-   *
-   * 1. One-time
-   * 1. Daily
-   * 1. Weekly
-   * 1. -3rd/-7th/-0th
-   * 1. -2nd/-8th
-   * 1. Monthly
-   * 1. Quarterly
-   *
-   * @see https://github.com/poooi/plugin-quest/blob/master/index.es#L69-L77
-   */
-  api_type: 1 | 2 | 3 | 4 | 5 | 6 | 7
-  // Rewards 油弹钢铝
-  api_get_material: [number, number, number, number]
-  api_invalid_flag: 0
-  api_label_type: 1
-  // 0: Empty: [0.0, 0.5)
-  // 1: 50%: [0.5, 0.8)
-  // 2: 80%: [0.8, 1.0)
-  api_progress_flag: 0 | 1 | 2
-  api_select_rewards?: [
-    {
-      api_count: number
-      api_kind: number
-      api_mst_id: number
-      api_no: number
-    }[]
-  ]
-  api_voice_id: 0
-  api_bonus_flag: 1
-}
-
-type QuestListAction = {
-  type: '@@Response/kcsapi/api_get_member/questlist'
-  path: '/kcsapi/api_get_member/questlist'
-  postBody: {
-    api_verno: '1'
-    api_tab_id:
-      | '0' // All
-      | '9' // In progress
-      | '1' // Daily
-      | '2' // Weekly
-      | '3' // Monthly
-      | '4' // Once
-      | '5' // Others
-  }
-  body: {
-    api_completed_kind: number
-    // api_list.length
-    api_count: number
-    // In progress count
-    api_exec_count: number
-    api_exec_type: number
-    api_list: GameQuest[]
-  }
-}
-
-type OtherAction = {
-  type: 'otherString' // TODO fix me
-  path?: string
-  postBody?: unknown
-  body?: unknown
-}
-
-export type PoiAction = QuestListAction | OtherAction
-
-export type PoiState = {
-  ext: {
-    // TODO fix use constant PACKAGE_NAME
-    [packageName: string]: PluginState
-  }
-  plugins: { id: string; enabled: boolean; [x: string]: unknown }[]
-  [x: string]: any
-}
-
-type Store<S> = {
-  getState: () => S
-  subscribe: (listener: () => void) => () => void
-}
-
-// state.info.quests.activeQuests
-export type PoiQuestState = Record<number, { time: number; detail: GameQuest }>
-
-export const IN_POI = 'POI_VERSION' in globalThis
-
-const noop = () => {}
-const id = <T>(x: T) => x
-
-/**
- * Prevent webpack early error
- * Module not found: Error: Can't resolve 'views/create-store'
- * TODO fix webpack warn
- * Critical dependency: the request of a dependency is an expression
- */
-export const importFromPoi = <T = any>(path: string): Promise<T> => {
-  if (!IN_POI) {
-    return new Promise(() => {
-      // Never resolve
-    })
-  }
-  return import(path)
-}
-
-/**
- * See https://redux.js.org/api/store#subscribelistener
- */
-const observeStore = <State, SelectedState = State>(
-  store: Store<State>,
-  onChange: (state: SelectedState) => void,
-  selector: (s: State) => SelectedState = id as any
-) => {
-  let currentState: SelectedState
-
-  const handleChange = () => {
-    const nextState = selector(store.getState())
-    if (nextState !== currentState) {
-      currentState = nextState
-      onChange(currentState)
-    }
-  }
-
-  const unsubscribe = store.subscribe(handleChange)
-  handleChange()
-  return unsubscribe
-}
-
-export const observePoiStore = <SelectedState = PoiState>(
-  onChange: (state: SelectedState) => void,
-  selector: (state: PoiState) => SelectedState = id as any
-) => {
-  let valid = true
-  let unsubscribe = noop
-  getPoiStore().then((store) => {
-    if (!valid) {
-      return
-    }
-    unsubscribe = observeStore(store, onChange, selector)
-  })
-
-  return () => {
-    valid = false
-    unsubscribe()
-  }
-}
-
-export const observePluginStore = <SelectedState = PluginState>(
-  onChange: (state: SelectedState) => void,
-  selector: (state: PluginState) => SelectedState = id as any
-) => observePoiStore(onChange, (s) => selector(s?.ext[PACKAGE_NAME]))
-
-const fallbackStore: Store<PoiState> = {
-  getState: noop as () => PoiState,
-  subscribe: () => (() => {}) as () => () => void,
-}
-
-let globalStore: Store<PoiState> | null = null
-/**
- * Get poi global Store if in poi env
- */
-export const getPoiStore: () => Promise<Store<PoiState>> = async () => {
-  if (globalStore !== null) {
-    return globalStore
-  }
-  if (IN_POI) {
-    try {
-      const { store } = await importFromPoi('views/create-store')
-      globalStore = store
-      return store
-    } catch (error) {
-      console.warn('Load global store error', error)
-    }
-  }
-  globalStore = fallbackStore
-  return fallbackStore
-}
-
-export const activeQuestsSelector = (state: PoiState): PoiQuestState =>
-  state?.info?.quests?.activeQuests ?? {}
-
-export const usePluginTranslation = () => {
-  return useTranslation(PACKAGE_NAME)
-}