From ab3330d60dfbd73baa2887f8b3cc6e357d8cd481 Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Tue, 2 Aug 2022 22:07:17 -0400
Subject: [PATCH 1/2] Various Tooltips

Tooltips for...
- Quest searching
- Nest searching
- Raid searching
- Pokemon PVP
- Invasions
- Invasion lineups
- Lures
- Quest rewards
---
 src/components/layout/dialogs/Search.jsx  |  69 ++++++++----
 src/components/popups/Pokemon.jsx         |  30 ++++--
 src/components/popups/Pokestop.jsx        | 124 +++++++++++++++-------
 src/components/popups/common/NameTT.jsx   |  25 +++++
 src/components/popups/common/TimeTile.jsx |   8 +-
 5 files changed, 185 insertions(+), 71 deletions(-)
 create mode 100644 src/components/popups/common/NameTT.jsx

diff --git a/src/components/layout/dialogs/Search.jsx b/src/components/layout/dialogs/Search.jsx
index 569547441..235e15246 100644
--- a/src/components/layout/dialogs/Search.jsx
+++ b/src/components/layout/dialogs/Search.jsx
@@ -10,9 +10,11 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@apollo/client'
 
-import Utility from '@services/Utility'
+import NameTT from '@components/popups/common/NameTT'
 import { useStore, useStatic } from '@hooks/useStore'
+import Utility from '@services/Utility'
 import Query from '@services/Query'
+
 import Header from '../general/Header'
 import QuestTitle from '../general/QuestTitle'
 
@@ -77,20 +79,28 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
       } = option
       let main
       let amount = 0
+      let tt = ''
       switch (quest_reward_type) {
         case 2:
           main = Icons.getRewards(quest_reward_type, quest_item_id, item_amount)
           amount = main.includes('_a') || item_amount <= 1 ? 0 : item_amount
+          tt = `item_${quest_item_id}`
           break
         case 3:
+          tt = `stardust`
           main = Icons.getRewards(quest_reward_type, stardust_amount)
           amount = main.includes('_a') ? 0 : stardust_amount
           break
         case 4:
+          tt = `poke_${candy_pokemon_id}`
           main = Icons.getRewards(quest_reward_type, candy_pokemon_id)
           amount = main.includes('_a') ? 0 : candy_amount
           break
         case 7:
+          tt = [
+            quest_form_id ? `form_${quest_form_id}` : '',
+            `poke_${quest_pokemon_id}`,
+          ]
           main = Icons.getPokemon(
             quest_pokemon_id,
             quest_form_id,
@@ -101,10 +111,12 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
           )
           break
         case 9:
+          tt = `poke_${xl_candy_pokemon_id}`
           main = Icons.getRewards(quest_reward_type, xl_candy_pokemon_id)
           amount = main.includes('_a') ? 0 : xl_candy_amount
           break
         case 12:
+          tt = `poke_${mega_pokemon_id}`
           main = Icons.getRewards(
             quest_reward_type,
             mega_pokemon_id,
@@ -124,7 +136,13 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
             position: 'relative',
           }}
         >
