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

package/src/Settings.tsx

@@ -1,11 +1,16 @@
 import React, { StrictMode, useCallback } from 'react'
-import { Button, AnchorButton, Text } from '@blueprintjs/core'
+import { Button, AnchorButton, Text, Checkbox } from '@blueprintjs/core'
 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 { removeStorage } from './store'
+import {
+  useRemoveStorage,
+  StoreProvider,
+  useLanguage,
+  usePreferKcwiki,
+} from './store'
 
 const Container = styled.div`
   display: flex;
@@ -18,27 +23,52 @@ const Container = styled.div`
   }
 `
 
-export const Settings = () => {
+const useIsSimplifiedChinese = () => useLanguage() === 'zh-CN'
+
+const SettingsMain = () => {
   const { t } = usePluginTranslation()
-  const handleClearCache = useCallback(() => removeStorage(), [])
+  const isSimplifiedChinese = useIsSimplifiedChinese()
+  const removeStorage = useRemoveStorage()
+  const [preferKcwiki, setPreferKcwiki] = usePreferKcwiki()
+  const handleEnabledChange: React.FormEventHandler<HTMLInputElement> =
+    useCallback(() => {
+      setPreferKcwiki(!preferKcwiki)
+    }, [preferKcwiki, setPreferKcwiki])
+
   return (
-    <StrictMode>
-      <Container>
-        <Text>{t('Version', { version: PACKAGE_VERSION })}</Text>
-        <Text>{t('Data Version', { version: DATA_VERSION })}</Text>
-        <AnchorButton
-          icon={IconNames.CODE}
-          rightIcon={IconNames.SHARE}
-          text={t('View source code on GitHub')}
-          href={homepage}
-          target="_blank"
-        ></AnchorButton>
-        <Button
-          icon={IconNames.TRASH}
-          text={t('Restore defaults')}
-          onClick={handleClearCache}
-        ></Button>
-      </Container>
-    </StrictMode>
+    <>
+      <Checkbox
+        checked={preferKcwiki}
+        disabled={!isSimplifiedChinese}
+        label={t('Use Kcwiki data')}
+        onChange={handleEnabledChange}
+      />
+
+      <Text>{t('Version', { version: PACKAGE_VERSION })}</Text>
+      <Text>{t('Data Version', { version: DATA_VERSION })}</Text>
+      <AnchorButton
+        icon={IconNames.CODE}
+        rightIcon={IconNames.SHARE}
+        text={t('View source code on GitHub')}
+        href={homepage}
+        target="_blank"
+      ></AnchorButton>
+
+      <Button
+        icon={IconNames.TRASH}
+        text={t('Restore defaults')}
+        onClick={removeStorage}
+      ></Button>
+    </>
   )
 }
+
+export const Settings = () => (
+  <StrictMode>
+    <StoreProvider>
+      <Container>
+        <SettingsMain />
+      </Container>
+    </StoreProvider>
+  </StrictMode>
+)

package/src/Toolbar.tsx

@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons'
 import styled from 'styled-components'
 import React, { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
-import { useThrottle } from './utils'
+import { useThrottle } from 'react-use'
 import { useQuest, useStore } from './store'
 import {
   ALL_TYPE_TAG,
@@ -158,7 +158,9 @@ const useToolbarFilter = () => {
 
   const stringFilter = useCallback(
     (quest: KcanotifyQuestExt) => {
-      const text = `${quest.code} ${quest.name} ${quest.desc}`
+      const text = `${quest.code} ${quest.name} ${quest.desc} ${
+        quest.memo ?? ''
+      }`
       if (!searchKeywords) {
         return true
       }

package/src/__tests__/kcanotifyData.spec.ts

@@ -1,5 +1,17 @@
-import { version } from '../../build/kcanotifyGamedata'
+import { version, QuestData } from '../../build/kcanotifyGamedata'
 
 test('should Kcanotify Game data version correct', () => {
-  expect(version).toMatchInlineSnapshot(`"5.3.0.3"`)
+  expect(version).toMatchInlineSnapshot(`"5.3.3.0"`)
+})
+
+test('should Kcanotify Game data keys correct', () => {
+  expect(Object.keys(QuestData)).toMatchInlineSnapshot(`
+Array [
+  "zh-CN",
+  "zh-TW",
+  "ja-JP",
+  "en-US",
+  "ko-KR",
+]
+`)
 })

package/src/__tests__/kcwikiData.spec.ts

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

package/src/components/QuestCard.tsx

@@ -43,6 +43,10 @@ const CardBody = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+
+  * + * {
+    margin-top: 8px;
+  }
 `
 
 const CardTail = styled.div`

package/src/patch.ts

@@ -1,7 +1,12 @@
 import { name as PACKAGE_NAME } from '../package.json'
 import { getPoiStore, importFromPoi } from './poi'
 import { QuestData } from '../build/kcanotifyGamedata'
-
+import { KcwikiQuestData } from '../build/kcQuestsData'
+import {
+  checkIsKcwikiSupportedLanguages,
+  getStorage,
+  isSupportedLanguages,
+} from './store'
 const LEGACY_QUEST_PLUGIN_ID = 'poi-plugin-quest-info'
 const HACK_KEY = `__patched-from-${PACKAGE_NAME}`
 
@@ -19,6 +24,28 @@ const isLegacyQuestPluginEnabled = async () => {
   return false
 }
 
+const getQuestState = (maybeLanguage: string) => {
+  const supported = isSupportedLanguages(maybeLanguage)
+  if (!supported) {
+    return {}
+  }
+  const preferKcwikiData = getStorage()?.preferKcwikiData ?? true
+  const kcwikiSupported = checkIsKcwikiSupportedLanguages(maybeLanguage)
+
+  const data =
+    preferKcwikiData && kcwikiSupported
+      ? KcwikiQuestData[maybeLanguage]
+      : QuestData[maybeLanguage]
+
+  return Object.entries(data).reduce((acc, [apiNo, { code, desc }]) => {
+    acc[apiNo] = {
+      wiki_id: code,
+      condition: desc,
+    }
+    return acc
+  }, {} as Record<string, { wiki_id: string; condition: string }>)
+}
+
 /**
  * Patch the reducer of `poi-plugin-quest-info` for poi's task panel tips
  * See https://github.com/poooi/poi/blob/da75b507e8f67615a39dc4fdb466e34ff5b5bdcf/views/components/main/parts/task-panel.es#L243
@@ -30,23 +57,6 @@ export const patchLegacyQuestPluginReducer = async () => {
     return
   }
 
-  const getQuestState = (maybeLanguage: string) => {
-    if (!(maybeLanguage in QuestData)) {
-      return {}
-    }
-    const lang = maybeLanguage as keyof typeof QuestData
-    return Object.entries(QuestData[lang]).reduce(
-      (acc, [apiNo, { code, desc }]) => {
-        acc[apiNo] = {
-          wiki_id: code,
-          condition: desc,
-        }
-        return acc
-      },
-      {} as Record<string, { wiki_id: string; condition: string }>
-    )
-  }
-
   const language = (globalThis as any).i18next.language
   const initState = {
     [HACK_KEY]: true,

package/src/questHelper.ts

@@ -1,6 +1,6 @@
 import { QuestData } from '../build/kcanotifyGamedata'
 
-export type KcanotifyQuest = {
+type KcanotifyQuest = {
   code: string
   name: string
   desc: string

package/src/store/index.ts

@@ -1,2 +1,3 @@
 export * from './store'
 export * from './quest'
+export * from './kcwiki'

package/src/store/kcwiki.ts

@@ -0,0 +1,29 @@
+import { KcwikiQuestData } from '../../build/kcQuestsData'
+import { useStore } from '.'
+
+export const usePreferKcwiki = () => {
+  const {
+    store: { preferKcwikiData },
+    updateStore,
+  } = useStore()
+  const setPreferKcwikiData = (val: boolean) =>
+    updateStore({ preferKcwikiData: val })
+  return [preferKcwikiData, setPreferKcwikiData] as const
+}
+
+export const checkIsKcwikiSupportedLanguages = (
+  lang: string
+): lang is keyof typeof KcwikiQuestData => lang in KcwikiQuestData
+
+export const useKcwikiData = (lang: string) => {
+  const [preferKcwiki] = usePreferKcwiki()
+  const supported = checkIsKcwikiSupportedLanguages(lang)
+
+  if (!preferKcwiki) {
+    return null
+  }
+  if (!supported) {
+    return null
+  }
+  return KcwikiQuestData[lang]
+}

package/src/store/quest.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
+import { checkIsKcwikiSupportedLanguages } from '.'
 import { QuestData } from '../../build/kcanotifyGamedata'
 import {
   activeQuestsSelector,
@@ -9,17 +10,29 @@ import {
   usePluginTranslation,
 } from '../poi'
 import { getCategory, KcanotifyQuestExt } from '../questHelper'
+import { useKcwikiData } from './kcwiki'
 import { useStore } from './store'
 
 const DEFAULT_LANG = 'ja-JP'
 
+export const checkIsKcanotifySupportedLanguages = (
+  lang: string
+): lang is keyof typeof QuestData => lang in QuestData
+
+export const isSupportedLanguages = (
+  lang: string
+): lang is keyof typeof QuestData =>
+  checkIsKcanotifySupportedLanguages(lang) ||
+  checkIsKcwikiSupportedLanguages(lang)
+
 export const useLanguage = () => {
-  const { i18n } = usePluginTranslation()
-  const language =
-    i18n.language in QuestData
-      ? (i18n.language as keyof typeof QuestData)
-      : DEFAULT_LANG
-  return language
+  const {
+    i18n: { language },
+  } = usePluginTranslation()
+  const lang = checkIsKcanotifySupportedLanguages(language)
+    ? language
+    : DEFAULT_LANG
+  return lang
 }
 
 const useActiveQuest = () => {
@@ -35,8 +48,12 @@ const useActiveQuest = () => {
   return activeQuests
 }
 
-const useKcanotifyQuestMap = () => {
+const useQuestMap = () => {
   const lang = useLanguage()
+  const kcwikiData = useKcwikiData(lang)
+  if (kcwikiData) {
+    return kcwikiData
+  }
   return QuestData[lang]
 }
 
@@ -52,7 +69,7 @@ const useGameQuest = () => {
 
 export const useQuest = (): KcanotifyQuestExt[] => {
   const activeQuest = useActiveQuest()
-  const kcanotifyQuestMap = useKcanotifyQuestMap()
+  const questMap = useQuestMap()
   const gameQuest = useGameQuest()
   const {
     store: { syncWithGame },
@@ -66,13 +83,11 @@ export const useQuest = (): KcanotifyQuestExt[] => {
     return gameQuest.map((quest) => {
       const gameId = String(quest.api_no)
       const active = gameId in activeQuest
-      if (gameId in kcanotifyQuestMap) {
+      if (gameId in questMap) {
         return {
           gameId,
           active,
-          ...kcanotifyQuestMap[
-            gameId as unknown as keyof typeof kcanotifyQuestMap
-          ],
+          ...questMap[gameId as unknown as keyof typeof questMap],
         }
       }
 
@@ -88,7 +103,7 @@ export const useQuest = (): KcanotifyQuestExt[] => {
     })
   } else {
     // Return all recorded quests
-    return Object.entries(kcanotifyQuestMap).map(([gameId, val]) => ({
+    return Object.entries(questMap).map(([gameId, val]) => ({
       gameId,
       active: gameId in activeQuest,
       ...val,

package/src/store/store.tsx

@@ -4,13 +4,10 @@ import React, {
   SetStateAction,
   useCallback,
   useContext,
-  useEffect,
-  useState,
 } 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 { useMount, useUpdateEffect } from '../utils'
+import { createGlobalState, useMount, useUpdateEffect } from 'react-use'
 
 export const initialState = {
   searchInput: '',
@@ -21,23 +18,18 @@ export const initialState = {
     [ALL_CATEGORY_TAG.name]: true,
   } as Record<string, boolean>,
   largeCard: null as null | string,
-  syncWithGame: IN_POI,
+  syncWithGame: false,
+  preferKcwikiData: true,
 }
 
 export type State = typeof initialState
 
 // Persist state
 const STORAGE_KEY = PACKAGE_NAME
-let onRemoveStorage: (() => void)[] = []
-export const removeStorage = () => {
-  localStorage.removeItem(STORAGE_KEY)
-  onRemoveStorage.forEach((i) => i())
-}
 
 const useStorage = (
   store: State,
   setState: (state: State) => void,
-  onRemove = () => {},
   merge = true
 ) => {
   // Load storage at mount
@@ -46,7 +38,7 @@ const useStorage = (
     if (stringStore == null) {
       return
     }
-    const parsedStorage = JSON.parse(stringStore)
+    const parsedStorage: State = JSON.parse(stringStore)
     // TODO use deep merge
     const storageStore = merge ? { ...store, ...parsedStorage } : parsedStorage
     setState(storageStore)
@@ -57,24 +49,24 @@ const useStorage = (
     const serializedStore = JSON.stringify(store)
     localStorage.setItem(STORAGE_KEY, serializedStore)
   }, [store])
+}
 
-  useEffect(() => {
-    onRemoveStorage.push(onRemove)
-    return () => {
-      onRemoveStorage = onRemoveStorage.filter((i) => i !== onRemove)
-    }
-  })
+export const getStorage = () => {
+  const stringStore = localStorage.getItem(STORAGE_KEY)
+  if (stringStore == null) {
+    return
+  }
+  return JSON.parse(stringStore) as State
 }
 
 const StateContext = createContext<State>(initialState)
 const SetStateContext = createContext<Dispatch<SetStateAction<State>>>(() => {})
 
-export const StoreProvider = ({ children }: { children: React.ReactChild }) => {
-  const [state, setState] = useState(initialState)
-  const onStorageRemove = useCallback(() => {
-    setState(initialState)
-  }, [])
-  useStorage(state, setState, onStorageRemove)
+const useGlobalState = createGlobalState<State>(initialState)
+
+export const StoreProvider = ({ children }: { children?: React.ReactNode }) => {
+  const [state, setState] = useGlobalState()
+  useStorage(state, setState)
   return (
     <SetStateContext.Provider value={setState}>
       <StateContext.Provider value={state}>{children}</StateContext.Provider>
@@ -91,3 +83,11 @@ export const useStore = () => {
   )
   return { store, setStore, updateStore }
 }
+
+export const useRemoveStorage = () => {
+  const { updateStore } = useStore()
+  return () => {
+    localStorage.removeItem(STORAGE_KEY)
+    updateStore(initialState)
+  }
+}

package/src/utils.ts

@@ -1,77 +0,0 @@
-import { useEffect, useRef, useState, EffectCallback } from 'react'
-
-// See react-use
-// licensed under the The Unlicense
-// https://github.com/streamich/react-use
-
-const useEffectOnce = (effect: EffectCallback) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(effect, [])
-}
-
-export const useMount = (fn: () => void) => {
-  useEffectOnce(() => {
-    fn()
-  })
-}
-
-const useUnmount = (fn: () => any): void => {
-  const fnRef = useRef(fn)
-
-  // update the ref each render so if it change the newest callback will be invoked
-  fnRef.current = fn
-
-  useEffectOnce(() => () => fnRef.current())
-}
-
-export const useThrottle = <T>(value: T, ms = 200) => {
-  const [state, setState] = useState<T>(value)
-  const timeout = useRef<ReturnType<typeof setTimeout>>()
-  const nextValue = useRef(null) as any
-  const hasNextValue = useRef(0) as any
-
-  useEffect(() => {
-    if (!timeout.current) {
-      setState(value)
-      const timeoutCallback = () => {
-        if (hasNextValue.current) {
-          hasNextValue.current = false
-          setState(nextValue.current)
-          timeout.current = setTimeout(timeoutCallback, ms)
-        } else {
-          timeout.current = undefined
-        }
-      }
-      timeout.current = setTimeout(timeoutCallback, ms)
-    } else {
-      nextValue.current = value
-      hasNextValue.current = true
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
-
-  useUnmount(() => {
-    timeout.current && clearTimeout(timeout.current)
-  })
-
-  return state
-}
-
-function useFirstMountState(): boolean {
-  const isFirst = useRef(true)
-  if (isFirst.current) {
-    isFirst.current = false
-    return true
-  }
-  return isFirst.current
-}
-
-export const useUpdateEffect: typeof useEffect = (effect, deps) => {
-  const isFirstMount = useFirstMountState()
-  useEffect(() => {
-    if (!isFirstMount) {
-      return effect()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
-}