poi-plugin-quest-info-2 0.8.9 → 0.9.2

package/src/store/filterTags.ts

@@ -2,13 +2,8 @@ import { useCallback } from 'react'
 import { useUpdateEffect } from 'react-use'
 import { useGameTab } from '../poi/hooks'
 import { QuestTab } from '../poi/types'
-import {
-  ALL_CATEGORY_TAG,
-  ALL_TYPE_TAG,
-  CATEGORY_TAGS,
-  TYPE_TAGS,
-} from '../tags'
-import { useStore, useSyncWithGame } from './store'
+import { CATEGORY_TAGS, TYPE_TAGS } from '../tags'
+import { ALL_CATEGORY_TAG, ALL_TYPE_TAG, PROGRESS_TAG, useStore } from './store'
 
 export const useFilterTags = () => {
   const {
@@ -32,7 +27,7 @@ export const useFilterTags = () => {
     },
     [updateStore]
   )
-  const manualSetTypeTags = useCallback(
+  const setMultiTypeTags = useCallback(
     (data: Record<string, boolean>) => {
       updateStore({ typeTags: data })
     },
@@ -49,18 +44,44 @@ export const useFilterTags = () => {
     setCategoryTags,
     setCategoryTagsAll,
     setTypeTags,
-    manualSetTypeTags,
+    setMultiTypeTags,
     setTypeTagsAll,
   }
 }
 
+export const useFilterProgressTag = () => {
+  const {
+    store: { progressTag },
+    updateStore,
+  } = useStore()
+
+  const toggleTag = useCallback(
+    (tag: PROGRESS_TAG) => {
+      if (progressTag === tag) {
+        updateStore({ progressTag: PROGRESS_TAG.All })
+        return
+      }
+      updateStore({ progressTag: tag })
+    },
+    [progressTag, updateStore]
+  )
+
+  return {
+    progressTag,
+    toggleTag,
+  }
+}
+
+/**
+ * @deprecated Should not update state when render
+ */
 export const useSyncGameTagEffect = () => {
-  const { syncWithGame } = useSyncWithGame()
+  const { progressTag } = useFilterProgressTag()
   const filterTags = useFilterTags()
   const tab = useGameTab()
 
   useUpdateEffect(() => {
-    if (!syncWithGame) {
+    if (progressTag !== PROGRESS_TAG.Unlocked) {
       return
     }
     switch (tab) {
@@ -80,7 +101,7 @@ export const useSyncGameTagEffect = () => {
         filterTags.setTypeTags('In Progress')
         break
       case QuestTab.OTHERS:
-        filterTags.manualSetTypeTags({ Quarterly: true, Yearly: true })
+        filterTags.setMultiTypeTags({ Quarterly: true, Yearly: true })
         break
       case QuestTab.ONCE:
         filterTags.setTypeTags('One-time')
@@ -88,5 +109,5 @@ export const useSyncGameTagEffect = () => {
       default:
         break
     }
-  }, [syncWithGame, tab])
+  }, [tab])
 }

package/src/store/gameQuest.tsx

@@ -1,20 +1,123 @@
-import React, { createContext, useContext } from 'react'
 import type { ReactNode } from 'react'
-import { GameQuest } from '../poi/types'
+import React, { createContext, useContext } from 'react'
 import { useGameQuest } from '../poi/hooks'
+import { GameQuest } from '../poi/types'
+import {
+  getCompletedQuest,
+  getLockedQuest,
+  questApiStateToQuestStatus,
+  QUEST_STATUS,
+} from '../questHelper'
 
-export const GameQuestContext = createContext<GameQuest[]>([])
+export const GameQuestContext = createContext<{
+  gameQuest: GameQuest[]
+  questStatusQuery: (gameId: number) => QUEST_STATUS
+  lockedQuestNum: number
+  unlockedQuestNum: number
+  completedQuestNum: number
+  alreadyCompletedQuestNum: number
+}>({
+  gameQuest: [],
+  questStatusQuery: () => QUEST_STATUS.UNKNOWN,
+  lockedQuestNum: 0,
+  unlockedQuestNum: 0,
+  completedQuestNum: 0,
+  alreadyCompletedQuestNum: 0,
+})
+
+const useQuestStatusQuery = (inProgressQuests: GameQuest[]) => {
+  const gameQuestIds = inProgressQuests.map((quest) => quest.api_no)
+  const unlockedGameQuest = Object.fromEntries(
+    inProgressQuests.map((quest) => [quest.api_no, quest])
+  )
+  const alreadyCompletedQuest = getCompletedQuest(gameQuestIds)
+  const lockedQuest = getLockedQuest(gameQuestIds)
+  const completedQuest = inProgressQuests
+    .map((quest) => questApiStateToQuestStatus(quest.api_state))
+    .filter((status) => status === QUEST_STATUS.COMPLETED)
+  return {
+    lockedQuestNum: Object.keys(lockedQuest).length,
+    unlockedQuestNum: Object.keys(unlockedGameQuest).length,
+    completedQuestNum: completedQuest.length,
+    alreadyCompletedQuestNum: Object.keys(alreadyCompletedQuest).length,
+    questStatusQuery: (gameId: number) => {
+      const theGameQuest = unlockedGameQuest[gameId]
+      if (theGameQuest) {
+        // the quest is in game
+        return questApiStateToQuestStatus(theGameQuest.api_state)
+      }
+
+      if (gameId in lockedQuest) {
+        return QUEST_STATUS.LOCKED
+      }
+      if (gameId in alreadyCompletedQuest) {
+        return QUEST_STATUS.ALREADY_COMPLETED
+      }
+      return QUEST_STATUS.UNKNOWN
+    },
+  }
+}
 
 export const GameQuestProvider = ({ children }: { children?: ReactNode }) => {
   const gameQuest = useGameQuest()
+  const {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+    questStatusQuery,
+  } = useQuestStatusQuery(gameQuest)
+
   return (
-    <GameQuestContext.Provider value={gameQuest}>
+    <GameQuestContext.Provider
+      value={{
+        gameQuest,
+        questStatusQuery,
+        lockedQuestNum,
+        unlockedQuestNum,
+        completedQuestNum,
+        alreadyCompletedQuestNum,
+      }}
+    >
       {children}
     </GameQuestContext.Provider>
   )
 }
 
+/**
+ * Get the questList from poi.
+ *
+ * Same as {@link useGameQuest}, but singleton
+ */
 export const useGlobalGameQuest = () => {
-  const gameQuest = useContext(GameQuestContext)
+  const { gameQuest } = useContext(GameQuestContext)
   return gameQuest
 }
+
+/**
+ * Get the questList from poi.
+ *
+ * Same as {@link useQuestStatusQuery}, but singleton
+ */
+export const useGlobalQuestStatusQuery = () => {
+  const { questStatusQuery } = useContext(GameQuestContext)
+  return questStatusQuery
+}
+
+/**
+ * Get the number of quests in different states.
+ */
+export const useGlobalQuestStatusNum = () => {
+  const {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+  } = useContext(GameQuestContext)
+  return {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+  }
+}

package/src/store/quest.ts

@@ -1,19 +1,13 @@
-import { useCallback } from 'react'
 import { usePluginTranslation } from '../poi/hooks'
 import {
   DocQuest,
-  getCategory,
-  getCompletedQuest,
   getKcanotifyQuestData,
-  getLockedQuest,
   getQuestIdByCode,
-  questApiStateToQuestStatus,
   QUEST_STATUS,
   UnionQuest,
 } from '../questHelper'
-import { useGlobalGameQuest } from './gameQuest'
+import { useGlobalGameQuest, useGlobalQuestStatusQuery } from './gameQuest'
 import { checkIsKcwikiSupportedLanguages, useKcwikiData } from './kcwiki'
-import { useStore, useSyncWithGame } from './store'
 
 const DEFAULT_LANG = 'ja-JP'
 
@@ -53,40 +47,27 @@ const useQuestMap = (): Record<string, DocQuest> => {
 export const useQuest = (): UnionQuest[] => {
   const docQuestMap = useQuestMap()
   const gameQuest = useGlobalGameQuest()
-  const { syncWithGame } = useSyncWithGame()
-
-  if (syncWithGame && gameQuest.length) {
-    return gameQuest.map((quest) => {
-      const gameId = quest.api_no
-      if (gameId in docQuestMap) {
-        return {
-          gameId,
-          gameQuest: quest,
-          docQuest: docQuestMap[String(gameId) as keyof typeof docQuestMap],
-        }
-      }
-
-      // Not yet recorded quest
-      // May be a new quest
-      return {
-        gameId,
-        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(docQuestMap).map(([gameId, val]) => ({
-      gameId: +gameId,
-      // Maybe empty
-      gameQuest: gameQuest.find((quest) => quest.api_no === Number(gameId))!,
-      docQuest: val,
-    }))
-  }
+  // TODO extract new quest from game quest
+  // Not yet recorded quest
+  // May be a new quest
+  // if (!(gameId in docQuestMap)) {
+  //   return {
+  //     gameId,
+  //     gameQuest: quest,
+  //     docQuest: {
+  //       code: `${getCategory(quest.api_category).wikiSymbol}?`,
+  //       name: quest.api_title,
+  //       desc: quest.api_detail,
+  //     },
+  //   }
+  // }
+  // Return all recorded quests
+  return Object.entries(docQuestMap).map(([gameId, val]) => ({
+    gameId: +gameId,
+    // Maybe empty
+    gameQuest: gameQuest.find((quest) => quest.api_no === Number(gameId))!,
+    docQuest: val,
+  }))
 }
 
 export const useQuestByCode = (code: string) => {
@@ -101,50 +82,13 @@ export const useQuestByCode = (code: string) => {
   return null
 }
 
+/**
+ * Get the completion status of a specific game quest
+ */
 export const useQuestStatus = (gameId: number | null) => {
-  const gameQuest = useGlobalGameQuest()
-
+  const searcher = useGlobalQuestStatusQuery()
   if (!gameId) {
     return QUEST_STATUS.UNKNOWN
   }
-  const theGameQuest = gameQuest.find((quest) => quest.api_no === gameId)
-  if (theGameQuest) {
-    // the quest is in game
-    return questApiStateToQuestStatus(theGameQuest.api_state)
-  }
-
-  const gameQuestId = gameQuest.map((quest) => quest.api_no)
-  const completedQuest = getCompletedQuest(gameQuestId)
-  const lockedQuest = getLockedQuest(gameQuestId)
-
-  if (gameId in lockedQuest) {
-    return QUEST_STATUS.LOCKED
-  }
-  if (gameId in completedQuest) {
-    return QUEST_STATUS.ALREADY_COMPLETED
-  }
-  return QUEST_STATUS.UNKNOWN
-}
-
-/**
- * @deprecated Not large card now
- */
-export const useLargeCard = () => {
-  const {
-    store: { largeCard },
-    updateStore,
-  } = useStore()
-  const setLarge = useCallback(
-    (gameId: string) => updateStore({ largeCard: gameId }),
-    [updateStore]
-  )
-  const setMinimal = useCallback(
-    () => updateStore({ largeCard: null }),
-    [updateStore]
-  )
-  return {
-    largeCard,
-    setLarge,
-    setMinimal,
-  }
+  return searcher(gameId)
 }

package/src/store/store.tsx

@@ -7,10 +7,24 @@ import React, {
   useState,
 } from 'react'
 import { useMount, useUpdateEffect } from 'react-use'
-import { name as PACKAGE_NAME } from '../../package.json'
-import { ALL_CATEGORY_TAG, ALL_TYPE_TAG } from '../tags'
+import { PACKAGE_NAME } from '../poi/env'
+import { noop, yes } from '../utils'
 import { GameQuestProvider } from './gameQuest'
 
+export const ALL_CATEGORY_TAG = {
+  name: 'All',
+  filter: yes,
+} as const
+
+export const ALL_TYPE_TAG = ALL_CATEGORY_TAG
+
+export enum PROGRESS_TAG {
+  All = 'All',
+  Unlocked = 'Unlocked',
+  Locked = 'Locked',
+  AlreadyCompleted = 'AlreadyCompleted',
+}
+
 export const initialState = {
   searchInput: '',
   typeTags: {
@@ -19,8 +33,8 @@ export const initialState = {
   categoryTags: {
     [ALL_CATEGORY_TAG.name]: true,
   } as Record<string, boolean>,
-  largeCard: null as null | string,
-  syncWithGame: false,
+  progressTag: PROGRESS_TAG.All,
+  syncWithGame: false as const,
   preferKcwikiData: true,
 }
 
@@ -39,7 +53,7 @@ const useStorage = <T,>(initialValue: T) => {
         return
       }
       const parsedStorage: T = JSON.parse(stringStore)
-      setState(parsedStorage)
+      setState({ ...initialState, ...parsedStorage })
     } catch (error) {
       console.error('Failed to load storage', error)
     }
@@ -97,22 +111,14 @@ export const useRemoveStorage = () => {
   }
 }
 
+/**
+ * @deprecated Use progress tag
+ */
 export const useSyncWithGame = () => {
-  const {
-    store: { syncWithGame },
-    updateStore,
-  } = useStore()
-  const setSyncWithGame = useCallback(
-    (value: boolean) => {
-      updateStore({ syncWithGame: value })
-    },
-    [updateStore]
-  )
-  const toggleSyncWithGame = useCallback(() => {
-    setSyncWithGame(!syncWithGame)
-  }, [setSyncWithGame, syncWithGame])
+  const setSyncWithGame = noop
+  const toggleSyncWithGame = noop
   return {
-    syncWithGame,
+    syncWithGame: false as const,
     setSyncWithGame,
     toggleSyncWithGame,
   }

package/src/tags.tsx

@@ -1,7 +1,7 @@
 import { Tag } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
 import React from 'react'
 import styled from 'styled-components'
-import { IN_POI } from './poi/env'
 import { useGameTab, usePluginTranslation } from './poi/hooks'
 import { GameQuest, QuestTab } from './poi/types'
 import type { UnionQuest } from './questHelper'
@@ -25,17 +25,14 @@ import {
   isYearlyQuest,
   newQuestNumber,
 } from './questHelper'
-import { useSyncWithGame } from './store'
-import { useFilterTags } from './store/filterTags'
-import { useGlobalGameQuest } from './store/gameQuest'
-import { yes } from './utils'
-
-export const ALL_CATEGORY_TAG = {
-  name: 'All',
-  filter: yes,
-} as const
-
-export const ALL_TYPE_TAG = ALL_CATEGORY_TAG
+import {
+  ALL_CATEGORY_TAG,
+  ALL_TYPE_TAG,
+  PROGRESS_TAG,
+  useSyncWithGame,
+} from './store'
+import { useFilterProgressTag, useFilterTags } from './store/filterTags'
+import { useGlobalGameQuest, useGlobalQuestStatusNum } from './store/gameQuest'
 
 const withDocQuest =
   <T,>(filterFn: (q: UnionQuest['docQuest']) => T) =>
@@ -78,9 +75,9 @@ export const TYPE_TAGS = [
   { name: 'Yearly', filter: isYearlyQuest },
 ] as const
 
-// TODO tag Lock / Completed
-
 const TagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
   margin-left: -4px;
   margin-right: -4px;
 
@@ -89,10 +86,61 @@ const TagsWrapper = styled.div`
   }
 `
 
-export const CategoryTags = () => {
+export const ProgressTags = () => {
   const { t } = usePluginTranslation()
+  const { progressTag, toggleTag } = useFilterProgressTag()
+  const {
+    lockedQuestNum,
+    unlockedQuestNum,
+    completedQuestNum,
+    alreadyCompletedQuestNum,
+  } = useGlobalQuestStatusNum()
+  const completedQuestSuffix =
+    completedQuestNum > 0
+      ? `${alreadyCompletedQuestNum} + ${completedQuestNum}`
+      : alreadyCompletedQuestNum
+  return (
+    <>
+      <Tag
+        onClick={() => {
+          toggleTag(PROGRESS_TAG.Locked)
+        }}
+        intent={progressTag === PROGRESS_TAG.Locked ? 'success' : 'none'}
+        interactive={true}
+      >
+        {t('Locked', { number: lockedQuestNum })}
+      </Tag>
+      <Tag
+        icon={IconNames.EXCHANGE}
+        onClick={() => {
+          toggleTag(PROGRESS_TAG.Unlocked)
+        }}
+        intent={progressTag === PROGRESS_TAG.Unlocked ? 'success' : 'none'}
+        interactive={true}
+      >
+        {t('Unlocked', { number: unlockedQuestNum })}
+      </Tag>
+      <Tag
+        onClick={() => {
+          toggleTag(PROGRESS_TAG.AlreadyCompleted)
+        }}
+        intent={
+          progressTag === PROGRESS_TAG.AlreadyCompleted ? 'success' : 'none'
+        }
+        interactive={true}
+      >
+        {t('Already Completed', {
+          number: completedQuestSuffix,
+        })}
+      </Tag>
+    </>
+  )
+}
 
+export const CategoryTags = () => {
+  const { t } = usePluginTranslation()
   const { categoryTags, setCategoryTags } = useFilterTags()
+
   return (
     <TagsWrapper>
       {CATEGORY_TAGS.map(({ name }) => (
@@ -111,6 +159,8 @@ export const CategoryTags = () => {
           {t(name)}
         </Tag>
       ))}
+
+      <ProgressTags />
     </TagsWrapper>
   )
 }
@@ -120,6 +170,8 @@ export const TypeTags = () => {
   const gameTab = useGameTab()
   const { syncWithGame } = useSyncWithGame()
   const gameQuests = useGlobalGameQuest()
+  const { progressTag } = useFilterProgressTag()
+
   const inProgressQuest = gameQuests.filter((gameQuest) =>
     isInProgressQuest(gameQuest)
   )
@@ -136,15 +188,22 @@ export const TypeTags = () => {
       >
         {t('All')}
       </Tag>
-      {IN_POI && (
-        <Tag
-          intent={typeTags['In Progress'] ? 'primary' : 'none'}
-          interactive={true}
-          onClick={() => setTypeTags('In Progress')}
-        >
-          {t('In Progress', { number: inProgressQuest.length })}
-        </Tag>
-      )}
+
+      <Tag
+        intent={
+          typeTags['In Progress']
+            ? progressTag === PROGRESS_TAG.AlreadyCompleted ||
+              progressTag === PROGRESS_TAG.Locked
+              ? 'warning'
+              : 'primary'
+            : 'none'
+        }
+        interactive={true}
+        onClick={() => setTypeTags('In Progress')}
+      >
+        {t('In Progress', { number: inProgressQuest.length })}
+      </Tag>
+
       {hasNewQuest && (
         <Tag
           intent={typeTags['New'] ? 'primary' : 'none'}

package/tsconfig.json

@@ -13,7 +13,7 @@
     ] /* Specify library files to be included in the compilation. */,
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */