File size: 2,014 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import React from "react";
import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
import styled from "styled-components";
import { BottomBar } from "src/containers/Editor/BottomBar";
import { Toolbar } from "src/containers/Toolbar";
import { EditorWrapper } from "src/layout/EditorWrapper";
import { Loading } from "src/layout/Loading";
import useFile from "src/store/useFile";
import useJson from "src/store/useJson";
const Panes = dynamic(() => import("src/containers/Editor/Panes"));
export const StyledPageWrapper = styled.div`
height: calc(100vh - 27px);
width: 100%;
@media only screen and (max-width: 320px) {
height: 100vh;
}
`;
export const StyledEditorWrapper = styled.div`
width: 100%;
height: 100%;
overflow: hidden;
`;
const EditorPage: React.FC = () => {
const { query, isReady } = useRouter();
const loading = useJson(state => state.loading);
const hasQuery = React.useMemo(() => Object.keys(query).length > 0, [query]);
const checkEditorSession = useFile(state => state.checkEditorSession);
React.useEffect(() => {
if (isReady) checkEditorSession(query?.json);
}, [checkEditorSession, isReady, query]);
if (loading) {
return (
<StyledEditorWrapper>
<Head>
<title>Editor | JSON Crack</title>
{hasQuery && <meta name="robots" content="noindex,nofollow" />}
</Head>
<Loading message="Preparing the editor for you..." loading />
</StyledEditorWrapper>
);
}
return (
<EditorWrapper>
<StyledEditorWrapper>
<Head>
<title>Editor | JSON Crack</title>
{hasQuery && <meta name="robots" content="noindex,nofollow" />}
</Head>
<StyledPageWrapper>
<Toolbar />
<StyledEditorWrapper>
<Panes />
</StyledEditorWrapper>
</StyledPageWrapper>
<BottomBar />
</StyledEditorWrapper>
</EditorWrapper>
);
};
export default EditorPage;
|