GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

clean code

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-08 00:05:12 +03:00
parent 638a33df17
commit c52af82f37
9 changed files with 31 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Footer/index.tsx
View File

@ -1,7 +1,8 @@
import Link from "next/link";
import React from "react";
import { AiFillGithub, AiOutlineTwitter } from "react-icons/ai";
import Link from "next/link";
import styled from "styled-components";
import { AiFillGithub, AiOutlineTwitter } from "react-icons/ai";
import pkg from "../../../package.json";
const StyledFooter = styled.footer`

2
src/components/Navbar/index.tsx
View File

@ -1,5 +1,5 @@
import Link from "next/link";
import React from "react";
import Link from "next/link";
import styled from "styled-components";
interface NavbarProps {

11
src/components/Sidebar/index.tsx
View File

@ -1,6 +1,9 @@
import Link from "next/link";
import React from "react";
import Link from "next/link";
import styled from "styled-components";
import { useLocalStorage } from "usehooks-ts";
import { FaFileImport, FaMap } from "react-icons/fa";
import { MdAutoGraph } from "react-icons/md";
import {
AiFillHome,
AiOutlineClear,
@ -8,9 +11,7 @@ import {
AiOutlineTwitter,
AiFillControl,
} from "react-icons/ai";
import { FaFileImport, FaMap } from "react-icons/fa";
import { MdAutoGraph } from "react-icons/md";
import { useLocalStorage } from "usehooks-ts";
import { defaultValue } from "src/containers/JsonEditor";
import { getNextLayout } from "src/containers/LiveEditor/helpers";
import { StorageConfig } from "src/typings/global";
@ -91,7 +92,7 @@ export const Sidebar = () => {
const [jsonFile, setJsonFile] = React.useState<File | null>(null);
const [json, setJson] = useLocalStorage("json", JSON.stringify(defaultValue));
const [config, setConfig] = useLocalStorage<StorageConfig>("config", {
layout: "RL",
layout: "LEFT",
minimap: true,
controls: true,
});

77
src/containers/LiveEditor/FlowWrapper.tsx
View File

@ -1,77 +0,0 @@
import React from "react";
import ReactFlow, {
ControlButton,
Controls,
Elements,
MiniMap,
NodeExtent,
OnLoadParams,
} from "react-flow-renderer";
import { StorageConfig } from "src/typings/global";
import { useLocalStorage } from "usehooks-ts";
import { defaultValue } from "../JsonEditor";
import { getLayout, getLayoutPosition } from "./helpers";
import { CustomNodeComponent } from "./Node";
const nodeExtent: NodeExtent = [
[0, 0],
[1000, 1000],
];
const nodeTypes = {
special: CustomNodeComponent,
};
export const FlowWrapper: React.FC = () => {
const [json] = useLocalStorage("json", JSON.stringify(defaultValue));
const [config] = useLocalStorage<StorageConfig>("config", {
layout: "RL",
minimap: true,
controls: true,
});
const [elements, setElements] = React.useState<Elements>([]);
const [rfInstance, setRfInstance] = React.useState<OnLoadParams | null>(null);
const [valid, setValid] = React.useState(true);
const handleClick = () => {
setElements(getLayoutPosition(config.layout, elements));
};
React.useEffect(() => {
if (rfInstance) rfInstance.fitView();
}, [rfInstance]);
React.useEffect(() => {
try {
const layoutedElements = getLayout(config.layout, json);
setElements(layoutedElements);
setValid(true);
} catch (error) {
setValid(false);
}
}, [rfInstance, json, config]);
if (!valid) return null;
return (
<ReactFlow
nodeExtent={nodeExtent}
elements={elements}
nodeTypes={nodeTypes}
onLoad={setRfInstance}
>
{config.minimap && <MiniMap />}
{config.controls && (
<Controls>
<ControlButton
onClick={handleClick}
style={{ gridColumn: "1 / 3", width: "auto" }}
>
Format
</ControlButton>
</Controls>
)}
</ReactFlow>
);
};

51
src/containers/LiveEditor/helpers.ts
View File

@ -1,5 +1,4 @@
import dagre from "dagre";
import { Elements, isNode, Position } from "react-flow-renderer";
import { isNode } from "react-flow-renderer";
import { CanvasDirection } from "reaflow";
import { parser } from "src/utils/json-editor-parser";
@ -50,47 +49,6 @@ export function getEdgeNodes(graph: any): any {
};
}
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));
export const getLayoutPosition = (
direction: string,
elements: Elements,
dynamic = false
) => {
const isHorizontal = direction === "LR";
dagreGraph.setGraph({ rankdir: direction });
elements.forEach((el) => {
if (isNode(el)) {
dagreGraph.setNode(el.id, {
width: dynamic ? el.__rf.width : 400,
height: dynamic ? el.__rf.height : 100,
});
} else {
dagreGraph.setEdge(el.source, el.target);
}
});
dagre.layout(dagreGraph);
const layoutedElements = elements.map((el) => {
if (isNode(el)) {
const nodeWithPosition = dagreGraph.node(el.id);
el.targetPosition = isHorizontal ? Position.Left : Position.Top;
el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
el.position = {
x: nodeWithPosition.x + Math.random() / 1000,
y: nodeWithPosition.y,
};
}
return el;
});
return layoutedElements;
};
export function getNextLayout(layout: CanvasDirection) {
switch (layout) {
case "LEFT":
@ -106,10 +64,3 @@ export function getNextLayout(layout: CanvasDirection) {
return "LEFT";
}
}
export function getLayout(layout: CanvasDirection, json: string, dynamic = false) {
const jsonToGraph = parser(json);
const layoutedElements = getLayoutPosition(layout, jsonToGraph, dynamic);
return layoutedElements;
}

9
src/containers/LiveEditor/index.tsx
View File

@ -1,11 +1,12 @@
import React, { ComponentType } from "react";
import React from "react";
import styled from "styled-components";
import { Canvas, CanvasRef } from "reaflow/dist/index";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { useLocalStorage } from "usehooks-ts";
import { Canvas, CanvasRef } from "reaflow/dist/index";
import { StorageConfig } from "src/typings/global";
import { defaultValue } from "../JsonEditor";
import { getEdgeNodes } from "./helpers";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { StorageConfig } from "src/typings/global";
const StyledLiveEditor = styled.div`
position: relative;

