Merge pull request #1917 from kleros/chore/clear-local-dispute-data-on-mount

Chore/clear local dispute data on mount

Author: alcercu

web/src/components/Popup/index.tsx

@@ -239,6 +239,9 @@ const Popup: React.FC<PopupProps & IPopup> = ({
  const closePopup = () => {
  setIsOpen(false);
  resetValue();
+ // dispute data is cleared, so if popup is closed the preview will show empty,
+ // instead redirect to start point.
+ if (popupType === PopupType.DISPUTE_CREATED) navigate("/resolver");
  };
 
  return (

web/src/context/NewDisputeContext.tsx

@@ -60,7 +60,7 @@ interface INewDisputeContext {
  setIsPolicyUploading: (isPolicyUploading: boolean) => void;
 }
 
-const initialDisputeData: IDisputeData = {
+const getInitialDisputeData = (): IDisputeData => ({
  numberOfJurors: 3,
  title: "",
  description: "",
@@ -72,7 +72,9 @@ const initialDisputeData: IDisputeData = {
  ],
  aliasesArray: [{ name: "", address: "", id: "1" }],
  version: "1.0",
-};
+});
+
+const initialDisputeData = getInitialDisputeData();
 
 const NewDisputeContext = createContext<INewDisputeContext | undefined>(undefined);
 
@@ -92,7 +94,8 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
  const disputeTemplate = useMemo(() => constructDisputeTemplate(disputeData), [disputeData]);
 
  const resetDisputeData = useCallback(() => {
- setDisputeData(initialDisputeData);
+ const freshData = getInitialDisputeData();
+ setDisputeData(freshData);
  }, [setDisputeData]);
 
  const contextValues = useMemo(

web/src/pages/Resolver/index.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled, { css } from "styled-components";
 
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 
+import { useNewDisputeContext } from "context/NewDisputeContext";
+
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
@@ -79,7 +81,9 @@ const DisputeResolver: React.FC = () => {
  const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
  const { isConnected } = useAccount();
  const isPreviewPage = location.pathname.includes("/preview");
+ const { resetDisputeData } = useNewDisputeContext();
 
+ useEffect(() => resetDisputeData(), []);
  return (
  <Wrapper>
  <HeroImage />