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 />