import React from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import { AdTest } from "src/components/AdTest";
import { Loading } from "src/components/Loading";
import { Sidebar } from "src/components/Sidebar";
import { BottomBar } from "src/containers/Editor/BottomBar";
import Panes from "src/containers/Editor/Panes";
import useJson from "src/store/useJson";
import useUser from "src/store/useUser";
import styled from "styled-components";
export const StyledPageWrapper = styled.div`
display: flex;
flex-direction: row;
height: calc(100vh - 28px);
width: 100%;
@media only screen and (max-width: 768px) {
position: fixed;
height: -webkit-fill-available;
flex-direction: column;
}
`;
export const StyledEditorWrapper = styled.div`
width: 100%;
height: 100%;
overflow: hidden;
`;
const EditorPage: React.FC = () => {
const { isReady, query } = useRouter();
const checkSession = useUser(state => state.checkSession);
const fetchJson = useJson(state => state.fetchJson);
const loading = useJson(state => state.loading);
React.useEffect(() => {
// Fetch JSON by query
// Check Session User
if (isReady) {
checkSession();
fetchJson(query.json);
}
}, [checkSession, fetchJson, isReady, query.json]);
if (loading) return ;
return (
Editor | JSON Crack
);
};
export default EditorPage;