FavoriteRelayList.tsx raw

   1  import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
   2  import {
   3    closestCenter,
   4    DndContext,
   5    DragEndEvent,
   6    KeyboardSensor,
   7    PointerSensor,
   8    useSensor,
   9    useSensors
  10  } from '@dnd-kit/core'
  11  import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers'
  12  import {
  13    arrayMove,
  14    SortableContext,
  15    sortableKeyboardCoordinates,
  16    verticalListSortingStrategy
  17  } from '@dnd-kit/sortable'
  18  import { useTranslation } from 'react-i18next'
  19  import RelayItem from './RelayItem'
  20  
  21  export default function FavoriteRelayList() {
  22    const { t } = useTranslation()
  23    const { favoriteRelays, reorderFavoriteRelays } = useFavoriteRelays()
  24  
  25    const sensors = useSensors(
  26      useSensor(PointerSensor),
  27      useSensor(KeyboardSensor, {
  28        coordinateGetter: sortableKeyboardCoordinates
  29      })
  30    )
  31  
  32    const handleDragEnd = (event: DragEndEvent) => {
  33      const { active, over } = event
  34  
  35      if (over && active.id !== over.id) {
  36        const oldIndex = favoriteRelays.findIndex((relay) => relay === active.id)
  37        const newIndex = favoriteRelays.findIndex((relay) => relay === over.id)
  38  
  39        const reorderedRelays = arrayMove(favoriteRelays, oldIndex, newIndex)
  40        reorderFavoriteRelays(reorderedRelays)
  41      }
  42    }
  43  
  44    return (
  45      <div className="space-y-2">
  46        <div className="text-muted-foreground font-semibold select-none">{t('Relays')}</div>
  47        <DndContext
  48          sensors={sensors}
  49          collisionDetection={closestCenter}
  50          onDragEnd={handleDragEnd}
  51          modifiers={[restrictToVerticalAxis, restrictToParentElement]}
  52        >
  53          <SortableContext items={favoriteRelays} strategy={verticalListSortingStrategy}>
  54            <div className="grid gap-2">
  55              {favoriteRelays.map((relay) => (
  56                <RelayItem key={relay} relay={relay} />
  57              ))}
  58            </div>
  59          </SortableContext>
  60        </DndContext>
  61      </div>
  62    )
  63  }
  64