diff --git a/src/app/NewSafeProposal.tsx b/src/app/NewSafeProposal.tsx index 06bff06..b6181ef 100644 --- a/src/app/NewSafeProposal.tsx +++ b/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; diff --git a/src/hooks/useLoadProposalFromQuery.ts b/src/hooks/useLoadProposalFromQuery.ts index 088c00e..1cbb21f 100644 --- a/src/hooks/useLoadProposalFromQuery.ts +++ b/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(); 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: diff --git a/src/hooks/useSetParamsFromQuery.ts b/src/hooks/useSetParamsFromQuery.ts index 1a0a1a4..542127a 100644 --- a/src/hooks/useSetParamsFromQuery.ts +++ b/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],