From f5be0fa80e879137d5ae7846d141b867dc019580 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Fri, 21 Jul 2023 17:10:49 +0300 Subject: [PATCH] restore editor data per session --- src/pages/editor.tsx | 20 +++++--------------- src/store/useFile.ts | 25 ++++++++++++++++++++++++- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx index 7edb532..b874ecd 100644 --- a/src/pages/editor.tsx +++ b/src/pages/editor.tsx @@ -3,7 +3,6 @@ import dynamic from "next/dynamic"; import Head from "next/head"; import { useRouter } from "next/router"; import styled from "styled-components"; -import { defaultJson } from "src/constants/data"; import { BottomBar } from "src/containers/Editor/BottomBar"; import { Tools } from "src/containers/Editor/LiveEditor/Tools"; import { EditorWrapper } from "src/layout/EditorWrapper"; @@ -30,23 +29,15 @@ export const StyledEditorWrapper = styled.div` `; const EditorPage: React.FC = () => { - const { isReady, query } = useRouter(); + const { query } = useRouter(); const checkSession = useUser(state => state.checkSession); + const checkEditorSession = useFile(state => state.checkEditorSession); const loading = useJson(state => state.loading); - const setContents = useFile(state => state.setContents); - const fetchFile = useFile(state => state.fetchFile); - const fetchUrl = useFile(state => state.fetchUrl); React.useEffect(() => { - if (isReady) { - checkSession(); - if (typeof query?.url === "string") fetchUrl(query.url); - if (typeof query?.json === "string") fetchFile(query.json); - if (!query?.url && !query?.json) { - setContents({ contents: defaultJson, hasChanges: false }); - } - } - }, [checkSession, fetchFile, fetchUrl, isReady, query, setContents]); + checkSession(); + checkEditorSession({ url: query?.url, json: query?.json }); + }, [checkEditorSession, checkSession, query]); if (loading) return ; @@ -55,7 +46,6 @@ const EditorPage: React.FC = () => { Editor | JSON Crack - diff --git a/src/store/useFile.ts b/src/store/useFile.ts index 07ed2ed..c9686d9 100644 --- a/src/store/useFile.ts +++ b/src/store/useFile.ts @@ -19,6 +19,8 @@ type SetContents = { skipUpdate?: boolean; }; +type Query = string | string[] | undefined; + interface JsonActions { getContents: () => string; getFormat: () => FileFormat; @@ -34,6 +36,7 @@ interface JsonActions { clear: () => void; setFile: (fileData: File) => void; setJsonSchema: (jsonSchema: object | null) => void; + checkEditorSession: ({ url, json }: { url: Query; json: Query }) => void; } export type File = { @@ -106,23 +109,32 @@ const useFile = create()((set, get) => ({ const jsonContent = await jsonToContent(JSON.stringify(contentJson, null, 2), format); get().setContents({ contents: jsonContent, hasChanges: false }); + event({ action: "change_data_format", category: "User" }); } catch (error) { get().clear(); - console.info("The content was unable to be converted, so it was cleared instead."); + console.warn("The content was unable to be converted, so it was cleared instead."); } }, setContents: async ({ contents, hasChanges = true, skipUpdate = false }) => { try { set({ ...(contents && { contents }), error: null, hasChanges }); + const json = await contentToJson(get().contents, get().format); if (!useStored.getState().liveTransform && skipUpdate) return; + if (contents && contents.length < 80_000) { + sessionStorage.setItem("content", contents); + sessionStorage.setItem("format", get().format); + } + debouncedUpdateJson(json); } catch (error: any) { if (error?.mark?.snippet) return set({ error: error.mark.snippet }); if (error?.message) set({ error: error.message }); + useJson.setState({ loading: false }); + useGraph.setState({ loading: false }); } }, setError: error => set({ error }), @@ -164,6 +176,17 @@ const useFile = create()((set, get) => ({ toast.error("Failed to fetch document from URL!"); } }, + checkEditorSession: ({ url, json }) => { + if (typeof url === "string") return get().fetchUrl(url); + if (typeof json === "string") return get().fetchFile(json); + + const sessionContent = sessionStorage.getItem("content") as string | null; + const format = sessionStorage.getItem("format") as FileFormat | null; + const contents = sessionContent ?? defaultJson; + + if (format) set({ format }); + get().setContents({ contents, hasChanges: false }); + }, fetchFile: async id => { try { if (isURL(id)) return get().fetchUrl(id);