diff --git a/app/routes/_data.dns._index/domains.tsx b/app/routes/_data.dns._index/domains.tsx index ec2befd..1af81c1 100644 --- a/app/routes/_data.dns._index/domains.tsx +++ b/app/routes/_data.dns._index/domains.tsx @@ -1,13 +1,13 @@ /* eslint-disable unicorn/no-keyword-prefix */ import { - closestCenter, + closestCorners, DndContext, - DragOverlay, - PointerSensor, - TouchSensor, - useSensor, - useSensors + DragOverlay } from '@dnd-kit/core' +import { + restrictToParentElement, + restrictToVerticalAxis +} from '@dnd-kit/modifiers' import { arrayMove, SortableContext, @@ -16,9 +16,9 @@ import { } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' import { Bars3Icon } from '@heroicons/react/24/outline' -import { useFetcher, useRevalidator } from '@remix-run/react' +import { useFetcher } from '@remix-run/react' import clsx from 'clsx' -import { useState } from 'react' +import { useEffect, useState } from 'react' type Properties = { readonly baseDomain?: string; @@ -31,12 +31,10 @@ export default function Domains({ baseDomain, searchDomains }: Properties) { const [localDomains, setLocalDomains] = useState(searchDomains) const [newDomain, setNewDomain] = useState('') const fetcher = useFetcher({ key: 'search-domains' }) - const revalidator = useRevalidator() - const sensors = useSensors( - useSensor(PointerSensor), - useSensor(TouchSensor) - ) + useEffect(() => { + setLocalDomains(searchDomains) + }, [searchDomains]) return (
@@ -45,47 +43,47 @@ export default function Domains({ baseDomain, searchDomains }: Properties) { Set custom DNS search domains for your Tailnet. When using Magic DNS, your tailnet domain is used as the first search domain.

-
- {baseDomain ? ( -
-

{baseDomain}

-
- ) : undefined} - { - setActiveId(event.active.id) - }} - onDragEnd={event => { - // eslint-disable-next-line unicorn/no-null - setActiveId(null) - const { active, over } = event - if (!over) { - return - } + { + setActiveId(event.active.id) + }} + onDragEnd={event => { + // eslint-disable-next-line unicorn/no-null + setActiveId(null) + const { active, over } = event + if (!over) { + return + } - const activeItem = localDomains[active.id as number - 1] - const overItem = localDomains[over.id as number - 1] + const activeItem = localDomains[active.id as number - 1] + const overItem = localDomains[over.id as number - 1] - if (!activeItem || !overItem) { - return - } + if (!activeItem || !overItem) { + return + } - const oldIndex = localDomains.indexOf(activeItem) - const newIndex = localDomains.indexOf(overItem) + const oldIndex = localDomains.indexOf(activeItem) + const newIndex = localDomains.indexOf(overItem) - if (oldIndex !== newIndex) { - setLocalDomains(arrayMove(localDomains, oldIndex, newIndex)) - } - }} - > + if (oldIndex !== newIndex) { + setLocalDomains(arrayMove(localDomains, oldIndex, newIndex)) + } + }} + > +
+ {baseDomain ? ( +
+

{baseDomain}

+
+ ) : undefined} ))} + + {activeId ? : undefined} + - - {activeId ? : undefined} - - -
- { - setNewDomain(event.target.value) - }} - /> - + { + setNewDomain(event.target.value) + }} + /> + +
-
+
) } @@ -156,7 +151,6 @@ type DomainProperties = { function Domain({ domain, id, localDomains, isDrag }: DomainProperties) { const fetcher = useFetcher({ key: 'individual-domain' }) - const revalidator = useRevalidator() const { attributes, @@ -174,17 +168,19 @@ function Domain({ domain, id, localDomains, isDrag }: DomainProperties) { 'flex items-center justify-between px-3 py-2', 'border-b border-gray-200 last:border-b-0', isDragging ? 'text-gray-400' : 'bg-gray-50', - isDrag ? 'outline outline-1 outline-gray-500 rounded-md' : undefined + isDrag ? 'outline outline-1 outline-gray-500' : undefined )} style={{ transform: CSS.Transform.toString(transform), transition }} - {...attributes} - {...listeners} >

- + {domain}

{isDrag ? undefined : ( @@ -199,10 +195,6 @@ function Domain({ domain, id, localDomains, isDrag }: DomainProperties) { method: 'PATCH', encType: 'application/json' }) - - if (revalidator.state === 'idle') { - revalidator.revalidate() - } }} > Remove diff --git a/package.json b/package.json index 37cafe9..bd06122 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@dnd-kit/core": "^6.1.0", + "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", "@headlessui/react": "^1.7.18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cfbb758..e311d6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@dnd-kit/core': specifier: ^6.1.0 version: 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/modifiers': + specifier: ^7.0.0 + version: 7.0.0(@dnd-kit/core@6.1.0)(react@18.2.0) '@dnd-kit/sortable': specifier: ^8.0.0 version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0) @@ -462,6 +465,18 @@ packages: tslib: 2.6.2 dev: false + /@dnd-kit/modifiers@7.0.0(@dnd-kit/core@6.1.0)(react@18.2.0): + resolution: {integrity: sha512-BG/ETy3eBjFap7+zIti53f0PCLGDzNXyTmn6fSdrudORf+OH04MxrW4p5+mPu4mgMk9kM41iYONjc3DOUWTcfg==} + peerDependencies: + '@dnd-kit/core': ^6.1.0 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + tslib: 2.6.2 + dev: false + /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0): resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==} peerDependencies: