diff --git a/quick-pokemon-type-matchup/src/App.jsx b/quick-pokemon-type-matchup/src/App.jsx index aa825c7..1fca5f8 100644 --- a/quick-pokemon-type-matchup/src/App.jsx +++ b/quick-pokemon-type-matchup/src/App.jsx @@ -1,20 +1,22 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { css } from '@emotion/react'; +import TypeChartSelector from './components/TypeChartSelector'; import TypeSelectList from './components/TypeSelectList'; import Information from './components/Information'; +import TypesMainLatest from './data/types_main_latest.json'; import './App.css'; function App() { - const [types, setTypes] = useState([]); + const [types, setTypes] = useState(TypesMainLatest); const [selectedTypes, setSelectedTypes] = useState([]); - useEffect(() => { - async function fetchData() { - const response = await fetch('./types.json'); - setTypes(await response.json()); - } - fetchData(); + const updateTypes = useCallback((newTypes) => { + setTypes(newTypes); + }, []); + + const updateSelectedTypes = useCallback((newSelectedTypes) => { + setSelectedTypes(newSelectedTypes); }, []); return ( @@ -29,13 +31,31 @@ function App() { css={css` width: 14rem; height: 100dvh; - overflow-y: scroll; @media (max-width: 1000px) { width: 7rem; } + display: flex; + flex-direction: column; `} > - + +
+ +
{ `} > {theirTypes.map((type, i) => ( - <> - + + {i < theirTypes.length - 1 ? ', ' : ''} - + ))}
diff --git a/quick-pokemon-type-matchup/src/components/TypeChartSelector.jsx b/quick-pokemon-type-matchup/src/components/TypeChartSelector.jsx new file mode 100644 index 0000000..5cc4f98 --- /dev/null +++ b/quick-pokemon-type-matchup/src/components/TypeChartSelector.jsx @@ -0,0 +1,69 @@ +import { useState } from 'react'; +import { css } from '@emotion/react'; + +import TypesMainGen1 from '../data/types_main_gen1.json'; +import TypesMainGen2 from '../data/types_main_gen2_5.json'; +import TypesMainLatest from '../data/types_main_latest.json'; + +const TYPE_OPTIONS = ['main_gen1', 'main_gen2_5', 'main_latest']; + +const DEFAULT_OPTION = 'main_latest'; + +const TYPE_DATA_MAP = { + main_gen1: TypesMainGen1, + main_gen2_5: TypesMainGen2, + main_latest: TypesMainLatest, +}; + +const TYPE_OPTION_LABEL_MAP = { + main_gen1: 'Gen 1', + main_gen2_5: 'Gen 2 - 5', + main_latest: 'Gen 6+', +}; + +const TypeChartSelector = ({ setTypesCallback, className }) => { + const [selectedOption, setSelectedOption] = useState(DEFAULT_OPTION); + + const updateOption = (newOption) => { + setSelectedOption(newOption); + setTypesCallback(TYPE_DATA_MAP[newOption]); + }; + + return ( +
+

+ Type set: +

+ +
+ ); +}; + +export default TypeChartSelector; diff --git a/quick-pokemon-type-matchup/src/components/TypeSelectList.jsx b/quick-pokemon-type-matchup/src/components/TypeSelectList.jsx index a0b7b26..1bd786c 100644 --- a/quick-pokemon-type-matchup/src/components/TypeSelectList.jsx +++ b/quick-pokemon-type-matchup/src/components/TypeSelectList.jsx @@ -1,32 +1,42 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useRef, useCallback } from 'react'; import { css } from '@emotion/react'; import { MAXIMUM_TYPES_SELECTED } from '../constants'; import TypeViewButton from './TypeViewButton'; const TypeSelectList = ({ types, updateSelectedTypes }) => { + const typeReferenceTracker = useRef(null); const [selected, setSelected] = useState([]); - const toggleSelected = useCallback((type) => { - setSelected((previous) => { - let newSelected = []; - - if (previous.includes(type)) { - newSelected = previous.filter((x) => x.name != type.name); + const toggleSelected = useCallback( + (type) => { + let newSelected; + if (selected.includes(type)) { + newSelected = selected.filter((x) => x.name != type.name); } else { - newSelected = [...previous, type]; + newSelected = [...selected, type]; } if (newSelected.length > MAXIMUM_TYPES_SELECTED) { newSelected = newSelected.slice(1); } - return newSelected; - }); - }, []); + setSelected(newSelected); + updateSelectedTypes(newSelected); + }, + [selected] + ); useEffect(() => { - updateSelectedTypes(selected); - }, [selected]); + if (typeReferenceTracker.current != types) { + typeReferenceTracker.current = types; + const selectedNames = selected.map((y) => y.name); + const newSelected = types.filter((x) => selectedNames.includes(x.name)); + setSelected(newSelected); + updateSelectedTypes(newSelected); + } + }, [types, selected]); + + const selectedNames = selected.map((x) => x.name); return (