diff --git a/app/routes/users/overview.tsx b/app/routes/users/overview.tsx index 45d908a..630d468 100644 --- a/app/routes/users/overview.tsx +++ b/app/routes/users/overview.tsx @@ -1,21 +1,17 @@ -import { DataRef, DndContext, useDraggable, useDroppable } from '@dnd-kit/core'; -import { PersonIcon } from '@primer/octicons-react'; import { useEffect, useState } from 'react'; import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router'; import { useLoaderData, useSubmit } from 'react-router'; -import Attribute from '~/components/Attribute'; -import Card from '~/components/Card'; -import { ErrorPopup } from '~/components/Error'; -import StatusCircle from '~/components/StatusCircle'; import type { LoadContext } from '~/server'; -import type { Machine, User } from '~/types'; +import { Machine, User } from '~/types'; import cn from '~/utils/cn'; import ManageBanner from './components/manage-banner'; import UserRow from './components/user-row'; -import DeleteUser from './dialogs/delete-user'; -import RenameUser from './dialogs/rename-user'; import { userAction } from './user-actions'; +interface UserMachine extends User { + machines: Machine[]; +} + export async function loader({ request, context, @@ -124,164 +120,6 @@ export default function Page() { ))} - - {/* */} - {/* }> - {() => ( - - )} - */} ); } - -type UserMachine = User & { machines: Machine[] }; - -interface UserProps { - users: UserMachine[]; - setUsers?: (users: UserMachine[]) => void; - magic?: string; -} - -function Users({ users, magic }: UserProps) { - return ( -
- {users.map((user) => ( - - ))} -
- ); -} - -function InteractiveUsers({ users, setUsers, magic }: UserProps) { - const submit = useSubmit(); - - return ( - { - const { over, active } = event; - if (!over) { - return; - } - - // Update the UI optimistically - const newUsers = new Array(); - const reference = active.data as DataRef; - if (!reference.current) { - return; - } - - // Ignore if the user is unchanged - if (reference.current.user.name === over.id) { - return; - } - - for (const user of users) { - newUsers.push({ - ...user, - machines: - over.id === user.name - ? [...user.machines, reference.current] - : user.machines.filter((m) => m.id !== active.id), - }); - } - - setUsers?.(newUsers); - const data = new FormData(); - data.append('action_id', 'change_owner'); - data.append('user_id', over.id.toString()); - data.append('node_id', reference.current.id); - - submit(data, { - method: 'POST', - }); - }} - > -
- {users.map((user) => ( - - ))} -
-
- ); -} - -function MachineChip({ machine }: { readonly machine: Machine }) { - const { attributes, listeners, setNodeRef, transform } = useDraggable({ - id: machine.id, - data: machine, - }); - - return ( -
- - -
- ); -} - -interface CardProps { - user: UserMachine; - magic?: string; -} - -function UserCard({ user, magic }: CardProps) { - const { isOver, setNodeRef } = useDroppable({ - id: user.name, - }); - - return ( -
- -
-
- - {user.name} -
-
- - {user.machines.length === 0 ? ( - - ) : undefined} -
-
-
- {user.machines.map((machine) => ( - - ))} -
-
-
- ); -} - -export function ErrorBoundary() { - return ; -}