feat: keep given json in the editor if swithing pages

refs #26
marabesi · Jul 30, 2022 · a01ddd1 · a01ddd1
1 parent c9e4dc6
commit a01ddd1
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -112,6 +112,35 @@ describe('json utility', () => {
 
       expect(result.nodeValue).toMatchSnapshot(expected);
     });
+
+    it('should keep content in the editor when navigating away', async () => {
+      const { container, getByTestId, getByText } = render(<App/>);
+
+      const editor = grabCurrentEditor(container);
+      const json = '{{"random_json":"123"}';
+
+      await act(async () => {
+        await userEvent.type(editor, json);
+      });
+
+      const rawEditor = screen.getByTestId('raw-json');
+
+      await waitFor(() => {
+        expect(rawEditor).toHaveValue('{"random_json":"123"}');
+      });
+
+      fireEvent.click(getByTestId('settings'));
+
+      await waitFor(() => {
+        expect(getByText('Settings')).toBeInTheDocument();
+      });
+
+      fireEvent.click(getByTestId('to-home'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('raw-json')).toHaveValue('{"random_json":"123"}');
+      });
+    });
   });
 
   describe('Error handling', () => {

diff --git a/src/App.tsx b/src/App.tsx
@@ -19,6 +19,7 @@ export const SettingsContext = createContext(defaultOp);
 
 function App() {
   const [options, setOptions] = useState<Option[]>(defaultOp);
+  const [savedState, setSavedState] = useState<string>('');
 
   const handleChange = (event: Option) => {
     setOptions(options.map((option: Option) => {
@@ -29,10 +30,14 @@ function App() {
     }));
   };
 
+  const saveState = (json: string) => {
+    setSavedState(json);
+  };
+
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Editors />} />
+        <Route path="/" element={<Editors onPersist={saveState} currentJson={savedState} />} />
         <Route path="/settings" element={
           <SettingsContext.Provider value={options as never}>
             <Settings options={options} handleChange={handleChange} />

diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
@@ -6,7 +6,7 @@ export default function Header({ ...props }) {
     <div className="bg-blue-900 flex justify-between p-5 text-white" {...props}>
       <div className="flex">
         <h2 className="text-yellow-400 font-bold">
-          <Link to="/">JSON tool</Link>
+          <Link to="/" data-testid="to-home">JSON tool</Link>
         </h2> |
         <a href="https://github.com/marabesi/json-tool" target="_blank" rel="noreferrer">by marabesi</a>
       </div>

diff --git a/src/pages/Editors.tsx b/src/pages/Editors.tsx
@@ -9,8 +9,13 @@ import DefaultLayout from '../components/ui/layout/Default';
 
 const cleanUp = new CleanUp();
 
-export default function Editors() {
-  const [originalJson, setOriginalResult] = useState<string>('');
+interface Props {
+  currentJson: string
+  onPersist: (json: string) => void
+}
+
+export default function Editors({ onPersist, currentJson }: Props) {
+  const [originalJson, setOriginalResult] = useState<string>(currentJson);
   const [result, setResult] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [spacing, setSpacing] = useState<string>('2');
@@ -43,7 +48,10 @@ export default function Editors() {
 
   useEffect(() => {
     onJsonChange(originalJson);
-  }, [spacing, originalJson, onJsonChange]);
+    return () => {
+      onPersist(originalJson);
+    };
+  }, [spacing, originalJson, onJsonChange, onPersist]);
 
   const pasteFromClipboard = async () => {
     const clipboardItems = await navigator.clipboard.read();