-          <img src={main} style={{ maxWidth: 45, maxHeight: 45 }} alt={main} />
+          <NameTT id={tt}>
+            <img
+              src={main}
+              style={{ maxWidth: 45, maxHeight: 45 }}
+              alt={main}
+            />
+          </NameTT>
           {Boolean(
             main.includes('stardust')
               ? !main.endsWith('0.png')
@@ -141,25 +159,40 @@ export default function Search({ safeSearch, toggleDialog, isMobile, Icons }) {
         raid_pokemon_evolution,
       } = option
       return (
-        <img
-          src={Icons.getPokemon(
-            raid_pokemon_id,
-            raid_pokemon_form,
-            raid_pokemon_evolution,
-            raid_pokemon_gender,
-            raid_pokemon_costume,
-          )}
-          alt={raid_pokemon_id}
-          style={{ maxWidth: 45, maxHeight: 45 }}
-        />
+        <NameTT
+          id={[
+            raid_pokemon_form ? `form_${raid_pokemon_form}` : '',
+            raid_pokemon_evolution ? `evo_${raid_pokemon_evolution}` : '',
+            `poke_${raid_pokemon_id}`,
+          ]}
+        >
+          <img
+            src={Icons.getPokemon(
+              raid_pokemon_id,
+              raid_pokemon_form,
+              raid_pokemon_evolution,
+              raid_pokemon_gender,
+              raid_pokemon_costume,
+            )}
+            alt={raid_pokemon_id}
+            style={{ maxWidth: 45, maxHeight: 45 }}
+          />
+        </NameTT>
       )
     }
     return (
-      <img
-        src={Icons.getPokemon(nest_pokemon_id, nest_pokemon_form)}
-        alt={nest_pokemon_form}
-        style={{ maxWidth: 45, maxHeight: 45 }}
-      />
+      <NameTT
+        id={[
+          nest_pokemon_form ? `form_${nest_pokemon_form}` : '',
+          `poke_${nest_pokemon_id}`,
+        ]}
+      >
+        <img
+          src={Icons.getPokemon(nest_pokemon_id, nest_pokemon_form)}
+          alt={nest_pokemon_form}
+          style={{ maxWidth: 45, maxHeight: 45 }}
+        />
+      </NameTT>
     )
   }
 
diff --git a/src/components/popups/Pokemon.jsx b/src/components/popups/Pokemon.jsx
index c6ba1268b..539f03962 100644
--- a/src/components/popups/Pokemon.jsx
+++ b/src/components/popups/Pokemon.jsx
@@ -19,6 +19,7 @@ import useStyles from '@hooks/useStyles'
 import Utility from '@services/Utility'
 
 import GenericTimer from './common/Timer'
+import NameTT from './common/NameTT'
 
 const rowClass = { width: 30, fontWeight: 'bold' }
 
