Merge pull request #65 from WHIZENx/update-patch

Update patch
WHIZENx · Aug 26, 2024 · bef2ebe · bef2ebe
2 parents 1efb30e + 31e1bc5
commit bef2ebe
Show file tree

Hide file tree

Showing 86 changed files with 2,127 additions and 4,140 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -148,6 +148,7 @@
     "ejs": "3.1.10",
     "braces": "3.0.3",
     "ws": "8.17.1",
-    "fast-xml-parser": "4.4.1"
+    "fast-xml-parser": "4.4.1",
+    "micromatch": "4.0.8"
   }
 }
diff --git a/src/App.scss b/src/App.scss
@@ -370,6 +370,7 @@ ul {
 .black-bg { background: black; }
 
 .special-ic { background: linear-gradient(to right bottom, #825af0, #9ba0f0); }
+.unavailable-ic { background: linear-gradient(to right bottom, #504843, #a8a8a8); }
 
 // Theme styles
 .btn-dark {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,7 @@
 import React, { createContext, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Route, Routes } from 'react-router-dom';
-import { loadCPM, loadPokeGOLogo, loadTimestamp } from './store/actions/store.action';
-import { setBar, setPercent } from './store/actions/spinner.action';
+import { loadCPM, loadPokeGOLogo, loadTimestamp } from './store/effects/store.effects';
 
 import './App.scss';
 
@@ -38,14 +37,14 @@ import CatchChance from './pages/Tools/CatchChance/CatchChance';
 import { useLocalStorage } from 'usehooks-ts';
 import SearchTypes from './pages/Search/Types/Types';
 import StatsRanking from './pages/Sheets/StatsRanking/StatsRanking';
-import { loadTheme } from './store/actions/theme.action';
+import { loadTheme } from './store/effects/theme.effects';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { getDesignThemes } from './assets/themes/themes';
 import { TRANSITION_TIME } from './util/Constants';
-import { setDevice } from './store/actions/device.action';
 import { PaletteMode } from '@mui/material';
 import { TypeTheme } from './enums/type.enum';
+import { DeviceActions, SpinnerActions } from './store/actions';
 
 // tslint:disable-next-line: no-empty
 const ColorModeContext = createContext({ toggleColorMode: () => {} });
@@ -70,13 +69,13 @@ function App() {
     const fetchData = async () => {
       await loadTimestamp(dispatch, stateTimestamp, setStateTimestamp, setStateImage, setStateSound, stateImage, stateSound);
     };
-    dispatch(setDevice());
-    dispatch(setBar(true));
-    dispatch(setPercent(0));
+    dispatch(DeviceActions.SetDevice.create());
+    dispatch(SpinnerActions.SetBar.create(true));
+    dispatch(SpinnerActions.SetPercent.create(0));
     loadTheme(dispatch, stateTheme, setStateTheme);
     loadCPM(dispatch);
     loadPokeGOLogo(dispatch);
-    dispatch(setPercent(15));
+    dispatch(SpinnerActions.SetPercent.create(15));
     fetchData();
   }, [dispatch]);
 

diff --git a/src/components/Card/CardMove.tsx b/src/components/Card/CardMove.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import APIService from '../../services/API.service';
-import { capitalize, splitAndCapitalize } from '../../util/Utils';
+import { capitalize, isNotEmpty, splitAndCapitalize } from '../../util/Utils';
 import { StoreState } from '../../store/models/state.model';
 import { ICombat } from '../../core/models/combat.model';
 import { FORM_PURIFIED, FORM_SHADOW } from '../../util/Constants';
@@ -13,7 +13,7 @@ const CardMove = (props: ICardMoveComponent) => {
   const [data, setData] = useState<ICombat>();
 
   useEffect(() => {
-    if (combat.length > 0 && props.value) {
+    if (isNotEmpty(combat) && props.value) {
       const move = combat.find((item) => item.name === props.value?.name);
       setData(move);
     }

diff --git a/src/components/Effective/TypeEffective.tsx b/src/components/Effective/TypeEffective.tsx
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import APIService from '../../services/API.service';
 import TypeInfo from '../Sprites/Type/Type';
 import { ITypeEffectiveComponent } from '../models/component.model';
+import { isNotEmpty } from '../../util/Utils';
 
 const TypeEffective = (props: ITypeEffectiveComponent) => {
   const noneSprit = () => {
@@ -22,26 +23,25 @@ const TypeEffective = (props: ITypeEffectiveComponent) => {
           <h5 className="element-top">
             <li>Pokémon Type Effective</li>
           </h5>
-          {(props.typeEffective.veryWeak ?? []).length > 0 ||
-            ((props.typeEffective.weak ?? []).length > 0 && (
-              <Fragment>
-                <h6 className="element-top">
-                  <span className="type-title weakness-title">
-                    <b>Weakness</b>
-                  </span>
-                </h6>
-                <TypeInfo text={'2.56x damage from'} arr={props.typeEffective.veryWeak ?? []} style={{ marginLeft: 15 }} />
-                <TypeInfo text={'1.6x damage from'} arr={props.typeEffective.weak ?? []} style={{ marginLeft: 15 }} />
-              </Fragment>
-            ))}
+          {(isNotEmpty(props.typeEffective.veryWeak) || isNotEmpty(props.typeEffective.weak)) && (
+            <Fragment>
+              <h6 className="element-top">
+                <span className="type-title weakness-title">
+                  <b>Weakness</b>
+                </span>
+              </h6>
+              <TypeInfo text={'2.56x damage from'} arr={props.typeEffective.veryWeak ?? []} style={{ marginLeft: 15 }} />
+              <TypeInfo text={'1.6x damage from'} arr={props.typeEffective.weak ?? []} style={{ marginLeft: 15 }} />
+            </Fragment>
+          )}
           <h6 className="element-top">
             <span className="type-title resistance-title">
               <b>Resistance</b>
             </span>
           </h6>
-          {(props.typeEffective.superResist ?? []).length > 0 ||
-          (props.typeEffective.veryResist ?? []).length > 0 ||
-          (props.typeEffective.resist ?? []).length > 0 ? (
+          {isNotEmpty(props.typeEffective.superResist) ||
+          isNotEmpty(props.typeEffective.veryResist) ||
+          isNotEmpty(props.typeEffective.resist) ? (
             <Fragment>
               <TypeInfo text={'0.244x damage from'} arr={props.typeEffective.superResist ?? []} style={{ marginLeft: 15 }} />
               <TypeInfo text={'0.391x damage from'} arr={props.typeEffective.veryResist ?? []} style={{ marginLeft: 15 }} />
@@ -55,7 +55,7 @@ const TypeEffective = (props: ITypeEffectiveComponent) => {
               <b>Neutral</b>
             </span>
           </h6>
-          {(props.typeEffective.neutral ?? []).length > 0 ? (
+          {isNotEmpty(props.typeEffective.neutral) ? (
             <TypeInfo text={'1x damage from'} arr={props.typeEffective.neutral ?? []} style={{ marginLeft: 15 }} />
           ) : (
             noneSprit()

diff --git a/src/components/Effective/TypeEffectiveSelect.tsx b/src/components/Effective/TypeEffectiveSelect.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 import APIService from '../../services/API.service';
-import { capitalize } from '../../util/Utils';
+import { capitalize, isNotEmpty } from '../../util/Utils';
 
 import './TypeEffectiveSelect.scss';
 import { StoreState } from '../../store/models/state.model';
@@ -14,7 +14,7 @@ const TypeEffectiveSelect = (props: ITypeEffectiveSelectComponent) => {
   const renderEffective = (text: string, data: string[]) => {
     return (
       <Fragment>
-        {data.length > 0 && (
+        {isNotEmpty(data) && (
           <Fragment>
             <h6 className={props.block ? 'element-top' : ''}>
               <b className="text-shadow">x{text}</b>
@@ -73,7 +73,7 @@ const TypeEffectiveSelect = (props: ITypeEffectiveSelectComponent) => {
         types.forEach((type) => {
           valueEffective *= value[type?.toUpperCase()];
         });
-        if (types.length > 0 && valueEffective === 1) {
+        if (isNotEmpty(types) && valueEffective === 1) {
           data.neutral?.push(key);
         }
       });

diff --git a/src/components/Find/Find.tsx b/src/components/Find/Find.tsx
@@ -3,7 +3,7 @@ import APIService from '../../services/API.service';
 import FormSelect from './FormSelect';
 
 import { useSelector } from 'react-redux';
-import { getPokemonById, mappingPokemonName } from '../../util/Utils';
+import { getPokemonById, isNotEmpty, mappingPokemonName } from '../../util/Utils';
 import { RouterState, SearchingState, StatsState, StoreState } from '../../store/models/state.model';
 import { IPokemonSearching } from '../../core/models/pokemon-searching.model';
 
@@ -32,14 +32,14 @@ const Find = (props: IFindComponent) => {
   const [pokemonListFilter, setPokemonListFilter] = useState<IPokemonSearching[]>([]);
 
   useEffect(() => {
-    if (pokemonData.length > 0) {
+    if (isNotEmpty(pokemonData)) {
       const result = mappingPokemonName(pokemonData);
       setPokemonList(result);
     }
   }, [pokemonData]);
 
   useEffect(() => {
-    if (pokemonList.length > 0) {
+    if (isNotEmpty(pokemonList)) {
       const timeOutId = setTimeout(() => {
         const results = pokemonList.filter(
           (item) => item.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) || item.id.toString().includes(searchTerm)
@@ -173,7 +173,7 @@ const Find = (props: IFindComponent) => {
     return (
       <div className="col d-flex justify-content-center text-center">
         <div>
-          {pokemonList.length > 0 && (
+          {isNotEmpty(pokemonList) && (
             <FormSelect
               router={router}
               searching={searching}
@@ -207,7 +207,7 @@ const Find = (props: IFindComponent) => {
       <h1 id="main" className="text-center" style={{ marginBottom: 15 }}>
         {props.title ?? 'Pokémon GO Tools'}
       </h1>
-      {pokemonList.length > 0 ? (
+      {isNotEmpty(pokemonList) ? (
         <div className="row search-container">
           {props.swap ? (
             <Fragment>

diff --git a/src/components/Find/FormSelect.tsx b/src/components/Find/FormSelect.tsx
@@ -10,13 +10,13 @@ import {
   formIconAssets,
   generatePokemonGoForms,
   getPokemonById,
+  isNotEmpty,
   splitAndCapitalize,
   TypeRadioGroup,
 } from '../../util/Utils';
 import TypeInfo from '../Sprites/Type/Type';
 import { FormControlLabel, Radio } from '@mui/material';
 import { useDispatch } from 'react-redux';
-import { setSearchToolPage } from '../../store/actions/searching.action';
 import { Action } from 'history';
 import { ToolSearching } from '../../core/models/searching.model';
 import { IPokemonName } from '../../core/models/pokemon.model';
@@ -35,6 +35,8 @@ import { AxiosError } from 'axios';
 import { APIUrl } from '../../services/constants';
 import { IFormSelectComponent } from '../models/component.model';
 import { TypeRaid } from '../../enums/type.enum';
+import { SearchingActions } from '../../store/actions';
+import { SearchingModel } from '../../store/models/searching.model';
 
 interface OptionsPokemon {
   prev: IPokemonName | undefined;
@@ -106,8 +108,8 @@ const FormSelect = (props: IFormSelectComponent) => {
       setPokeData(dataPokeList);
       setFormList(formListResult);
 
-      const defaultFrom = formListResult.flatMap((value) => value).filter((item) => item.form.isDefault);
-      let currentForm = defaultFrom?.find((item) => item?.form.id === data.id);
+      const defaultForm = formListResult.flatMap((value) => value).filter((item) => item.form.isDefault);
+      let currentForm = defaultForm?.find((item) => item?.form.id === data.id);
       if (props.searching) {
         const defaultFormSearch = formListResult
           .flatMap((value) => value)
@@ -117,12 +119,14 @@ const FormSelect = (props: IFormSelectComponent) => {
           );
         if (defaultFormSearch) {
           currentForm = defaultFormSearch;
+        } else {
+          currentForm = defaultForm.find((item) => item?.form.id === data.id);
         }
       }
       if (!currentForm) {
         currentForm = formListResult.flatMap((item) => item).find((item) => item.form.id === data.id);
       }
-      setCurrentForm(currentForm ?? defaultFrom.at(0));
+      setCurrentForm(currentForm ?? defaultForm.at(0));
       setData(data);
     },
     [props.searching]
@@ -132,9 +136,8 @@ const FormSelect = (props: IFormSelectComponent) => {
     (id: string) => {
       axiosSource.current = APIService.reNewCancelToken();
       const cancelToken = axiosSource.current.token;
-      APIService.getPokeSpices(id, {
-        cancelToken,
-      })
+
+      APIService.getPokeSpices(id, { cancelToken })
         .then((res) => {
           if (res.data) {
             fetchMap(res.data);
@@ -157,46 +160,48 @@ const FormSelect = (props: IFormSelectComponent) => {
   }, [props.setName, props.name, currentForm]);
 
   useEffect(() => {
-    if (props.id && (data?.id ?? 0) !== props.id && props.data.length > 0) {
-      props.setForm?.(undefined);
-      setCurrentForm(undefined);
+    if (props.id && (data?.id ?? 0) !== props.id && isNotEmpty(props.data)) {
+      clearData();
       queryPokemon(props.id.toString());
     }
     return () => {
-      if (data) {
+      if (data?.id) {
         APIService.cancel(axiosSource.current);
       }
     };
-  }, [props.id, props.data.length, data, queryPokemon]);
+  }, [props.id, props.data, data?.id, queryPokemon]);
 
   useEffect(() => {
-    if (currentForm || (!props.searching && props.router.action === Action.Push)) {
-      dispatch(
-        props.objective
-          ? setSearchToolPage({
-              ...(props.searching as ToolSearching),
-              obj: {
-                id: props.id ?? 0,
-                name: currentForm?.defaultName,
-                form: currentForm?.form.formName,
-                fullName: currentForm?.form.name,
-                timestamp: new Date(),
-              },
-            })
-          : setSearchToolPage({
-              ...props.searching,
-              id: props.id ?? 0,
-              name: currentForm?.defaultName,
-              form: currentForm?.form.formName,
-              fullName: currentForm?.form.name,
-              timestamp: new Date(),
-            })
-      );
+    if (currentForm && (data?.id ?? 0) > 0 && (props.id ?? 0) > 0 && props.router.action === Action.Push) {
+      let obj = props.searching ?? new ToolSearching();
+      const result = new SearchingModel({
+        id: props.id ?? 0,
+        name: currentForm.defaultName,
+        form: currentForm.form.formName,
+        fullName: currentForm.form.name,
+        timestamp: new Date(),
+      });
+      if (props.objective && (props.searching?.obj?.id !== props.id || props.searching?.obj?.form !== currentForm.form.formName)) {
+        obj = ToolSearching.create({
+          ...obj,
+          obj: {
+            ...result,
+          },
+        });
+        dispatch(SearchingActions.SetPokemonToolSearch.create(obj));
+      }
+      if (!props.objective && (props.searching?.id !== props.id || props.searching?.form !== currentForm.form.formName)) {
+        obj = ToolSearching.create({
+          ...obj,
+          ...result,
+        });
+        dispatch(SearchingActions.SetPokemonToolSearch.create(obj));
+      }
     }
-  }, [currentForm]);
+  }, [currentForm, dispatch]);
 
   useEffect(() => {
-    if (props.data.length > 0 && (props.id ?? 0) > 0) {
+    if (isNotEmpty(props.data) && (props.id ?? 0) > 0) {
       const currentId = getPokemonById(props.data, props.id ?? 0);
       if (currentId) {
         setDataStorePokemon({
@@ -208,6 +213,18 @@ const FormSelect = (props: IFormSelectComponent) => {
     }
   }, [props.data, props.id]);
 
+  const clearData = () => {
+    setCurrentForm(undefined);
+    setFormList([]);
+    setPokeData([]);
+    if (props.onClearStats) {
+      props.onClearStats();
+    }
+    if (props.setForm) {
+      props.setForm(undefined);
+    }
+  };
+
   const changeForm = (name: string) => {
     setCurrentForm(undefined);
     const findForm = formList.flatMap((item) => item).find((item) => item.form.name === name);
@@ -309,7 +326,7 @@ const FormSelect = (props: IFormSelectComponent) => {
         </b>
       </h4>
       <div className="scroll-card">
-        {currentForm?.defaultId && pokeData.length > 0 && formList.length > 0 ? (
+        {currentForm?.defaultId && isNotEmpty(pokeData) && isNotEmpty(formList) ? (
           <Fragment>
             {formList.map((value, index) => (
               <Fragment key={index}>