Poracle webhook search

public/base-locales/en.json

@@ -21,6 +21,11 @@
   "search_nests": "Search Nests",
   "search_gyms": "Search Gyms",
   "search_pokestops": "Search PokéStops",
+  "search_raids": "Search Raids",
+  "search_eggs": "Search Eggs",
+  "search_quests": "Search Quests",
+  "search_lures": "Search Lures",
+  "search_invasions": "Search Invasions",
   "sm": "sm",
   "md": "md",
   "lg": "lg",
@@ -498,5 +503,6 @@
   "lc_metersUnit": "meters",
   "lc_feetUnit": "feet",
   "lc_popup": "You are within {distance} {unit} from this point",
-  "lc_outsideMapBoundsMsg": "You seem located outside the boundaries of the map"
+  "lc_outsideMapBoundsMsg": "You seem located outside the boundaries of the map",
+  "no_alerts": "No Alerts Found"
 }

public/base-locales/pl.json

@@ -21,6 +21,8 @@
   "search_nests": "Szukaj nestów",
   "search_gyms": "Szukaj gymów",
   "search_pokestops": "Szukaj Pokestopów",
+  "search_raids": "Szukaj raidów",
+  "search_eggs": "Szukaj jajek",
   "sm": "SM",
   "md": "MD",
   "lg": "LG",
@@ -498,5 +500,6 @@
   "device_icons": "Ikony urządzeń",
   "spawnpoint_icons": "Ikony Spawnpointów",
   "raid_quick_select": "Szybki wybór",
-  "disabled": "Wyłączone"
+  "disabled": "Wyłączone",
+  "no_alerts": "Nie znaleziono alertów"
 }

src/components/layout/dialogs/filters/AdvSearch.jsx

@@ -21,7 +21,7 @@ export default function AdvSearch({ search, setSearch, category }) {
     <Paper elevation={0} variant="outlined" className={classes.search} key="search">
       <InputBase
         className={classes.input}
-        placeholder={t(`search_${category}`)}
+        placeholder={t(`search_${category}`, t(`search_${category}s`))}
         name="search"
         value={search}
         onChange={handleSearchChange}

src/components/layout/dialogs/webhooks/Tracked.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useState, memo } from 'react'
+import React, { useEffect, useMemo, useState, memo } from 'react'
 import { useMutation } from '@apollo/client'
 import { Trans } from 'react-i18next'
 
 import Utility from '@services/Utility'
 import Query from '@services/Query'
 import { useStatic } from '@hooks/useStore'
+import { Grid, Typography } from '@material-ui/core'
 import ReactWindow from '@components/layout/general/ReactWindow'
+import AdvSearch from '@components/layout/dialogs/filters/AdvSearch'
 import PokemonTile from './tiles/TrackedTile'
 import Selecting from './Selecting'
 
@@ -17,6 +19,7 @@ const Tracked = ({
   const [syncWebhook, { data: newWebhookData }] = useMutation(Query.webhook(category), {
     fetchPolicy: 'no-cache',
   })
+  const [search, setSearch] = useState('')
   const [tracked, setTracked] = useState(webhookData[selectedWebhook][category])
   const [selected, setSelected] = useState({})
   const [staticInfo] = useState(webhookData[selectedWebhook].info)
@@ -66,6 +69,19 @@ const Tracked = ({
     },
   }))
 
