mirror of
https://github.com/tale/headplane.git
synced 2026-08-30 00:47:17 +00:00
chore: switch to react-router v7
This commit is contained in:
Aarnav Tale
@@ -1,53 +1,39 @@
|
||||
import { Form, useSubmit } from '@remix-run/react'
|
||||
import { useState } from 'react'
|
||||
import { Form, useSubmit } from 'react-router';
|
||||
import { useState } from 'react';
|
||||
|
||||
import Code from '~/components/Code'
|
||||
import Dialog from '~/components/Dialog'
|
||||
import TextField from '~/components/TextField'
|
||||
import Code from '~/components/Code';
|
||||
import Dialog from '~/components/Dialog';
|
||||
import TextField from '~/components/TextField';
|
||||
|
||||
interface Props {
|
||||
magic?: string
|
||||
magic?: string;
|
||||
}
|
||||
|
||||
export default function Add({ magic }: Props) {
|
||||
const [username, setUsername] = useState('')
|
||||
const submit = useSubmit()
|
||||
const [username, setUsername] = useState('');
|
||||
const submit = useSubmit();
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<Dialog.Button>
|
||||
Add a new user
|
||||
</Dialog.Button>
|
||||
<Dialog.Button>Add a new user</Dialog.Button>
|
||||
|
||||
<Dialog.Panel>
|
||||
{close => (
|
||||
{(close) => (
|
||||
<>
|
||||
<Dialog.Title>
|
||||
Add a new user
|
||||
</Dialog.Title>
|
||||
<Dialog.Title>Add a new user</Dialog.Title>
|
||||
<Dialog.Text className="mb-8">
|
||||
Enter a username to create a new user.
|
||||
{' '}
|
||||
{magic
|
||||
? (
|
||||
<>
|
||||
Since Magic DNS is enabled, machines will be
|
||||
accessible via
|
||||
{' '}
|
||||
<Code>
|
||||
[machine].
|
||||
.
|
||||
{magic}
|
||||
</Code>
|
||||
.
|
||||
</>
|
||||
)
|
||||
: undefined}
|
||||
Enter a username to create a new user.{' '}
|
||||
{magic ? (
|
||||
<>
|
||||
Since Magic DNS is enabled, machines will be accessible via{' '}
|
||||
<Code>[machine]. .{magic}</Code>.
|
||||
</>
|
||||
) : undefined}
|
||||
</Dialog.Text>
|
||||
<Form
|
||||
method="POST"
|
||||
onSubmit={(event) => {
|
||||
submit(event.currentTarget)
|
||||
submit(event.currentTarget);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="_method" value="create" />
|
||||
@@ -59,16 +45,10 @@ export default function Add({ magic }: Props) {
|
||||
className="my-2"
|
||||
/>
|
||||
<div className="mt-6 flex justify-end gap-2 mt-6">
|
||||
<Dialog.Action
|
||||
variant="cancel"
|
||||
onPress={close}
|
||||
>
|
||||
<Dialog.Action variant="cancel" onPress={close}>
|
||||
Cancel
|
||||
</Dialog.Action>
|
||||
<Dialog.Action
|
||||
variant="confirm"
|
||||
onPress={close}
|
||||
>
|
||||
<Dialog.Action variant="confirm" onPress={close}>
|
||||
Create
|
||||
</Dialog.Action>
|
||||
</div>
|
||||
@@ -77,5 +57,5 @@ export default function Add({ magic }: Props) {
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { XIcon } from '@primer/octicons-react'
|
||||
import { Form, useSubmit } from '@remix-run/react'
|
||||
import { useState } from 'react'
|
||||
import { XIcon } from '@primer/octicons-react';
|
||||
import { Form, useSubmit } from 'react-router';
|
||||
import { useState } from 'react';
|
||||
|
||||
import Button from '~/components/Button'
|
||||
import Code from '~/components/Code'
|
||||
import Dialog from '~/components/Dialog'
|
||||
import Button from '~/components/Button';
|
||||
import Code from '~/components/Code';
|
||||
import Dialog from '~/components/Dialog';
|
||||
|
||||
interface Props {
|
||||
username: string
|
||||
username: string;
|
||||
}
|
||||
|
||||
export default function Remove({ username }: Props) {
|
||||
const submit = useSubmit()
|
||||
const dialogState = useState(false)
|
||||
const submit = useSubmit();
|
||||
const dialogState = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -25,41 +25,26 @@ export default function Remove({ username }: Props) {
|
||||
</Button>
|
||||
<Dialog control={dialogState}>
|
||||
<Dialog.Panel control={dialogState}>
|
||||
{close => (
|
||||
{(close) => (
|
||||
<>
|
||||
<Dialog.Title>
|
||||
Delete
|
||||
{' '}
|
||||
{username}
|
||||
?
|
||||
</Dialog.Title>
|
||||
<Dialog.Title>Delete {username}?</Dialog.Title>
|
||||
<Dialog.Text className="mb-8">
|
||||
Are you sure you want to delete
|
||||
{' '}
|
||||
{username}
|
||||
?
|
||||
{' '}
|
||||
A deleted user cannot be recovered.
|
||||
Are you sure you want to delete {username}? A deleted user
|
||||
cannot be recovered.
|
||||
</Dialog.Text>
|
||||
<Form
|
||||
method="POST"
|
||||
onSubmit={(event) => {
|
||||
submit(event.currentTarget)
|
||||
submit(event.currentTarget);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
<input type="hidden" name="username" value={username} />
|
||||
<div className="mt-6 flex justify-end gap-2 mt-6">
|
||||
<Dialog.Action
|
||||
variant="cancel"
|
||||
onPress={close}
|
||||
>
|
||||
<Dialog.Action variant="cancel" onPress={close}>
|
||||
Cancel
|
||||
</Dialog.Action>
|
||||
<Dialog.Action
|
||||
variant="confirm"
|
||||
onPress={close}
|
||||
>
|
||||
<Dialog.Action variant="confirm" onPress={close}>
|
||||
Delete
|
||||
</Dialog.Action>
|
||||
</div>
|
||||
@@ -69,5 +54,5 @@ export default function Remove({ username }: Props) {
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import { PencilIcon } from '@primer/octicons-react'
|
||||
import { Form, useSubmit } from '@remix-run/react'
|
||||
import { useState } from 'react'
|
||||
import { PencilIcon } from '@primer/octicons-react';
|
||||
import { Form, useSubmit } from 'react-router';
|
||||
import { useState } from 'react';
|
||||
|
||||
import Button from '~/components/Button'
|
||||
import Dialog from '~/components/Dialog'
|
||||
import TextField from '~/components/TextField'
|
||||
import Button from '~/components/Button';
|
||||
import Dialog from '~/components/Dialog';
|
||||
import TextField from '~/components/TextField';
|
||||
|
||||
interface Props {
|
||||
username: string
|
||||
magic?: string
|
||||
username: string;
|
||||
magic?: string;
|
||||
}
|
||||
|
||||
export default function Rename({ username, magic }: Props) {
|
||||
const submit = useSubmit()
|
||||
const dialogState = useState(false)
|
||||
const [newName, setNewName] = useState(username)
|
||||
const submit = useSubmit();
|
||||
const dialogState = useState(false);
|
||||
const [newName, setNewName] = useState(username);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -27,23 +27,16 @@ export default function Rename({ username, magic }: Props) {
|
||||
</Button>
|
||||
<Dialog control={dialogState}>
|
||||
<Dialog.Panel control={dialogState}>
|
||||
{close => (
|
||||
{(close) => (
|
||||
<>
|
||||
<Dialog.Title>
|
||||
Rename
|
||||
{' '}
|
||||
{username}
|
||||
?
|
||||
</Dialog.Title>
|
||||
<Dialog.Title>Rename {username}?</Dialog.Title>
|
||||
<Dialog.Text className="mb-8">
|
||||
Enter a new username for
|
||||
{' '}
|
||||
{username}
|
||||
Enter a new username for {username}
|
||||
</Dialog.Text>
|
||||
<Form
|
||||
method="POST"
|
||||
onSubmit={(event) => {
|
||||
submit(event.currentTarget)
|
||||
submit(event.currentTarget);
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="_method" value="rename" />
|
||||
@@ -56,16 +49,10 @@ export default function Rename({ username, magic }: Props) {
|
||||
className="my-2"
|
||||
/>
|
||||
<div className="mt-6 flex justify-end gap-2 mt-6">
|
||||
<Dialog.Action
|
||||
variant="cancel"
|
||||
onPress={close}
|
||||
>
|
||||
<Dialog.Action variant="cancel" onPress={close}>
|
||||
Cancel
|
||||
</Dialog.Action>
|
||||
<Dialog.Action
|
||||
variant="confirm"
|
||||
onPress={close}
|
||||
>
|
||||
<Dialog.Action variant="confirm" onPress={close}>
|
||||
Rename
|
||||
</Dialog.Action>
|
||||
</div>
|
||||
@@ -75,5 +62,5 @@ export default function Rename({ username, magic }: Props) {
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user