@@ -572,17 +573,24 @@ const PvpInfo = ({ pokemon, league, data, t, Icons }) => {
         ? {
             id: `${league}-${each.pokemon}-${each.form}-${each.evolution}-${each.gender}-${each.rank}-${each.cp}-${each.lvl}-${each.cap}`,
             img: (
-              <img
-                src={Icons.getPokemon(
-                  each.pokemon,
-                  each.form,
-                  each.evolution,
-                  each.gender,
-                  pokemon.costume,
-                )}
-                height={20}
-                alt={each.pokemon}
-              />
+              <NameTT
+                id={[
+                  each.form ? `form_${each.form}` : '',
+                  `poke_${each.pokemon}`,
+                ]}
+              >
+                <img
+                  src={Icons.getPokemon(
+                    each.pokemon,
+                    each.form,
+                    each.evolution,
+                    each.gender,
+                    pokemon.costume,
+                  )}
+                  height={20}
+                  alt={t(`poke_${each.pokemon}`)}
+                />
+              </NameTT>
             ),
             rank: each.rank || 0,
             cp: each.cp || 0,
diff --git a/src/components/popups/Pokestop.jsx b/src/components/popups/Pokestop.jsx
index 86e702a79..9fe9a1d1a 100644
--- a/src/components/popups/Pokestop.jsx
+++ b/src/components/popups/Pokestop.jsx
@@ -20,6 +20,7 @@ import Title from './common/Title'
 import HeaderImage from './common/HeaderImage'
 import Timer from './common/Timer'
 import PowerUp from './common/PowerUp'
+import NameTT from './common/NameTT'
 
 export default function PokestopPopup({
   pokestop,
@@ -135,6 +136,7 @@ export default function PokestopPopup({
                     expireTime={lure_expire_timestamp}
                     icon={Icons.getPokestops(lure_id)}
                     until
+                    tt={`lure_${lure_id}`}
                   />
                 </>
               )}
@@ -154,6 +156,7 @@ export default function PokestopPopup({
                         expireTime={invasion.incident_expire_timestamp}
                         icon={Icons.getInvasions(invasion.grunt_type)}
                         until
+                        tt={`grunt_a_${invasion.grunt_type}`}
                       />
                     </Fragment>
                   ))}
@@ -336,6 +339,8 @@ const RewardInfo = ({ quest, Icons, config, t }) => {
     stardust_amount,
     candy_pokemon_id,
     candy_amount,
+    xl_candy_pokemon_id,
+    xl_candy_amount,
     mega_pokemon_id,
     mega_amount,
     quest_reward_type,
@@ -347,37 +352,73 @@ const RewardInfo = ({ quest, Icons, config, t }) => {
     with_ar,
   } = quest
 
-  const getImage = () => {
+  const image = (() => {
     switch (quest_reward_type) {
       case 2:
-        return Icons.getRewards(quest_reward_type, quest_item_id, item_amount)
+        return {
+          tooltip: `item_${quest_item_id}`,
+          src: Icons.getRewards(quest_reward_type, quest_item_id, item_amount),
+        }
       case 3:
-        return Icons.getRewards(quest_reward_type, stardust_amount)
+        return {
+          tooltip: `stardust`,
+          src: Icons.getRewards(quest_reward_type, stardust_amount),
+        }
       case 4:
-        return Icons.getRewards(
-          quest_reward_type,
-          candy_pokemon_id,
-          candy_amount,
-        )
+        return {
+          tooltip: `poke_${candy_pokemon_id}`,
+          src: Icons.getRewards(
+            quest_reward_type,
+            candy_pokemon_id,
+            candy_amount,
+          ),
+        }
       case 7:
-        return Icons.getPokemon(
-          quest_pokemon_id,
-          quest_form_id,
-          0,
-          quest_gender_id,
-          quest_costume_id,
-          quest_shiny,
-        )
+        return {
+          tooltip: [
+            quest_form_id ? `form_${quest_form_id}` : '',
+            `poke_${quest_pokemon_id}`,
+          ],
+          src: Icons.getPokemon(
+            quest_pokemon_id,
+            quest_form_id,
+            0,
+            quest_gender_id,
+            quest_costume_id,
+            quest_shiny,
+          ),
+        }
+      case 9:
+        return {
+          tooltip: `poke_${xl_candy_pokemon_id}`,
+          src: Icons.getRewards(
+            quest_reward_type,
+            xl_candy_pokemon_id,
+            xl_candy_amount,
+          ),
+        }
       case 12:
-        return Icons.getRewards(quest_reward_type, mega_pokemon_id, mega_amount)
+        return {
+          tooltip: `poke_${mega_pokemon_id}`,
+          src: Icons.getRewards(
+            quest_reward_type,
+            mega_pokemon_id,
+            mega_amount,
+          ),
+        }
       default:
-        return Icons.getRewards(quest_reward_type)
+        return {
+          tooltip: `quest_reward_${quest_reward_type}`,
+          src: Icons.getRewards(quest_reward_type),
+        }
     }
-  }
+  })()
 
   return (
     <Grid item xs={3} style={{ textAlign: 'center' }}>
-      <img src={getImage()} className="quest-popup-img" alt="quest reward" />
+      <NameTT id={image.tooltip}>
+        <img src={image.src} className="quest-popup-img" alt="quest reward" />
+      </NameTT>
       <Typography variant="caption" className="ar-task" noWrap>
         {config.questMessage
           ? config.questMessage
@@ -611,25 +652,30 @@ const Invasion = ({ pokestop, Icons, t }) => {
   const encounterNum = { first: '#1', second: '#2', third: '#3' }
 
   const makeShadowPokemon = (pkmn) => (
-    <div key={pkmn.id} className="invasion-reward">
-      <img
-        className="invasion-reward"
-        alt="invasion reward"
-        src={Icons.getPokemon(
-          pkmn.id,
-          pkmn.form,
-          0,
-          pkmn.gender,
-          pkmn.costumeId,
-          pkmn.shiny,
-        )}
-      />
-      <img
-        className="invasion-reward-shadow"
-        alt="shadow"
-        src={Icons.getMisc('shadow')}
-      />
-    </div>
+    <NameTT
+      key={pkmn.id}
+      id={[pkmn.form ? `form_${pkmn.form}` : '', `poke_${pkmn.id}`]}
+    >
+      <div className="invasion-reward">
+        <img
+          className="invasion-reward"
+          alt="invasion reward"
+          src={Icons.getPokemon(
+            pkmn.id,
+            pkmn.form,
+            0,
+            pkmn.gender,
+            pkmn.costumeId,
+            pkmn.shiny,
+          )}
+        />
+        <img
+          className="invasion-reward-shadow"
+          alt="shadow"
+          src={Icons.getMisc('shadow')}
+        />
+      </div>
+    </NameTT>
   )
 
   const getRewardPercent = (grunt) => {
diff --git a/src/components/popups/common/NameTT.jsx b/src/components/popups/common/NameTT.jsx
new file mode 100644
index 000000000..c154eaba5
--- /dev/null
+++ b/src/components/popups/common/NameTT.jsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Tooltip } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+
+export default function NameTT({ id, children }) {
+  const { t } = useTranslation()
+
+  return (
+    <Tooltip
+      enterDelay={0}
+      enterTouchDelay={0}
+      placement="left-start"
+      title={
+        Array.isArray(id)
+          ? id
+              .filter(Boolean)
+              .map((i) => t(i))
+              .join(' ')
+          : t(id)
+      }
+    >
+      {children}
+    </Tooltip>
+  )
+}
diff --git a/src/components/popups/common/TimeTile.jsx b/src/components/popups/common/TimeTile.jsx
index 1ccc29603..01b8ceb8d 100644
--- a/src/components/popups/common/TimeTile.jsx
+++ b/src/components/popups/common/TimeTile.jsx
@@ -2,16 +2,18 @@ import React from 'react'
 import { Grid, Typography } from '@material-ui/core'
 
 import Timer from './Timer'
+import NameTT from './NameTT'
 
-export default function TimeTile({ expireTime, icon, until, size = 3 }) {
+export default function TimeTile({ expireTime, icon, until, size = 3, tt = [] }) {
   const endTime = new Date(expireTime * 1000)
-
   return (
     <>
       {icon && (
         <Grid item xs={size} style={{ textAlign: 'center' }}>
           {typeof icon === 'string' ? (
-            <img src={icon} className="quest-popup-img" alt={icon} />
+            <NameTT id={tt}>
+              <img src={icon} className="quest-popup-img" alt={icon} />
+            </NameTT>
           ) : (
             icon
           )}

From 3c14d4f4816a0bcf26dfe6fc1645754384e464f7 Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Tue, 2 Aug 2022 22:08:29 -0400
Subject: [PATCH 2/2] linting

---
 src/components/popups/common/TimeTile.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/popups/common/TimeTile.jsx b/src/components/popups/common/TimeTile.jsx
index 01b8ceb8d..51f0be0e4 100644
--- a/src/components/popups/common/TimeTile.jsx
+++ b/src/components/popups/common/TimeTile.jsx
@@ -4,7 +4,13 @@ import { Grid, Typography } from '@material-ui/core'
 import Timer from './Timer'
 import NameTT from './NameTT'
 
-export default function TimeTile({ expireTime, icon, until, size = 3, tt = [] }) {
+export default function TimeTile({
+  expireTime,
+  icon,
+  until,
+  size = 3,
+  tt = [],
+}) {
   const endTime = new Date(expireTime * 1000)
   return (
     <>