refactor: more

Author: Mygod

src/components/popups/BackgroundCard.jsx

@@ -32,7 +32,6 @@ const DARK_PALETTE_ENTRIES = Object.entries(
  * @param {{
  *  horizontal?: number
  *  vertical?: number
- *  clampWidth?: boolean
  * }} [options]
  * @returns {React.CSSProperties}
  */

src/features/gym/GymPopup.jsx

@@ -38,7 +38,10 @@ import {
 import { useAnalytics } from '@hooks/useAnalytics'
 import { getTimeUntil } from '@utils/getTimeUntil'
 import { formatInterval } from '@utils/formatInterval'
-import { usePokemonBackgroundVisuals } from '@hooks/usePokemonBackgroundVisuals'
+import {
+  usePokemonBackgroundVisuals,
+  usePokemonBackgroundVisual,
+} from '@hooks/usePokemonBackgroundVisuals'
 
 import { useWebhook } from './useWebhook'
 
@@ -273,16 +276,15 @@ function DefendersModal({ gym, onClose }) {
   const { t, i18n } = useTranslation()
   const theme = useTheme()
   const Icons = useMemory((s) => s.Icons)
-  const getPokemonBackgroundVisuals = usePokemonBackgroundVisuals()
+  const resolvePokemonBackgroundVisual = usePokemonBackgroundVisuals()
   const numFormatter = new Intl.NumberFormat(i18n.language)
   const defenders = gym.defenders || []
   const updatedMs =
     defenders.length &&
     defenders[0].deployed_ms + defenders[0].deployed_time * 1000
   const now = Date.now()
-  const fallbackVisuals = React.useMemo(
-    () => getPokemonBackgroundVisuals(gym.guarding_pokemon_display?.background),
-    [getPokemonBackgroundVisuals, gym.guarding_pokemon_display?.background],
+  const fallbackVisuals = usePokemonBackgroundVisual(
+    gym.guarding_pokemon_display?.background,
   )
 
   // Fallback to basic gym data when detailed defender info isn't available
@@ -308,7 +310,6 @@ function DefendersModal({ gym, onClose }) {
     const rowContent = (
       <DefenderRowLayout
         borderColor={fallbackBorderColor}
-        tooltip={fallbackBackgroundMeta?.tooltip}
         imageSrc={fallbackImageSrc}
         imageAlt={t(`poke_${gym.guarding_pokemon_id}`)}
         showBestBuddy={gym.guarding_pokemon_display?.badge === 1}
@@ -347,7 +348,6 @@ function DefendersModal({ gym, onClose }) {
     fallbackRow = (
       <BackgroundCard
         visuals={fallbackHasBackground ? fallbackVisuals : undefined}
-        tooltip={fallbackBackgroundMeta?.tooltip}
         wrapperProps={
           fallbackBackgroundMeta?.tooltip
             ? { style: { width: '100%' } }
@@ -431,7 +431,7 @@ function DefendersModal({ gym, onClose }) {
               const currentCP = Math.round(
                 fullCP * (0.2 + 0.8 * predictedMotivation),
               )
-              const visuals = getPokemonBackgroundVisuals(def.background)
+              const visuals = resolvePokemonBackgroundVisual(def.background)
               const {
                 borderColor,
                 primaryColor,
@@ -638,7 +638,6 @@ function DefendersModal({ gym, onClose }) {
                 <React.Fragment key={rowKey}>
                   <BackgroundCard
                     visuals={hasBackground ? visuals : undefined}
-                    tooltip={backgroundMeta?.tooltip}
                     wrapperProps={
                       backgroundMeta?.tooltip
                         ? { style: { width: '100%' } }

src/features/pokemon/PokemonPopup.jsx

@@ -30,7 +30,7 @@ import { StatusIcon } from '@components/StatusIcon'
 import { readableProbability } from '@utils/readableProbability'
 import { GET_POKEMON_SHINY_STATS } from '@services/queries/pokemon'
 import { GET_TAPPABLE_BY_ID } from '@services/queries/tappable'
-import { usePokemonBackgroundVisuals } from '@hooks/usePokemonBackgroundVisuals'
+import { usePokemonBackgroundVisual } from '@hooks/usePokemonBackgroundVisuals'
 import {
   BackgroundCard,
   createFullBleedSurfaceStyle,
@@ -91,12 +91,7 @@ export function PokemonPopup({ pokemon, iconUrl, isTutorial = false }) {
   const timeOfDay = useMemory((s) => s.timeOfDay)
   const metaData = useMemory((s) => s.masterfile.pokemon[pokemon_id])
   const Icons = useMemory((s) => s.Icons)
-  const getPokemonBackgroundVisuals = usePokemonBackgroundVisuals()
-  const backgroundVisuals = React.useMemo(
-    () => getPokemonBackgroundVisuals(pokemon.background),
-    [getPokemonBackgroundVisuals, pokemon.background],
-  )
-  const backgroundTooltip = backgroundVisuals?.backgroundMeta?.tooltip
+  const backgroundVisuals = usePokemonBackgroundVisual(pokemon.background)
 
   const userSettings = useStorage((s) => s.userSettings.pokemon)
   const pokePerms = isTutorial
@@ -324,7 +319,6 @@ export function PokemonPopup({ pokemon, iconUrl, isTutorial = false }) {
     <ErrorBoundary noRefresh style={{}} variant="h5">
       <BackgroundCard
         visuals={backgroundVisuals}
-        tooltip={backgroundTooltip}
         wrapperProps={{ style: { display: 'block', width: '100%' } }}
         surfaceStyle={
           backgroundVisuals?.hasBackground

src/features/pokestop/PokestopPopup.jsx

@@ -36,7 +36,10 @@ import { useGetAvailable } from '@hooks/useGetAvailable'
 import { parseQuestConditions } from '@utils/parseConditions'
 import { Img } from '@components/Img'
 import { readableProbability } from '@utils/readableProbability'
-import { usePokemonBackgroundVisuals } from '@hooks/usePokemonBackgroundVisuals'
+import {
+  usePokemonBackgroundVisuals,
+  usePokemonBackgroundVisual,
+} from '@hooks/usePokemonBackgroundVisuals'
 
 /**
  *
@@ -601,15 +604,14 @@ const RewardInfo = ({ with_ar, ...quest }) => {
  *
  * @param {{
  *  quest: Omit<import('@rm/types').Quest, 'key'>
- *  visuals?: ReturnType<ReturnType<typeof usePokemonBackgroundVisuals>>
+ *  visuals?: ReturnType<typeof usePokemonBackgroundVisual>
  * }} props
  * @returns
  */
 const QuestRewardRow = ({ quest, visuals }) => {
   const { quest_reward_type, quest_shiny_probability } = quest
   const hasBackground = visuals?.hasBackground ?? false
   const applyBackground = quest_reward_type === 7 && hasBackground
-  const backgroundMeta = visuals?.backgroundMeta
   const rowContent = (
     <Grid container justifyContent="center" alignItems="center">
       <Grid
@@ -653,7 +655,6 @@ const QuestRewardRow = ({ quest, visuals }) => {
   const wrappedRow = (
     <BackgroundCard
       visuals={applyBackground ? visuals : undefined}
-      tooltip={applyBackground ? backgroundMeta?.tooltip : undefined}
       wrapperProps={applyBackground ? { style: { width: '100%' } } : undefined}
       surfaceStyle={
         applyBackground
@@ -992,12 +993,8 @@ const ShowcaseEntry = ({
 }) => {
   const Icons = useMemory((s) => s.Icons)
   const { t } = useTranslation()
-  const getPokemonBackgroundVisuals = usePokemonBackgroundVisuals()
-  const visuals = React.useMemo(
-    () => getPokemonBackgroundVisuals(background),
-    [background, getPokemonBackgroundVisuals],
-  )
-  const { hasBackground, backgroundMeta } = visuals
+  const visuals = usePokemonBackgroundVisual(background)
+  const { hasBackground } = visuals
   const entry = (
     <div className="showcase-entry">
       <div className="showcase-entry-content">
@@ -1044,7 +1041,6 @@ const ShowcaseEntry = ({
   return (
     <BackgroundCard
       visuals={hasBackground ? visuals : undefined}
-      tooltip={backgroundMeta?.tooltip}
       wrapperProps={{ style: { width: '100%' } }}
       wrapWhenNoTooltip
       surfaceStyle={

src/hooks/usePokemonBackgroundVisuals.js

@@ -174,3 +174,17 @@ export function usePokemonBackgroundVisuals() {
     [Icons, i18n, locationCards, t, theme],
   )
 }
+
+/**
+ * Convenience hook for resolving a single Pokemon background visual record.
+ *
+ * @param {number | string | null | undefined} backgroundValue
+ */
+export function usePokemonBackgroundVisual(backgroundValue) {
+  const resolveBackgroundVisual = usePokemonBackgroundVisuals()
+
+  return React.useMemo(
+    () => resolveBackgroundVisual(backgroundValue),
+    [backgroundValue, resolveBackgroundVisual],
+  )
+}