useTransition -> useNavigation (deprecation)

This commit is contained in:
Kalle 2023-04-10 12:13:18 +03:00
parent 2b08997641
commit 27b1e2af15
2 changed files with 8 additions and 8 deletions

View File

@ -1,4 +1,4 @@
import { type FetcherWithComponents, useTransition } from "@remix-run/react";
import { type FetcherWithComponents, useNavigation } from "@remix-run/react";
import { Button, type ButtonProps } from "./Button";
interface SubmitButtonProps extends ButtonProps {
@ -14,9 +14,9 @@ export function SubmitButton({
testId,
...rest
}: SubmitButtonProps) {
const transition = useTransition();
const navigation = useNavigation();
const isSubmitting = state ? state !== "idle" : transition.state !== "idle";
const isSubmitting = state ? state !== "idle" : navigation.state !== "idle";
return (
<Button

View File

@ -4,7 +4,7 @@ import type {
MetaFunction,
} from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { useFetcher, useLoaderData, useTransition } from "@remix-run/react";
import { useFetcher, useLoaderData, useNavigation } from "@remix-run/react";
import * as React from "react";
import { z } from "zod";
import { Button } from "~/components/Button";
@ -185,13 +185,13 @@ function Impersonate() {
function MigrateUser() {
const [oldUserId, setOldUserId] = React.useState<number>();
const [newUserId, setNewUserId] = React.useState<number>();
const transition = useTransition();
const navigation = useNavigation();
const fetcher = useFetcher();
const submitButtonText =
transition.state === "submitting"
navigation.state === "submitting"
? "Migrating..."
: transition.state === "loading"
: navigation.state === "loading"
? "Migrated!"
: "Migrate";
@ -221,7 +221,7 @@ function MigrateUser() {
<div className="stack horizontal md">
<SubmitButton
type="submit"
disabled={!oldUserId || !newUserId || transition.state !== "idle"}
disabled={!oldUserId || !newUserId || navigation.state !== "idle"}
_action="MIGRATE"
state={fetcher.state}
>