chore: add no-redeclare lint flag

src/actions/index.ts

@@ -34,3 +34,4 @@ export * from './updateEditorHistory';
 export * from './triggerDownload';
 export * from './toggleDialog';
 export * from './setEditorHistoryEnabled';
+export * from './updateExcludedAreas';

src/actions/updateExcludedAreas.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-redeclare */
+import { Action } from 'actions';
+
+export type UPDATE_EXCLUDED_AREAS = 'UPDATE_EXCLUDED_AREAS';
+export const UPDATE_EXCLUDED_AREAS: UPDATE_EXCLUDED_AREAS = 'UPDATE_EXCLUDED_AREAS';
+
+export type updateExcludedAreas = (excludedAreas: string[]) => Action<UPDATE_EXCLUDED_AREAS>;
+export const updateExcludedAreas = (excludedAreas: string[]): Action<UPDATE_EXCLUDED_AREAS> => {
+    return {
+        type: UPDATE_EXCLUDED_AREAS,
+        excludedAreas,
+    };
+};

src/components/PokemonEditor/PokemonLocationChecklist.tsx

@@ -5,6 +5,8 @@ import { State } from 'state';
 import { PokemonIcon } from 'components/PokemonIcon';
 import {  Callout, Classes, Icon, Intent, TextArea, Tooltip } from '@blueprintjs/core';
 import { cx } from 'emotion';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateExcludedAreas } from 'actions';
 
 
 const LocationIcon = ({ area, currentGame, excludeGifts, pokemon }) => {
@@ -65,16 +67,17 @@ export const PokemonLocationChecklist = ({
 
     const [excludeGifts, setExcludeGifts] = React.useState(false);
     const [currentGame, setCurrentGame] = React.useState<GameName>('None');
-    const [excludedAreas, setExcludedAreas] = React.useState<string[]>([]);
+    const excludedAreas = useSelector<State, State['excludedAreas']>(state => state.excludedAreas);
+    const dispatch = useDispatch();
     const encounterMap = React.useMemo(() => getEncounterMap(game.name).filter(area => !excludedAreas.includes(area)), [game.name, excludedAreas]);
     const totals = React.useMemo(() => calcTotals(boxes, pokemon, encounterMap, currentGame), [boxes, JSON.stringify(pokemon), encounterMap, currentGame]);
 
-    const hideArea = (area: string) => () => setExcludedAreas(areas => [...areas, area]);
+    const hideArea = (area: string) => () => dispatch(updateExcludedAreas([...excludedAreas, area]));
 
-    const updateExcludedAreas = (event) => {
+    const updateExcludedAreasFromText = (event) => {
         const value = event.currentTarget.value;
         const areas = value.split('\n');
-        setExcludedAreas(areas);
+        updateExcludedAreas(areas);
     };
 
     const colors = ['#0e1d6b', '#468189', '#77ACA2', '#9DBEBB', '#F4E9CD', '#0DAB76', '#139A43', '#D4AFB9', '#9CADCE'];
@@ -83,7 +86,7 @@ export const PokemonLocationChecklist = ({
         return <Tooltip content={
             <>
                 {percentages.map((percentage, idx) => <div>
-                    <div style={{ display: 'inline-block', width: '0.5rem', height: '0.5rem', borderRadius: '50%', background: colors[idx], marginRight: '0.25rem' }}></div>
+                    <div key={percentage.key} style={{ display: 'inline-block', width: '0.5rem', height: '0.5rem', borderRadius: '50%', background: colors[idx], marginRight: '0.25rem' }}></div>
                     {percentage.key}: {percentage.percentage}
                 </div>)}
             </>
@@ -153,8 +156,8 @@ export const PokemonLocationChecklist = ({
                 </label>
                 <TextArea
                     name='excludedAreas'
-                    onChange={updateExcludedAreas}
-                    value={excludedAreas.join('\n')}
+                    onChange={updateExcludedAreasFromText}
+                    defaultValue={excludedAreas.join('\n')}
                 />
             </div>
             <Callout intent={Intent.WARNING} style={{ fontSize: '80%', marginTop: '0.5rem' }}>

src/reducers/excludedAreas.ts

@@ -0,0 +1,15 @@
+import { Action, UPDATE_EXCLUDED_AREAS, REPLACE_STATE } from '../actions';
+
+export function excludedAreas(
+    state: string[] = [],
+    action: Action<UPDATE_EXCLUDED_AREAS | REPLACE_STATE>,
+) {
+    switch (action.type) {
+        case UPDATE_EXCLUDED_AREAS:
+            return action.excludedAreas;
+        case REPLACE_STATE:
+            return action.replaceWith.excludedAreas;
+        default:
+            return state;
+    }
+}

src/reducers/index.ts

@@ -17,6 +17,7 @@ import { customMoveMap } from './customMoveMap';
 import { stats } from './stats';
 import { customTypes } from './customTypes';
 import { editorHistory } from './editorHistory';
+import { excludedAreas } from './excludedAreas';
 import { view } from './view';
 
 export const reducers = {
@@ -26,6 +27,7 @@ export const reducers = {
     customMoveMap,
     customTypes,
     editorHistory,
+    excludedAreas,
     game,
     nuzlockes,
     pokemon,

src/state/index.ts

@@ -9,6 +9,7 @@ export interface State {
     confirmation: boolean;
     checkpoints: Checkpoints;
     editor: Editor;
+    excludedAreas: string[];
     game: Game;
     pokemon: Pokemon[];
     rules: string[];