poi-plugin-quest-info-2 0.5.0 → 0.5.4

package/src/components/QuestList.tsx

@@ -7,10 +7,12 @@ import {
   List,
   ListRowRenderer,
 } from 'react-virtualized'
+import type { ListRowProps } from 'react-virtualized'
 import styled from 'styled-components'
 import { KcanotifyQuestExt, QUEST_STATUS } from '../questHelper'
 import { useLargeCard } from '../store'
 import { QuestCard } from './QuestCard'
+import { useIsQuestPluginTab } from '../poi/hooks'
 
 const QuestListWrapper = styled.div`
   flex: 1;
@@ -23,25 +25,9 @@ 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 onResize = useCallback(() => {
-    cache.clearAll()
-    listRef.current?.recomputeRowHeights()
-  }, [])
-
-  const rowRenderer: ListRowRenderer = useCallback(
-    ({ key, index, style, parent }) => {
+const useQuestsRowRenderer = (quests: KcanotifyQuestExt[]) => {
+  const rowRenderer = useCallback(
+    ({ key, index, style, parent }: ListRowProps) => {
       const { gameId, code, name, desc, memo, active } = quests[index]
       return (
         <CellMeasurer
@@ -67,6 +53,36 @@ export const QuestList: React.FC<{ quests: KcanotifyQuestExt[] }> = ({
     },
     [quests]
   )
+  return rowRenderer
+}
+
+export const QuestList: React.FC<{ quests: KcanotifyQuestExt[] }> = ({
+  quests,
+}) => {
+  const { largeCard } = useLargeCard()
+  const activeTab = useIsQuestPluginTab()
+  const listRef = useRef<List>(null)
+
+  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()
+  }, [])
+
+  const rowRenderer: ListRowRenderer = useQuestsRowRenderer(quests)
+
   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[] | null>(null)
+  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,114 @@
+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 = {
+  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/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,14 +1,11 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback } from 'react'
 import { checkIsKcwikiSupportedLanguages } from '.'
 import { QuestData } from '../../build/kcanotifyGamedata'
 import {
-  activeQuestsSelector,
-  GameQuest,
-  observePluginStore,
-  observePoiStore,
-  PoiQuestState,
+  useActiveQuest,
+  useGameQuest,
   usePluginTranslation,
-} from '../poi'
+} from '../poi/hooks'
 import { getCategory, KcanotifyQuestExt } from '../questHelper'
 import { useKcwikiData } from './kcwiki'
 import { useStore } from './store'
@@ -35,19 +32,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,16 +41,6 @@ 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()

package/src/store/store.tsx

@@ -5,7 +5,6 @@ import React, {
   useCallback,
   useContext,
 } from 'react'
-import { IN_POI } from '../poi'
 import { ALL_TYPE_TAG, ALL_CATEGORY_TAG } from '../tags'
 import { name as PACKAGE_NAME } from '../../package.json'
 import { createGlobalState, useMount, useUpdateEffect } from 'react-use'
@@ -19,7 +18,7 @@ export const initialState = {
     [ALL_CATEGORY_TAG.name]: true,
   } as Record<string, boolean>,
   largeCard: null as null | string,
-  syncWithGame: IN_POI,
+  syncWithGame: false,
   preferKcwikiData: true,
 }
 

package/src/tags.ts

@@ -1,4 +1,4 @@
-import { IN_POI } from './poi'
+import { IN_POI } from './poi/env'
 import {
   isDailyQuest,
   isMonthlyQuest,