Merge pull request #1 from uDaiko/tbaut-simplify-udaiko

Simplify track selection

src/components/TrackSelection.tsx

@@ -1,88 +1,84 @@
-import { useState, useEffect } from 'react'
+import { useCallback, useMemo } from 'react'
 
 interface TrackSelectionProps {
   trackNamesMap: Map<number, string>
   onTrackSelectionChange: (selectedTracks: number[]) => void
+  selectedTracks: number[]
 }
 
-const TrackSelection: React.FC<TrackSelectionProps> = ({
+const firstColumn = [0, 1, 2]
+const secondColumn = [10, 11, 12, 13, 14, 15]
+const fourthColumn = [30, 31, 32, 33, 34]
+const thirdColumn = [20, 21]
+const orderedTracks = [
+  ...firstColumn,
+  ...secondColumn,
+  ...thirdColumn,
+  ...fourthColumn,
+]
+export const TrackSelection = ({
   trackNamesMap,
   onTrackSelectionChange,
-}) => {
-  const [selectedTracks, setSelectedTracks] = useState<number[]>([])
-
-  useEffect(() => {
-    onTrackSelectionChange(selectedTracks)
-  }, [selectedTracks, onTrackSelectionChange])
+  selectedTracks,
+}: TrackSelectionProps) => {
+  //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 columnArrays = useMemo(() => {
+    const remainingTracks = Array.from(trackNamesMap.keys()).filter(
+      (trackId) => !orderedTracks.includes(trackId),
+    )
 
-  useEffect(() => {
-    if (trackNamesMap.size > 0) {
-      const allTrackIds = Array.from(trackNamesMap.keys())
-      setSelectedTracks(allTrackIds)
-    }
+    return [
+      firstColumn,
+      secondColumn,
+      thirdColumn,
+      fourthColumn,
+      remainingTracks,
+    ]
   }, [trackNamesMap])
 
-  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]
-
-  //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 addTrackToSelection = useCallback(
+    (trackId: number) => {
+      const newSelection = [...selectedTracks, trackId]
+      onTrackSelectionChange(newSelection)
+    },
+    [onTrackSelectionChange, selectedTracks],
   )
 
-  const columnArrays = [
-    firstColumn,
-    secondColumn,
-    thirdColumn,
-    fourthColumn,
-    remainingTracks,
-  ]
+  const removeTrackFromSelection = useCallback(
+    (trackId: number) => {
+      const newSelection = selectedTracks.filter((id) => id !== trackId)
+      onTrackSelectionChange(newSelection)
+    },
+    [onTrackSelectionChange, selectedTracks],
+  )
 
   return (
     <div className="container mx-auto p-4">
       <div className="flex flex-wrap">
         {columnArrays.map((column, columnIndex) => (
-          <div
-            key={columnIndex}
-            className="min-w-[180px] px-2 sm:w-1/2 md:w-1/4"
-          >
+          <div key={columnIndex} className="min-w-[180px] px-2 md:w-1/4">
             <div className="flex flex-col">
               {column.map((trackId) => {
                 const item = trackNamesMap.get(trackId)
+                const isSelected = selectedTracks.includes(trackId)
                 if (!item) return null
                 return (
-                  <div
-                    key={trackId}
-                    className="mb-2 min-h-[3rem] flex-grow items-start p-2"
-                  >
-                    <div className="flex items-center space-x-2 text-xs">
-                      <input
-                        type="checkbox"
-                        className="self-start accent-[hsl(var(--primary))]"
-                        checked={selectedTracks.includes(trackId)}
-                        onChange={() => handleTrackToggle(trackId)}
-                      />
-                      <span> {trackNamesMap.get(trackId)} </span>
-                    </div>
+                  <div key={trackId} className="mb-2 min-h-[3rem] p-2 text-xs">
+                    <input
+                      type="checkbox"
+                      id={trackId.toString()}
+                      className="self-start accent-[hsl(var(--primary))]"
+                      checked={isSelected}
+                      onChange={() =>
+                        isSelected
+                          ? removeTrackFromSelection(trackId)
+                          : addTrackToSelection(trackId)
+                      }
+                    />
+                    <label
+                      htmlFor={trackId.toString()}
+                      className="ml-2 cursor-pointer"
+                    >{`${trackId} - ${item}`}</label>
                   </div>
                 )
               })}
@@ -93,5 +89,3 @@ const TrackSelection: React.FC<TrackSelectionProps> = ({
     </div>
   )
 }
-
-export default TrackSelection

src/pages/Delegate/index.tsx

@@ -27,7 +27,7 @@ import { MultiTransactionDialog } from './MultiTransactionDialog'
 import { Title } from '@/components/ui/title'
 import { DelegateCard } from '@/components/DelegateCard'
 import { ContentReveal } from '@/components/ui/content-reveal'
-import TrackSelection from '@/components/TrackSelection'
+import { TrackSelection } from '@/components/TrackSelection'
 import { AnchorLink } from '@/components/ui/anchorLink'
 import { useGetSubsquareRefUrl } from '@/hooks/useGetSubsquareRefUrl'
 import {
@@ -90,10 +90,6 @@ export const Delegate = () => {
     })
   }, [tracksToDelegate, amount, conviction, delegate, getDelegateTx])
 
-  const onTrackSelectionChange = useCallback((tracks: number[]) => {
-    setTracksToDelegate(tracks)
-  }, [])
-
   const allTxs = useMemo(() => {
     if (!api) return
 
@@ -291,10 +287,7 @@ export const Delegate = () => {
           />
         </div>
 
-        <Label className="flex">
-          Conviction: {convictionDisplay}
-          <div className="ml-2">{}</div>
-        </Label>
+        <Label className="flex">Conviction: {convictionDisplay}</Label>
         <Slider
           disabled={!api || !selectedAccount}
           value={[convictionNo]}
@@ -317,8 +310,9 @@ export const Delegate = () => {
         <ContentReveal title={'Track Selection'}>
           <TrackSelection
             trackNamesMap={trackNames}
-            onTrackSelectionChange={onTrackSelectionChange}
-          ></TrackSelection>
+            onTrackSelectionChange={setTracksToDelegate}
+            selectedTracks={tracksToDelegate}
+          />
         </ContentReveal>
         <AlertNote
           message={