Track selection

[uDaiko]

closes #125

Adds a content reveal checkbox list to the delegate page. based on checked and unchecked boxes it updates the state array containing the trackIds which are further being handled.

Submission checklist:

Layout

• Change inspected in the mobile web ui
• Change inspected in dark mode

[wirednkod]

Thank you @uDaiko for the PR. Can you please resolve the conflicts?

[uDaiko]

Hey @wirednkod , yeah yesterday I noticed that I was 1 commit behind but did not have the time to fix it anymore. Merged it now so the conflicts should be resolved now.

[Tbaut]

Hey @uDaiko, thank you so much for this I have made quite a lot of changes that would have taken forever to go through in the comments, but I couldn't push to your branch. Is there any chance you can give me push access to your forked repo?

My changes include:

• manage state only in one component (the parent) removing all the useEffect
• use useMemo and useCallback anywhere possible
• show the track id and order by them
• move consts outside of the component
• use label with checkboxes (we should actually use shadn here and create a component)

I still need to inspect and properly test, to see how it behaves when doing the transaction.

Here is how the TrackSelection looks like

import { useCallback, useMemo } from 'react'

interface TrackSelectionProps {
  trackNamesMap: Map<number, string>
  onTrackSelectionChange: (selectedTracks: number[]) => void
  selectedTracks: number[]
}

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,
  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),
    )

    return [
      firstColumn,
      secondColumn,
      thirdColumn,
      fourthColumn,
      remainingTracks,
    ]
  }, [trackNamesMap])

  const addTrackToSelection = useCallback(
    (trackId: number) => {
      const newSelection = [...selectedTracks, trackId]
      onTrackSelectionChange(newSelection)
    },
    [onTrackSelectionChange, selectedTracks],
  )

  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 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] 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>
                )
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

[uDaiko]

@Tbaut Sure no problem. You should have an invite for collaboration.

[Tbaut]

Thanks, I made a PR in your repo, I let you take a look. I'll verify the proper execution shortly uDaiko#1

[Tbaut]

Looks good to me, thank you so much 🙏