Merge pull request #261 from Shelf-nu/260-chore-update-remix-and-fix-…

…warning-about-preparing-for-v2

260 chore update remix and fix warning about preparing for v2

app/components/list/list.tsx

@@ -11,9 +11,6 @@ import { Pagination } from "./pagination";
 import { Table } from "../table";
 
 /**
- * List components takes advantage use `useFetcher()`
- * to get the data of the parent route.
- *
  * The route is required to export {@link IndexResponse}
  */
 export const List = ({

app/components/shared/file-dropzone/status-message.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { Fetcher } from "@remix-run/react";
 import { CheckmarkIcon, ImageFileIcon } from "~/components/icons/library";
-import { tw } from "~/utils";
+import { isFormProcessing, tw } from "~/utils";
 import { Spinner } from "../spinner";
 
 export interface StatusMessageProps {
@@ -21,11 +21,12 @@ export function StatusMessage({
   /** Indicates if tehre was a front-end error with the dropzone */
   error: boolean;
 }) {
-  const { data, type } = fetcher;
+  const { data, state } = fetcher;
 
   const isError = data?.error || error;
-  const isPending = ["actionSubmission", "loaderSubmission"].includes(type);
-  const isDone = type === "done";
+  const isPending = isFormProcessing(state);
+
+  const isDone = state === "idle" && data != null;
 
   const styles = useMemo(
     () =>

app/components/user/password-reset-form.tsx

@@ -17,7 +17,7 @@ export default function PasswordResetForm({ userEmail }: Props) {
 
   return (
     <div>
-      <fetcher.Form method="post" replace className="border-t py-8">
+      <fetcher.Form method="post" className="border-t py-8">
         <div>
           <p>
             Use the link to send yourself a password reset email. You will be

app/modules/auth/components/continue-with-email-form.tsx

@@ -11,8 +11,8 @@ export function ContinueWithEmailForm() {
   const { isResend } = useLoaderData();
 
   const sendMagicLink = useTypedFetcher<typeof action>();
-  const { data, state, type } = sendMagicLink;
-  const isSuccessFull = type === "done" && !data?.error;
+  const { data, state } = sendMagicLink;
+  const isSuccessFull = state === "idle" && data != null && !data?.error;
   const isLoading = state === "submitting" || state === "loading";
   const buttonLabel = isLoading
     ? "Sending you a link..."