5
src/pages/404/index.tsx
View File

@ -1,7 +1,8 @@
import React from "react";
import styled from "styled-components";
import { Button } from "src/components/Button";
import { useRouter } from "next/router";
import styled from "styled-components";
import { Button } from "src/components/Button";
import { Image } from "src/components/Image";
const StyledNotFound = styled.div`

9
src/pages/_app.tsx
View File

@ -1,11 +1,12 @@
import React from "react";
import GlobalStyle from "src/constants/globalStyle";
import { darkTheme } from "src/constants/theme";
import Head from "next/head";
import { useRouter } from "next/router";
import type { AppProps } from "next/app";
import { ThemeProvider } from "styled-components";
import { useRouter } from "next/router";
import GlobalStyle from "src/constants/globalStyle";
import { darkTheme } from "src/constants/theme";
import { Loading } from "src/components/Loading";
import Head from "next/head";
function AykutSarac({ Component, pageProps }: AppProps) {
const router = useRouter();

13
src/pages/editor/index.tsx
View File

@ -1,13 +1,14 @@
import { useRouter } from "next/router";
import React from "react";
import { Button } from "src/components/Button";
import { Sidebar } from "src/components/Sidebar";
import Head from "next/head";
import { useRouter } from "next/router";
import styled from "styled-components";
import { JsonEditor } from "src/containers/JsonEditor";
import { LiveEditor } from "src/containers/LiveEditor";
import SplitPane from "react-split-pane";
import Head from "next/head";
import { Button } from "src/components/Button";
import { Sidebar } from "src/components/Sidebar";
import { JsonEditor } from "src/containers/JsonEditor";
import { LiveEditor } from "src/containers/LiveEditor";
const StyledPageWrapper = styled.div`
display: flex;