GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

restore editor data per session

Browse Source
This commit is contained in:
AykutSarac 2023-07-21 17:10:49 +03:00
parent 5c994cf246
commit f5be0fa80e
No known key found for this signature in database
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/editor.tsx
View File

@ -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 <Loading message="Fetching JSON from cloud..." />;
@ -55,7 +46,6 @@ const EditorPage: React.FC = () => {
<StyledEditorWrapper>
<Head>
<title>Editor | JSON Crack</title>
<meta name="description" content="View your JSON data in graphs instantly." />
</Head>
<StyledPageWrapper>
<Tools />

25
src/store/useFile.ts
View File

@ -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<FileStates & JsonActions>()((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<FileStates & JsonActions>()((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);