feat: updated depdencies and encounter adjustments, changes to remove…

… deprecated features
diballesteros · Apr 9, 2024 · ad79214 · ad79214
1 parent 4d4f593
commit ad79214
Show file tree

Hide file tree

Showing 79 changed files with 643 additions and 460 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,6 +22,7 @@
     "react-app/jest",
     "airbnb-typescript",
     "plugin:@typescript-eslint/recommended",
+    "plugin:deprecation/recommended",
     "prettier",
     "plugin:prettier/recommended"
   ],

diff --git a/cypress/e2e/other/Options.spec.ts b/cypress/e2e/other/Options.spec.ts
@@ -99,7 +99,19 @@ describe('Options', () => {
     cy.contains('SUGGESTED').should('not.exist');
   });
 
-  it('Dark mode', () => {
+  it.only('Dark mode', () => {
+    cy.clearLocalStorage();
+    cy.visit('/', {
+      onBeforeLoad: (win) => {
+        cy.stub(win, 'matchMedia')
+          .withArgs('(prefers-color-scheme:dark)')
+          .returns({
+            matches: false,
+            addListener: () => {},
+          });
+      },
+    });
+    cy.get('[data-testid=options]').click();
     cy.get('[data-testid=app]').should('have.css', 'background-color', 'rgb(255, 255, 255)');
     cy.contains('Settings').click();
     cy.get('[data-testid="settings-darkmode"]').click();

diff --git a/package.json b/package.json
@@ -27,24 +27,24 @@
   },
   "private": true,
   "dependencies": {
-    "@sentry/react": "^7.57.0",
-    "@sentry/tracing": "^7.57.0",
-    "@smogon/calc": "^0.7.0",
+    "@sentry/browser": "^7.109.0",
+    "@sentry/react": "^7.109.0",
+    "@smogon/calc": "^0.9.0",
     "@supabase/supabase-js": "^1.35.7",
     "html-to-image": "^1.11.11",
     "i18next": "22.4.15",
-    "immer": "^10.0.2",
+    "immer": "^10.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "12.2.2",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.3",
-    "react-window": "^1.8.9",
+    "react-window": "^1.8.10",
     "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.4",
+    "semantic-ui-react": "^2.1.5",
     "typescript": "4.5.5",
-    "zustand": "^4.3.8"
+    "zustand": "^4.5.2"
   },
   "scripts": {
     "analyze": "source-map-explorer ''build/static/js/*.js'",
@@ -77,27 +77,28 @@
     ]
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.10.8",
+    "@cypress/code-coverage": "^3.12.33",
     "@cypress/instrument-cra": "^1.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.2",
-    "@types/lodash": "^4.14.195",
-    "@types/node": "^20.3.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.12.5",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-window": "^1.8.5",
+    "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "5.7.0",
     "@typescript-eslint/parser": "5.7.0",
-    "cypress": "^12.16.0",
+    "cypress": "^13.7.2",
     "cypress-file-upload": "^5.0.8",
-    "cypress-localstorage-commands": "^2.2.3",
+    "cypress-localstorage-commands": "^2.2.5",
     "eslint": "8.4.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^16.1.2",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -15,7 +15,7 @@ import AppRouter from 'routes/AppRouter';
 import useStore from 'store';
 import styles from './App.module.scss';
 
-function App(): JSX.Element {
+function App(): React.JSX.Element {
   const navigate = useNavigate();
   const { t } = useTranslation('common');
   const darkMode = useStore(useCallback((state) => state.darkMode, []));

diff --git a/src/common/Back/Back.tsx b/src/common/Back/Back.tsx
@@ -6,7 +6,7 @@ import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon';
 import useStore from 'store';
 import styles from './Back.module.scss';
 
-function Back(): JSX.Element {
+function Back(): React.JSX.Element {
   const { t } = useTranslation('common');
   const navigate = useNavigate();
   const darkMode = useStore(useCallback((state) => state.darkMode, []));

diff --git a/src/common/DetailSelector/DetailSelector.tsx b/src/common/DetailSelector/DetailSelector.tsx
@@ -24,7 +24,7 @@ function DetailSelector({
   details,
   handleDetail,
   limitGen,
-}: DetailSelectorProps): JSX.Element {
+}: DetailSelectorProps): React.JSX.Element {
   const { t } = useTranslation('common');
   const [open, setOpen] = useState(false);
   const itemSize = useRemtoPx();

diff --git a/src/common/EncounterSelector/EncounterSelector.tsx b/src/common/EncounterSelector/EncounterSelector.tsx
@@ -24,7 +24,7 @@ function EncounterSelector({
   encounters,
   handleEncounter,
   limitGen,
-}: EncounterSelectorProps): JSX.Element {
+}: EncounterSelectorProps): React.JSX.Element {
   const { t } = useTranslation('common');
   const [open, setOpen] = useState(false);
   const itemSize = useRemtoPx();

diff --git a/src/common/ItemSelector/ItemSelector.tsx b/src/common/ItemSelector/ItemSelector.tsx
@@ -26,7 +26,7 @@ const OPTIONS = MY_ITEMS.map((item) => {
   };
 });
 
-function ItemSelector({ dataTestId, item, onChange }: ItemSelectorProps): JSX.Element {
+function ItemSelector({ dataTestId, item, onChange }: ItemSelectorProps): React.JSX.Element {
   const { t } = useTranslation('calculator');
 
   return (

diff --git a/src/common/Page/Page.tsx b/src/common/Page/Page.tsx
@@ -6,7 +6,7 @@ interface PageProps {
   header: string;
 }
 
-function Page({ children, header }: PageProps): JSX.Element {
+function Page({ children, header }: PageProps): React.JSX.Element {
   return (
     <section className={styles.page}>
       <div className={styles.header}>

diff --git a/src/common/PokemonSelector/PokemonSelector.tsx b/src/common/PokemonSelector/PokemonSelector.tsx
@@ -32,7 +32,7 @@ function PokemonSelector({
   limitGen,
   suggestions,
   tooltip = false,
-}: PokemonSelectorProps): JSX.Element {
+}: PokemonSelectorProps): React.JSX.Element {
   const { t } = useTranslation('common');
   const [open, setOpen] = useState(false);
   const values = useFilter();

diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
@@ -8,7 +8,7 @@ import apple from 'assets/svg/Download_on_the_App_Store_Badge_US-UK_RGB_blk_0929
 import { ReactComponent as MicrosoftSVG } from 'assets/svg/English_get.svg';
 import styles from './About.module.scss';
 
-function About(): JSX.Element {
+function About(): React.JSX.Element {
   const { t } = useTranslation('about');
   return (
     <Page header={t('about')}>

diff --git a/src/components/AddGame/AddGame.tsx b/src/components/AddGame/AddGame.tsx
@@ -12,7 +12,7 @@ import styles from './AddGame.module.scss';
 
 const NONE = 'none';
 
-function AddGame(): JSX.Element {
+function AddGame(): React.JSX.Element {
   const { t } = useTranslation('common');
   const [open, setOpen] = useState(false);
   const [template, setTemplate] = useState(NONE);

diff --git a/src/components/Badges/Badges.tsx b/src/components/Badges/Badges.tsx
@@ -5,7 +5,7 @@ import { BADGE_IMAGES } from 'constants/badges';
 import useStore from 'store';
 import styles from './Badges.module.scss';
 
-function Badges(): JSX.Element {
+function Badges(): React.JSX.Element {
   const navigate = useNavigate();
   const selectedGame = useStore(useCallback((state) => state.selectedGame, []));
   const games = useStore(useCallback((state) => state.games, []));

diff --git a/src/components/Badges/elements/BadgeDetail/BadgeDetail.tsx b/src/components/Badges/elements/BadgeDetail/BadgeDetail.tsx
@@ -24,7 +24,7 @@ interface BadgeDetailProps {
   selectedDetail: TDetail;
 }
 
-function BadgeDetail({ selectedDetail }: BadgeDetailProps): JSX.Element {
+function BadgeDetail({ selectedDetail }: BadgeDetailProps): React.JSX.Element {
   const { t } = useTranslation('badges');
   const [view, setView] = useState(0);
   const selectedGame = useStore(useCallback((state) => state.selectedGame, []));

diff --git a/src/components/Badges/elements/BadgeEditor/BadgeEditor.tsx b/src/components/Badges/elements/BadgeEditor/BadgeEditor.tsx
@@ -18,7 +18,7 @@ interface BadgeEditorProps {
   icon?: boolean;
 }
 
-function BadgeEditor({ icon }: BadgeEditorProps): JSX.Element {
+function BadgeEditor({ icon }: BadgeEditorProps): React.JSX.Element {
   const { t } = useTranslation('badges');
   const [open, setOpen] = useState(false);
   const badges = useStore(useCallback((state) => state.badges, []));

diff --git a/src/components/Badges/elements/BadgePage/BadgePage.tsx b/src/components/Badges/elements/BadgePage/BadgePage.tsx
@@ -1,4 +1,4 @@
-import { ReactText, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import Tab from 'semantic-ui-react/dist/commonjs/modules/Tab';
@@ -8,7 +8,7 @@ import DETAILS from 'constants/details';
 import useStore from 'store';
 import styles from './BadgePage.module.scss';
 
-function BadgePage(): JSX.Element {
+function BadgePage(): React.JSX.Element {
   const navigate = useNavigate();
   const { badge, game } = useParams();
   const { t } = useTranslation('badges');
@@ -45,7 +45,7 @@ function BadgePage(): JSX.Element {
       })
     : null;
 
-  const handleTabChange = (newIndex: ReactText) => {
+  const handleTabChange = (newIndex: string | number) => {
     setTab(Number(newIndex));
   };
 

diff --git a/src/components/Badges/elements/CustomBadgeEditor/CustomBadgeEditor.tsx b/src/components/Badges/elements/CustomBadgeEditor/CustomBadgeEditor.tsx
@@ -14,7 +14,7 @@ interface CustomBadgeEditorProps {
   icon?: boolean;
 }
 
-function CustomBadgeEditor({ icon }: CustomBadgeEditorProps): JSX.Element {
+function CustomBadgeEditor({ icon }: CustomBadgeEditorProps): React.JSX.Element {
   const { t } = useTranslation('badges');
   const [open, setOpen] = useState(false);
   const badges = useStore(useCallback((state) => state.customBadges, []));

diff --git a/src/components/Builder/Builder.tsx b/src/components/Builder/Builder.tsx
@@ -9,7 +9,7 @@ import useStore from 'store';
 import { ReactComponent as PokeballSVG } from 'assets/svg/pokeball.svg';
 import styles from './Builder.module.scss';
 
-function Builder(): JSX.Element {
+function Builder(): React.JSX.Element {
   const { t } = useTranslation('builder');
   const team = useStore(
     useCallback(

diff --git a/src/components/Builder/elements/Coverage/Coverage.tsx b/src/components/Builder/elements/Coverage/Coverage.tsx
@@ -5,7 +5,7 @@ import { selectBuilderStrong, selectBuilderWeak } from 'selectors';
 import useStore from 'store';
 import styles from './Coverage.module.scss';
 
-function Coverage(): JSX.Element {
+function Coverage(): React.JSX.Element {
   const { t } = useTranslation('builder');
   const strong = useStore(selectBuilderStrong);
   const weak = useStore(selectBuilderWeak);

diff --git a/src/components/Calculator/Calculator.tsx b/src/components/Calculator/Calculator.tsx
@@ -13,7 +13,7 @@ import useStore from 'store';
 import { ReactComponent as PokeballSVG } from 'assets/svg/pokeball.svg';
 import styles from './Calculator.module.scss';
 
-function Calculator(): JSX.Element {
+function Calculator(): React.JSX.Element {
   const { t } = useTranslation('common');
   const [selected, setSelected] = useState<0 | 1>(0);
   const calc = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value], []));

diff --git a/src/components/Calculator/elements/ButtonController/ButtonController.tsx b/src/components/Calculator/elements/ButtonController/ButtonController.tsx
@@ -8,7 +8,7 @@ interface ButtonControllerProps {
   name: keyof TCalculatorForm;
 }
 
-function ButtonController({ label, name }: ButtonControllerProps): JSX.Element {
+function ButtonController({ label, name }: ButtonControllerProps): React.JSX.Element {
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));
 

diff --git a/src/components/Calculator/elements/CalculatorHeader/CalculatorHeader.tsx b/src/components/Calculator/elements/CalculatorHeader/CalculatorHeader.tsx
@@ -24,7 +24,7 @@ export function getDesc(result: Result, t: TFunction): string {
   }
 }
 
-function CalculatorHeader(): JSX.Element {
+function CalculatorHeader(): React.JSX.Element {
   const { t } = useTranslation('calculator');
   const [expanded, setExpanded] = useState(false);
   const [primary, setPrimary] = useState<[position: 'attacker' | 'defender', index: number]>([

diff --git a/src/components/Calculator/elements/General/General.tsx b/src/components/Calculator/elements/General/General.tsx
@@ -18,7 +18,7 @@ interface GeneralProps {
   pokemon: '1' | '2';
 }
 
-function General({ encounters, pokemon }: GeneralProps): JSX.Element {
+function General({ encounters, pokemon }: GeneralProps): React.JSX.Element {
   const { t } = useTranslation('calculator');
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));

diff --git a/src/components/Calculator/elements/MainField/MainField.tsx b/src/components/Calculator/elements/MainField/MainField.tsx
@@ -9,7 +9,7 @@ import type { TCalculatorMain } from 'constants/types';
 import useStore from 'store';
 import styles from './MainField.module.scss';
 
-function MainField(): JSX.Element {
+function MainField(): React.JSX.Element {
   const { t } = useTranslation('calculator');
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));

diff --git a/src/components/Calculator/elements/Modifier/Modifier.tsx b/src/components/Calculator/elements/Modifier/Modifier.tsx
@@ -18,7 +18,7 @@ interface ModifierProps {
     | 'modspeed2';
 }
 
-function Modifier({ name }: ModifierProps): JSX.Element {
+function Modifier({ name }: ModifierProps): React.JSX.Element {
   const { t } = useTranslation('calculator');
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));

diff --git a/src/components/Calculator/elements/MoveController/MoveController.tsx b/src/components/Calculator/elements/MoveController/MoveController.tsx
@@ -9,7 +9,7 @@ interface MoveControllerProps {
   pokemon: '1' | '2';
 }
 
-function MoveController({ move, pokemon }: MoveControllerProps): JSX.Element {
+function MoveController({ move, pokemon }: MoveControllerProps): React.JSX.Element {
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));
 

diff --git a/src/components/Calculator/elements/PokeController/PokeController.tsx b/src/components/Calculator/elements/PokeController/PokeController.tsx
@@ -18,7 +18,7 @@ interface PokeControllerProps {
   name: 'pokemon1' | 'pokemon2';
 }
 
-function PokeController({ encounters, name }: PokeControllerProps): JSX.Element {
+function PokeController({ encounters, name }: PokeControllerProps): React.JSX.Element {
   const { t } = useTranslation('calculator');
   const [showAll, setShowAll] = useState(true);
   const darkMode = useStore(useCallback((state) => state.darkMode, []));

diff --git a/src/components/Calculator/elements/PokemonSlot/PokemonSlot.tsx b/src/components/Calculator/elements/PokemonSlot/PokemonSlot.tsx
@@ -8,7 +8,7 @@ interface PokemonSlotProps {
   pokemon: TPokemon;
 }
 
-function PokemonSlot({ pokemon }: PokemonSlotProps): JSX.Element {
+function PokemonSlot({ pokemon }: PokemonSlotProps): React.JSX.Element {
   return (
     <div className={styles.selector} style={{ backgroundColor: `${TYPE_COLOR[pokemon?.type]}50` }}>
       <div className={styles.info}>

diff --git a/src/components/Calculator/elements/Range/Range.tsx b/src/components/Calculator/elements/Range/Range.tsx
@@ -9,7 +9,7 @@ interface RangeProps {
   max: number;
 }
 
-function Range({ label, name, max }: RangeProps): JSX.Element {
+function Range({ label, name, max }: RangeProps): React.JSX.Element {
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));
   const fieldValue = form[name] as number;

diff --git a/src/components/Calculator/elements/SideField/SideField.tsx b/src/components/Calculator/elements/SideField/SideField.tsx
@@ -13,7 +13,7 @@ interface SideFieldProps {
 
 const SPIKES = [0, 1, 2, 3];
 
-function SideField({ pokemon }: SideFieldProps): JSX.Element {
+function SideField({ pokemon }: SideFieldProps): React.JSX.Element {
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
   const update = useStore(useCallback((state) => state.updateDefaultValues, []));
 

diff --git a/src/components/Calculator/elements/Stats/Stats.tsx b/src/components/Calculator/elements/Stats/Stats.tsx
@@ -24,7 +24,7 @@ const DV = {
   max: 15,
 };
 
-function Stats({ pokemon }: StatsProps): JSX.Element {
+function Stats({ pokemon }: StatsProps): React.JSX.Element {
   const { t } = useTranslation('calculator');
   const { pokemon1, pokemon2 } = useCalculate();
   const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));

diff --git a/src/components/Changelog/Changelog.tsx b/src/components/Changelog/Changelog.tsx
@@ -8,7 +8,7 @@ import type { TReleaseGroup } from 'constants/types';
 import useStore from 'store';
 import styles from './Changelog.module.scss';
 
-function Changelog(): JSX.Element {
+function Changelog(): React.JSX.Element {
   const { t, i18n } = useTranslation('common');
   const [logs, setLogs] = useState(3);
   const removeNew = useStore((state) => state.removeNew);

diff --git a/src/components/Export/Export.tsx b/src/components/Export/Export.tsx
@@ -4,7 +4,7 @@ import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon';
 import { selectExport } from 'selectors';
 import useStore from 'store';
 
-function Export(): JSX.Element {
+function Export(): React.JSX.Element {
   const { t } = useTranslation('common');
   const exportString = useStore(selectExport);
 

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -15,7 +15,7 @@ interface FilterProps {
   values: TFilter;
 }
 
-function Filter({ darkMode = false, hideGen = false, values }: FilterProps): JSX.Element {
+function Filter({ darkMode = false, hideGen = false, values }: FilterProps): React.JSX.Element {
   const { t } = useTranslation('common');
   const [show, setShow] = useState(false);
   return (