Fixed bug that when editing and then saving a transaction, resulting url was incorrect

src/app/NewSafeProposal.tsx

@@ -15,7 +15,7 @@ import {
   Proposal,
   proposalSchema,
 } from "../schemas/proposal";
-import { useSetParamsFromQuery } from "../hooks/useSetParamsFromQuery";
+import { useRedirectToProposalWithNewParams } from "../hooks/useSetParamsFromQuery";
 import { useLoadProposalFromQuery } from "../hooks/useLoadProposalFromQuery";
 import {
   transformValuesFromWei,
@@ -329,23 +329,20 @@ const ViewProposal = ({
 
 const EditProposal = ({
   proposal,
-  setProposal: setProposal,
-  setIsEditing,
 }: {
   proposal: Proposal | undefined;
   setProposal: (result: Proposal) => void;
   setIsEditing: (editing: boolean) => void;
 }) => {
-  const setProposalParams = useSetParamsFromQuery();
+  const redirectToEditedProposal = useRedirectToProposalWithNewParams();
   const onSubmit = useCallback(
     (result: Proposal) => {
-      setProposal(transformValuesToWei(result));
+      const proposal = transformValuesToWei(result);
       if (proposal) {
-        setProposalParams(proposal);
+        redirectToEditedProposal(proposal);
       }
-      setIsEditing(false);
     },
-    [proposal, setIsEditing, setProposal, setProposalParams],
+    [redirectToEditedProposal]
   );
 
   const defaultActions = proposal || DEFAULT_PROPOSAL;

src/hooks/useLoadProposalFromQuery.ts

@@ -2,14 +2,20 @@ import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Proposal } from "../schemas/proposal";
 
+export const queryKeys = {
+  targets: "targets",
+  calldatas: "calldatas",
+  values: "values"
+};
+
 export const useLoadProposalFromQuery = () => {
   const [proposal, setProposal] = useState<undefined | Proposal>();
   const [params] = useSearchParams();
 
   useEffect(() => {
-    const targets = params.get("targets")?.split("|");
-    const calldatas = params.get("calldatas")?.split("|");
-    const values = params.get("values")?.split("|");
+    const targets = params.get(queryKeys.targets)?.split("|");
+    const calldatas = params.get(queryKeys.calldatas)?.split("|");
+    const values = params.get(queryKeys.values)?.split("|");
     if (targets && calldatas) {
       // ensure the 3 lengths are the same.  check if values also has the same length if its not empty
       // check the inverse of the above, if inverse is true, return:

src/hooks/useSetParamsFromQuery.ts

@@ -1,8 +1,9 @@
 import { useCallback } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Proposal } from "../schemas/proposal";
+import { queryKeys } from "./useLoadProposalFromQuery";
 
-export const useSetParamsFromQuery = () => {
+export const useRedirectToProposalWithNewParams = () => {
   const [_, setParams] = useSearchParams();
 
   return useCallback(
@@ -12,9 +13,9 @@ export const useSetParamsFromQuery = () => {
       }
       console.log("setting params", proposal.actions);
       setParams({
-        targets: proposal.actions!.map((action) => action.to).join("|"),
-        data: proposal.actions!.map((action) => action.data).join("|"),
-        value: proposal.actions!.map((action) => action.value).join("|"),
+        [queryKeys.targets]: proposal.actions!.map((action) => action.to).join("|"),
+        [queryKeys.calldatas]: proposal.actions!.map((action) => action.data).join("|"),
+        [queryKeys.values]: proposal.actions!.map((action) => action.value).join("|"),
       });
     },
     [setParams],