diff --git a/src/components/TrackSelection.tsx b/src/components/TrackSelection.tsx index 5a0fa8b..7d92560 100644 --- a/src/components/TrackSelection.tsx +++ b/src/components/TrackSelection.tsx @@ -1,82 +1,97 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react' interface TrackSelectionProps { - trackNamesMap: Map; - onTrackSelectionChange: (selectedTracks: number[]) => void; + trackNamesMap: Map + onTrackSelectionChange: (selectedTracks: number[]) => void } -const TrackSelection: React.FC = ({ trackNamesMap, onTrackSelectionChange }) => { - const [selectedTracks, setSelectedTracks] = useState([]) +const TrackSelection: React.FC = ({ + trackNamesMap, + onTrackSelectionChange, +}) => { + const [selectedTracks, setSelectedTracks] = useState([]) - useEffect(() => { - onTrackSelectionChange(selectedTracks); - }, [selectedTracks, onTrackSelectionChange]); + useEffect(() => { + onTrackSelectionChange(selectedTracks) + }, [selectedTracks, onTrackSelectionChange]) + useEffect(() => { + if (trackNamesMap.size > 0) { + const allTrackIds = Array.from(trackNamesMap.keys()) + setSelectedTracks(allTrackIds) + } + }, [trackNamesMap]) - useEffect(() => { - if (trackNamesMap.size > 0) { - const allTrackIds = Array.from(trackNamesMap.keys()) - setSelectedTracks(allTrackIds) - } - }, [trackNamesMap]); + const handleTrackToggle = (selectedTrackId: number) => { + setSelectedTracks((prevSelectedTracks) => { + if (prevSelectedTracks.includes(selectedTrackId)) { + return prevSelectedTracks.filter((id) => id !== selectedTrackId) + } else { + return [...prevSelectedTracks, selectedTrackId] + } + }) + } - const handleTrackToggle = (selectedTrackId: number) => { - setSelectedTracks((prevSelectedTracks) => { - if (prevSelectedTracks.includes(selectedTrackId)) { - return prevSelectedTracks.filter((id) => id !== selectedTrackId); - } else { - return [...prevSelectedTracks, selectedTrackId]; - } - }); - }; + const firstColumn = [0, 2, 20, 21] + const secondColumn = [12, 15, 11, 14, 10] + const thirdColumn = [30, 31, 32, 33, 34] + const fourthColumn = [1, 13] - const firstColumn = [0, 2, 20, 21] - const secondColumn = [12, 15, 11, 14, 10] - const thirdColumn = [30, 31, 32, 33, 34] - const fourthColumn = [1, 13] + //due to hardcoded ids to achieve a specific order we have to make sure to have a catch all to capture the possibility of uncaught ids + const orderedTracks = [ + ...firstColumn, + ...secondColumn, + ...thirdColumn, + ...fourthColumn, + ] + const availableTracks = Array.from(trackNamesMap.keys()) + const remainingTracks = availableTracks.filter( + (trackId) => !orderedTracks.includes(trackId), + ) - //due to hardcoded ids to achieve a specific order we have to make sure to have a catch all to capture the possibility of uncaught ids - const orderedTracks = [...firstColumn, ...secondColumn, ...thirdColumn, ...fourthColumn]; - const availableTracks = Array.from(trackNamesMap.keys()); - const remainingTracks = availableTracks.filter(trackId => !orderedTracks.includes(trackId)); + const columnArrays = [ + firstColumn, + secondColumn, + thirdColumn, + fourthColumn, + remainingTracks, + ] - const columnArrays = [firstColumn, secondColumn, thirdColumn, fourthColumn, remainingTracks] - - - return ( -
-
- {columnArrays.map((column, columnIndex) => ( -
-
- {column.map((trackId) => { - const item = trackNamesMap.get(trackId) - if (!item) return null - return ( -
-
- handleTrackToggle(trackId)} - /> - - {trackNamesMap.get(trackId)} -
-
- ) - })} -
+ return ( +
+
+ {columnArrays.map((column, columnIndex) => ( +
+
+ {column.map((trackId) => { + const item = trackNamesMap.get(trackId) + if (!item) return null + return ( +
+
+ handleTrackToggle(trackId)} + /> + {trackNamesMap.get(trackId)}
- ))} +
+ ) + })}
-
- ) - -}; +
+ ))} +
+
+ ) +} -export default TrackSelection; +export default TrackSelection diff --git a/src/pages/Delegate/index.tsx b/src/pages/Delegate/index.tsx index a63db4a..9d216c9 100644 --- a/src/pages/Delegate/index.tsx +++ b/src/pages/Delegate/index.tsx @@ -59,7 +59,7 @@ export const Delegate = () => { const [isTxInitiated, setIsTxInitiated] = useState(false) const [isMultiTxDialogOpen, setIsMultiTxDialogOpen] = useState(false) const [noDelegateFound, setNoDelegateFound] = useState(false) - const [trackNames, setTrackNames] = useState>(new Map()); + const [trackNames, setTrackNames] = useState>(new Map()) const [tracksToDelegate, setTracksToDelegate] = useState([]) const [onGoingVoteLocks, setOngoingVoteLocks] = useState([]) const getSubsquareUrl = useGetSubsquareRefUrl() @@ -179,7 +179,7 @@ export const Delegate = () => { .replace(/_/g, ' ') .replace(/\b\w/g, (t) => t.toUpperCase()) trackNamesMap.set(trackId, trackName) - }); + }) setTrackNames(trackNamesMap) }) .catch(console.error) @@ -293,7 +293,7 @@ export const Delegate = () => { { ) }} /> - + + onTrackSelectionChange={onTrackSelectionChange} + >