Skip to content

Commit f1e8f2e

Browse files
david-crespodavid-crespo
authored
Cleanup after #2130 (#2139)
* clean up profile page visually. it doesn't need to be a form * don't use toast. just add toast, remove toast. be toast
1 parent 31508df commit f1e8f2e

22 files changed

+81
-106
lines changed

‎app/components/ToastStack.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@
77
*/
88
import { animated, useTransition } from '@react-spring/web'
99

10-
import { useToastStore } from '~/stores/toast'
10+
import { removeToast, useToastStore } from '~/stores/toast'
1111
import { Toast } from '~/ui/lib/Toast'
1212

1313
export function ToastStack() {
1414
const toasts = useToastStore((state) => state.toasts)
15-
const remove = useToastStore((state) => state.remove)
1615

1716
const transition = useTransition(toasts, {
1817
keys: (toast) => toast.id,
@@ -36,7 +35,7 @@ export function ToastStack() {
3635
key={item.id}
3736
{...item.options}
3837
onClose={() => {
39-
remove(item.id)
38+
removeToast(item.id)
4039
item.options.onClose?.()
4140
}}
4241
/>

‎app/forms/disk-create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
2929
import { NameField } from '~/components/form/fields/NameField'
3030
import { RadioField } from '~/components/form/fields/RadioField'
3131
import { SideModalForm } from '~/components/form/SideModalForm'
32-
import { useForm, useProjectSelector, useToast } from '~/hooks'
32+
import { useForm, useProjectSelector } from '~/hooks'
33+
import { addToast } from '~/stores/toast'
3334
import { FormDivider } from '~/ui/lib/Divider'
3435
import { FieldLabel } from '~/ui/lib/FieldLabel'
3536
import { Radio } from '~/ui/lib/Radio'
@@ -69,7 +70,6 @@ export function CreateDiskSideModalForm({
6970
onDismiss,
7071
}: CreateSideModalFormProps) {
7172
const queryClient = useApiQueryClient()
72-
const addToast = useToast()
7373
const navigate = useNavigate()
7474

7575
const createDisk = useApiMutation('diskCreate', {

‎app/forms/floating-ip-create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
2424
import { NameField } from '~/components/form/fields/NameField'
2525
import { TextField } from '~/components/form/fields/TextField'
2626
import { SideModalForm } from '~/components/form/SideModalForm'
27-
import { useForm, useProjectSelector, useToast } from '~/hooks'
27+
import { useForm, useProjectSelector } from '~/hooks'
28+
import { addToast } from '~/stores/toast'
2829
import { Badge } from '~/ui/lib/Badge'
2930
import { Message } from '~/ui/lib/Message'
3031
import { pb } from '~/util/path-builder'
@@ -65,7 +66,6 @@ export function CreateFloatingIpSideModalForm() {
6566

6667
const queryClient = useApiQueryClient()
6768
const projectSelector = useProjectSelector()
68-
const addToast = useToast()
6969
const navigate = useNavigate()
7070

7171
const createFloatingIp = useApiMutation('floatingIpCreate', {

‎app/forms/floating-ip-edit.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
import { DescriptionField } from '~/components/form/fields/DescriptionField'
1818
import { NameField } from '~/components/form/fields/NameField'
1919
import { SideModalForm } from '~/components/form/SideModalForm'
20-
import { getFloatingIpSelector, useFloatingIpSelector, useForm, useToast } from 'app/hooks'
20+
import { addToast } from '~/stores/toast'
21+
import { getFloatingIpSelector, useFloatingIpSelector, useForm } from 'app/hooks'
2122
import { pb } from 'app/util/path-builder'
2223

2324
EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -31,7 +32,6 @@ EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
3132

3233
export function EditFloatingIpSideModalForm() {
3334
const queryClient = useApiQueryClient()
34-
const addToast = useToast()
3535
const navigate = useNavigate()
3636

3737
const floatingIpSelector = useFloatingIpSelector()

‎app/forms/idp/create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { FileField } from '~/components/form/fields/FileField'
1414
import { NameField } from '~/components/form/fields/NameField'
1515
import { TextField } from '~/components/form/fields/TextField'
1616
import { SideModalForm } from '~/components/form/SideModalForm'
17-
import { useForm, useSiloSelector, useToast } from '~/hooks'
17+
import { useForm, useSiloSelector } from '~/hooks'
18+
import { addToast } from '~/stores/toast'
1819
import { readBlobAsBase64 } from '~/util/file'
1920
import { pb } from '~/util/path-builder'
2021

@@ -43,7 +44,6 @@ const defaultValues: IdpCreateFormValues = {
4344
export function CreateIdpSideModalForm() {
4445
const navigate = useNavigate()
4546
const queryClient = useApiQueryClient()
46-
const addToast = useToast()
4747

4848
const { silo } = useSiloSelector()
4949

‎app/forms/instance-create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ import { SshKeysField } from '~/components/form/fields/SshKeysField'
4848
import { TextField } from '~/components/form/fields/TextField'
4949
import { Form } from '~/components/form/Form'
5050
import { FullPageForm } from '~/components/form/FullPageForm'
51-
import { getProjectSelector, useForm, useProjectSelector, useToast } from '~/hooks'
51+
import { getProjectSelector, useForm, useProjectSelector } from '~/hooks'
52+
import { addToast } from '~/stores/toast'
5253
import { FormDivider } from '~/ui/lib/Divider'
5354
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
5455
import { Message } from '~/ui/lib/Message'
@@ -150,7 +151,6 @@ CreateInstanceForm.loader = async ({ params }: LoaderFunctionArgs) => {
150151
export function CreateInstanceForm() {
151152
const [isSubmitting, setIsSubmitting] = useState(false)
152153
const queryClient = useApiQueryClient()
153-
const addToast = useToast()
154154
const { project } = useProjectSelector()
155155
const navigate = useNavigate()
156156

‎app/forms/ip-pool-edit.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
import { DescriptionField } from '~/components/form/fields/DescriptionField'
1818
import { NameField } from '~/components/form/fields/NameField'
1919
import { SideModalForm } from '~/components/form/SideModalForm'
20-
import { getIpPoolSelector, useForm, useIpPoolSelector, useToast } from '~/hooks'
20+
import { getIpPoolSelector, useForm, useIpPoolSelector } from '~/hooks'
21+
import { addToast } from '~/stores/toast'
2122
import { pb } from '~/util/path-builder'
2223

2324
EditIpPoolSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -28,7 +29,6 @@ EditIpPoolSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
2829

2930
export function EditIpPoolSideModalForm() {
3031
const queryClient = useApiQueryClient()
31-
const addToast = useToast()
3232
const navigate = useNavigate()
3333

3434
const poolSelector = useIpPoolSelector()

‎app/forms/project-edit.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
1818
import { NameField } from '~/components/form/fields/NameField'
1919
import { SideModalForm } from '~/components/form/SideModalForm'
2020
import { useForm } from '~/hooks'
21+
import { addToast } from '~/stores/toast'
2122
import { pb } from '~/util/path-builder'
2223

23-
import { getProjectSelector, useProjectSelector, useToast } from '../hooks'
24+
import { getProjectSelector, useProjectSelector } from '../hooks'
2425

2526
EditProjectSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
2627
const { project } = getProjectSelector(params)
@@ -30,7 +31,6 @@ EditProjectSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
3031

3132
export function EditProjectSideModalForm() {
3233
const queryClient = useApiQueryClient()
33-
const addToast = useToast()
3434
const navigate = useNavigate()
3535

3636
const projectSelector = useProjectSelector()

‎app/forms/silo-create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import { RadioField } from '~/components/form/fields/RadioField'
1717
import { TextField } from '~/components/form/fields/TextField'
1818
import { TlsCertsField } from '~/components/form/fields/TlsCertsField'
1919
import { SideModalForm } from '~/components/form/SideModalForm'
20-
import { useForm, useToast } from '~/hooks'
20+
import { useForm } from '~/hooks'
21+
import { addToast } from '~/stores/toast'
2122
import { FormDivider } from '~/ui/lib/Divider'
2223
import { pb } from '~/util/path-builder'
2324
import { GiB } from '~/util/units'
@@ -50,7 +51,6 @@ function validateQuota(value: number) {
5051
export function CreateSiloSideModalForm() {
5152
const navigate = useNavigate()
5253
const queryClient = useApiQueryClient()
53-
const addToast = useToast()
5454

5555
const onDismiss = () => navigate(pb.silos())
5656

‎app/forms/snapshot-create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
2020
import { ListboxField } from '~/components/form/fields/ListboxField'
2121
import { NameField } from '~/components/form/fields/NameField'
2222
import { SideModalForm } from '~/components/form/SideModalForm'
23-
import { useForm, useProjectSelector, useToast } from '~/hooks'
23+
import { useForm, useProjectSelector } from '~/hooks'
24+
import { addToast } from '~/stores/toast'
2425
import { pb } from '~/util/path-builder'
2526

2627
const useSnapshotDiskItems = (projectSelector: PP.Project) => {
@@ -43,7 +44,6 @@ const defaultValues: SnapshotCreate = {
4344
export function CreateSnapshotSideModalForm() {
4445
const queryClient = useApiQueryClient()
4546
const projectSelector = useProjectSelector()
46-
const addToast = useToast()
4747
const navigate = useNavigate()
4848

4949
const diskItems = useSnapshotDiskItems(projectSelector)

‎app/forms/vpc-create.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
1313
import { NameField } from '~/components/form/fields/NameField'
1414
import { TextField } from '~/components/form/fields/TextField'
1515
import { SideModalForm } from '~/components/form/SideModalForm'
16-
import { useForm, useProjectSelector, useToast } from '~/hooks'
16+
import { useForm, useProjectSelector } from '~/hooks'
17+
import { addToast } from '~/stores/toast'
1718
import { pb } from '~/util/path-builder'
1819

1920
const defaultValues: VpcCreate = {
@@ -25,7 +26,6 @@ const defaultValues: VpcCreate = {
2526
export function CreateVpcSideModalForm() {
2627
const projectSelector = useProjectSelector()
2728
const queryClient = useApiQueryClient()
28-
const addToast = useToast()
2929
const navigate = useNavigate()
3030

3131
const createVpc = useApiMutation('vpcCreate', {

‎app/forms/vpc-edit.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
import { DescriptionField } from '~/components/form/fields/DescriptionField'
1818
import { NameField } from '~/components/form/fields/NameField'
1919
import { SideModalForm } from '~/components/form/SideModalForm'
20-
import { getVpcSelector, useForm, useToast, useVpcSelector } from '~/hooks'
20+
import { getVpcSelector, useForm, useVpcSelector } from '~/hooks'
21+
import { addToast } from '~/stores/toast'
2122
import { pb } from '~/util/path-builder'
2223

2324
EditVpcSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -29,7 +30,6 @@ EditVpcSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
2930
export function EditVpcSideModalForm() {
3031
const { vpc: vpcName, project } = useVpcSelector()
3132
const queryClient = useApiQueryClient()
32-
const addToast = useToast()
3333
const navigate = useNavigate()
3434

3535
const { data: vpc } = usePrefetchedApiQuery('vpcView', {

‎app/hooks/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,3 @@ export * from './use-key'
1212
export * from './use-params'
1313
export * from './use-quick-actions'
1414
export * from './use-reduce-motion'
15-
export * from './use-toast'

‎app/hooks/use-toast.ts

-10
This file was deleted.

‎app/pages/LoginPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ import { useApiMutation, type UsernamePasswordCredentials } from '@oxide/api'
1212

1313
import { TextFieldInner } from '~/components/form/fields/TextField'
1414
import { useForm } from '~/hooks'
15+
import { addToast } from '~/stores/toast'
1516
import { Button } from '~/ui/lib/Button'
1617
import { Identicon } from '~/ui/lib/Identicon'
1718
import { pb } from '~/util/path-builder'
1819

19-
import { useSiloSelector, useToast } from '../hooks'
20+
import { useSiloSelector } from '../hooks'
2021

2122
const defaultValues: UsernamePasswordCredentials = {
2223
username: '',
@@ -27,7 +28,6 @@ const defaultValues: UsernamePasswordCredentials = {
2728
export function LoginPage() {
2829
const [searchParams] = useSearchParams()
2930
const navigate = useNavigate()
30-
const addToast = useToast()
3131
const { silo } = useSiloSelector()
3232

3333
const form = useForm({ defaultValues })
@@ -39,7 +39,7 @@ export function LoginPage() {
3939
addToast({ title: 'Logged in' })
4040
navigate(searchParams.get('redirect_uri') || pb.projects())
4141
}
42-
}, [loginPost.isSuccess, navigate, searchParams, addToast])
42+
}, [loginPost.isSuccess, navigate, searchParams])
4343

4444
return (
4545
<>

‎app/pages/project/disks/DisksPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@ import {
2020
import { Storage24Icon } from '@oxide/design-system/icons/react'
2121

2222
import { DiskStatusBadge } from '~/components/StatusBadge'
23-
import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
23+
import { getProjectSelector, useProjectSelector } from '~/hooks'
2424
import { confirmDelete } from '~/stores/confirm-delete'
25+
import { addToast } from '~/stores/toast'
2526
import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
2627
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
2728
import { Columns } from '~/table/columns/common'
@@ -94,7 +95,6 @@ export function DisksPage() {
9495
const queryClient = useApiQueryClient()
9596
const { project } = useProjectSelector()
9697
const { Table } = useQueryTable('diskList', { query: { project } })
97-
const addToast = useToast()
9898

9999
const deleteDisk = useApiMutation('diskDelete', {
100100
onSuccess() {
@@ -153,7 +153,7 @@ export function DisksPage() {
153153
)),
154154
},
155155
],
156-
[addToast, createSnapshot, deleteDisk, project]
156+
[createSnapshot, deleteDisk, project]
157157
)
158158

159159
const columns = useColsWithActions(staticCols, makeActions)

‎app/pages/project/images/ImagesPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import { Link, Outlet, type LoaderFunctionArgs } from 'react-router-dom'
1212
import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@oxide/api'
1313
import { Images24Icon } from '@oxide/design-system/icons/react'
1414

15-
import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
15+
import { getProjectSelector, useProjectSelector } from '~/hooks'
1616
import { confirmDelete } from '~/stores/confirm-delete'
17+
import { addToast } from '~/stores/toast'
1718
import { makeLinkCell } from '~/table/cells/LinkCell'
1819
import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
1920
import { Columns } from '~/table/columns/common'
@@ -50,7 +51,6 @@ export function ImagesPage() {
5051
const { project } = useProjectSelector()
5152
const { Table } = useQueryTable('imageList', { query: { project } })
5253
const queryClient = useApiQueryClient()
53-
const addToast = useToast()
5454

5555
const [promoteImageName, setPromoteImageName] = useState<string | null>(null)
5656

@@ -121,7 +121,7 @@ type PromoteModalProps = { onDismiss: () => void; imageName: string }
121121
const PromoteImageModal = ({ onDismiss, imageName }: PromoteModalProps) => {
122122
const { project } = useProjectSelector()
123123
const queryClient = useApiQueryClient()
124-
const addToast = useToast()
124+
125125
const promoteImage = useApiMutation('imagePromote', {
126126
onSuccess(data) {
127127
addToast({

0 commit comments

Comments
 (0)