+  const profileFiltered = useMemo(() => tracked
+    .filter(x => x.profile_no === webhookData[selectedWebhook].human.current_profile_no)
+    .map(y => ({
+      ...y,
+      description: Poracle.generateDescription(y, category, webhookData[selectedWebhook].leagues, t)?.replace(/\*/g, '') || '',
+    }))
+    .sort((a, b) => (
+      a[staticInfo[category].sortProp] - b[staticInfo[category].sortProp]
+    )), [tracked, webhookData[selectedWebhook].human.current_profile_no])
+
+  const searchFiltered = profileFiltered.filter(x => x.description.toLowerCase().includes(search)
+    || (x.pokemon_id && x.pokemon_id.toString().includes(search)))
+
   const handleAll = () => {
     const newObj = {}
     tracked.forEach(entry => {
@@ -86,35 +102,49 @@ const Tracked = ({
     setSelected({})
   }
 
-  const profileFiltered = tracked.filter(x => x.profile_no === webhookData[selectedWebhook].human.current_profile_no)
-
   return (
-    <div style={{ height: '100%' }}>
-      <ReactWindow
-        columnCount={1}
-        length={profileFiltered.length}
-        offset={15}
-        data={{
-          isMobile,
-          Icons,
-          tileItem: profileFiltered.sort((a, b) => a[staticInfo[category].sortProp] - b[staticInfo[category].sortProp]),
-          syncWebhook,
-          selectedWebhook,
-          tracked,
-          setTracked,
-          selected,
-          setSelected,
-          setSend,
-          setTempFilters,
-          leagues: webhookData[selectedWebhook].leagues,
-          category,
-          Poracle,
-          invasions,
-          t,
-          Utility,
-        }}
-        Tile={PokemonTile}
+    <div style={{ height: '95%' }}>
+      <AdvSearch
+        search={search}
+        setSearch={setSearch}
+        category={category}
       />
+      {searchFiltered.length ? (
+        <ReactWindow
+          columnCount={1}
+          length={searchFiltered.length}
+          offset={0}
+          columnWidthCorrection={18}
+          data={{
+            isMobile,
+            Icons,
+            tileItem: searchFiltered,
+            syncWebhook,
+            selectedWebhook,
+            tracked,
+            setTracked,
+            selected,
+            setSelected,
+            setSend,
+            setTempFilters,
+            category,
+            Poracle,
+            invasions,
+            Utility,
+          }}
+          Tile={PokemonTile}
+        />
+      ) : (
+        <div style={{ flex: '1 1 auto' }}>
+          <Grid container alignItems="center" justifyContent="center" direction="column" style={{ height: '100%' }}>
+            <Grid item style={{ whiteSpace: 'pre-line' }}>
+              <Typography variant="h6" align="center">
+                {t('no_alerts')}
+              </Typography>
+            </Grid>
+          </Grid>
+        </div>
+      )}
       {Object.values(selected).some(x => x) && (
         <Selecting setSelected={setSelected} handleAll={handleAll} deleteAll={deleteAll} />
       )}

src/components/layout/dialogs/webhooks/tiles/TrackedTile.jsx

@@ -9,7 +9,7 @@ import WebhookAdvanced from '@components/layout/dialogs/webhooks/WebhookAdv'
 export default function PokemonTile({ data, rowIndex, columnIndex, style }) {
   const {
     tileItem, columnCount, Icons, syncWebhook, selectedWebhook, selected, setSelected, Utility,
-    tracked, setTracked, isMobile, setSend, setTempFilters, leagues, category, t, Poracle, invasions,
+    tracked, setTracked, isMobile, setSend, setTempFilters, category, Poracle, invasions,
   } = data
   const [editDialog, setEditDialog] = useState(false)
   const item = tileItem[rowIndex * columnCount + columnIndex]
@@ -70,7 +70,7 @@ export default function PokemonTile({ data, rowIndex, columnIndex, style }) {
       </Grid>
       <Grid item xs={6} sm={8} md={9}>
         <Typography variant="caption">
-          {Poracle.generateDescription(item, category, leagues, t)?.replace(/\*/g, '')}
+          {item.description}
         </Typography>
       </Grid>
       <Grid item xs={4} sm={3} md={2} style={{ textAlign: 'right' }}>

src/components/layout/general/ReactWindow.jsx

@@ -3,7 +3,7 @@ import { FixedSizeGrid } from 'react-window'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
 export default function ReactWindow({
-  columnCount, length, Tile, data, offset,
+  columnCount, length, Tile, data, offset, columnWidthCorrection,
 }) {
   return (
     <AutoSizer>
@@ -13,7 +13,7 @@ export default function ReactWindow({
           width={width}
           height={height}
           columnCount={columnCount}
-          columnWidth={width / columnCount - 5}
+          columnWidth={Math.floor(width / columnCount) - (columnWidthCorrection || 5)}
           rowCount={Math.ceil(length / columnCount)}
           rowHeight={(columnCount > 1 ? 120 : 60) + offset}
           itemData={{